JavaScript

• 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。

• 脚本语言：不需要编译，直接就可以被浏览器解析执行。

• 功能：可以来增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有一些动态的效果，增强用户的体验。

注：JavaScript=ECMAScript+JavaScript（BOM+DOM）

ECMAScript：客户端脚本语言的标准

1. 基本语法

1）与html结合方式：

①内部JS

• 定义<script>，标签体内容就是JS代码。

②外部JS

• 定义<script>，通过src属性引入外部的JS文件。

• 注意：

①<script>可以定义在HTML页面的任何地方。但是定义的位置会影响执行顺序。

②<script>可以定义多个。

2）注释

①单行注释//注释内容

②多行注释/注释内容/

3）数据类型

①原始数据类型（基本数据类型）

• number：数字。整数/小数/NaN（not a number）

• string：字符串。

• Boolean：true和false

• null：一个对象为空的占位符

• undefined：未定义。如果一个变量没有给初始值，则会被默认赋值为undefined。

②引用数据类型：对象

4）变量

①变量：一小块存储数据的内存空间

②Java语言是强类型语言，而JavaScript是弱类型语言。

• 强类型：在开辟变量存储空间时，定义了空间将来的存储数据类型，只能存储固定类型的数据。

• 弱类型：在开辟变量存储空间时，不定义空间将来存储的数据的数据类型，可以存放任意类型的数据。

③语法：

• var 变量名=初始化值

• typeof运算符：获取变量的数据类型（null运算后为object）

5）运算符

①一元运算符
++ -- + -
+，-（正负号）：
注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。
其他类型转number：

• string转number：按照字面值转换，如果字面值不是数字，则转为NaN。
• boolean转number：true转1，false转0

②算数运算符
+ - * / %
③赋值运算符
= += -=
④比较运算符
> < >= <= == ===
比较方式：
类型相同，直接比较

• 注：字符串，按照字典顺序比较，按位逐一比较，直到比较出大小为止。

类型不同，先进行类型转换，再比较

• 注：===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false。
  ⑤逻辑运算符
  && || !
  其他类型转boolean：
• number：0或NaN为假，其他为真
• string：除了空字符串（""），其他都是true
• null&undefined：都是false
• 对象：所有对象都为true
  ⑥三元运算符
  ? :
  语法：
• 表达式? 值1:值2;
• 判断表达式的 值，如果是true则取值1，如果是false则取值2
  6）流程控制语句
  ①if...else
  ②switch
  ③while
  ④do...while
  ⑤for
  7）JS特殊语法
  ①语句以;结尾，如果一行只有一条语句则;可省略
  ②变量的定义使用var关键字，也可以不使用
• 用：定义的变量是局部变量
• 不用：定义的变量是全局变量（不建议）

2. 基本对象：

1）Function：函数（方法）对象
①创建：

• var fun =new function（形参，方法体）；（不建议使用）

• function 方法名（形参）{
  方法体
  }

• var 方法名=function （形参）{
  方法体
  }
  ②方法：
  ③属性：length：代表形参的个数
  ④特点：

• 方法定义时，形参类型不需要写，返回类型不需要写。

• 方法是一个对象，如果定义名称相同的方法，会覆盖。

• 在js中，方法的调用只与方法的名称有关，和参数列表无关

• 在方法声明中，有一个隐藏的内置对象（数组），arguments，封装所有的实际参数。
  ⑤调用：方法名称（实参）;

2）Array对象：
①创建：

• var arr=new Array(元素列表);
• var arr=new Array(默认长度);
• var arr=[元素列表];
  ②方法：
  join（参数）：将数组中的元素按照指定的分隔符拼接为字符串
  push（）：向数组的末尾添加一个或多个元素，并返回新的长度
  ③属性：length：数组的长度
  ④特点：
• 在js中，数组元素的类型是可变的
• 在js中，数组的长度是可变的

3）Boolean对象
4）Date对象
①创建：

• var date=new Date();
  ②方法：
  toLocaleString();：返回当前date对象对应的时间本地字符串格式
  getTime()：获取毫秒值，返回当前如期对象秒速的时间精确到毫秒
  5）Math：
  ①创建：
• 特点：Math对象不用创建，直接使用。Math.方法名();

②方法：
random()：返回0~1之间的随机数。含0不含1；
ceil(x)：向上舍入
floor(x)：向下舍入
round(x)：四舍五入

③属性：
6）Number
7）String

8）RegExp：正则表达式对象
①正则表达式：定义字符串的组成规则

• 单个字符：[ ]
  如：[a] [ab] [a-zA-Z0-9]
  特殊符号代表特殊含义的单个字符：
  \d：单个数字字符[0-9]
  \w：单个字符[a-zA-Z0-9_]

• 量词符号：
  ?：表示出现0次或1次
  *：表示出现0次或多次
  +：表示出现1次或多次
  {m,n}：表示m<=出现次数<=n

• 开始结束符号
  ^：开始
  $：结束

②正则对象：

• 创建：
  var reg = new RegExp("正则表达式");
var reg =/正则表达式/;
• 方法：
  test(参数)：验证指定的字符串是否符合正则表达式

9）Global：
①特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。——方法名();
②方法：

• encodeURI()：URL编码
• decodeURI()：URL解码
• encodeURIComponent()：URL编码，编码的字符更多
• decodeURIComponent()：URL解码
• parseInt()：将字符串转为数字
  逐一判断每一个字符是否是数字，知道不是数字为止，将前面数字部分转为number
• isNaN()：判断一个值是否是NaN
• eval()：计算JavaScript字符串，并把它作为脚本代码来执行。

