【前端就业课第一阶段】HTML5 零基础到实战（十）JavaScript基础一篇入门_1_bit

大大的周 02-07 3216

注意：手机（APP）打开，内容显示更佳，不会的私聊博主即可想要拿代码或加入学习计划（** 博主会监督你并且教你写文章 **）的拉到最下面（PC端Web打开）加博主即可，目录也在最下面。

参加1_bit博主前端学习计划发文时在头部记得加上本专栏链接，示例如下：

我已加入 1_bit 博主的免费前端站起来学习计划，专栏链接：https://blog.csdn.net/a757291228/category_11609526.html

一、JavaScript 简介

🐶1_bit：这一节咱们开始学习什么是 JavaScript。

👸小媛：什么是 JavaScript 呀？

🐶1_bit：JavaScript 简称 JS，在 Web 中用作用于给整个页面添加一些动态效果，例如动态改变页面某个元素的css属性，或给整个页面添加较为流程的用户体验，基础的 JS 学习一般直接在 web 中嵌入即可。

👸小媛：奥，那么厉害，那赶紧学习吧。

二、JavaScript 基础入门 2.1 JavaScript HelloWorld

🐶1_bit：首先咱们看 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>1_bit 的前端实战课程10 javascript</title> </head> <body> <p id="p_id"> 这里是 p 元素中的内容。 </p> </body> </html>

👸小媛：这个代码不就是直接会显示这段话吗？还有啥功能呢？

🐶1_bit：不急，咱们现在开始添加第一句 JavaScript 代码，改动如下。

👸小媛：这个就是 JS 的代码吗？

🐶1_bit：对的，JS代码添加在标签 <script> </script> 之中，其中以上代码 document.write("HelloWorld"); 指的就是在当前文档中写入一个字符串，这个字符串就是 HelloWorld。

👸小媛：奥，所以 document 指的就是文档，write 就是写入，在 write 圆括号内的双引号中就是指需要写入的内容？

🐶1_bit：是的，其中的小数点是表示 document 这个对象中的一个方法。

👸小媛：什么是对象什么是方法呢？

document 指的就是当前整个文档，文档是一个类，document 指的是当前 html 所以 document 是这个类型的一个对象，也就是具体到某一个事物；类是编程中的一个概念，你可以理解成一个类别。例如显示生活中的电放锅是一个类别，“所有”的电放锅都有做饭和保温的功能，那么此时就可以把这个电饭锅当成一个类型，那么你如果具体到某一个电饭锅，那就是一个对象，你用代码编程的写法来使用电饭锅做饭的功能，那么就可以写成电饭锅.做饭()。

👸小媛：那么这个小数点可以理解成使用某个功能的意思？

🐶1_bit：对的，然后每个功能基本上都需要使用一个圆括号用于接收参数。

👸小媛：那什么是参数呢？

🐶1_bit：参数的意思就是指你做饭的时候可能用的糙米、白米、五常大米等不同种类的米来做饭，这些参数指的就是你需要完成这个功能所需要的原料，那么使用电饭锅做饭的代码就可以写成电饭锅.做饭("白米")。

👸小媛：那水还要加吗？

🐶1_bit：当然要加，所以此时就有两个参数，这两个参数只需要使用逗号分开就可以了，例如示例电饭锅.做饭("白米","泉水")。

👸小媛：原来是这样。

🐶1_bit：对的。所以我们现在回到我们的代码document.write("HelloWorld");之中就可以理解了，document 指的就是 html 文档，write 是这个文档类别对象里面的一个写入功能，其中写入内容那么就需要一个文本来表示你需要写入什么，那么这个文本就是 HelloWorld。

👸小媛：那为什么这个文本需要用双引号引入呢？

🐶1_bit：那是因为在 JS 中规定，双引号用于表示字符串，HelloWorld 是字符串所以需要双引号用来标记。

👸小媛：一定要用双引号吗？

🐶1_bit：对的，不然你怎么知道这个 HelloWorld 是一个类还是一个字符串呢？万一有一个类叫做 HelloWorld 呢？因为这个类在 JS 中是可以自定义的。

👸小媛：原来如此，明白了。

🐶1_bit：那么该代码的最终效果显示如下。

👸小媛：还有一个问题，我的 JS 代码可以换位置吗？

🐶1_bit：可以，你还可以添加多个，例如。

👸小媛：明白了。

2.2 JavaScript 变量及命名

🐶1_bit：在 JavaScript 中还可以添加变量。

👸小媛：什么是变量？

🐶1_bit：你可以理解成一个容器，用于值的存储，可以存储字符串、数字等。

👸小媛：这个容器有什么用吗？

🐶1_bit：例如你在一个页面中，需要知道用户点击了这个按钮多少次，你可以先给予一个变量一个初始值0，每点击一次那么这个变量的值就加1，那么这个变量就可以作为计数了。

👸小媛：感觉想要看一个实例。

🐶1_bit：这个不急，之后咱们会有一个示例的。咱们先学习这个变量怎么用。下面是一个示例代码。

🐶1_bit：以上代码中的 var 表示创建一个变量，那么在之后可以写一个变量名，例如 var i=0; 之中，var 表示变量创建，i 表示变量名称，等于号表示将等于号右侧的值给予到左侧的变量之中，那么此时 i 的值就等于 0了，还要一个注意的点，这一行代码写完后要在末尾添加一个分号，就像语文中的句号一样，表示这一句话已经写完了。

👸小媛：明白了，那之后呢？

🐶1_bit：之后的代码例如 var a=10,b=1,c=11; 表示同时一行创建多个变量，这些变量分别是 a、b、c，其中他们的值都在等于号右侧标记了。

👸小媛：明白了，就是多个变量使用逗号进行分隔对吧？

🐶1_bit：对的。最后一行 document.write(a+b+c); 表示将变量 a、b、c 做加法，最终将会在页面上显示出值 22。

👸小媛：原来是这样，明白了。

