JavaScript 教程
- 1. 简介
- 2. JavaScript 用法
- 3. Chrome浏览器中执行JavaScript
- 4. JavaScript 输出
- 5. JavaScript 语法
- 6. JavaScript 语句
- 7. 判断用户浏览器是否支持JavaScript脚本
- 8. JavaScript变量
- 9. JavaScript 数据类型
- 10. JavaScript 对象
- 11. JavaScript 函数
- 12. JavaScript 作用域
- 13. JavaScript 事件
- 14. JavaScript 字符串
- 15. For/In 循环
- 16. Break和Continue
- 17. typeof
- 18. 类型转换
- 19. 正则表达式
- 20. JavaScript 错误 - throw、try 和 catch
- 21. JavaScript 调试
- 22. JavaScript 声明提升 [Hoisting]
- 23. 严格模式 use strict
- 24. JavaScript 表单
- 25. JavaScript 验证API
- 26. JavaScript this 关键字
- 27. 函数的特殊写法:
- 28. HTML DOM
- 其他的一些函数
1. 简介
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
直接写入 HTML 输出流 = 直接写html
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<h2>这是一个标题</h2>");
document.write("<p>这是一个段落。</p>");
</script>
- 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
按钮
一个按钮：点击显示欢迎
<button type="button" onclick="alert('欢迎!')">点我!</button>
我们可以通过按钮执行函数(οnclick=“函数名”)，然后用id索引对应元素，然后修改内容.innerHTML。
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button> //点击了按钮上面的文字就会变为Hello JavaScript
类似的逻辑也可以用在图片上
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
🌟 getElementById
x = document.getElementById('demo')
// 文字
x.style.color = "#ff0000"
x.innerHTML = "新的内容"
// 图片
element.src = "/images/pic_bulboff.gif"; //改变新的图像位置
// 输入框 <input id="demo" type="text">
var x=document.getElementById("demo").value; // 获得输入框的值
// 表单
// 在提交的时候会调用检查的函数 οnsubmit="return validateForm()"
// <form name="myForm" action="demo_form.php" οnsubmit="return validateForm()" method="post">
// <input type="text" name="fname">
// <input type="submit" value="提交"> 提交按钮
// </form>
document.forms["myForm"]["fname"].value; //得到name为myForm中name为fname的输入框中的输入值
// Div <div id="myDIV">一个 DIV。</div>
x.innerHTML = "新的内容"
// 修改自身元素的内容,如下面的例子会直接修改按钮上的文字
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
2. JavaScript 用法
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和</script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script>之间的代码行包含了 JavaScript:
- 通常的做法是把函数放入
<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
- 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在
<script>标签的 “src” 属性中设置该 .js 文件：
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
3. Chrome浏览器中执行JavaScript
https://www.runoob.com/js/js-chrome.html
4. JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
4.1 window.alert() 弹出警告框
例如
window.alert(5 + 6);
4.2 document.write() 方法将内容写到 HTML 文档中
因为会覆盖原有加载的网页，因此只适合于测试用
<script>
function myFunction() {
document.write(Date());
}
</script>
4.3 console.log() 写入到浏览器的控制台
需要打开浏览器的检查
5. JavaScript 语法
5.1 JavaScript 字面量
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
- 3.14
- 100
- 123e5
字符串（String）字面量 可以使用单引号或双引号:
- “Frank”
- ‘frank’
表达式字面量 用于计算：
- 5+5
数组（Array）字面量 定义一个数组：
- [40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：
- {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（Function）字面量 定义一个函数：
- function myFunction(a, b) { return a * b;}
5.2 JavaScript 变量
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
6. JavaScript 语句
- 您也可能看到不带有分号的案例。在 JavaScript 中，用分号来结束语句是可选的。
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
var person="runoob";
var person = " runoob";
- catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
- throw 抛出（生成）错误 。
- 您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("你好 \
世界!");
- JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
7. 判断用户浏览器是否支持JavaScript脚本
如果用户不能确定浏览器是否支持JavaScript脚本，那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以 <-- 开始以 --> 结束的。如果在此注释符号内编写 JavaScrip t脚本，对于不支持 JavaScript 的浏览器，将会把编写的 JavaScript 脚本作为注释处理。
使用 JavaScript 脚本在页面中输出一个字符串，将 JavaScript 脚本编写在 HTML 注释中，如果浏览器支持 JavaScript 将输出此字符串，如果不支持将不输出此字符串，代码如下:
<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>
8. JavaScript变量
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失。在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：
var carname="Volvo";
var carname;
使用 let 和 const
在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。
9. JavaScript 数据类型
值类型(基本类型)：
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
9.1 JavaScript 拥有动态类型
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
9.2 JavaScript 数组
下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
var cars=["Saab","Volvo","BMW"];
9.3 JavaScript 对象 🌟 有点类似于Struct 和 Dict
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
var person={firstname:"John", lastname:"Doe", id:5566};
name=person.lastname;
name=person["lastname"];
9.4 Undefined 和 Null
Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
10. JavaScript 对象
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() //这里fullName是这个函数的名字
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
注意调用函数的时候需要加上()，否则会返回函数的定义
function() { return this.firstName + " " + this.lastName; }
11. JavaScript 函数
11.1 调用带参数的函数
// 输入参数不需要指定类型
function myFunctionName(name,job){
alert("Welcome " + name + ", the " + job);
}
调用方式
<button onclick="myFunctionName('Harry Potter','Wizard')">点击这里</button>
11.2 带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
document.getElementById("demo").innerHTML=myFunction();
11.3 局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
11.4 全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
全局变量会在页面关闭后被删除。
11.5 向未声明的 JavaScript 变量分配值
如果没写var，即如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
如这条语句：carname="Volvo";将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。但如果用var申明的变量不能被删除。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
12. JavaScript 作用域
12.1 JavaScript 局部作用域
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
12.2 JavaScript 全局变量
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
⚠️ 如果没有添加var关键词，产生的是全局变量。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
13. JavaScript 事件
13.1 HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
13.2 常见的HTML事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
14. JavaScript 字符串
var carname = "Volvo XC60";
var lenght = carname.length; // 字符串长度
var character = carname[7]; //单个字符
// 你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:
var answer = "He is called 'Johnny'";
// 你也可以在字符串添加转义字符来使用引号：
var x = 'It\'s alright';
var y = new String("John"); // y是一个object，因此有字符串方法，而x没有，因为x只是一个字符串
x == y // 比较x和y内容是否一致
// 两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串
z="Hello"+5;
14.2 特殊符号
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符
14.3 字符串方法
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值
15. For/In 循环
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名，如fname,lname,age，是一个String
{
txt=txt + person[x];
}
如果越界会自动停止
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}
document.write(cars[10]);
输出
BMW
Volvo
Saab
Ford
undefined
16. Break和Continue
break跳出当前循环，continue回到当前循环初始处（跳过某些值）
for (i=0;i<=10;i++)
{
if (i==3) continue; // 跳过3
x=x + "The number is " + i + "<br>";
}
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
17. typeof
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
17.1 undefined 和 null 的区别
null 和 undefined 的值相等，但类型不等：
typeof undefined // undefined
typeof null // object
typeof NaN // number
null === undefined // false，类型不同
null == undefined // true，值相同
17.2 .constructor属性
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
应用，我们可以看一个对象是否属于某一类
18. 类型转换
https://www.runoob.com/js/js-type-conversion.html
19. 正则表达式
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
语法：
/正则表达式主体/修饰符(可选)
如：
var patt = /runoob/i
runoob是主体，i是修饰符。
19.1 search() | 在字符串中查找某一个子字符串
var str = " RUNoob!";
var n = str.search(/Runoob/i); // 1
var n = str.search("Runoob"); // -1
19.2 replace(A,B) | 用字符串B替换字符串A
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
19.3 .test(A) | 检测字符串A是否满足给定Pattern
var patt = /e/;
patt.test("The best things in life are free!");
19.4 正则表达式修饰符
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
19.5 正则表达式模式
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
19.6 例子
/*是否带有小数*/
function isDecimal(strValue ) {
var objRegExp= /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
/*校验是否中文名称组成 */
function ischina(str) {
var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验是否全由8位数字组成 */
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验电话码格式 */
function isTelCode(str) {
var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return reg.test(str);
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
20. JavaScript 错误 - throw、try 和 catch
- try 测试代码块的错误。
- catch 处理错误。
- throw 创建自定义错误，可以throw一个字符串
- finally 在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
Try & Catch
var txt="";
function message()
{
try {
adddlert("Welcome guest!");
} catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
document.write("haha"); // 这行还是会被执行
}
finally
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值是空的";
if(isNaN(x)) throw "值不是一个数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
21. JavaScript 调试
https://www.runoob.com/js/js-debugging.html
22. JavaScript 声明提升 [Hoisting]
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
但初始化过程（如y=7）不会被提升。
例如：
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
等价于：
var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
23. 严格模式 use strict
在设计严格模式的代码开头增加use strict。
目的：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
x = 3.14; // 不报错
myFunction();
function myFunction() {
"use strict";
y = 3.14; // 报错 (y 未定义)
}
24. JavaScript 表单
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。
24.1 例子：验证forms里面输入非空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
24.2 表单自动验证
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
24.3 email验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
25. JavaScript 验证API
.checkValidity()会自动验证我们自己设定的标准，如min=“100” 等
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
</script>
26. JavaScript this 关键字
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。（不论是否为严格模式）
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
<button onclick="this.style.display='none'">
点我后我就消失了
</button>
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
27. 函数的特殊写法:
27.1 arguments
我们可以利用arguments来传入参数。
function sumAll() {
var i, sum = 0;
for(i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
document.getElementById("demo").innerHTML =
sumAll(1, 123, 500, 115, 44, 88);
27.1 JavaScript 内嵌函数和闭包
函数可以改变全局变量，如下面的例子中我们可以改变a的值。
<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<p id="test"></p>
<script>
var a = 4;
function myFunction() {
a += 1;
document.getElementById("demo").innerHTML = a * a;
document.getElementById("test").innerHTML = a;
}
</script>
但问题来了，因为是全局变量，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。
内嵌函数：
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
在这个例子中，如果我们还是直接调用add，我们的counter还是一直为1。但是我们能在外部调用plus函数，则我们就可以修改counter的值了。这种外部调用plus函数的方式就是闭包。
闭包
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
在下面的例子中，计数器受匿名函数的作用域保护，只能通过 add 方法修改。
add是一个function，它其中的counter只会被初始化1次。
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
document.getElementById("test").innerHTML = typeof add
}
</script>
<p id="test"></p>
Rq:
- 闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
- 直观的说就是形成一个不销毁的栈环境。
实际上闭包就是把我们前面的plus函数给返回了出来。
function outerFunction() {
var counter = 0;
function innerFunction(){
return counter += 1;
}
return innerFunction;
/*
注意 typeof innerFunction 是：function；而typeof innerFunction（）是number；
*/
}
var add = outerFunction();
/*
调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次
内部函数inner Function，内部函数公用了counter，所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。
*/
add();
add();
add();
28. HTML DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
28.1 查找元素
通过 id 找到 HTML 元素
var x=document.getElementById("intro");
通过标签名找到 HTML 元素
var x=document.getElementById(“main”);
var y=x.getElementsByTagName(“p”);
如果有多个p，可以用y[0]等方式索引。
通过类名找到 HTML 元素
var x=document.getElementsByClassName(“intro”);
其他的一些函数
- alert(“弹出警告”)；
- isNan(x) 判断是否为空
- isNaN(x) 如果x不是数字，则返回True，反之返回False。
- Date(): 当前时间 Tue Mar 23 2021 19:49:54 GMT+0100 (中欧标准时间)
- Date().getDay(); // 0=礼拜天
- getHours()
- getMinutes()
- getSeconds()
- typeof x :返回一个变量的类型，如string object functiond等。⚠️ new String(“test”)是一个object而非对象
- (condition)?value1:value2,如果是True则返回value1。
- Math.random()
- Switch
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
- .indexOf(“字符”)，判断原字符中是否有“字符”，如果有则返回第一个元素的下标。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
