一、JavaScript的内外部

1.1 内部JavaScript

• 其格式为：

• 【JavaScript的alert()方法】：弹窗提醒；其格式为：alert("语句");

• 实例：

• 【注意】：内部JavaScript可以在页面上的任何位置，而页面也允许在不同位置上放入多段javaScript代码

1.2 外部JavaScript

• 用法在于将原本应写到<script>和</script>的内容变为在外面另建一个.js文件，并存放在里面

• 建好.js文件后，如果要用，则必须在HTML代码中，声明如下：

• 代码如下：

二、JavaScript语法

• 有大小写之分

• 其语法类似于java

• 每一段语句可以有分号（;），也可以没有分号（;）

• 注释可以这样表示：

三、JavaScript变量

3.1 变量声明

• 无论是什么类型内容，都统一使用关键字var加上变量名称进行声明，例如：var a = 2

• 在声明变量的同时可以对其进行初始化，也可以先声明变量，再另行赋值

• 允许一个关键字var同时声明多个变量，同时多个变量也可以是相互不同的类型，也可以是全部相同的类型

• 变量声明var不是必须存在的，也可以直接使用变量名称进行赋值使用，例如：list = “String”

• 当程序遇到未声明的变量时，就像上方的list，会自动使用该名称创建一个变量并继续使用

• 如果声明的变量没有赋值，则alert(变量名称)显示为underfined

3.2 变量的命名规范

• 首位字符必须是字母、下画线、美元符号

• 其他位置可以为下画线、美元符号、数字、字母

• 变量命名方式有Camel标记法（变量为多个单词时，第一个单纯的首字母为小写，其他单词的首字母为大写，如，var myFirseScript）、Pascal标记法（所有单词的首字母大写）、匈牙利类型标记法（在Pascal标记法的基础上，加上一个前缀【i表示整数，s表示字符串】，如，varsMyFirstScript）

3.3 关键字和保留字

• 关键字

• 保留字

• 都不能作为变量或函数名称

四、JavaScript基本数据类型

• 五种原始类型：Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）

• typeof 变量名称：返回该变量名称的类型

• typeof方法的常见返回值

4.1 Undefined类型

• 当输出的变量从未声明过，或使用关键字var声明过后但并未赋值，alert(变量名称)会显示undefined字样

• 代码如下：

4.2 Null类型

• null值表示变量的内容为空，可用于初始化变量或者清空已经赋值的变量

• 示例：

4.3 String类型

• 用于存储文本内容，赋值时，可以用单引号或双引号

• 这里的单引号不是指只能一个字符，它与字符串是相同的意思

• 当文本内容里有双引号，则外面字符串用单引号表示，反之亦然

• 示例:

• JavaScript String对象常见方法

4.3.1 字符串长度

• 可以使用 变量名称.length 获取其长度（与java相同）

4.3.2 获取字符串中的单个字符

• 使用charAt()方法获取字符串中的单个字符，使用charCodeAt()方法获取字符串中的单个字符的Unicode编码

• 示例：

4.3.3 连接字符串

• 使用concat()方法将新的字符串内容连接到原始字符串上

• 其格式为：concat(String s1,String s2,String s3,········,String sn);

• 示例：

4.3.4 查找字符串是否存在

• 使用indexOf()和lastIndexOf()方法来查找原始字符串中是否包含指定的字符串