🐶1_bit：这就是变量，是一个容器，其中存储的值可以发生改变。当然我们也可以使用一个变量用于存储某多个值的运算结果，例如以下代码。

👸小媛：以上代码直接用 i 存储了三个变量相加然后再进行输出显示？

🐶1_bit：对的，当然字符串也可以进行加法运算，例如如下代码。

🐶1_bit：以上代码 i 是一个字符串变量存储了 Hello，a存储了 XiaoMing，b 存储了一个感叹号，其中 i=i+a+b; 就表示使用加号将这些字符串进行相连，那么最终的显示如下。

👸小媛：原来可以这样呀。

🐶1_bit：对的，你可以想一下，在一个页面之中，要求用户填写一个用户名，用户填写了用户名小明之后，然后点击确定将会出现 “Hello 小明” 字样，就是这样做的，但是现在咱们还没学到如何使用 JavaScript 获取某个 html 元素的值，所以在此处先不做距离，咱们基本上学完基础语法后将会有一个示例大全。

👸小媛：迫不及待了。

🐶1_bit：不过咱们学习了这个变量创建后，有一点还是需要注意一下。

👸小媛：是什么？

🐶1_bit：就是变量起名的时候一定要注意某些规则，因为有时候你若起名一个变量名为 classname 表示一个班级名，那么classname 并不方便阅读，你可以起名为 className 或者class_name ，当然还可以起名ClassName，其中ClassName 和 className 为驼峰命名法（因为像驼峰），而 class_name为下划线命名法，你可以在项目中统一某个命名法方便阅读。

👸小媛：收到。

2.3 运算符

🐶1_bit：接下来咱们来学习一下运算符吧。

👸小媛：加减乘除吗？刚刚不是学过了吗？

🐶1_bit：在编程中 JavaScript 的运算符不止这一些呢，还有很多，例如 +=、%、%= 等运算符都还没学呢。

👸小媛：好勒。

🐶1_bit：首先咱们看看 += 运算符，+= 运算符示例如下。

🐶1_bit：以上代码中 i 等于10，j等于11，那么 i+=j 则与 i=i+j 表达式结果相等，此时只是省略了 i 这个变量出现于在表达式之中。

👸小媛：原来如此，这就是一个简单写法对吧？

🐶1_bit：是的。接下来咱们再看看 % 这个运算符，% 运算符是指取模预算，也就是取余数，例如如下代码示例。

🐶1_bit：以上代码中，i 是11 j 是10，那么 i%j 则表示 11除10之后取余数，那么最终值则是1。

👸小媛：明白了，所以 %= 的意思就是也是取模运算咯？

🐶1_bit：对的，这个不难吧？

👸小媛：哈哈哈，挺简单的。

🐶1_bit：咱们还可以写成 *=、-= 等，这些都和 += 类似。

👸小媛：明白了。

🐶1_bit：以上的代码中不止只有变量和变量之间进行运算，还可以在其中添加对应的值，例如以下示例。

👸小媛：知道了。

🐶1_bit：现在咱们再介绍两个运算符，++和- -。

👸小媛：这是啥。

🐶1_bit：咱们先看一个示例。

🐶1_bit：其中 ++i 中的 ++ 表示当前这个变量值加1，那么此时在 write 方法中，++i 就表示当前值加 1，那么输出为 1。

👸小媛：然后第二行输出是减减（–）所以就为0？

🐶1_bit：对的，为了方便观看，咱们使用加号与 <br/> 换行标签进行链接，所以第一行显示 1 第二行显示 0，这个没问题吧？

👸小媛：没问题，那为什么下一行这个++放到了变量 i 的后面？

🐶1_bit：那是因为 ++ 放前面表示先进行运算变量 i 增值，再执行 write 输出方法，如果 ++ 放到变量之后将会先执行 write 方法先显示内容再执行 i++操作，那么第三行就显示为0，因为此处写的是 i++，使用括号是为了让你能够方便的查看。

👸小媛：明白了，所以第四行虽然没做什么操作，但是依旧显示了1？

🐶1_bit：对的，所以第五行执行了会显示 1，最后一行没什么操作则显示了0。

👸小媛：明白了。

🐶1_bit：咱们还有很多对应的运算符，这些不再解释，若有需要则去查看对应的运算符即可。

2.4 条件判断

🐶1_bit：接下来咱们学习 if 判断。

👸小媛：这个判断有什么用呢？

🐶1_bit：这个判断可是有大用，编程中判断是非常常见的；例如在判断用户是否已成年、是否购买过某些商品这些都是需要用判断来实现；在JavaScript中判断使用 if 语句。

2.4.1 if 基础与表达式

👸小媛：那怎么写呢？

🐶1_bit：你先看看下面的示例。

🐶1_bit：此时创建了一个变量 i，这个变量 i 的值为 10，接着使用 if 判断这个 i 的值是否大于某一个值。if 的语法很简单，if 是对一个的关键字，在 if 后接上一对圆括号，在圆括号中写上对应的表达式，这个表达式的为 i>=18。

👸小媛：什么是表达式呢？

🐶1_bit：你可以简单理解为表达式则是数值与符号的组合，它是一个式子，这个式子具有一个最终的值，是有意义的。

👸小媛：所以关键点就是说是否具有最终值？

🐶1_bit：对的，如果你乱写一通基本上是没有最终值的，在此处 i>=18 就是一个表达式，其中判断 i的值是否大于关于 18，如果大于等于将会判断为真，整个表达式的最终值就是“真”，使用 true 表示。

👸小媛：那如果判断错误呢？

🐶1_bit：判断错误就是最终值为假，使用 false 表示。

👸小媛：所以 true 的意思就是真，false 的意思就是假？

🐶1_bit：对的，在 if 语句中，如果判断为真，那么就执行if 语句圆括号后花括号中的语句内容，在以上代码中，花括号中的代码是 document.write("已成年");，那么将会执行这一段代码，在网页中显示。

