Loading... 来自：柠檬有时不酸 # Day01 ## 1.javaScript介绍 ### 1.1javaScript是什么 #### 1.1.1定义 是一种运行在客户端（浏览器）的编程语言，实现人机交互的效果。 #### 1.1.2作用 ——网页特效（监听用户的一些行为让网页做出对应的反馈） ——表单验证（针对表单数据的合法性进行判断） ——数据交互（获取后台的数据，渲染到前端） ——服务端编程（node.js) #### 1.1.3组成 两部分：ECMAScript Web APls 三部分：ECMAScript DOM BOM **ECMAScript:** 规定了js的基础语法核心知识。（比如：变量、分支语句、循环语句、对象等等） **Web APls:** DOM ：操作文档，比如对页面元素进行移动、大小、添加删除等操作。 BOM ：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等. 体验js: ```html <!-- 体验js按钮切换 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按钮切换</title> <style> .pink{ background-color: pink; } </style> </head> <body> <button class="pink">按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <script> let bts=document.querySelectorAll('button') for(let i=0;i<bts.length;i++) { bts[i].addEventListener('click',function(){ document.querySelector('.pink').className='' this.className='pink'}) } </script> </body> </html> ``` ### 1.2javaScript书写位置 #### 1.2.1内部javaScript 直接写在html文件里面，用script标签包住，（script标签写在</body>上面） 注意事项：我们将script标签放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的javaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失败。因此，将javaScript代码放在HTML页面的底部附近通常是最好的策略。 #### 1.2.2外部javaScript 代码写在以.js结尾的文件里（通过script标签，引入到html页面中。）注意：外部js标签中间不要写代码，不然会被忽略。 #### 1.2.3内联javaScript 代码写在标签内部（vue框架会用这种模式）了解 ### 1.3javaScript的注释 单行注释：// 快捷键(ctrl+/) 块注释：/* */ 快捷键（shift+alt+a) ### 1.4javaScript的结束符 使用英文的；代表语句的结束。实际开发中，可写可不写，浏览器（JavaScript引擎）可以自动推断语句的结束位置。在实际开发中，越来越多的人主张，书写JavaScript代码时省略结束符。约定：要么都写，要么都不写。 ### 1.5输入和输出语法 输出和输出也可以理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。 输出语法： document.write(‘要输出的内容’)——向body內输出内容，注意，如果输出的内容写的时标签，也会被解析成网页元素。 alert(‘要输出的内容’)——页面弹出警告对话框。 console.log(‘控制台打印’)——控制台输出语法，程序员调试使用。 输入语法： prompt(‘请输入你的姓名’)——显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。 JavaScript代码执行顺序：按HTML文档流顺序执行JavaScript代码；但是alert()和prompt()它们会跳过页面渲染先被执行。 ### 1.6字面量 在计算机科学中，字面量（literal)是在计算机中描述事/物；比如：数字字面量，字符串字面量，[]数组字面量，{}对象字面量等等。 ## 2.变量 ### 2.1变量是什么 问题：用户输入的数据我们如何存储起来——用变量。 变量可以理解为计算机中用来存储数据的”容器“，变量不是数据本身。 ### 2.2变量基本使用 #### 2.2.1声明变量： 要想使用变量，首先要创建变量（也称为声明变量或者定义变量） 声明变量有两部分构成：声明关键字、变量名（标识） let即关键字,关键字是系统提供的专门用来声明（定义）变量的词语 #### 2.2.2变量赋值： 定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个”=“（赋值运算符），然后是数值。注意是通过变量名来获得变量里面的数据。 #### 2.2.3更新变量 变量赋值后，还可以通过简单地给他一个不同的值来更新它。注意：let不允许多次声明一个变量。 #### 2.2.4声明多个变量 类似于CSS中的并集选择器，多个变量之间用逗号隔开。为了更好的可读性，最好一行只声明一个变量。 ### 2.3变量的本质 内存：计算机中存储数据的地方，相当于一个空间 变量本质：是程序在内存中申请的一块用来存放数据的小空间 ### 2.4不变量命名规则与规范 #### 2.4.1规则 1.不能使用关键字——有特殊含义的字符，JavaScript内置的一些英语单词。例如：let,var,if,for等 2.只能使用下划线、字母、数字、$组成，且数字不能开头。 3.字母严格区分大小写，如Age和age是不同的变量。 #### 2.4.2规范 起名要有意义；遵循小驼峰命名法——第一个单词首字母小写，后面每个单词首字母大写。 #### 2.4.3let和var的区别 在比较旧的JavaScript，使用关键字var来声明变量，而不是let.var现在开发中一般不再使用它，只是我们可能在老版程序中看到他啊。let解决了var的一些问题。（var声明：可以先使用再声明——不合理，var声明过的变量可以重复声明——不合理，比如变量提升、全局变量、没有块作用域等等。 在JS中，使用let声明的变量具有块作用域，在代码块中声明的变量无法在代码块的外部进行访问。使用var声明的变量，不具有块作用域。 ```javascript <script> { var b=10 } console.log(b) { let a=10 alert(a) } //console.log(a) //无法执行 </script> ``` #### 2.4.4拓展数组 声明语法：let 数组名=[数据1，数据2，数据3，...，数据n] ## 3.常量 当某个变量永远不会改变的时候，就可以用const声明，而不是let。使用const声明的变量称为“常量”。命名规范与变量一致。注意：常量不允许重新赋值，声明的时候必须赋值。如果是不需要重新赋值的数据使用const。 ## 4.数据类型 ### 4.1数据类型 数据分类：更加充分和高效的利用内存，也更加方便程序员的使用数据。 #### 4.1.1基本数据类型 ##### number数字型 JavaScript中的正数、负数、小数等统一称为数字类型。JS时弱数字类型，变量到底是属于哪种类型，只有赋值之后，才能确定。 算数运算符：+ - * / %(取模) 案列：计算圆的面积（对话框中输入元的半径，算出圆的面积并显示到页面） NaN(Not a number的缩写)代表一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果 ```javascript console.log('老师'-2)//NaN ``` NaN 是粘性的。任何对NaN的操作都会返回NaN ```javascript console.log(NaN+2)//NaN ``` ##### string 字符串型 通过单引号，双引号或者反引号包裹的数据都叫做字符串，单引号和双引号没有本质上的区别，推荐使用单引号。 **注意事项**：无论是单引号还是双引号必须成对使用；单引号/双引号可以嵌套使用（內单外双，或者外单内双）；必要时可以使用转义符\，输出单引号或者双引号。 字符串拼接：+运算符可以实现字符串的拼接。（数字相加，字符相连。 模板字符串：拼接字符串和变量。 语法：`内容${变量}内容` ```javascript let age=18 document.write(`大家好，我今年${age}岁了`) ``` ##### boolean 布尔型 表示肯定或者否定时在计算机中对应的是布尔类型的数据。true false。 ##### undefined 未定义型 只声明变量，不赋值的情况下，变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined.工作中的使用场景：开发中声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传过来，此时我们可以通过检测这个变量是不是undefined,就判断用户**是否有数据传递过来。** ##### null 空类型 JavaScript中的null仅仅是一个代表”无“、”空“或”值未知“的特殊值；官方解释：把null作为尚未创建的对象 区别：undefined 表示没有赋值；null表示赋值了，但内容为空 #### 4.1.2引用数据类型 object 对象 ### 4.2检测数据类型 通过typeof关键字检测数据类型 #### 4.2.1作为运算符 typeof x(常用的写法) #### 4.2.2函数形式 typeof(x) ## 5.类型转换 ### 5.1为什么要进行数据类型转换？ JavaScript是弱数据类型：JavaScript也不知道变量到底属于哪种类型，只有赋值了才清楚。坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。 ### 5.2隐式转换 某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。 +号两边只要有一个是字符串，都会把另外一个转成字符串 除了+以外的算数运算符 比如-*/等都会把数据转化成数字类型 缺点：转换类型不明确，靠经验才能总结 小技巧：+号作为正好解析可以转换成数字型；任何数据和字符串相加结果都是字符串。 ### 5.3显示转换 Number(数据) 转成数字类型；如果字符串内容里有非数字，转化失败时的结果为NaN(Not a Number)即不是一个数字；NaN也是number 类型的数据，代表非数字。 parseInt(数据) 只保留整数 parseFloat(数据) 可以保留小数 ## 6.实战案列 ### 6.1用户订单信息案例 需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息 分析：首先写一个html和css死的框架，再实现交互 1.需要输入三个数据，三个变量price num address 2.需要计算总的价格total 3.页面打印生成表格，里面填充数据即可 4.最好使用模板字符串 代码实现 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户订单确定</title> </head> <style> h2 { /* 设置水平居中 */ text-align: center; } /* 给盒子加边框 */ table, th, td { border: 1px solid #000; } table { /* 合并表格相邻边框 */ border-collapse: collapse; height: 80px; margin: 0 auto; text-align: center; } th { padding: 5px 30px; } </style> <body> <h2>订单确认</h2> <!-- <table> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>总价</th> <th>收获地址</th> </tr> <tr> <td>小米</td> <td>1999</td> <td>10</td> <td>100</td> <td>重庆</td> </tr> </table> --> <script> // 1.用户输入 let price = +prompt('请输入商品的价格:') let num = +prompt('请输入商品的数量:') let address = prompt('请输入收货地址:') //2.计算总额 let total = price * num // 3.页面打印渲染——此处不是dom操作，采用模板字符串打印整个表格，剪切 document.write(` <table> <table> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>总价</th> <th>收获地址</th> </tr> <tr> <td>小米</td> <td>${price}元</td> <td>${num}</td> <td>${total}</td> <td>${address}</td> </tr> </table> `) </script> </body> </html> ``` ### 6.2常见错误 1.const声明的时候必须赋值，进行初始化 2.let 或者const不允许多次声明同一个变量 3.常量不允许重新赋值 4.数据类型转换忘记 # Day02 ## 1.运算符 #### 1.1算数运算符 运算符(操作符)：运算符可以用来对一个或多个操作数进行运算。 算数运算符：**+ - \* /** 注意JS中除法除不尽的时候不会取整，10/0不合法，不报错，但是会返回infinity。 ******幂运算 **%**模运算，两个数相除取余数 注意： 算数运算时，除了字符串的加法，其他运算的操作数是非数值时，都会转换为数值然后再运算。JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算。当任意一个值和字符串做加法运算的时候，它会先将其他值转换成字符串，然后再做拼串的操作。可以利用这一特点来完成类型转换，要转换成字符串的值+''空串。其原理和String()函数相同，但使用起来更加简洁 ```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>运算符</title> <script> let a = 1 + 1 a = 10 - '4' a = 10 - true//10-1 a = 5 + null//5+0 a = 6 - undefined//6-NaN a = 'hello' + 'world'//helloworld a = '1' + 2//"1"+"2" console.log(typeof a,a) </script> </head> <body> </body> </html> ``` #### 1.2赋值运算符 赋值运算符用来将一个值赋值给一个变量。eg.a%= n 等价于 a=a%n 。 **??=**空赋值，只有当变量的值为null或undefined时才会对变量的值进行赋值。 ```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>赋值运算符</title> <script> let a=10 a=5//将右边的值 赋值给 左边的值 let b=a //一个变量只有在等号左边时才表示变量，在等号右边时代表它存的值 a=66 a+11 //大部分的运算符都不会改变变量的值，赋值运算符除外 //当a为以下两种值的时候a才会赋值成功 a=NaN a=undefined a??=101// console.log(a) </script> </head> <body> </body> </html> ``` #### 1.3一元+-/自增自减 ```javascript <script> /* 一元的+- +正号 -不会改变数值的符号 -负号 -可以对数值进行符号位取反 当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算 */ let a=10 a=-a console.log(typeof a,a) let b='123' b=+b // 或者也可以 b=Number(b) console.log(typeof b,b) /* ++自增运算符 ++a(前自增) 返回值为自增后的值 新值 和a++(后自增) 返回值是自增前的值 旧值 --自减运算符 同 自增 */ </script> ``` #### 1.4逻辑运算符 ##### 1.4.1!逻辑非 ！可以用来对一个值进行非运算*；它可以对一个布尔值进行取反操作*。列如：true--false， false--true。 如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反，可以利用这个特点将其他类型转换为布尔值。 类型转换： 转换为字符串：显示转换：String() 隐式转换：+"" 转换为数值：显示转换：Number() 隐式转换：+ 转换为布尔值：显示转换：Boolean() 隐式转换：！！ ##### 1.4.2 && 逻辑与 可以对两个值进行与运算。当&&左右都为true时，则返回true,否则返回false。与运算是短路的与，如果第一个值为false,则不看第二个值。与运算是找false的，如果找到false则直接返回，没有false才会继续执行。对于非布尔值进行与运算，它会转换为布尔值然后运算但是会返回原值。如果第一个值为false,则直接返回第一个值；如果第一个值为true,则返回第二个值。 ##### 1.4.3 ||逻辑或 可以对两个值进行或运算。当||左右都有true时,则返回true,否则返回false。或运算也是短路的或，如果第一个值为true，则不看第二个值。或运算是找true,如果找到true则直接返回，没有true才会返回false。对于非布尔值或运算，它会转换成布尔值然后运算，但是最终会返回原值。如果第一个值为true,则返回第一个值；如果第一个值为false，则返回第二个。 ```javascript <script> let result=true&&true//true result=true&&false//false result=false&&true//false result=false&&false//false //true&&alert(123) false&&alert(1234)//&&运算前面为真值时，才会看与运算后面的并执行 result=1&&2 //2 // true&&true>>true result=1&&0 //0 // true&&false>>false result=0&&NaN //0 // false&&false>>false false||alert(123) //第一个值是false，alert(123)会执行 true||alert(1234) //第一个值是true,alert(1234)不会执行 result=1||2 //1 result="hello"||NaN //hello result=NaN||1 //1 console.log(result) </script> ``` #### 1.5关系运算符 关系运算符：用来检查两个值之间的关系是否成立，成立返回true,不成立返回false。 **>** 用来检查左值是否大于右值 **>=** 用来检查左值是否大于等于右值 **<** 用来检查左值是否小于于右值 **<=** 用来检查左值是否小于等于右值 注意： 当对非数值进行关系运算时，它会先将其转换成数值再比较；当关系运算符的两端是两个字符串时，它不会将字符串转换为数值，而是逐位的比较字符的Unicode编码。利用这个特点可以对字符串按照字母排序。（注意:比较这两个字符串格式的数字时一定要进行类型转换） ```javascript <script> let result=5<'10' //true result='1'>false //true result="a"<"b" //true result="z"<"f" //false result="abc"<"b" //true //比较的是第一个字符，若第一个字符比较结果为真，则返回值为true,若关系式不成立则返回false result="bac"<"bb" //true //若字符串第n位比较不出来，则比较字符串的下一位 //检查数字num在10到50 之间，要表示为10<num&&num<50 console.log(result) </script> ``` #### 1.6相等运算符 ##### 1.6.1== **相等**运算符，用来比较两个值是否相等。使用相等运算符比较两个不同类型的值时，它会将其转换为相同的类型(通常转换为数值)然后比较，类型转换后值相同也会返回true。null和undefined进行相等比较的时候会返回true；NaN不和任何值相等，包括他自身。 ##### 1.6.2 === **全等**运算符,用来比较两个值是否全等，它不会进行自动的类型转换，如果两个值的类型不同直接返回false，null和undefined进行全等比较的时候会返回false。 ##### 1.6.3 ！= **不等**，用来检查两个值是否不相等，会自动的进行类型转换。 ##### 1.6.4 ！== **不全等**，比较两个值是否不全等，不会做自动类型转换。 ```javascript <script> let result=1==1 //true resut=1==2 //false result=1=="1" //false result=true=="1" //true result=undefined==null //true result=NaN==NaN //false result=1==="1" //false result=null===undefined //false result=1!=1 //false result=1!="1" //false result=1!=="1" //true console.log(result) </script> ``` 注意：关系运算符和相等运算符也可以统称为比较运算符。 #### 1.7条件运算符 条件运算符 条件表达式？表达式1：表达式2 -执行顺序：条件运算符在执行时，会先对条件表达式进行求值判断，结果为true，则执行表达式1，结果为false,则执行表达式2。 ```javascript <script> true?alert(1):alert(123) let a=10 let b=20 a>b?alert("a大"):alert("b大") let max=a>b?a:b alert(max) </script> ``` #### 1.8运算符的优先级 1.表格查询运算符的优先级，优先级高的先运算，优先级相同的从左向右依次计算。 2，因为（）拥有最高的优先级，所以要先算哪一块，可以自己用小括号括起来即可。 ```javascript <script> a=(1&&2)||3 console.log(a) </script> ``` ## 2.语句 ### 2.1表达式和语句 #### 2.1.1表达式 表达式是可以被求值的代码，javascript引擎会将其计算出一个结果，可以写在赋值语句的右侧。eg. x=7 3+4 num++都属于表达式。 #### 2.1.2语句 语句是一段可以执行的代码，不一定有值，比如：prompt()可以弹出一个输入框，还有if语句 for循环语句等等。 #### 2.1.3三大流程控制语句 1.代码从上往下执行——顺序结构 2.根据条件选择执行代码——分支结构 3.某段代码被重复执行——循环结构 ### 2.2分支语句 #### 2.2.1 if语句 流程控制语句可以用来改变程序执行的顺序：1.条件判断语句 2.条件分支语句 3.循环语句 if语句语法： **if(条件表达式)** **语句** 执行流程：if语句在执行时会先对if后的条件表达式进行求值判断，如果结果为true,则执行if后的语句，如果为false则不执行。 if 只会控制紧随其后的那一行代码，如果希望可以控制多行代码时，可以把需要控制的语句放到{}中。如果if后的添加表达式不是布尔值，会转换为布尔值然后再运算。 注意：条件语句不要判断条件不要写成赋值运算(等号的个数) ```javascript <script> if(false) aleret('hahahaha') let a=10 if(a>3) alert('a大于3') let b=30 if(b){ console.log(b) console.log(b+b) } </script> ``` #### 2.2.2 if-else 语法： **if(条件表达式){** **语句...** **}else{** **语句...** **}** 执行流程：先对条件进行判断，true，执行if后面的语句；false，则执行else后面的语句。 可连续： **if(){** **...** **}else if{** **...** **}else if{** **...** **}else** **....** 这种语句中只有一个代码块执行，一旦执行其后的代码块不再执行，所以要注意条件的顺序(或者设置条件范围)。 ```javascript <script> let age=50 if(age<60) alert('你还年轻') else alert('你可以退休了') </script> ``` ##### 练习 编写一个程序，获取一个用户输入的整数，然后通过程序显示这个数是奇数还是偶数。 ```javascript <script> // 编写一个程序，获取一个用户输入的整数 let num=+prompt("请输入一个整数：") //若输入的值是字符串则 //let num = parseInt(prompt("请输入一个整数"))//针对用户输入的小数进行取整 //验证一下，用户的输入是否合法，只有是有效数字的时候，我们才检查它是否为偶数 //我们不能使用==或者===来检查一个值是否是NaN //可以使用isNaN()函数来检查一个值是否是NaN if (isNaN(num)||num%1!==0)//判断是否合法或者为小数 { alert("你的输入有问题，请重新输入") } else { if (num % 2 === 0) { alert(`${num}是偶数`) } else { alert(`${num}是奇数`) } } </script> ``` #### 2.2.3 switch 语句 switch语句在执行时，会依次将switch后的表达式和case后的表达式进行全等比较。如果比较结果为true,则自当前case处开始执行代码。如果比较结果为false,则继续比较其他case后的表达式，直到找到true为止。 注意： 当比较结果为true时，会从当前case处开始执行代码，也就是说case是代码执行的起始位置。这就意味着只要是当前case后的代码都会执行。可以通过break语句来避免执行其他的case。 ```javascript <script> let num=+prompt("请输入一个数字") switch(num){ case 1: alert('一') break case 2: alert('二') break case 3: alert('三') break default: alert('不在数据范围內，请重新输入') break } </script> ``` ##### 练习 ###### switch语句简单计算 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>switch语句简单计算</title> </head> <body> <script> let num1=+prompt('请输入第一个数据：') let num2=+prompt('请输入第二个数字：') let sp=prompt('请输入你要进行的运算操作符（+ - * /)') switch(sp){ case '+': alert(`两个数的加法运算结果是：${num1+num2}`) break case '-': alert(`两个数的减法运算结果是：${num1-num2}`) break case '*': alert(`两个数的乘法运算结果是：${num1*num2}`) break case '/': alert(`两个数的除法运算结果是：${num1/num2}`) break default: alert(`你输入的内容有误，无法计算！`) } </script> </body> </html> ``` ###### ATM模拟 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ATM系统</title> </head> <body> <script> //1.开始循环 输入框写到循环里面 //3.准备一个总金额 let money=100 while(ture){ let re=+prompt(` 请您选择操作，输入对应序号： 1.存钱 2.取钱 3.查看余额 4.退出 `) //2.如果用户输入的是4 则退出循环 if(re===4){ break } //4.根据输入做操作 switch(re){ case 1: //存钱 let cun=+prompt('请输入存款金额') money+=cun break case 2: let qu=+prompt('请输入取款金额') money-=qu break case 3: alert(`您的银行卡余额是${money}`) } } </script> </body> </html> ``` ### 2.3循环语句 循环语句 -通过循环语句可以使指定的代码反复执行 -JS中一共有三种循环语句 while do-while for 通常编写一个循环，要有三个条件 1.初始化表达式（初始化变量） 2.条件表达式（设置循环运行的条件） 3.更新表达式（修改初始化变量） #### 2.3.1 while 语句 ```javascript <script> //初始化表达式 let a=0 //条件表达式 while(a<5){ console.log(a) //更新表达式 a++ } let i=0 while(1){ console.log(i) i++ //if(i===5) if(i>=5) { break//跳出while循环 } } let money=1000 let year=0 while(money<5000){ money*=1.05 year++ } console.log(`需要存${year}年，此时的钱数为${money}元`) </script> ``` ##### 练习 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算和</title> </head> <body> <script> //页面输出1~100累加和 let i=1 let sum=0 while(i<=100){ sum+=i i++ } // document.write(`和为${sum}`) console.log(sum) //页面输出1~100偶数和 let a=1 let ousum=0 while(a<=100){ //筛选偶数 if(a%2===0){ ousum+=a } //筛选奇数 // if(a%2!==0){ // ousum+=a // } a++ } console.log(ousum) </script> </body> </html> ``` #### 2.3.2 do while 语法：do-while循环 **do{** **....** **}while()** 程序执行的时候，不会先判断，至少执行一次（与while语句的区别所在），再进行判断，结果为真则继续循环，为假则终止循环。 #### 2.3.3 for 循环 功能和while语句没什么本质区别，但是for更加清晰。 语法： **for(初始化表达式；条件表达式；更新表达式){** **语句...** **}** 初始化表达式在整个循环周期中都只执行一次；for循环的三个表达式都可以省略。使用let在for循环语句中声明的变量是局部变量，只能在for循环内部访问；但是使用var声明变量则可以在循环外部使用。 创建**死循环**的方式： **while(1){}** **for(;;){}** ```javascript <script> for(let i=0;i<5;i++){ console.log(i) } </script> ``` ##### 练习 ###### for 循环打印乘法表 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span{ display:inline-block; width:100px; height:30px; padding:5px 10px; border:1px solid pink; margin:2px; border-radius:5px; box-shadow:2px 2px 2px rgba(239, 182, 182,.5); color:rgb(245, 86, 187); background-color: rgba(239, 182, 182,.5); text-align: center; } </style> </head> <body> <script> //1.外层循环控制行数 for(let i=1;i<=9;i++){ //2.内层循环控制列数 for(let j=1;j<=i;j++){ document.write(`<span>${j}X${i}=${i*j}</span>`) } document.write(`<br>`) } </script> </body> </html> ``` ###### for循环求和以及数组遍历 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //for循环实现100以内偶数和 let sum = 0 for (let i = 1; i <= 100; i++) { if (i % 2 === 0) { sum += i } } document.write(`1~100之间的偶数和是:${sum}<br>`) // doucument.write(sum) //打印数组 // let arr = ['黎明', '刘德华', '那英', '李华', '小米'] // for (let j = 0; j < 5; j++) { // document.write(arr[j] + "<br>") // console.log(arr[j]) // } //遍历数组：从第一个循环到最后一个 for (let j = 0; j <=arr.length-1; j++) { //方便增减数组内容 document.write(arr[j] + "<br>") console.log(arr[j]) } </script> </body> </html> ``` ## 3.综合案列 最后修改：2024 年 01 月 13 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