JvavScrpt学习笔记_scrpt 初始化事件-优快云博客

本文介绍了JavaScript的基础知识，包括JS的特点、作用、组成部分、引入方式、变量声明、数据类型、运算符、逻辑语句等内容，并详细讲解了事件处理、BOM与DOM操作及常见案例。

JS的简介

什么是js（了解）

javascript简称js，是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，“寄生”在html体内随网络传输到客户端的浏览器的内存中解析。
- 脚本语言
  - 脚本：电影或电视剧的拍摄时候的剧本底稿。/计算机中的脚本，给计算机看。脚本中包含一些给计算机的指令。
  - Java和C语言，都需要编译成二进制的可执行文件。脚本文件是不需要编译，直接可以使用解释器进行解释执行！
js是基于对象和事件驱动的脚本语言。
- 在Java中int i = 5；boolean res = true;
- 基于对象：不支持继承！
- 事件驱动：点击事件，前进后退、滑动、提交等等事件。

js的作用（了解）

js的作用很多，在目前学习阶段，只需要记住如下两个最最最常用的就可以了：

1.js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码）
2.js可以对表单进行校验

js的组成部分（理解）

1.ECMAScript：这一部分主要是js的基本语法
2.BOM：Browser Object Model 浏览器对象模型，主要是获取浏览器信息或操作，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等（window）
3.DOM：Document Object Model 文档对象模型，此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后页面

js的引入方式（重点）

行内脚本
- 在标签上添加属性，绑定事件
内部脚本
- 创建一个script标签，在script标签中写js代码
外部脚本
- 在js文件夹中创建一个".js"结尾的文件，在改文件中写代码，什么地方需要使用到该文件中的代码就使用script标签的src属性将改文件引入

三种引入方式的优缺点介绍

优点

行内脚本
- 直观
内部脚本
- 复用性较强
外部样式
- 复用性特别强

缺点

行内样式
- 毫无复用性
- 只能写简单的js代码
内部样式
- 不太直观
外部样式
- 可读性差
- 用户加载这个html文件的时候还要加载js文件，流量消耗较大

js的变量

Java的变量：
- 变量类型变量名 = 变量值
js的变量：
- var 变量名 = 变量值

js的数据类型

基本数据类型

数字类型：number
布尔类型：boolean
字符串类型：string
未定义：undefined
空类型：null （object）

类型之间的转换

number和boolean转换成string。
- toString()
string转number（重要）
- parseInt()
- parseFloat()
number、string转boolean。（重要）
- new Boolean()

引用数据类型

跟Java中一样，js中的对象类型都是引用数据类型

var obj = new Object();
var str = new String();
var date = new Date();

引用数据类型全为object类型

js中的运算符

赋值运算符 var num = 5;
比较运算符
- “>”
- <
- == 比较数据大小
- !=
- === 比较数据大小和内容
逻辑运算符，在js中没有单与和单或
- &&
- ||
- !
算数运算符
- +
- -
- *
- /
- %
三元运算符
- 条件?a:b

js中的逻辑语句

跟Java不同的 for(index in 数组名) ，index表示数组中的数据的下标

js中的函数(重点)

作用：封装一些功能实现

js中定义函数的三种方式（前两种是重点）

一般方式

  function 函数名(){}

匿名函数

  
  function(){}

对象方式(以后用不到)

js中的常用事件（重点）

事件概述

js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：

1）事件源：被监听的html元素(这个事件发生在谁身上，谁就是事件源)
2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
3）事件与事件源的绑定：在事件源上注册上某事件，通过类似onclick等属性进行绑定
4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装

常用事件

onload 当页面加载完成时触发
onsubmit 当表单提交的时候触发
onclick 当鼠标点击某个对象的时候触发
ondblclick 当鼠标双击某个对象的时候触发
onfocus 当获取焦点的时候触发
onblur 当失去焦点的时候触发
onchange 当用户改变域的内容时触发
onkeydown 当键盘按键被按下时触发
onkeypress 当键盘按键被按住时触发
onkeyup 键盘按键松开时触发
onmousedown 当鼠标左键按下时触发
onmouseup 当鼠标左键松开时触发
onmouseover 当鼠标移到某个元素之上时触发
onmouseout 当鼠标移开某个元素时触发
onmousemove 当鼠标移动时触发

BOM（对象集合）

BOM的概述（了解）

BOM（Browser Object Mode），浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

BOM的对象

1.Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。(了解)
2.Window对象（BOM里面最顶级的对象），Window 对象表示一个浏览器窗口或一个框架。（重点）
3.Navigator对象，包含的属性描述了正在使用的浏览器(了解)
4.History对象，其实就是来保存浏览器历史记录信息。(了解)
5.Location对象，location对象的href属性可以用于跳转页面。（重点）

Window对象

一、弹框（重点）

提示框 alert(提示信息)
确认框 confirm(提示信息)
输入框 prompt(提示信息)

二、定时器（重点）

执行一次的定时器：setTimeout
- 第一个参数：函数对象
- 第二个参数：毫秒值
执行多次的定时器：setInterval
- 清除定时器clearInterval(定时器对象)

三、全局方法（了解）

parseInt()和parseFloat()函数

Location对象

href,可以在js中对url进行访问。
应用：定时弹出广告页面。

定时跳转到广告网页

1.当页面加载成功之后开启一个定时器(只执行，一次的定时器)

2.给定时器设置时间为5秒之后执行，定时器中执行的函数为

  
   x window.onload = function(){
       setTimeout(function(){
      location.href = "http://www.baidu.com"
      },5000)
   }

定时弹广告的案例

1.给首页添加一个div，在div中放置一张广告图片，并设置该div的默认display属性为none(表示隐藏)
2.当页面加载完毕的时候开启一个定时器(只执行一次的定时器),5秒后执行。执行的任务是设置div的display属性为block

  
  window.onload = function(){
      var ad = document.getElementByid("add")
      setTimeout(function(){
          ad.style.display = "block"
          
          //并且当广告图片显示4秒钟之后要隐藏广告
          setTimeout(function(){
              ad.style.display = "none"
          },4000)
      },5000)
  }

轮播图的案例

1.当页面加载完毕的时候开启一个周期性执行的定时器，每隔三秒执行一次
2.获取轮播图对应的src标签，并在定时器每次执行的时候重新设置图片的src属性

  
  window.onload = function(){
      //获取图片标签
      var im = document.getElementByid("img1")
      //将轮播图的图片放到数组中
      var imgs = ["images/1.jpg","images/2.jpg","images/3.jpg"]
      //开启一个定期执行的定时器
     var i = 0;
     setInterval(function(){
         //这里就做更改img的src属性的操作
         i ++;
         if(i == 3){
         i=0;
         }
         img.src = imgs[i];
     },3000)
  }