👸小媛：那在此处 i 的值为 10，明显是不大于18的那将会怎样呢？

🐶1_bit：那么将会什么都不执行。

2.4.2 if else

👸小媛：感觉一点不怎么灵活呀。

🐶1_bit：如果你想在这个条件判断后显示未成年的话，那么只需要添加一个分支语句 else 即可，例如如下代码示例。

🐶1_bit：此时将会显示未成年。

👸小媛：你的意思是说，如果if 语句里面的条件判断错误，那么将会执行 else 部分的内容？

🐶1_bit：对的。else 是关键字，对应后面的花括号中的代码将会在条件判断错误后执行，组中将会显示未成年。 👸小媛：明白了。

2.4.3 逻辑与

🐶1_bit：其中咱们的 if 语句还可以更加灵活的进行判断，例如编写一段代码，判断这个人是否购买了面包和蔬菜，如果购买了那么将会显示得到一个优惠券，那么此时可以写成如下示例。

👸小媛：咦？那个&&是什么？

🐶1_bit：这个&&是逻辑与运算符，表示左右两边的条件是否同时成立。 🐶1_bit：其中左边是一个表达式，右边也是一个表达式，当表达式使用 && 逻辑与运算符进行连接那么就表示左右两边的表达式都要同时为真，那么整个表达式 i==1&&j==1 最终值才正确。

👸小媛：意思说我只有一个表达式对的时候，例如 j 的值为 0，那么这个表达式就不正确了？即时 i 的值为 1？

🐶1_bit：对的，在这里我用 i 表示面包、j用来表示蔬菜，其中数值1表示是否购买，那么i和j的值都为1则表示都购买，此时表达式内容才为真。

👸小媛：明白了，所以最终将会显示获得优惠券。

2.4.4 逻辑或

🐶1_bit：除了逻辑与之外还有一个逻辑判断符号叫做逻辑或“||”，这个逻辑或与逻辑与运算符不一样，逻辑或只需要左右两边的表达式其中一个为1，那么整个表达式则判断成功，例如如下示例。

🐶1_bit：此时 j=0 整个表达式都将判断正确。

👸小媛：明白了，也就是说有一个对了就等于完成任务了

2.4.5 逻辑混合

🐶1_bit：对的，逻辑与和逻辑或都是逻辑运算符，它可以链接多个逻辑运算，例如如下示例。

👸小媛：那这个怎么算的呢？

🐶1_bit：多个逻辑运算符我们记得只需要默认从左到右进行运算即可，先计算i==1&&j==1若等于true，那么此事表达式就是true&&k==1，true表示正确，那么只需要判断k是否等于1那么将会完成整个式子的判断。

👸小媛：原来是这样呀，所以再多的逻辑判断也是这样咯？

🐶1_bit：对的。咱们还可以使用逻辑或和逻辑与进行混合的逻辑运算，例如如下示例。

👸小媛：咦？这个怎么算的？我有点懵圈了。

🐶1_bit：这个其实也很简单，首先从左往右，第一个表达式是 i==1||j==1，此时 i值是1，j值是0，那么在判断j值是否等于1时则无关紧要，因为这两个表达式中间使用的是逻辑或表达式，只需要其中有一个表达式在正确即可，所以i==1||j==1表达式最终值为 true，接下来表达式就写成 true&&k==1，其中k值是1，那么整个表达式 true&&k==1 判断正确，最终只需要和 f==1 表达式进行逻辑或运算即可，此时表大会为 true||f==1，那么最终值则为真，将会执行代码 document.write("购买了蔬菜、面包、酱油或玉米获得优惠券");。

👸小媛：明白了，原来刚开始需要慢慢的对这些表达式进行分析。

2.4.6 if elseif

🐶1_bit：接下来咱们再看看 if 语句的其他语法。

👸小媛：if 语句还有其他语法？

🐶1_bit：对的，例如一个用户填写了他孩子的岁数，对应的需要进行不同的商品推荐，此时就可以使用 else if语句。

👸小媛：这个怎么写呢？

🐶1_bit：这个编写起来不难，例如如下示例。

👸小媛：else if 后的圆括号是条件吗？

🐶1_bit：是的，首先判断 age 是不是等于1，若条件成立，那么将会执行 age==1 后的代码，其他条件下的代码将不会执行；若条件不成立，那么将会跳到 else if 语句中从上往下对条件进行判断，判断 age ==2 不成立则会再判断 age==3，若 age==3 条件成立，那么将会执行 age==3 的 else if 判断后花括号中的代码内容，其他条件不再进行判断；若所有条件都不成立，那么将会执行 else 部分内容。

👸小媛：原来是这么回事呀，不过你确定判断是否相等是使用两个等于号进行判断？

🐶1_bit：在 JavaScript 中，两个等于号是判断是否相等的。

👸小媛：明白了。

🐶1_bit：还有一点需要注意，咱们对数值进行判断，不一定是要写13之类的数字，你可以将这些数值放到一个变量之中进行判断，例如 a==b 这些写。

👸小媛：了解了。

2.4.7 if 嵌套

🐶1_bit：咱们现在还需要了解一下，if 语句是可以进行嵌套的，例如一个 if 语句之中嵌套了另外一个 if 语句，并且嵌套的 if 语句是有分支的，这些都是可以的。

👸小媛：举个例子看看？

🐶1_bit：例如如下示例。

👸小媛：那还可以继续往里面嵌套吗？

🐶1_bit：可以的，但是不是很建议这样做，不然你会看眼花的。

👸小媛：明白了。

2.4.8 switch 语句

接下来再看一个判断语句。

还有吗？

对的，还有一个是 switch 语句，不过大部分的判断都可以使用 if 语句完成，不过 switch 肯定也要进行学习。

两者有什么区别吗？

你可以理解switch 为对某些条件的语句进行分支，做这一类需求是较为方便，就像菜单一样，例如如下示例。

