目录
这篇文章有点长，大家可以根据目录按需分次看
一、JavaScript 简介
????????Javascript 简称为 JS，在web中用作用于给整个页面添加一些动态效果，例如动态改变页面某个元素的css属性，或给整个页面添加较为流程的用户体验，基础的 JS 学习 一般直接在 web 中嵌入即可。
二、JavaScript 基础入门
2.1 JavaScript HelloWorld
????????JS代码添加在标签?<script> </script>?之中，通过 JavaScript 写的一段 HelloWorld脚本来了解?JavaScript 代码的写法
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>JavaScript 基础入门</title>
</head>
<body>
? ?<p id="p_id">
? ? ? ?这是P元素内容
? ?</p>
? ?<script>
? ? ? ?document.write("HelloWorld");
? ?</script>
</body>
</html>
运行结果：
代码解析：
????????重点看标黄的代码，这就是JS代码，放在一对 <script></script> 标签里， <script></script> 标签中的?document.write("HelloWorld") 指的是在当前文档中写入一个字符串，这个字符串是 HelloWorld。其中的?document 指 html 文档，文档是一个类，write 指这个文档类别对象里面的一个写入功能，也就是 write（）函数，写入内容需要一个文本来表示，这个文本就是 HelloWorld。在 document 和 write 之间有一个“?. ”，这个点表示当前文档调用 wirte 这个功能，是面向对象的。在 JS 里字符串要用双引号标识，所以“HelloWorld”字符串用双引号标识。
注意：在<script></script>标签里，写完一行内容要记得加分号 “?；”
? ? ? ? ? JS代码可以换位置，数量也不限制，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>JavaScript 基础入门</title>
</head>
<body>
? ? <script>
? ? ? ? document.write("我是放在前面的 Hello World");
? ? </script>
? ? <p id="p_id">
? ? ? ? 这里是 p 元素中的内容。
? ? </p>
? ? <script>
? ? ? ? document.write("我是放在后面的 Hello World");
? ? </script>
</body>
</html>
运行结果：
2.2 JavaScript 变量、命名及作用域
（1）JavaScript 变量 var：
????????变量就是一块存储空间，这块存储空间里一开始没有存储值，变量的创建也叫做 声明 ，声明的时候没有给变量赋值：如 var Name，这里用 var 说明我们声明的是一个变量，变量名为 Name，这个时候我们开辟了一块叫做 Name的存储空间，但是里面没有值，变量的赋值用一个 = 表示，如：Name = " BingDwenDwen "，这个时候变量名为 Name 的存储空间里存放的值是字符串"BingDwenDwen",也可以在声明时直接赋值，如：var?Name = " BingDwenDwen " ，变量除了赋值字符串还可以赋值数字，函数等。
示例如下：
<script>
? ? ? ? var i = 0;//定义当个变量i并赋值为0
? ? ? ? var a = 1, b = 2,c = 3;//一次定义3个变量，分别为a，b，c分别赋值为1，2，3,多个变量记得用逗号分隔
? ? ? ? document.write(a+b+c)//表示将变量 a, b, c相加，然后输出write（）函数的最终结果：1+2+3=6，输出6
? ? </script>上面的代码用了单行注释符 " // "在后面一一注释，参考注释理解即可。
变量也可以存储表达式，示例如下：
?<script>
? ? ? ? var i;
? ? ? ? var a = 1,b = 2, c = 3;
? ? ? ? i = a+b+c;
? ? ? ? document.write(i);
? ? </script>
字符串可以赋值给变量，变量可以做加法运算，所以字符串也可以做加法运算
<script>
var i = "Hello";
var a = "BingDwenDwen",b = "!";
i = i+a+b;
document.write(i);
</script>运行结果：
（2）JavaScript 变量的命名：
- ?变量名可以包含字母，数字，下划线和美元符号。
- 变量名必须以字母开头，也可以以$和_开头（一般不这么用），不能以数字开头
- 变量名区分大小写
- 保留字（如JavaScript关键字）不能作为变量名使用
? ?常用命名规制：驼峰命名法和下划线命名法
- 驼峰命名法：形似驼峰，如：BingDwenDwen 或 bingDwenDwen
- 下划线命名法：用下划线分割，如：起一个叫beijing的变量，用下划线分割法是bei_jing
这些命名方法都是为了我们更加方便的阅读代码在同一个项目里用同一种命名方法更加方便理解。
（3）JavaScript 变量的作用域：
- 变量作用域就是变量起作用，可以被用到的区域，根据作用域的大小，变量可以分为全局变量和局部变量，全局变量的作用域大，局部变量的作用域小。
- 如一个变量被定义在一个函数内部，那么这是一个局部变量，局部变量只能在函数内部访问，因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
- 变量在函数外定义，即为全局变量。全局变量可以被网页中所有脚本和函数使用（全局作用域），如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
var firstName = "san"; //定义全局变量firstName
document.write(firstName + '<br/>'); // 此处可调用 firstName 全局变量
function MyFunction1()
{
var lastName = "zhang";//定义局部变量lastName
document.write(lastName+firstName + '<br/>');
// 函数内可调用 lastName 局部变量和 firstName 全局变量
}
function MyFunction2() {
firstName = "li";
document.write(firstName + '<br/>');//此处可调用 firstName 变量
document.write(lastName + '<br/>');
//这样写不规范，只是为了证明，局部变量怎能用在声明它的函数内部，其他函数用不了
}
MyFunction1()
MyFunction2()
</script>
</body>
</html>?运行结果：
代码解析：参考注释理解，函数部分后面会说明。
2.3 JavaScript 保留关键字
????????JavaScript 关键字用于标识要执行的操作。和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。JavaScript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。关键字有：var、if、for switch、case、 break 等。
2.4 JavaScript?数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、符号（Symbol）。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
2.5?运算符
（1）+=，-=、*=、/=
示例代码：
<body>
<script>
var i = 1;j = 2;
i += j;
document.write(i);
</script>
<br>
<script>
var p = 4;q = 3;
p -= q;
document.write(p);
</script>
<br>
<script>
var x = 5;y = 6;
x *= y;
document.write(x);
</script>
<br>
<script>
var a = 8;b = 7;
a /= b;
document.write(a);
</script>运行结果：
代码解析：
理解了+=，-=、*=、/=这些符号的意义就能理解代码;
- i += j 表示 i = i +j??
- p -= q 表示 p = p - q
- x *= y 表示 x = x *?y
- a /= b?表示a = a / b
（2）%、%=
? ? ?示例如下：
<script>
var i = 3;j = 2;
var k = i % j;
document.write(k);
</script>
<br>
<script>
var p = 5;q = 3;
p %= q;
document.write(p);
</script>运行结果：
代码解析：
????????符号 % 表示取余，也就是除以一个数后取余数，k = i % j，k 的值为 i 对 j 所取的余数，符号 %= 表示某个数 a 等于 本身 a 对另一个数 b 取余后的结果，和上面的 += 类似，p %= q 表示 p?等于 p?对? q 的取余结果。
（3）++、--
示例如下：
<script>
var i = 0;
document.write(++i + '<br/>')
document.write(i++ + '<br/>')
document.write(i + '<br/>')
document.write(--i +'<br/>')
document.write(i-- + '<br/>')
document.write(i + '<br/>')
</script>运行结果：
代码解析：
- ++ 表示自增，也就是本身的值加1；
- -- 表示自减，也就是本身的值减1；
- ++i 表示 i 的值先自增后再运行write（）函数输出 i ；
- i++ 表示先输出 i 的值，i 再自增；
- --i 表示 i 的值先自减后再运行write（）函数输出 i ；
- i++ 表示先输出 i 的值，i 再自减；
代码里的?document.write(++i + '<br/>')，为了在方便在页面显示时阅读，在输出的不同 i 后面 用加号和换行符连接，注意换行符 <br> 要用单引号标记。
2.6?条件判断?
????????条件判断用处非常多，如用一些游戏，网站，条约判断用户是否已成年、是否购买过某些商品这些都是需要用判断来实现；在JavaScript中判断使用 if 语句。
2.6.1 if 基础与表达式
示例代码：
<script>
var i = 21;
if(i>=18){
document.write("已成年");
}
</script>运行结果：
?
代码解析：
- 条件判断的使用 ：if（）{}；具体→if（条件语句）{条件语句为真时运行的代码,一般会有一个在判断语句里的值发生改变，防止死循环}；
- 条件语句是一个表达式；
- 表达式：是一个式子，这个式子具有一个最终值，这个式子具有意义的；
-
对上面的代码具体解析，首先创建了一个变量 i 赋值为 21，接着使用 if 判断这个 i 的值是否大于18。if 的条件语句表达式的为 i>=18，如果变量 i 的值大于等于 18 将会判断为真，整个表达式的最终值是“真”，用 true 表示。判断错误最终值为假，用 false 表示。在 if 语句中，如果判断为真，就执行if 语句圆括号后花括号中的语句内容，在示例里，花括号中的代码是?document.write("已成年");，那么将会执行这一段代码，在网页中显示。在 if 语句中，如果判断为假，将会什么都不执行，页面没有反应。
2.6.2 if else
????????上面的 if 条件判断语句，如果条件语句不为真就没有执行其他语句，显得不是很灵活，使用 if else 语句便可以在判断为假时执行其他语句。
示例代码
<script>
var i = 8;
if(i>=18){
document.write("已成年");
}
else{
document.write("未成年");
}
</script>运行结果：
?
代码解析：
????????i 的值小于 if 条件表达式的里的值18，所以表达式最终值为假，false，所以执行 else 里的语句，else 里的语句为 document.write("未成年");，所以输出 未成年 。
2.6.3?if? ?else if
示例代码：
<script>
var looking=0;
if(looking == 0){
document.write("对家具颜值要求很低，价位在5百以内");
}else if(looking>=1 && looking <=3){
document.write("对家具颜值要求较低，价位在1k以内");
}
else if(looking >=4 && looking<= 5){
document.write("对家具颜值要求一般，价位在2k以内");
}
else if(looking>=6 && looking<= 7){
document.write("对家具颜值要求较高，价位在1w以内");
}
else if(looking >= 8 && looking <= 10){
document.write("对家具颜值要求很高，价位在2w以内");
}
else if(looking >= 10){
document.write("没有合适的商品，建议理性消费");
}
</script>
运行结果：
?代码解析：
- if elseif格式：if（条件表达式）{条件表达式为真，执行这个代码块}else if（条件表达式）{条件表达式为真，执行这个代码块}
- 上面代码中，先定义了一个叫 looking 颜值的变量，当 looking 的值使得 if 或者 else if 后面下括号中的表达式为真时，执行后面对应的代码，因为 looking = 0，所以 表达式 looking == 0 判断为真，执行 {} 中的内容，document.write("对家具颜值要求很低，价位在5百以内"); 所以输出--“对家具颜值要求很低，价位在5百以内” 的内容。
2.6.4?if 嵌套与分支
示例代码：
<script>
? ? ? ? var looking=1,age=1;
? ? ? ? if(looking == 0){
? ? ? ? ? ? if(age==0){????????????????document.write("对家具颜值要求很低，价位在5百以内");
? ? ? ? ? ? ? ? document.write("使用年限为5年以内，可以考虑购买普通金属、藤类或木材");
? ? ? ? ? ? }
? ? ? ? ? ? ?else if(age==1){
? ? ? ? ? ? ? ? document.write("使用年限为10年以上，可以考虑购买合金、大理石或实木类");
? ? ? ? ? ? }
? ? ? ? }else if(looking>=1 && looking <=3){
? ? ? ? ? ? document.write("对家具颜值要求较低，价位在1k以内");
? ? ? ? }
? ? ? ? else if(looking >=4 && looking<= 5){
? ? ? ? ? ? document.write("对家具颜值要求一般，价位在2k以内");
? ? ? ? }
? ? ? ? else if(looking>=6 && looking<= 7){
? ? ? ? ? ? document.write("对家具颜值要求较高，价位在1w以内");
? ? ? ? }
? ? ? ? else if(looking >= 8 && looking <= 10){
? ? ? ? ? ? document.write("对家具颜值要求很高，价位在2w以内");
? ? ? ? }
? ? ? ? else if(looking >= 10){
? ? ? ? ? ? document.write("没有合适的商品，建议理性消费");
? ? ? ? }
? ? ? ? ? ??
? ??
? ? </script>
运行结果：
代码解析：
????????上面的代码是在 if elseif 的代码示例里增改的，蓝色部分为嵌套部分，嵌套在判断条件为 looking==0 的 if 语句里，把 looking 的初始值改为 1，所以 表达式?looking>=1 && looking <=3判断为真，执行 {} 中的内容，document.write("对家具颜值要求较低，价位在1K以内"); 所以输出--“对家具颜值要求较低，价位在1k以内” 的内容。
2.6.5?switch 语句
示例代码：
<script>
var month = 6;
switch(month){
case 1:
document.write("This month is January");
break;
case 2:
document.write("This month is February");
break;
case 3:
document.write("This month is March");
break;
case 4:
document.write("This month is April");
break;
case 5:
document.write("This month is May");
break;
case 6:
document.write("This month is June");
break;
case 7:
document.write("This month is July");
break;
case 8:
document.write("This month is August");
break;
case 9:
document.write("This month is September");
break;
case 10:
document.write("This month is October");
break;
case 11:
document.write("This month is November");
break;
case 12:
document.write("This month is December");
break;
default:
document.write("Unrecognized, please enter a number between 1 and 12");
}
</script>
运行结果：
- 当输入1-12之间的数字时，执行对应case语句后的代码，输出对应内容，例如当 month = 6时；运行结果为：
- 当输入1-12之间的数字时，执行default后面的代码，输出对应语句，例如当 month = 0 时：
代码解析：
- switch语法：
? ? ? ? switch（表达式）{
? ? ? ? ? ? ? ? case n ：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 代码块
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break；
? ? ? ? ? ? ? ? case n ：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 代码块
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break；
? ? ? ? ? ? ? ? default ：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 默认代码块
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
- switch语句用于根据不同的条件执行不同的动作，用 switch 从多个语句块中选择一个执行。switch 语句计算每个表达式。然后用表达式的值与结构中的每个 case 的值做比较。如果存在匹配值，那么和对应?case 关联的代码块会被执行；
- switch 语句通常与 break 或 default 关键字一起使用。break和default可以根据需要添加；
- break?关键字用于跳出switch代码块。终止switch代码块的执行；
- default?关键字用来规定匹配不存在时做的事情。 default 关键字在 switch 语句中只能出现一次。建议每个 switch语句都使用该参数，使得在不是我们期望的情况下，可以使用它输出信息改进。
2.6.6?逻辑与和逻辑或
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
//与运算
<script>
if (true&&true){
document.write("当 && 号左右都为真时表达式最终值为真true")
}
if (true&&false){
document.write("<br/> 当 && 号左右都为真时表达式最终值为真true")
}
if (false&&false){
document.write("<br/> 当 && 号左右都为真时表达式最终值为真true")
}
if (false&&true){
document.write(" <br/>当 && 号左右都为真时表达式最终值为真true")
}
</script>
<hr>
//或运算
<script>
if (true||true){
document.write("<br/> 只要 || 号左右有一个为真，表达式最终值为真true")
}
if (true||false){
document.write("<br/> 只要 || 号左右有一个为真，表达式最终值为真true")
}
if (false||false){
document.write("<br/> 只要 || 号左右有一个为真，表达式最终值为真true")
}
if (false||true){
document.write("<br/> 只要 || 号左右有一个为真，表达式最终值为真true")
}
</script>
<hr>
//与、或混合运算
<script>
var i = 1,j = 1, k = 1;
if(i == 1 && j == 1||i == 1 && k == 1||j == 1 && k == 1){
document.write("<br/>满足要求，赠送您一张优惠券。")
}
else{
document.write("<br/> 很遗憾，您不满足获得购物券的要求。")
}
</script>
</body>
</html>运行结果：
??代码解析：
- && 运算符，只有当 && 运算符左右两边条件同时为真时表达式最终值才为真，否则都为假；
- || 运算符，只要 || 运算符左右两边条件其中一个为真，表达式最终值就为真；
- 当 与运算 和 或运算 一起的时候，遵守从左到右的顺序；
- 如上面的例子，用 i 表示 新用户，用 j 表示 浏览页面 15 分钟，用 k 表示 购物车中已经添加物品，当满足上面3个条件中的2个时赠送用户一张购物优惠券，代码：i == 1 && j == 1||i == 1 && k == 1||j == 1 && k == 1，从左边看起，先是与运算给，因为 i = 1，j = 1?所以 用判断等于符判断 i 和 j 是否都等于 1?的时候，i 和 j 都为 1 ，与运算符左右两边都为真，所以i == 1 && j == 1为真，接着是或运算符，第一个或运算符左边已经为真，i == 1 && j == 1||i == 1 相当于1||i == 1 ，右边i == 1 也为真，所以第一个或运算为真，后面是第二个与，由于与运算符左边为真，即i == 1 && j == 1||i == 1 && k == 1相当于1&& k == 1，由于 k = 1，所以 k == 1 为真，所以第二个与运算为真，按照上面从左到右一个个运算，if 中的条件表达式最终值为真，所以执行后面花括号里的代码，输出对应内容。
2.7?函数
- ?函数是一个有某一功能的代码块，为了方便这个功能被重复使用，把这些代码写进一个函数里面，我们可以通过事件驱动或者调用执行这个函数里的代码块。
- 函数格式：function 函数名（参数1，参数2){代码行1；代码行2；return 返回值；}
- 函数的关键字是 function ，定义一个函数时先写 function 然后在后面接函数名，函数名之后是参数，函数可以有一个或多个参数，当有多个参数时记得用逗号分割开，然后在花括号里写函数对应功能的代码，函数的返回值可有可无，一般要求有比较规范，返回值前面需要用到关键字 return 标识。
2.7.1 基础函数
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
//函数定义
function MyFunction()
{
document.write("Hello!");
}
//函数调用
MyFunction();
</script>
</body>
</html>运行结果：
?
代码解析：
上面的代码定义了一个叫 MyFunction 的函数，然后调用这个函数，函数定义了没有调用是不执行这个函数的，定义函数就像买了个剃须刀，这个函数名叫剃须刀，他的功能是剃须，没有调用这个函数，就像有了剃须刀但是不用，所以实现不了剃须的功能。
2.7.2 函数参数
- 在调用函数时，向函数传递的值称为参数，这些参数可以在函数中使用，参数数量不限，多个参数用逗号分隔；
- 当我们声明函数时，把参数作为变量来声明：function myFunction(var1,var2){代码块}；
- 变量和参数必须以一样的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
function MyFunction(username){
document.write("Hello "+username + '<br/>');
}
MyFunction("BingDwenDwen");
MyFunction("BingDwenDwen","XueRongRong");
MyFunction();
</script>
</body>
</html>运行结果：
??
代码解析：
????????定义了一个叫?MyFunction 的函数，这个函数有个参数是?username ，内容是?document.write("Hello "+username); 输出 Hello 这个字符串和一个空格?后面接着username 这个变量，当调用函数时，要在函数的小括号里加上数量和声明这个函数时定义的个数一样的参数，如果把调用时参数过多，会使用第一个参数，如果参数不足会在参数位置显示 undefine。
2.7.3 函数返回值
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
function MyFunction(greeting,username){
return greeting + username;
}
var MyFunction = MyFunction("Bonjour ","BingDwenDwen");
document.write(MyFunction);
</script>
</body>
</html>运行结果：
?
代码解析：
????????这个函数里声明了两个参数，分别为 greeting 和 username ，定义了返回值是 参数greeting 后面接 参数username，调用函数时，给参数 greeting 赋值?Bonjour ，给参数? username 赋值?BingDwenDwen ，所以调用这个函数输出为??Bonjour BingDwenDwen 。
2.8?事件及函数
????????事件分JavaScript?事件和HTML 事件
JavaScript?事件
????????HTML 事件是发生在 HTML 元素上的事情，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
- HTML 页面完成加载；
- HTML input 字段改变时；
- HTML 按钮被点击；
????????通常，当事件发生时，我们可以做些事情。如在事件触发时 JavaScript 可以执行一些代码。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。事件就是一件事，例如在网页中，当你点击按钮的时候就触发了一个事件，这个事件可以通过响应一个对应的函数执行某些代码。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<button onclick = "click()">这是一个按钮</button>
<script>
function click(){
alert("我点击了按钮")
}
</script>
</body>
</html>运行结果：
?代码解析：
- 在 html 代码的 body 标签里添加了一个按钮，按钮拥有?onclick 属性，onclick表示点击，并且赋值为 “clickf()”这个函数，表示点击后调用clickf() 函数，执行对应的内容。alert("我点了按钮"）；alert 是一个系统自带的函数，表示弹窗，其中传入的文本是弹窗所显示的内容。也可以直接把弹窗代码写到 onclick 对应的值里。<button οnclick='alert("我点了按钮");'>这是一个按钮</button>
- 在 JavaScript 中单引号和双引号都可以表示值和字符串，因为双引号这些都是成对存在的，为了防止冲突，我们可以结合单引号使用。
- ?案例总结：在 onclick 内可以直接执行JavaScript 的代码，但是不方便，一般能写函数就写函数，或者直接在 onclick 内部写上代码。
2.9?循环
????????循环可以将代码块执行指定的次数。希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。只要在代码适当位置稍做修改就可以。
2.9.1 for 循环基础
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
//一般写法
document.write("Hello <br/>");
document.write("Hello <br/>");
document.write("Hello <br/>");
document.write("Hello <br/>");
document.write("Hello <br/>");
//使用 for 循环写法
for(var i=0;i<5;i++){
document.write("Hello <br/>");
}
</script>
</body>
</html>运行结果：
?代码解析：
-
for (语句 1;?语句 2;?语句 3)
{
????循环的代码块
}语句 1?：（代码块）开始前执行
语句 2：定义运行循环（代码块）的条件
语句 3：?在循环（代码块）已被执行之后执行
for 循环的执行顺序是 语句1→语句2→代码块→语句3→语句2→代码块→语句3→语句2→代码块→语句3→语句2→直到语句2不满足为止，跳出循环，结束。
- 显示5次“Hello”一般写法是调用文档的写功能，重复写5次，使用 for 循环，只需要让 i 初始等于 0 ，然后让 i 和 循环次数 5 做比较，让 i 发生变化，自增5次，代码重复执行5次就可以。
2.9.1.1?for 循环做阶梯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<h1>开始做阶梯</h1>
<button onclick="step()">点击增加阶梯</button>
<div id="divID">
</div>
<script>
var times=0;//次数
function step(){
times++;
var htmlStr='■';//阶梯样子
for(var i=0;i<times;i++){
document.getElementById('divID').innerHTML += htmlStr;
}
document.getElementById('divID').innerHTML +='<br/>';//加完阶梯记得换行
}
</script>
</body>
</html>运行结果：
?代码解析：
- <button οnclick="step()">点击增加阶梯</button> 定义一个按钮，对应的 onclick 事件绑定为 step函数；
- <div id="divID">?</div>?用<div>标签在页面上开辟一块空间，待会可以放阶梯；
- var times=0;创建一个全局变量 times 用于记录按钮点击次数；
- 然后声明?step 函数，每次执行该函数 times 都会加 1；创建一个 htmlStr 变量赋值为一个方块，用于等下阶梯的循环输出，接下来 开始 for 循环，在 for 循环中重点关注条件 i < times；在此处表示 点几下创建多少个方框，循环的代码 document.getElementById('divID').innerHTML += htmlStr 会被执行多少次，每次执行都会在对应的 div 中增加多少个方块；
- document.getElementById('divID').innerHTML +='<br/>';因为方块不换行会连成一条直线，所以在循环执行完毕后在循环外对 div 中添加一个换行标签
2.9.2 while循环
????????while 循环会在指定条件为真时循环执行代码块。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
var i=0;
while (i<5)
{
document.write("Hello" + '<br/>');
i++;
}
</script>
</body>
</html>运行结果：
代码解析：
- 语法：while (循环条件)
????????????????{
????????????????????????循环执行的代码；
????????????????????????循环条件里的变量改变的代码；
???????????????????}
- 上面的代码定义了一个变量 i 赋值为 0 ，当 i 小于 5 的时候，执行循环体里面的代码，输出 Hello，然后改变 i 的值，i++，这时，i = 1，继续循环，直到 i=5 ，不满足 i < 5 的条件，结束循环。
注意：
（1）赋值符号：=????????
????????判断是否相等符号：==
（2）多个参数和变量要用逗号分开
（3）在<script></script>标签里，写完一行内容要记得加分号 “?；”
（4）因为双引号这些都是成对存在的，为了防止冲突，可以结合单引号灵活使用。
（5）变量名不以数字开头；
（5）document.getElementById('divID').innerHTML += htmlStr? // +=表示追加的内容原值不变
大家也可以去看看我写这篇文章的参考：【前端就业课 第一阶段】HTML5 零基础到实战（十）JavaScript基础一篇入门_1_bit 的博客-CSDN博客