DOM简单学习

• 功能：控制html文档的内容
• 获取页面标签（元素）对象：Element
  document.getElementById("id值")：通过元素的id获取元素对象
• 操作Element对象：
  1.修改属性值：
  ①明确获取的对象是哪一个？
  ②查看API文档，找其中有哪些属性可以设置
  2.修改标签体内容（innerHTML）
  ①获取元素对象
  ②使用innerHTML属性修改标签体内容

事件简单学习

• 功能：某些组件被执行了某些操作后，触发某些代码的执行。
• 绑定事件：
  ①直接在html标签上，指定事件的属性（操作），属性值就是js代码
  事件：onclick --- 单击事件
  ②通过js获取元素对象，指定事件属性，设置一个函数

BOM

1.概念：Browser Object Model 浏览器对象模型

• 将浏览器的各个组成部分封装成对象

2.组成：

• Window：窗口对象
• Navigator：浏览器对象
• Screen：显示器屏幕对象
• History：历史记录对象
• Location：地址栏对象

3.Window：窗口对象
1）创建

2）方法
①与弹出框有关的方法：
alter()：显示带有一段信息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框

• 如果用户点击确认按钮，则方法返回true
• 如果用户点击取消按钮，则方法返回false

prompt()：显示一个提示用户输入的对话框。

• 返回值：获取用户输入的值

②与打开关闭有关的方法：
close() 关闭浏览器窗口

• 谁调用我，我关闭谁

open() 打开浏览器窗口

• 返回新的Window对象

③与定时器有关的方式
setTimeout() ：在指定的毫秒倒计时结束后调用函数或计算表达式

• 参数：
  js代码或者方法对象
  毫秒值
• 返回值：唯一标识，用于取消定时器

clearTimeout() ：取消由setTimeout() 方法设置的timeout
setInterval()：按照指定的周期（毫秒为单位）来调用函数或计算表达式。
clearInterval()：取消由setInterval()设置的timeout。

3）属性：
①获取其他BOM对象：
history、location、navigator、screen、
②获取DOM对象：document

4）特点

• Window对象不需要创建可以直接使用。window.方法名();
• Window引用可以省略。 方法名();

4.Location：地址栏对象
1）创建（获取）：
①window.location
②location
2）方法：

• reload()：重新加载当前文档。刷新
  3）属性
• href：设置或返回完整的URL

2.History：历史记录对象
1）创建（获取）：
①window.history
②history
2）方法：

• back()：加载history列表中的前一个URL
• forward()：加载history列表中的下一个URL
• go(参数)：加载history列表中的某个具体页面
  参数：
  正数：前进几个历史记录
  负数：后退几个历史记录
  3）属性
• length：返回当前窗口历史列别中URL数量

DOM：

1. 概念：Document Obeject Model 文档对象模型

• 将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

2.W3C DOM标准被分为3个不同的部分：

1）核心DOM - 针对任何结构化文档的标准模型

• Document：文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象
• Node：节点对象，其他5个对象的父对象

2）XML DOM - 针对XML文档的标准模型
3）HTML DOM - 针对HTML文档的标准模型

3. 核心DOM模型：

• Document ：文档对象
  1）创建（获取）：在html dom模型中可以使用window对象来获取
• window.document
• document

2）方法：
①获取Element对象：

• getElementById()：根据id属性值获取元素对象。id属性值一般唯一
• getElementByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
• getElementByClassName()：根据class属性值获取元素对象们。返回值是一个数组。
• getElementByName()：根据name属性值获取元素对象们。返回值是一个数组。

②创建其他DOM对象：

• createAttribute(name)
• createComment()
• createElement()
• createTextNode()

③属性

• Element：元素对象
  ①获取/创建：通过document来获取和创建
  ②方法：

• removeAttribute()：删除属性

• setAttribute()：设置属性

• Node：节点对象，其他5个对象的父对象
  ①特点：所有dom对象都可以被认为是一个节点
  ②方法：
  CRUD dom树：

• appendChild()：向节点的子节点列表的结尾添加新的子节点

• removeChild()：删除（并返回）当前节点的指定子节点

• replaceChild()：用新节点替换一个子节点
  ③属性：

• parentNode ：返回节点的父节点。

4. HTML DOM
   1）标签体的设置和获取：innerHTML
   2）使用html元素对象的属性
   3）控制元素样式
   ①使用元素的style属性来设置
   ②提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

事件：

1. 概念：某些组件被执行了某些操作后，触发某些代码的执行。
   ①事件：某些操作：单击，双击，键盘被按下，鼠标移动
   ②事件源：组件：按钮，文本输入框
   ③监听器：代码
   ④注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

2. 常见的事件
   ①点击事件：

• onclick：单击事件
• ondblclick：双击事件
  ②焦点事件：
• onblur：失去焦点
• onfocus：元素获得焦点
  ③加载事件：
• onload：一张页面或者一副图像完成加载
  ④鼠标事件：
• onmousedown：鼠标按钮被按下
• onmouseup：鼠标按钮被松开
• onmousemove：鼠标被移动
• onmouseover：鼠标移到某元素之上
• onmouseout：鼠标从某元素移开
  ⑤键盘事件：
• onkeydown：某个按键被按下
• onkeyup：某个按键被松开
• onkeypress：某个按键被按下并松开
  ⑥选择和改变
• onchange：域的内容被改变
• onselect：文本被选中
  ⑦表单事件：
• onsubmit：确认按钮被点击
• onreset：重置按钮被点击