JavaScript

JS是一门跨平台、面向对象的脚本语言，来控制网页行为，使网页可交互

一、HTML中引入JS

二、基础语法

（一）语法规则

1. JS区分大小写。
2. 每行结尾的分号可有可无。
3. 注释：
   单行：//注释内容
   多行：/* 注释内容 */
4. 大括号表示代码块

if (count==3) {
	alert(count);
}

（二）输出语句

（三）变量&数据类型

（1）变量

1. 使用var来声明变量，var test=20;，不需要指定数据类型（但是JS有数据类型），变量可以存放不同类型的值。
2. 变量命名规则：
   A. 字母、数字、下划线、或美元符号。
   B. 数字不能开头。
   C. 建议使用驼峰命名。
3. ES6规范，新增了let和const替换了var来声明变量。
4. let声明的变量只在let所在代码块内有效，且不允许重复声明；const声明一个只读常量，一旦声明其值就不能再改变。

（2）数据类型

JS数据类型分为：原始类型和引用类型

1. 5种原始类型
   number：数字（整数、小数、NaN）。
   string：字符、字符串，单双引皆可。
   boolean：布尔。
   null：对象为空。
   undefined：当声明变量未初始化时，该变量的默认值时undefined。
   注：使用typeof可以获取数据类型，eg：alert(typeof age);

（四）运算符

运算符和Java里的基本一致。

（1）==和===

1. ==比较（会进行类型转换），先判断两个数据类型是否一样，如果不一样，则进行数据转换后再去比较。
2. ===比较（不会类型转换），先判断两个数据类型是否一样，如果不一样，直接返回false。

（2）类型转换

• 其他类型转为number：
  • 1. String：按照字符串的字面值转为数字，如果不是数字就转为NaN。
  • 2. boolean：true转为1，false转为0。
• 其他类型转为boolean：
  • 1. number：0和NaN转为false，其余转为true。
  • 2. string：空字符串转为false，其余为true。
  • 3. null：false。
  • 4. undefined：false。

（五）流程控制语句

和Java流程控制相同使用方法，如if、switch、for、while、do…while。

（六）函数

注：传递任意个参数也没用，后面的参数会丢弃。

三、常用对象

（一）Array

Array用于定义数组（JS的数组相当于JAVA的集合，任何类型都可以装）

（1）Array对象属性

（2）Array对象方法

参考网站

（二）String

trim()方法去除字符串前后两端的空白字符。

（三）自定义对象

（四）RegExp

四、BOM（浏览器对象模型）

（一）Window

（1）属性

获取其他BOM对象的属性

1. history：对History对象的只读引用。
2. Navigator：对Navigator对象的只读引用。
3. Screen：对Screen对象的只读引用。
4. Location：对Location对象的只读引用。

（2）方法

1. alert(参数)：显示带参数和确认按钮的警告框。
2. confim(参数)：和alert()一样的功能，只是多了一个取消按钮，并且有返回值。如var boole = confim(“点击删除");点确定返回true，点取消返回false；
3. setTimeout(function,毫秒值)：在指定毫秒值后调用函数，只调用一次函数。
4. setInterval(function,毫秒值)：和上面这个功能相同，但会在指定毫秒值时循环调用函数。

（二）History

（三）Location

五、DOM（文档对象模型）

作用：将标记语言的各个组成部分封装为对象

• Document：整个文档对象。
• Element：元素(标签)对象。
• Attribute：(标签的)属性对象。
• Text：(标签的)文本对象。
• Comment：(标签的)注释对象。

---

（一）获取Element对象（重点）

eg：var divs = document.getElementsByTagName("div");，返回一个Array数组，装有所有div标签的对象。

常用的属性：

• style：设置元素css样式。divs[i].style.color = "red";
• innnerHTML：设置元素内容。divs[i].innnerHTML = "内容内容";。

（二）常见HTML Element对象的使用

以Image对象为例：

<img src="recourse/2/正面.jpg" id="zm">
document.getElementById("zm").src = "recourse/2/反面.jpg";

获取到指定id的标签，然后修改标签的src属性。

查阅文档来使用

六、事件监听（重点）

事件：发生在HTML元素上的”事情“。比如：按钮被单击、鼠标移动到元素上、按下键盘按键等。
事件监听：JS在事件发生时执行代码。

（一）两种事件绑定方式

1. 通过HTML标签中的事件属性绑定。

<input type="button" onclick="on()">

function on(){
	alert("点了一下");
}

2. 通过DOM元素属性绑定。

<input type="button" id="btn">

document.getElementById("btn").onclick=function () {
    alert("点了以下");
}

（二）常见事件

查阅事件对象

（三）正则表达式

eg：判断手机号是否符合规则：长度11，数字组成，第一位是1。var reg = /^[1]\d{10}$/;