这个代码看起来跟之前的不是很一样呀？

对的，switch 语句还是有些却别的，在 switch 后的圆括号中填写的是一个值或变量，这个值或变量只要与switch 代码块中 case 后的值相等，就对应的执行相应步骤的代码。

意思说 day 等于 6 就执行 case 6 这个部分的代码内容？

对的，其他的则不会执行。

那 default 部分是默认的意思吗？

default 部分表示当所有的casa 值都没有对应时将会执行该部分的代码。

那 break 又是啥？

break 是跳出的意思，例如如果你的 day 值是3，你在 case 3、4、5 时都没有使用break，此时将会执行 case 3、4、5、6 的内容，如果你想保证正确就一定要加上 break，当然除非你故意这样做。

我刚刚试了一下，如果我删除了 3 4 5 的 break，最终将会执行到有 break 的 case 部分为止。

对的，所以这点要注意。

所以我总结一下，这个 switch语句的语法就是 switch后就是一个表达式或值，接着在对应花括号内写上写上 case 和对应的值，接着一个冒号后就是对应的代码内容，在最后一句加上 break 即可完成，最后就是 default ，它是所有条件不对时执行的部分，也就是等于跟 if 语句的 else 一样？

对的，理解的不错。

2.5 函数 2.5.1 基础函数

🐶1_bit：接下来咱们开始学习 JavaScript 的函数。

👸小媛：是数学中的函数吗？

🐶1_bit：其实函数你可以理解为一个功能，不严谨的说，函数你可以当成是方法，也就是之前说的一个功能。

👸小媛：不是很理解。

🐶1_bit：你可以理解为我们在做一个需求时需要有一个功能是将两个字符串连接起来，例如用户输入一个用户名，咱们就对他打招呼；这个需求就可以写成一个函数，函数在 JavaScript 中是可以进行调用的，也就是说可以多次重复使用的；若你在写 JavaScript 代码时，经常会使用到一段重复的代码，这个代码恰巧是一个功能，那么你就可以写成一个函数重复使用他，这样的话就可以不用重复的打这一段代码了，就非常方便。

👸小媛：哇，感觉好处挺大的，但是还不懂怎么写。

🐶1_bit：那咱们就开始弄一下示例吧。

<!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>1_bit 的前端实战课程10 javascript 02</title> </head> <body> <script> function HiUser(){ document.write("Hi"); } </script> </body> </html>

👸小媛：我运行这一段代码怎么页面是空白的啥都没有？

🐶1_bit：那是因为这是一个函数，咱们在这里只是创建（定义）好了，但是并没有使用他。

👸小媛：原来如此。

🐶1_bit：在使用前咱们先看看这个函数怎么创建吧。

👸小媛：好的。

🐶1_bit：首先我们看到函数的代码是。

function hiUser(){ document.write("Hi"); }

🐶1_bit：其中 function 是表示我在这里创建一个函数，就跟创建变量的 var 作用类似，表示开始进行对应功能的创建，接下来后面的 hiUser 则表示这个函数的名称，后面是一对圆括号和花括号，在花括号中则是对应这个函数的代码。函数中对应的代码则是这个函数的功能。

👸小媛：所以这个代码的功能就是输出一个 Hi 吗？

🐶1_bit：对的。

👸小媛：那怎么使用呢？

🐶1_bit：使用也很简单，只需要在JavaScript 代码中使用这个函数名后加一个圆括号就可以了。

👸小媛：喔，原来如此，明白了。

2.5.2 函数参数

🐶1_bit：其实咱们还可以传递参数进行显示，例如你传递一个用户名，然后对某个用户名进行打招呼都可以。

👸小媛：咱么做？

🐶1_bit：你看看下面的示例。

👸小媛：所以 “XiaoMing” 就是一个作为字符串传进去 hiUser 函数的参数？

🐶1_bit：是的，XiaoMing 参数传到 hiUser 函数后，将会存储到 username 变量中，那么将会执行 document.write("Hi "+username); 代码，由于 username 值是 XiaoMing ，那么最终将会显示 Hi XiaoMing。 👸小媛：明白了。多个参数只需要逗号进行分隔就可以了吗？

🐶1_bit：现在还不行，因为咱们还需要在函数中进行更改，你想这个函数接收两个参数，那么就需要在函数中写两个变量对值进行接收。

👸小媛：所以在函数接收值后，username 就等于了 XiaoMing，而 word 就等于了 666！，然后再将两者进行输出显示？

🐶1_bit：是的，最终值如下。

2.5.3 函数返回值

🐶1_bit：其实函数还有返回值。

👸小媛：什么是返回值？

🐶1_bit：返回值就像你用电饭锅做饭，电饭锅是一个功能，你传入的米和水是参数，那么最终电饭锅将会给热腾腾的米饭给你，这个米饭就是最终的返回值。

👸小媛：哇，那怎么做呢？

🐶1_bit：你看下面示例。

🐶1_bit：以上代码中，hiUser 中的代码改变成了 return username+word;，其中 return 则是表示返回的意思，return 右侧就是需要返回的值；当代码运行到此处后，将会把 username+word 的运算结果返回出来；我们再看代码 var histr=hiUser("XiaoMing"," 666!");，此时传入了两个参数，并且创建了一个变量 histr，histr 的值则等于 hiUser("XiaoMing"," 666!")，那么在此处就说明 hiUser("XiaoMing"," 666!") 会有一个返回值进行返回，值返回后将该值存储到 histr 变量之中，最终使用代码进行输出显示 document.write(histr);。

👸小媛：原来是这么回事呀。

🐶1_bit：对的，由于 hiUser("XiaoMing"," 666!") 有返回值，则表示这个函数调用本身就是一个值，那么可以直接将代码写成如下形式。

👸小媛：奥，明白了，因为本身有返回值，所以等 hiUser("XiaoMing"," 666!") 返回值后可以直接输出内容。

