本文详细介绍了JavaScript如何通过getElementById()改变HTML内容，包括使用innerHTML、window.alert()、document.write()和console.log()展示数据，以及JavaScript变量、运算符、数据类型和对象的运用。讲解了如何在HTML中利用外部JavaScript文件提高代码组织和页面加载速度。
JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。
**提示：**把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
JavaScript 使用、外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
**提示：**更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
- 使用
window.alert()写入警告框 - 使用
document.write()写入 HTML 输出 (仅用于测试不常用) - 使用
innerHTML写入 HTML 元素 - 使用
console.log()写入浏览器控制台
JavaScript 程序
计算机程序是由计算机“执行”的一系列“指令”。
在编程语言中，这些编程指令被称为语句。
JavaScript 程序就是一系列的编程语句。
**注释：**在 HTML 中，JavaScript 程序由 web 浏览器执行。
JavaScript 语句
JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。 分号分隔 JavaScript 语句。 折行的最佳位置是运算符或逗号之后。
**提示：**以分号结束语句不是必需的，但我们仍然强烈建议您这么做。
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
JavaScript 关键词
JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量
JavaScript 标识符 JavaScript 对大小写敏感
标识符是名称。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。
**提示：**数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。
小驼峰 firstName, lastName, masterCard, interCity
全局作用域
全局（在函数之外）声明的变量拥有全局作用域。
通过 var 关键词声明的变量没有块作用域。 可以访问{}内的var变量。
使用 let 关键词声明拥有块作用域的变量。 不可以访问{}内let的变量。
HTML 中的全局变量
使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。
在 HTML 中，全局作用域是 window 对象。
通过 var 关键词定义的全局变量属于 window 对象 通过 let 关键词定义的全局变量不属于 window 对象.
通过 var 声明的变量会提升到顶端。如果您不了解什么是提升（Hoisting）
const 变量必须在声明时赋值 可以更改常量对象的属性 无法重新为常量对象赋值
常量数组可以更改
可以更改常量数组的元素： 无法重新为常量数组赋值： 在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：
JavaScript 算数运算符
加 减 乘 除 取模 递加 递减
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WZtVSLEC-1659429758398)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115234278.png)]
JavaScript 赋值运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONAXSkUB-1659429758399)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728114900100.png)]
**提示：**在用于字符串时，+ 运算符被称为级联运算符。
**提示：**如果您对数字和字符串相加，结果将是字符串！
JavaScript 比较运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WbBp9mul-1659429758399)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115023087.png)]
JavaScript 逻辑运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4G6rEGGo-1659429758399)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115053898.png)]
JavaScript 类型运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mCqfqmhK-1659429758400)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115110403.png)]
以及 位运算符
JavaScript 数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
JavaScript 对象
对象{ } 属性 方法function()
不要把字符串创建为对象。它会拖慢执行速度。
JavaScript 字符串方法
length 属性返回字符串的长度： indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
search() 方法搜索特定值的字符串，并返回匹配的位置：
种方法，indexOf() 与 search()，是相等的。
这两种方法是不相等的。区别在于：
-
search() 方法无法设置第二个开始位置参数。
-
indexOf() 方法无法设置更强大的搜索值（正则表达式）。
-
slice()提取字符串的某个部分并在新字符串中返回被提取的部分。该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
replace()方法用另一个值替换在字符串中指定的值： 通过toUpperCase()把字符串转换为大写：通过
toLowerCase()把字符串转换为小写：trim()方法删除字符串两端的空白符：可以通过
split()将字符串转换为数组：插值:模板字符串
模板字面量提供了一种将变量和表达式插入字符串的简单方法。
JavaScript 数值始终是 64 位的浮点数
NaN - 非数值
NaN属于 JavaScript 保留词，指示某个数不是合法数。尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）
把变量转换为数值
这三种 JavaScript 方法可用于将变量转换为数字：
- Number() 方法
- parseInt() 方法
- parseFloat() 方法
length 属性
length属性返回数组的长度（数组元素的数目）。遍历数组元素
遍历数组的最安全方法是使用 “
for” 循环：添加数组元素
向数组添加新元素的最佳方法是使用
push()方法：数组和对象的区别
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
数组是特殊类型的对象，具有数字索引。
把数组转换为字符串
JavaScript 方法
toString()把数组转换为数组值（逗号分隔）的字符串。push()方法（在数组结尾处）向数组添加一个新的元素：位移与弹出等同，但处理首个元素而不是最后一个。
shift()方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。unshift()方法（在开头）向数组添加新元素，并“反向位移”旧元素：使用 splice() 来删除元素
通过聪明的参数设定，您能够使用
splice()在数组中不留“空洞”的情况下移除元素：数组排序
sort()方法以字母顺序对数组进行排序：反转数组
reverse()方法反转数组中的元素。
比值函数
比较函数的目的是定义另一种排序顺序。
比较函数应该返回一个负，零或正值，这取决于参数：
function(a, b){return a-b}
数组不是常量
关键字 const 有一定误导性。
它不定义常量数组。它定义的是对数组的常量引用。
因此，我们仍然可以更改常量数组的元素。
Math.pow()
Math.pow(x, y) 的返回值是 x 的 y 次幂：
Math.sqrt()
Math.sqrt(x) 返回 x 的平方根：
Math.min() 和 Math.max()
Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：
JavaScript 随机整数
Math.random() 与 Math.floor() 一起使用用于返回随机整数。
JavaScript 布尔（逻辑）代表两个值之一：true 或 false。
布尔值
通常，在编程中，您会需要只能有两个值之一的数据类型，比如
- YES / NO
- ON / OFF
- TRUE / FALSE
鉴于此，JavaScript 提供一种布尔数据类型。它只接受值 true 或 false。
所有不具有“真实”值的即为 False
*0（零）*的布尔值为 false： *-0 （负零）*的布尔值为 false： *“”（空值）*的布尔值为 false： undefined 的布尔值是 false：
null 的布尔值是 false： false 的布尔值（正如您猜到的）是 false： NaN 的布尔值是 false：
当使用 === 运算符时，相等的布尔是不相等的，因为 === 运算符需要在类型和值两方面同时相等。
比较不同的类型
比较不同类型的数据也许会出现不可预料的结果。
如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。
switch 语句用于基于不同条件执行不同动作。
使用 switch 语句来选择多个需被执行的代码块之一。
代码解释：
-
计算一次 switch 表达式
-
把表达式的值与每个 case 的值进行对比
-
如果存在匹配，则执行关联代码
-
实例
getDay() 方法返回 0 至 6 之间的周名数字（weekday number）。
(Sunday=0, Monday=1, Tuesday=2 …)
break 关键词
如果 JavaScript 遇到
break关键词，它会跳出 switch 代码块。此举将停止代码块中更多代码的执行以及 case 测试。
如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。
break能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。
默认的 case 不必是 switch 代码块中最后一个 case：
如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。
不同类型的循环
JavaScript 支持不同类型的循环：
-
for- 多次遍历代码块 -
for/in- 遍历对象属性 -
while- 当指定条件为 true 时循环一段代码块 -
do/while- 当指定条件为 true 时循环一段代码块For/In 循环
JavaScript
for/in语句遍历对象的属性：For/In 循环
JavaScript
for/in语句遍历对象的属性：如果索引顺序很重要，请不要在数组上使用 for in。
索引顺序依赖于实现，可能不会按照您期望的顺序访问数组值。
当顺序很重要时，最好使用 for 循环、for of 循环或 Array.forEach()。
Array.forEach()
forEach()方法为每个数组元素调用一次函数（回调函数）。While 循环
while 循环会一直循环代码块，只要指定的条件为 true。
Do/While 循环
do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。
break语句“跳出”循环。continue语句“跳过”循环中的一个迭代。break 语句也可用于跳出循环。
break 语句会中断循环，并继续执行循环之后的代码（如果有）：Continue 语句
continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。JavaScript typeof
在 JavaScript 中有 5 种不同的可以包含值的数据类型：
stringnumberbooleanobjectfunction
有 6 种类型的对象：
ObjectDateArrayStringNumberBoolean
以及 2 种不能包含值的数据类型：
-
null -
undefined请注意：
- NaN 的数据类型是数字
- 数组的数据类型是对象
- 日期的数据类型是对象
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined *
- 未赋值的变量的数据类型也是 undefined *
您无法使用
typeof来确定 JavaScript 对象是否是数组（或日期）。在 JavaScript 中，没有值的变量的值是
undefined。类型也是undefined。Null
在 JavaScript 中
null即是“无”。它应该是不存在的东西。不幸的是，在 JavaScript 中，
null的数据类型是一个对象。你可以认为它是 JavaScript 中的一个 bug，
typeof null是一个对象。类型应为null。您可以通过将对象设置为
null来清空对象：undefined 与 null 的区别
undefined和null值相等但类型不同：JavaScript 类型转换
Number()转换数值，String()转换字符串，Boolean()转换布尔值。JavaScript 数据类型
JavaScript 中有五种可包含值的数据类型：
- 字符串（string）
- 数字（number）
- 布尔（boolean）
- 对象（object）
- 函数（function）
有三种对象类型：
- 对象（Object）
- 日期（Date）
- 数组（Array）
同时有两种不能包含值的数据类型：
- null
- undefined
JavaScript 正则表达式
正则表达式是构成搜索模式的字符序列。
该搜索模式可用于文本搜索和文本替换操作。
什么是正则表达式？
正则表达式是构成*搜索模式（search pattern）*的字符序列。
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。
使用字符串方法
在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。
search() 方法使用表达式来搜索匹配，然后返回匹配的位置。
replace() 方法返回模式被替换处修改后的字符串。
语法
/pattern/modifiers;
实例
var patt = /w3school/i;
例子解释：
/w3school/i 是一个正则表达式。
w3school 是模式（pattern）（在搜索中使用）。
i 是修饰符（把搜索修改为大小写不敏感）。
JavaScript 抛出错误
当发生错误时，JavaScript 通常会停止并产生错误消息。
技术术语是这样描述的：JavaScript 将抛出异常（抛出错误）。
JavaScript 实际上会创建带有两个属性的 Error 对象：name 和 message。
this 是什么？
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
- 在方法中，
this指的是所有者对象。 - 单独的情况下，
this指的是全局对象。 - 在函数中，
this指的是全局对象。 - 在函数中，严格模式下，
this是 undefined。 - 在事件中，
this指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
JavaScript 箭头函数
如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字：
箭头函数默认返回值：
hello = () => "Hello World!";
Constructor 方法
构造方法是一种特殊的方法：
- 它必须拥有确切名称的“构造函数”
- 创建新对象时自动执行
- 用于初始化对象属性
- 如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。
Class 方法
类方法的创建
语法
与对象方法相同。
请使用关键字 class 创建类。
请始终添加 constructor() 方法。
然后添加任意数量的方法。
JSON 是存储和传输数据的格式。
JSON 经常在数据从服务器发送到网页时使用。
什么是 JSON？
- JSON 指的是 JavaScript Object Notation
- JSON 是轻量级的数据交换格式
- JSON 独立于语言 *****
- JSON 是“自描述的”且易于理解
* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。
JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象：
Constructor 方法
构造方法是一种特殊的方法：
- 它必须拥有确切名称的“构造函数”
- 创建新对象时自动执行
- 用于初始化对象属性
- 如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。
Class 方法
类方法的创建
语法
与对象方法相同。
请使用关键字 class 创建类。
请始终添加 constructor() 方法。
然后添加任意数量的方法。
JSON 是存储和传输数据的格式。
JSON 经常在数据从服务器发送到网页时使用。
什么是 JSON？
- JSON 指的是 JavaScript Object Notation
- JSON 是轻量级的数据交换格式
- JSON 独立于语言 *****
- JSON 是“自描述的”且易于理解
* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
