JavaScript详解

一、 JavaScript的组成

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

二、JavaScript的引入方式

• 外部引入：

  格式：<script type=”text/javascript” src=”javascript文件路径” ></script>
  注意：在引入外部的script时，将不会执行内部的script

• 内部引入：
  格式：<script>代码块</script>
  注意：理论上讲可以放在HTML代码中的任何位置，但是建议放在body结束标签的上面，可以保证页面先加载，保证用户体验。

三、JavaScript的数据

• 变量
  变量：标示内存中的一块空间，用于存储数据，且数据是可变的。
  变量的声明：var 变量名;

• 基本数据类型

• 1. string 字符串类型。””和’’都是字符串。JavaScript中没有单个字符
  2. boolean 布尔类型。固定值为true和false
  3. number 数字类型。任意数字
  4. null 空，一个占位符。
  5. undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。

四、正则对象

• 在js中可以使用正则对象进行检验：
• 定义正则：var reg = /^表达式$/;
• 正则对象.test(string); 用来校验字符串是否匹配正则。
• 可以在网上查找到相关的正则表达式（这里引用一下别人整理好的）：
  https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html
  注意事项：
  /^表达式$/ 只要有无法成立正则的字符存在，即为false。
  /表达式/ 只要有成立正则的字符存在，即为true。

五、数组

注意：JS数组可以看做 Java中的ArrayList 集合。没有类型限制

• 创建
  var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5
  var arr = new Array();创建一个数组对象，数组长度默认为0

• 常用的方法
  lenght：设置或者返回数组中元素的数目
  join()：把数组的所有元素放入一个字符串
  pop()：删除并返回数组的最后一个元素
  push()：向数组的末尾添加一个或更多元素，并返回新的长度
  reverse()：颠倒数组中元素的顺序

六、global

• 执行eval()：
  计算JavaScript字符串，并把它作为脚本代码来执行
  注意：只可以传递原始数据类型string，传递String对象无作用。

• 编码encodeURL()

• 解码decodeURL()

七、函数

• 定义的格式
  
  注意：
• 参数列表无需使用var关键字，否则报错；
• 参数列表可以写，亦可以写；
• JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定， 如果未return具体值，返回值为undefined；

八、BOM

主要使用的方法：

1. alert()：警告框，用来弹出警告消息。

2. confirm()：确认框，用于告知用户信息并收集用户的选择
   注意：该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回 boolean类型的值。这个时候就可以使用这个true或false来做判断，进行下一步的操作

3. 定时器
   setInterval(调用方法,毫秒值)：启动循环定时器
   clearInterval(定时器ID)：停止循环定时器
   setTimeout(调用方法,毫秒值)：启动一次性定时器
   clearTimeout (定时器ID)：停止一次性定时器

4. location对象
   href属性：设置或者返回完整的URL

九、DOM

1. 一个HTML文档加载到内存中就会形成一个DOM对象
2. 获取元素对象
   getElementById(); —通过元素ID获取对应元素对象
   getElementsByName(); —通过元素的name属性获取符合要求的所有元素 getElementsByTagName(); —通过元素的元素名属性获取符合要求的所有元素
   getElementsByClassName(); —通过元素的class属性获取符合要求的所有元素
3. 示例：其中的document对象为文档对象

     document.getElementById("repassword");

4. 元素对象常见属性

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

• checked：修改单选/复选的 选中与否
  元素对象.checked， 获取元素对象的checked属性值。
  元素对象. checked =属性值 设置元素对象的checked属性值。
  注：HTML中checked=”checked”，JavaScript中返回true，false

• innerHTML：操作元素的内容体
  元素对象.innerHTML， 获取元素对象的内容体(标签与标签之间的内容)。
  元素对象.innerHTML=值 设置元素对象的内容体

• className：修改元素样式
  元素对象.className， 获取元素对象的class属性值。
  元素对象. className =属性值 设置元素对象的class属性值。

十、事件

1. 驱动机制
   事件源（按钮）
   事件（onclick）
   监听器(方法,例如run())
   注册监听器(onclick = “run()”)
2. 常见的js事件
   点击事件（onclick）
   获取焦点事件(onfocus)
   失去焦点事件（onblur）
   域内容改变事件（onchange）
   加载完毕事件（onload）
   表单提交事件（onsubmit）
   键位弹起事件（onkeyup）
   鼠标移入事件（onmouseover）
   鼠标移出事件（onmouseout）