🐶1_bit：是的。现在咱们学习了方法后，可以对整个网页元素进行简单的动态调整了。

👸小媛：真的吗？

🐶1_bit：对的。

2.6 事件及函数

🐶1_bit：你还记得之前我跟你讲的，点击按钮后可以使用变量对其计数，判断点了多少次按钮吗？

👸小媛：记得，现在要做了吗？

🐶1_bit：对的，不过咱们还要知道什么是事件。

👸小媛：事件是什么？

🐶1_bit：事件就是一件事，在网页中，当你点击按钮的时候就触发了一个事件，这个事件可以通过响应一个对应的函数执行某些代码。

👸小媛：举个例子吧。

🐶1_bit：以下代码就是事件响应函数的一个示例代码。

<!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>1_bit 的前端实战课程10 javascript 02</title> </head> <body> <button onclick="clickf()">这是一个按钮</button> <script> function clickf(){ alert("我点了按钮"); } </script> </body> </html>

🐶1_bit：我们可以看到在 html 代码中添加了一个按钮，这个按钮写上了一个 onclick 属性，onclick代表着点击，并且赋值为 “clickf()”，那么则表示点击后将会调用clickf() 函数，执行对应的内容。

👸小媛：那在这里的代码中 alert("我点了按钮"); 是什么意思？

🐶1_bit：alert是一个系统自带的函数，表示弹窗，其中传入的文本则是弹窗所显示的内容。 👸小媛：原来是这样的呀，明白了。

🐶1_bit：我们还可以直接把弹窗的代码写到 onclick 对应的值中。

<button onclick='alert("我点了按钮");'>这是一个按钮</button>

👸小媛：这样可以执行吗？而且你用了单引号？

🐶1_bit：在 JavaScript 中单引号和双引号都可以表示值和字符串，在这里如果我使用了双引号，那么将会与其中的 alert 弹窗所需要显示的文本发生冲突，因为双引号这些都是成对存在的，为了防止冲突，在此我使用了单引号。

👸小媛：明白了，如果是双引号那么值钱的 alert 就成了一个字符串了。 🐶1_bit：对的，所以防止这个情况还是使用单引号为好。回到刚刚的案例，我们可以看出，在 onclick 内可以直接执行JavaScript 的代码，但是并不方便，所以能写函数就写函数，如果实在没必要写也可以直接在 onclick 内部直接写上代码。

👸小媛：明白了，现在开始教那个记录点击数的方法吧。

🐶1_bit：这个很简单，不过咱们还需要明白一个变量作用域的概念。

👸小媛：什么是变量作用域。

🐶1_bit：咱们先看看以下示例。

<body> <button onclick="clickf()">这是一个按钮</button> <script> function clickf(){ var times=0; times++; alert(times); } </script> </body>

🐶1_bit：在函数 clickf() 内，times 变量定义为 0，每次执行 times++; 代码使其变量值加1，随后使用 alert 对值进行显示；你觉得这个逻辑有问题吗？

👸小媛：应该没啥问题吧？

🐶1_bit：那你把这个代码拿去运行看一下。

👸小媛：为什么我每次点击后都是弹出 1 呢？

🐶1_bit：那是因为每次在这个函数之中都会执行代码 var times=0;，接下来再加 1 肯定都是 1 了。

👸小媛：竟然是这个原因，那怎么改呢？

🐶1_bit：还需要吧这个 var times=0; 放在外部就可以了，放在外部就表示是一个全局变量，所有的函数都可以对其进行访问，就如下代码所示。 🐶1_bit：你再试试？

👸小媛：成功了，哈哈哈，可以一直加了。 🐶1_bit：那么接下来咱们再做一些好玩的。

👸小媛：啥好玩的？

🐶1_bit：咱们来动态的改变某些元素的属性，例如 html 内容。

👸小媛：这么利害的吗？怎么玩？

🐶1_bit：先看一下代码，我等下给你道来。

<body> <button onclick="change()">改变下面这个空的DIV容器内容</button> <div id="divID"> </div> <script> function change(){ htmlStr='<h1>这里是改变的内容</h1><p>真的是太容易了<span style="color: red;">呀</span></p>' document.getElementById('divID').innerHTML = htmlStr } </script> </body>

🐶1_bit：我们可以看到按钮的 onclick 事件绑定的是 change 函数，当点击按钮后将会执行改函数，在函数中，创建了一个 htmlStr 变量，这个变量的值是一串 html 代码，接下来将会使用 document 对象调用 getElementById 函数完成接下来的任务。

👸小媛：那 getElementById 函数是什么用呢？

🐶1_bit：getElementById 函数可以通过 ID 获取到对应的 html 文档的节点，例如在这里传入了 div 的ID 值作为参数，将会取到当前节点对象，随后的 innerHTML 则表示当前 div 节点的 html 元素值，这里使用了等于号对其赋值，那么就表示将会用新的值覆盖掉之前的值，最终点击之后显示结果如下。 👸小媛：原来如此，那之前本来有值，点击该按钮如何进行追加？

🐶1_bit：还记得 += 运算符吗？

👸小媛：记得，a+=j 就等于 a=a+j。

🐶1_bit：对的，在此咱们也可以这样做。

<body> <button onclick="change()">改变下面这个空的DIV容器内容</button> <div id="divID"> <h1>这里是老旧的值</h1> <p>这是<span style="color: red;">旧</span>的值</p> </div> <script> function change(){ htmlStr='<h1>这里是改变的内容</h1><p>真的是太容易了<span style="color: red;">呀</span></p>' document.getElementById('divID').innerHTML += htmlStr } </script> </body>

👸小媛：真的耶，点击按钮后不会发现改变，而且我一直点一直都会新增元素。

🐶1_bit：那接下来咱们来做个阶梯如何？

👸小媛：啊？！阶梯怎么做？

2.7 循环 2.7.1 for 循环基础

🐶1_bit：那咱们现在得学一个叫做循环的知识点。

