JavaScript

作用:控制页面特效展示。

例如:

• JS可以对HTML元素进行动态控制
• JS可以对表单项进行校验
• JS可以控制CSS的样式

• ECMAScript(核心):规定了JS的语法和基本对象。
• DOM 文档对象模型:处理网页内容的方法和接口
• BOM 浏览器对象模型:与浏览器交互的方法和接口

内部脚本

在当前页面内部写script标签，script内部即可书写JavaScript代码v
格式:

< script type="text/javascript">
JavaScript 的代码
< /script>

外部引入

在HTML文档中，通过< script src=“”>标签引入.js文件。
格式:

< script type="text/javascript"  src="javascript.文件路径"></ script>

注:外部引用时script标签内不能有script 代码，即使写了也不会执行。
开发规范规定，script标签的放置位置为:

Body结束标签前。

变量

变量:标示内存中的一块空间，用于存储数据，且数据是可变的。
变量的声明:
var变量名;//变量赋予默认值，默认值为undefined

变量的声明和赋值:
var变量名=值;//变量赋予对应的值。
在声明JavaScript 变量时，需要遵循以下命名规范:
必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号。
不能使用JavaScript关键字作为变量名，如: function
JavaScript严格区分大小写。

基本数据类型

类似于java中的基本数据类型,
string字符串类型。""和"都是字符串。JavaScript中没有单个字符
boolean布尔类型。固定值为true 和 false
number数字类型。任意数字
null空，一个占位符。
undefined未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。v

注:因为undefined是从null中派生出来的，所以undefined==null

JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后，是可以赋予任意类型的值。

通过typeof运算符可以分辨变量值属哪种基本数据类型

引用数据类型

引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
标准创建方式:。
var str= new String();
var str= new String;

运算符

比较运算符

== 逻辑等。仅仅对比值

=== 全等。对比值并且对比类型。

如果值和类型都相同，则为true;值和类型有一个不同，则为false

逻辑运算符

也没有 |

正则对象

RegExp对象的创建方式

var reg = new RegExp(“表达式”);(开发中基本不用),
varreg=/^表达式$ /;直接量(开发中常用)
直接量中存在边界，即^代表开始，$代表结束
直接量方式的正则是对象，不是字符串，别用引号。

<script>
			var reg=/^\s*$/;//0```多个空格
		</script>

test方法

用来校验字符患是煮匹配正则。
全部字符匹配返回true;有字符不匹配返回false

<script>
			var reg=/^\s*$/;//0```多个空格
			var flag=reg.test("   ");
			alert(flag);
			
		</script>

使用事项

/^表达式$ /
只要有无法成立正则的字符存在，即为false。w全部符合为true
(检查严格，眼睛不揉沙子）适用于表单校验
’
/表达式/
只要有成立正则的字符存在，即为true。全部不符合为false
(检查不严格，懒人思想)。适用于字符串查找、替换

JS数组对象

JS数组可以看做Java中的 ArrayList集合。
数组中的每一个成员没有类型限制,及可以存放任意类型。
数组的长度可以自动修改

数组创建方式

1.var arr=[1,2,3];
2.var arr=new Array();
3.var arr=new Array(4);
数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理, undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)
4.var arr=new Array(1,2);数组元素是1，2

JS数组对象常用方法

全局函数

eval

把传入字符串的作为代码执行

编码和解码

字符转数据

自定义函数

函数格式

function 方法名(参数列表){
函数体
}

• JavaScript函数定义必须用小写的function;
• JavaScript函数无需定义返回值类型，直接在function后面书写方法名;
• 参数的定义无需使用var关键字，否则报错;
• JavaScript函数体中, return可以不写,也可以return具体值,或者仅仅写return;
  
  JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined;

JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;

因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配，也不会影响正常调用;

如臬形参未赋值，就使用默认值undefined-

自定义对象

我们知道, JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。
相当于java中创建某个class 类

无形参格式
function 对象名(){
函数体
}

<script>
l属性定义方式
//1、 this关键字，在对象声明定义阶段，定义一个属性
//2、创建对象后,使用对象.属性方式动态定义属性
function Person (n, a){
this. name=n;
this.age=a;
)
//创建了一个Person对象,p
var p =new Person(小主“,"20") ;
P.sex=”男";
//为Person对象―声明并赋值成功
</script>

对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。