• 其格式为：【正序】indexOf(指定的字符串，指定开始索引的位置)，【倒序】`lastIndexOf(指定的字符串，指定开始索引的位置)

4.4 Number类型

• Number类型表示数字，其数字可以是32位以内的整数或64位以内的浮点数

4.4.1 科学计数法

• 其格式为：数值e倍数 （倍数可以为负数，其格式含义为数值【整数或浮点数】乘以10的倍数次方）

• 示例：

4.4.2 八进制与十六进制数

• 要运用到八进制、十六进制以及相互转换之间的知识

• Number类型也可以是八进制（以0开头，后面跟的数字只能是0—7中的一个）或十六进制（以0x开头，后面跟的字符只能是0—9或A-F之间的一个）

• 示例：

• 在代码中虽然以八/十六进制赋值，最后输出是以十进制输出

4.4.3 浮点数

• 使用toFixed（）方法规定小数点后保留几位数，其格式为：

• 若使用浮点数计算，有时会产生误差

• 代码如下：

4.4.4 特殊Number值

• JavaScript中Number类型的特殊值

• Infinity有正负之分，但如果Number数值超出他的上限或下限，就会返回Infinity

• 示例：

• 当两个变量数值都超出数值范围的大小，但他们各自的实际长度不相同；而由于都超出范围限制，都变为Infinity,所以判定两者是相等的，返回true；

• 示例：

• 使用数字0作为除数不会报错，则分为几种情况：
• 正数 / 0 = Infinity
• 负数 / 0 = -Infinity
• 0 / 0 = NaN(非数字)

• Infinity不可以与其他正常的数字进行计算，返回结果仍是Infinity

• Infinity - Infinity = NaN

4.4.5 NaN

• 表示的是非数字，用于表示数据转换成Number类型失败的情况，从而抛出异常

• isNaN（变量名称）：判断数据类型是否为数值的方法，返回值为布尔值

4.4.6 关于Infinity 、-Infinity 、NaN三者的讨论

• Infinity 运算法则
• 正数除以 0 得 Infinity。
• Infinity 加或减任何有限数字都得 Infinity 。Infinity + Infinity 或 Infinity - -Infinity 也得 Infinity 。
• Infinity 乘或除以任何有限正数得 Infinity 。Infinity 乘或除以任何有限负数得 -Infinity 。 Infinity * Infinity 或 Infinity / 0 也得 Infinity 。Infinity * -Infinity 得 -Infinity。
• Infinity - Infinity 得 NaN 。 Infinity / Infinity 得 NaN 。 Infinity * 0 得 NaN 。
• Infinity == Infinity 为真。 Infinity.isNaN() 为假。
• Infinity.isFinite() 为假。 Boolean(Infinity) 为真。

• Infinity 运算法则
• 负数除以 0 得 -Infinity。
• Infinity 加或减任何有限数字都得 -Infinity 。-Infinity + -Infinity 或 -Infinity - Infinity 也得 -Infinity
• Infinity 乘或除以任何有限正数得 -Infinity 。-Infinity 乘或除以任何有限负数得 Infinity 。 -Infinity * Infinity 或 -Infinity / 0 也得 - Infinity 。-Infinity * -Infinity 得 Infinity。
• Infinity - -Infinity 得 NaN 。 -Infinity / -Infinity 得 NaN 。 -Infinity * 0 得 NaN 。
• Infinity == -Infinity 为真。 -Infinity.isNaN() 为假。
• Infinity.isFinite() 为假。 Boolean(-Infinity) 为真。

• NaN 运算法则
• 0 / 0 得 NaN 。上面也有一些得 NaN 的情况。
• NaN 加、减、乘或除以任何数（包括 Infinity 、 -Infinity 和 NaN 本身）得 NaN 。
• 无论变量 x 取何值（包括 undefined 、 null 、 true 、 false 、 Infinity 、 -Infinity 和 NaN 本身），NaN == x 恒为假。NaN.isNaN() 为真。 NaN.isFinite() 为假。 Boolean(NaN) 为假。

• 本段来源于关于 Infinity， -Infinity 和 NaN

4.5 Boolean类型

• 多用于条件判断，返回为布尔值（true或false）

• 总之： 1.特殊值undefined和null变成false. 2.数字0和NaN变成false. 3.空字符串变成false. 4.所有其他值都变成true.

• 另：凡是关于Boolean()、Number()等都是将括号里的元素强制转换为外面声明的类型

五、涉及八进制和十六进制的知识补充

六、JavaScript运算符

• 赋值运算符：=
示例：var x1 = 9;

• 算数运算符的常见用法：

• 运算符组合：

• 逻辑运算符有三种类型：NOT（逻辑非）、AND（逻辑与）、OR（逻辑或）

• 逻辑运算符分为：！（逻辑非，表示对结果的对立面）、&&（逻辑与，表示并列关系）、||（逻辑或，表示二选一）

• 【注意：】这里与Java不同的是，JavaScript自带有一个抽象方法ToBoolean，可以提前将运算条件转换为布尔值，之后在进行逻辑运算符判断；

• ToBoolean的具体转换规则如下：

• 逻辑与特殊情况：

• 逻辑或特殊情况：

• 关系运算符分为三种比较方式：

• 相等性运算符是先将其他非数字类型的转换为数字类型，在进行相等判断；

• 数据类型转换规则表

• 相等性特殊情况规则（数据类型转换后仍不是数字类型的特殊情况）

七、JavaScript条件语句

• if-else if-else语句与java用法相同，这里不阐述；

• switch-case-default语句与java用法相同，这里也不阐述；

八、JavaScript函数

• 函数的格式如下：

• javascript的函数返回形式与java不同，它不需要在函数名前特别声明该返回什么类型，也不要加什么void，只需要按正常的在函数内部内容直接返回return加需要返回的内容就行了，没有返回值就不用写吧return；

九、文档对象模型

9.1 含义

• HTML的应用程序接口

• 简称DOM

• 将整个HTML页面看作由各种节点层级构成的结构

9.2 在javascript中查找HTML元素有三种方法

• HTML元素的id名称查找
• 其格式为document.getElementById("id名称");
• 如果未找到id名称，则会返回null；如果找到，则以对象形式返回；
• //根据id名称获取元素（id为test）对象var test = document.getElementId("test");//获取元素内容var result = test.innerHTML;

• HTML元素的标签名称查找
• 其格式为document.getElementsByTagName("标签名称");
• 注意这里的Elements是复数形式，其原因在于可能存在多个元素符合要求；这时若找到标签名称，则会以数组的形式返回；而找不到，则返回null；
• var test = document.getElementsByTagName("p");var result = p[0].innerHTML;

• HTML元素的类名称查找
• 其格式为document.getElementsByClassName("类名称");
• 注意这里的Elements是复数形式，其原因在于可能存在多个元素符合要求；这时若找到标签名称，则会以数组的形式返回；而找不到，则返回null；
• var test = document.getElementsByClassName("coral");var result = test[0].innerHTML;

9.3 DOM HTML

9.3.1 使用document.write（）方法可以想页面动态输出内容

9.3.2 innerHTML的用法

• innerHTML可以实现用于获取元素内容，也可用于修改元素内容。

• 其格式为:
• 获取：
• 修改内容：
• 修改元素属性：

9.4 DOM CSS

• 其格式为：

9.5 DOM事件

• 含义：可以再HTML页面状态发生变化时执行代码

• 示例：

• HTML常用事件属性

9.6 DOM节点

9.6.1 添加HTML元素

• 两个步骤：
• 创建新的元素，其格式为：document.createElement("元素标签名");
• 将其追加到一个已存在的元素中，其格式为：已存在的元素对象.appendChild(需要添加的新元素对象);【已存在的元素对象可由document对象的getElementById(“id名称”)获取】
• 其总的格式为：

9.6.2 删除HTML元素

• 两个步骤：
• 使用document对象的getElementById(“id名称”)方法获取该元素；
• 使用removeChild()方法将其从父元素中删除
• 另：若父元素有明确的的id名称，可以使用getElementById()方法获取
示例：
• 另：若父元素没有明确的id名称，则可以使用子元素的parentNode属性获取其父元素对象
示例：

• 代码如下：
代码测试结果：