👸小媛：循环是啥？

🐶1_bit：循环可以帮助我们重复执行类似的代码，并且你可以动态的更改一些内容使其更加灵活。

👸小媛：可以先简单的举个例子吗？

🐶1_bit：例如你想显示10次“我来了”三个字，那么不需要写上次 write，也不用写十个 p 标签，你可以直接用 js 代码写成如下形式。

🐶1_bit：以上代码中，for 表示循环，在其后的圆括号内是 var i=0;i<10;i++，其中 var i=0 指的是创建一个变量 i等于0，随后一个分号结束；接下来是 i<10，指的是当前循环体（也就是花括号中的代码）只有在满足当前条件才能够进行循环；最后是 i++，每次循环变量 i 的值就加 1。该循环的圆括号内包含了变量的值的初始化、条件以及步长，其中步长指的就是 i++，每次循环1次该变量就会加1；执行顺序是先执行初始化，初始化只在整个循环开始时执行一次，接着每次循环是都会判断 i<10 是否成立，接着将会执行 i++，这个 i 也被成为循环控制变量，指的是控制整个循环次数的变量，若你将 i++ 变成 i+=2，那么该循环的次数就会发生改变。

👸小媛：大概明白了，不过循环到底是啥意思我还没搞清楚。

🐶1_bit：在以上代码中，for 循环会自动的重复执行花括号中的代码，每次执行 i 就加 1，执行多次后 i 必将大于 10，大于 10 后循环将会停止，那么则不会继续执行。

👸小媛：嗷，明白了，原来是这个意思。

🐶1_bit：那么你刷新页面将会发现十个“我来了”就出现了。

2.7.2 for 循环做阶梯

👸小媛：那怎么做阶梯呢？

🐶1_bit：这个很简单，咱们直接上代码。

<body> <h1>开始做阶梯</h1> <button onclick="step()">点击增加阶梯</button> <div id="divID"> </div> <script> var times=0;//次数 function step(){ times++; htmlStr='■';//阶梯样子 for(var i=0;i<times;i++){ document.getElementById('divID').innerHTML += htmlStr; } document.getElementById('divID').innerHTML +='<br/>';//加完阶梯记得换行 } </script> </body>

👸小媛：哇，好复杂啊。

🐶1_bit：其实一点都不复杂，咱们可以看一下，首先<button onclick="step()">点击增加阶梯</button>代码为一个按钮的代码，对应的 onclick 事件绑定为 step，接着下面的 JavaScript 代码中，首先创建了一个全局变量 times 用于记录按钮点击次数，随后是一个 step 函数，这个函数中 times 每次在该函数执行时都会加 1，接着创建一个 htmlStr 变量赋值为一个方块（可以省略 var 不写），用于等下阶梯的循环输出，接下来开始 for 循环，在 for 循环中重点查看条件 i<times，在此处表示点几下创建多少个方框，也就是循环的代码 document.getElementById('divID').innerHTML += htmlStr 将会执行多少次，每次执行都会在对应的 div 中增加多少个方块，但是方块不换行将会是一条直线，所以在循环执行完毕后在循环外对 div 中添加一个换行标签，所以代码写成 document.getElementById('divID').innerHTML +='<br/>';。

👸小媛：原来是这样，明白了，我运行了一下，果真如此。

🐶1_bit：看吧，阶梯做出来了吧。

👸小媛：对了，那个双斜杆就是注释吧？用来解释说明这一段代码的作用？

🐶1_bit：对的，这个注释在执行时并不会当作成代码。

三、变量及作用域

🐶1_bit：之前我们将了变量是用来存储值的容器，那么你知道什么是作用域吗？

👸小媛：懂的话就不是你教我了。

🐶1_bit：变量的作用域值的是这个变量的作用范围，或者你可以理解为生效范围。

👸小媛：变量还有作用范围？

🐶1_bit：对的，就像你家里面有一个密码箱，里面装了你最宝贵的东西，那么这个时候你邻居可以拿你的密码箱用吗？

👸小媛：当然不行了。

🐶1_bit：所以这就是作用域的概念，在 JavaScript 中变量作用域就是指这个变量能够作用的范围“空间”，否则你乱用不是你作用域的变量将会出错的。

👸小媛：奥，明白了，那怎么能够看出来这个作用域是哪里可以用哪里不可以用吗？

🐶1_bit：那接下来我们就学习如何查看作用域的范围。

3.1 变量 let 和 var

🐶1_bit：之前咱们学习了声明创建一个变量使用 var 关键字，一般来说咱们使用 var 用于创建全局变量，而 let 用来创建局部变量。

👸小媛：这是什么意思呢？

🐶1_bit：首先咱们可以看一下以下示例。

<body> <script> { var v=10; } { let c=11; } document.write(c); </script> </body>

👸小媛：为什么创建变量之外还有一个花括号？

🐶1_bit：这是为了让你区分这个 var 和 let 的区别。刚刚有说 let 使用与定义局部变量，在代码示例中， let c 遍历创建处就等于了一个“局部”，与外面进行隔离，此时你再输出变量 c 的内容是输出不了的，但是可以输出 var。

👸小媛：你的意思是说使用了 let 就等于加了一把锁，锁住了这个 let 的活动空间？

🐶1_bit：对的，是这个意思。

3.2 作用域

🐶1_bit：咱们再看一下下面的这个代码。

<body> <script> var a=10; function test(){ let b=11; if(a==10){ document.write(a+b); }else{ document.write(b); } } test(); </script> </body>

🐶1_bit：在这个代码中首先在最外侧创建了一个变量 a，在这里相当于这个变量 a 是一个全局变量，接着创建了一个函数 test，在函数内部使用 let 创建了一个局部变量，接着使用 if 语句判断变量 a，如果 a 等于10，那么将会输出 a 加 b 的和，否则将会直接输出 b 的值；最后直接使用 test() 调用函数，最后我们刷新一下这个页面，发现显示出了值为 21，说明 a 值在函数内部也可以去得到。