格式:
var对象名={属性名1"属性值1"，属性名2:“属性值2”,属性名3:"属性值 3.….}

注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可。

BOM对象

BOM（Browser Object Model）浏览器对象模型浏览器:IE、火狐、谷歌等
作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等）
一般情况下，window 代表了BOM对象。
window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。

消息框

alert()

警告框，用来弹出警告消息。

confirm()

确认框，用于告知用户信息并收集用户选择。

会返回对应的Boolean值。

定时器

启动循环定时器–setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器。

setInterval(调用方法，毫秒值);
//毫秒值：循环周期

一次性定时器

启动一次性定时器–setTimeout()

一次性定时器，调用一次就会创建并执行一个定时器一次。

格式:
setTimeout(遍用方法,毫秒值);

用clearTimeout()清除一次性定时器。

location对象

location对象包含浏览器地址栏的信息。

设置href属性，浏览器就会跳转到对应的路径

通过一次性定时器实现跳转网页。

DOM对象

DOM (Document Object Model）文档对象模型。文档:标记型文档（HTML等）,

DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，
通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

DOM树

• 每个标签会被加载成DOM树上的一个元素节点对象。
• 每个标签的属性会被加载成DOM树上的一个属性节点对象
• 每个标签的内容体会被加载成DOM树上的一个文本节点对象整个DOM树，是一个文档节点对象，即 DOM对象。
• 一个HTML文档加载到内存中就会形成一个DOM对象

DOM树特点：

• 必定会有一个根节点
• 每个节点都是节点对象
• 常见的节点关系:父子节点关系
• 文本节点对象没有子节点—叶子节点
• 每个节点都有一个父节点，零到多个子节点.
• 只有根节点没有父节点

获取元素的四种方式

在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象:

• getElementByld(); —通过元素ID获取对应元素对象。可以通过ID获取对应的元素对象，如果找不到，返回null

• getElementsByName(); —通过元素的name属性获取符合要求的所有元素。如果找不到，返回空数组

• getElements.BylagName();—通过元素的元素名属性获取符合要求的所有元素。

• ·getElementsByClassName(); —通过元素的class属性获取符合要求的所有元素。

元素对象常见属性

value

元素对象.value，获取元素对象的value属性值。
元素对象.value=属性值， 设置元素对象的value属性值。

className

元素对象.className，获取元素对象的class属性值。
元素对象.className=属性值， 设置元素对象的class属性值。

checked

元素对象.checked，获取元素对象的checked属性值。
元素对象.checked=属性值，设置元素对象的checked 属性值。
注:HTML中checked=“checked”，JavaScript中返回true

innerHTML

元素对象.innerHTML，获取元素对象的内容体,
元素对象.innerHTML=值，设置元素对象的内容体

JS事件

通常鼠标或热键的动作我们称之为事件(Event)
通过JS事件，我们可以完成页面的指定特效。

页面上的特效，我们可以理解在JS事件驱动机制下进行。
JS 事件驱动机制:
警察抓小偷

• 事件源， 小偷
• 事件， 警察抓小偷
• 监听器，警察
• 注册/绑定监听器， 让警察时刻盯着小偷

事件源:专门产生事件的组件。

事件:由事件源所产生的动作或者事情。

监听器:专门处理事件源所产生的事件。

注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。

点击事件（onclick）

获取焦点事件（onfocus）

焦点:即整个页面的注意力。
默认一个正常页面最多仅有一个焦点。
例如:文本框中闪烁的小竖线。

通常焦点也能反映出用户目前的关注点，或者正在操作的组件。。

获取焦点事件:当元素组件获取焦点时触发·

失去焦点事件（onblur）

例子：用于输入用户名后失去焦点可以在后台执行校验是否重复。

域内容改变事件

域内容改变事件:元素组件的值发生改变时触发

加载完毕事件（onload）

表单提交事件（submit）

表单提交事件:表单的提交按钮被点击时触发
可以用于表单校验
注意:该事件需要返回boolean,类型的值来执行提交/阻止表单数据的操作。
事件得到true，提交表单数据
事件得到 false，阻止表单数据提交

键位弹起事件（onkeyup）

鼠标移入事件（onmouseover）

鼠标移出事件（onmouseout）

JS事件的两种绑定方式

元素事件句柄绑定方式

示例二：有参



事件句柄绑定方式：
优点:
①开发快捷
②传参方便
③可以绑定多个函数
缺点:JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护

DOM绑定方式

DOM绑定方式：
优点:使得HTML代码和JS代码完全分离
缺点:
①不能传递参数。解决:匿名函数是可以的
②一个事件只能绑定一个函数 。解决:匿名函数内部是可以绑定多个函数。·