👸小媛：那代码写成以下的情况呢？

<body> <p>这里是 html 内容</p> <script> var a=10; </script> <p>这里是 html 内容</p> <script></script> function test(){ let b=11; if(a==10){ document.write(a+b); }else{ document.write(b); } } </script> <p>这里是 html 内容</p> <script> test(); </script> </body>

🐶1_bit：放心，这个也是没问题的，在这里 html 和 JavaScript 是分开的，实际上他们两个是单独存在的。

👸小媛：奥，原来是这样。

四、数组 4.1 什么是数组

🐶1_bit：接下来咱们来看一下数组。

👸小媛：什么是数组？

🐶1_bit：数组就是数据集合的意思，在之前的学习变量中，我们可以得知，变量是存储一个值的容器，那么在数组就是可以存储多个值的容器。

👸小媛：哇，我明白了，那数组怎么存值呢？

🐶1_bit：这个很简单，例如我们创建一个存储名字的数组就写成如下代码。

<body> <script> var arr=["Mr L","Xiaohong","W Wei"]; </script> </body>

👸小媛：就是多个值用逗号进行分隔？

🐶1_bit：对的，这些值还可以存储为不同类型的数据，例如如下示例。

<body> <script> var arr=["Mr L","Xiaohong",11,"W Wei"]; </script> </body> 4.2 数组访问及取值

👸小媛：那这些值怎么用呢？

🐶1_bit：数组使用非常简单，你想取第一个字就可以写成。

<body> <p id="pID"></p> <script> var arr=["Mr L","Xiaohong",11,"W Wei"]; document.getElementById("pID").innerHTML = arr[1]; </script> </body>

👸小媛：那为什么我显示的时候是 Xiaohong 呢？

🐶1_bit：那是因为在编程中，数组的值是从 0 开始数的，例如你想取 Mr L 那么需要在 arr 后的方括号中写上 0 就可以了。

👸小媛：明白了，所以取一个数组值那么就是一个数组名加上一对方括号，在方括号内写上对应的数值就可以了？

🐶1_bit：对的是这样的，但是要注意数值不能够超过这个数组内元素的个数，这个个数成为数组长度。

👸小媛：明白了。

🐶1_bit：你也可以通过这个索引对数组的值进行更改。

<body> <p id="pID"></p> <script> var arr=["Mr L","Xiaohong",11,"W Wei"]; arr[2]=90; document.getElementById("pID").innerHTML = arr[2]; </script> </body>

👸小媛：收到。

4.3 数组与循环

🐶1_bit：数组和循环其实是一堆好搭档。

👸小媛：啥？

🐶1_bit：就是他俩可以搭配使用很方便。

👸小媛：怎么说？

🐶1_bit：例如在做一个网站时，网页的中的一些数据可能是需要后端传递过来，那么这些数据有时候是以数组的格式呈现，换句话说就直接存在了数组之中，那么你在前端需要把这些数据进行显示（例如某一个网站的热门文章），那么你需要一个个去进行手动取到吗？

👸小媛：感觉很麻烦。

🐶1_bit：对的，所以咱们就可以使用循环对这些数据进行遍历，这样就可以得到对应的数据了。

👸小媛：怎么做呢？

🐶1_bit：很简单，你看下面示例。

<body> <p id="pID"></p> <script> var arr=["Mr L","Xiaohong",11,"W Wei"]; for(let i=0;i<arr.length;i++){ document.getElementById("pID").innerHTML += arr[i]+','; } </script> </body>

🐶1_bit：输出结果如下。 👸小媛：咦？在循环中我发现你是用了 let 创建了 i 这个局部变量？

🐶1_bit：对的，活学活用。

👸小媛：那那个 arr.length 是啥意思呢？

🐶1_bit：其实这个就是取得当前数组长度的意思，其实类和对象这个概念贯穿于整个 JavaScript，不过这个是接下来说的知识点，在此就先不将，你只需要知道 arr.length 就是得到当前数组的长度就ok了。

👸小媛：明白，所以最后面的 arr[i] 该怎么理解呢？

🐶1_bit：你想想，这个 i 值每次都会加1，但是肯定不会超过当前数组的长度，那么从0加到数组长度为止，这个 i 值的变化就是 0…1…2…3…这样放到 arr[] 中不就是在取值吗？

👸小媛：对哟，原来是这样，明白了。

4.4 数组增删值

🐶1_bit：数组还可以很快的删除最后一个元素，例如如下示例。

👸小媛：是使用 pop 方法吗？

🐶1_bit：对的，直接使用 pop 即可对数组末尾的元素进行删除。

👸小媛：那删除首个元素用什么呢？

🐶1_bit：用 shift()，例如如下示例：

<body> <p id="pID"></p> <script> var arr=[23,101,"XM",31,"XL",54]; arr.shift(); for(let i=0;i<arr.length;i++){ document.getElementById("pID").innerHTML += arr[i]+','; } </script> </body>

👸小媛：那新增呢？

🐶1_bit：新增使用 push()。

👸小媛：那肯定就还有开头新增元素的。

🐶1_bit：对的，在数组开头新增元素使用unshift()。

<body> <p id="pID"></p> <script> var arr=[23,101,"XM",31,"XL",54]; arr.unshift("新增元素"); for(let i=0;i<arr.length;i++){ document.getElementById("pID").innerHTML += arr[i]+','; } </script> </body>

🐶1_bit：除了这些简便的方法，JavaScript 还有更多的使用方法，在此不一一做讲解，在之后的实战中将会说明。

👸小媛：明白了。

五、对象

🐶1_bit：在 JavaScript 中对象是很关键的一个概念，你还记得之前有说类和对象这个知识点吗？

👸小媛：还记得。

🐶1_bit：例如咱们在制作一个网页游戏时，你会发现有很多不同类似的 NPC 人物，这些人物都是想不多的属性，有的可能头发长、有的头发短、有的大眼睛有的小眼睛…这些人物很多属性可以通过代码进行编辑，那编辑一个角色需要从头到尾都打一遍重复的代码吗？

👸小媛：你是说例如制作一个人需要打代码，那么很多个人很多代码是相同的，如果要打那么多代码就累瘫了？

🐶1_bit：对的，所以类就可以很方便的为我们对这一类相同属性的对象进行工作。例如我创建一个类，他们有名字、发色、年龄、性别信息，以后需要创建一个人，那么就表示他是属于人这个类型的数据，那么表示这个变量是人之后，这个变量就赋予了人这个类型的属性，就不需要一而再再而三的打代码了。

👸小媛：怎么做呢？

🐶1_bit：你看下面代码。

<body> <p id="pID"></p> <script> class Human { name=''; sex=''; age=0; } var XiaoMing=new Human(); XiaoMing.name='小明'; XiaoMing.sex='男'; XiaoMing.age=12; document.write(XiaoMing.name+XiaoMing.sex+XiaoMing.age); </script> </body>

👸小媛：我迷糊了。

🐶1_bit：首先我们看 class。 🐶1_bit：class 表示一个类开始创建，其后接着的是一个类名，接着就是一堆花括号，花括号中就是这个类所对应的属性。

👸小媛：所以这样就是创建一个人有这些类型了？

🐶1_bit：对的。

👸小媛：接着咱们往下看。

🐶1_bit：我们可以看到，var Xiaoming 在不看后面其后面代码时表示创建了一个变量，而 new Human 表示创建一个类，这是表示 XiaoMing 这个变量存储的值是一个 Human 类的一个对象，那么 XiaoMing 这个变量就有了 Human 这个类的属性。

👸小媛：原来是这个意思。

🐶1_bit：所以揭晓来可以使用小数点对其属性进行调用，并且赋值，最后进行了输出。

👸小媛：明白了，那还可以创建多个对象吗？

🐶1_bit：当然可以，例如下面示例。

<body> <p id="pID"></p> <script> class Human { name=''; sex=''; age=0; } var XiaoMing=new Human(); XiaoMing.name='小明'; XiaoMing.sex='男'; XiaoMing.age=12; var XiaoHong=new Human(); XiaoHong.name='小红'; XiaoHong.sex='女'; XiaoHong.age=12; document.write(XiaoMing.name+','+XiaoMing.sex+','+XiaoMing.age+'<br/>'); document.write(XiaoHong.name+','+XiaoHong.sex+','+XiaoHong.age+'<br/>'); </script> </body>

👸小媛：哇，这样就很方便了。

🐶1_bit：除了对应的属性外，咱们还可以对这个类型创建方法，也就是类函数。

👸小媛：还可以这样吗？

🐶1_bit：当然可以，例如人类还可以进行说话，所以咱们在内部创建一个方法叫做 say。

<body> <p id="pID"></p> <script> class Human { name=''; sex=''; age=0; say(){ document.getElementById("pID").innerHTML += 'Hi '; } } var XiaoMing=new Human(); XiaoMing.name='小明'; XiaoMing.sex='男'; XiaoMing.age=12; XiaoMing.say(); var XiaoHong=new Human(); XiaoHong.name='小红'; XiaoHong.sex='女'; XiaoHong.age=12; XiaoHong.say(); document.write(XiaoMing.name+','+XiaoMing.sex+','+XiaoMing.age+'<br/>'); document.write(XiaoHong.name+','+XiaoHong.sex+','+XiaoHong.age+'<br/>'); </script> </body>

🐶1_bit：当然我这样写是不规范的写法，你可以直接使用 return 返回这个 hi 字符串即可，在此只是为了做一个示例。

👸小媛：明白了，看来很方便呀。

🐶1_bit：对的，咱们还可以使用循环遍历这个对象的属性。

👸小媛：for 循环里面使用一个 in 就可以访问其属性了呢？

🐶1_bit：这个 in 就表示 k 值进去 XiaoMing 这个对象里面去找到对应的属性值，而 XiaoMing[k] 则是数组的写法，其中 k 将会依次得到期属性 name、sex 以及 age，那么 XiaoMing[k] 就会等于 XiaoMing[name]、XiaoMing[sex]、XiaoMing[age]，这样既可取到对应的值。

👸小媛：哇，这个就跟数组一样，对的，但是遍历不会将方法也给输出，明白了。

🐶1_bit：在 JavaScript 中还有一个对象数组，例如如下示例。

<body> <p id="pID"></p> <script> var data = {name:"XiaoMing", age:18, height:162}; for(let k in data){ document.write(k+':'+data[k]+' '); } </script> </body>

👸小媛：哇，这样就是给值添加了一个索引，这样我就知道了这个值是什么数据了？

🐶1_bit：对的，记得，这个跟数组有区别，在 JavaScript 中这种键值对的数组是使用花括号中引入值的，这个一定要注意，并且是是一对一对的，一个值跟索引之间使用冒号分隔。

👸小媛：明白了。

【前端就业课第一阶段】HTML5 零基础到实战（十一）canvas 基础【前端就业课第一阶段】HTML5 零基础到实战（十）JavaScript基础一篇入门【前端就业课第一阶段】HTML5 零基础到实战（九）列表【前端就业课第一阶段】HTML5 零基础到实战（八）表单详解【前端就业课第一阶段】HTML5 零基础到实战（七）文字及图片样式【前端就业课第一阶段】HTML5 零基础到实战（六）表格详解【前端就业课第一阶段】HTML5 零基础到实战（五）基础元素【前端就业课第一阶段】HTML5 零基础到实战（四）伪类与伪元素【前端就业课第一阶段】HTML5 零基础到实战（三）一篇文CSS基础入门【前端就业课第一阶段】HTML5 零基础到实战（二）超链接【前端就业课第一阶段】HTML5 零基础到实战（一）基础代码结构详解