目录
4.9 switch 语句和 if else if 语句的区别
案例：弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问
一、编程语言
1.1 编程
编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
实际上计算机最终所执行的都是机器语言，它是0和1组成的二进制数，二进制是计算机语言的基础。
1.2 编程语言
通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言。
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。
如今通用的编程语言有两种形式：汇编语言和高级语言。
- 汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
- 高级语言主要是相对于低级语言而言,它并不是特指某-种具体的语言,而是包括了很多编程语言,常用的有C语言、C++，Java、C#、Python、 PHP、JavaScript.、Go语言、Objective-C. Swift等。
1.3 翻译器
高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。记住1和0。
1.5 编程语言和标记语言区别
- 编程语言有很强的逻辑和行为能力。在编程语言里你会看到很多if else、for、while等具有逻辑性和行为能力的指令,这是主动的。
- 标记语言( html )不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的,他是被动的。
二、计算机基础
2.1 计算机组成
2.2 数据存储
- 计算机内部使用二进制0和1来表示数据。
- 所有数据,包括文件、图片等最终都是以二进制数据( 0和1 )的形式存放在硬盘中的。
- 所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序文件复制到硬盘中。
- 硬盘、内存都是保存的二进制数据。
2.3 数据存储单位
bit <byte <kb <GB <TB<...
- 位(bit):1bit 可以保存一个0或者1（最小的存储单位）
- 字节(Byte):1B=8b
- 千字节(KB): 1KB= 1024B
- 兆字节(MB): 1MB= 1024KB
- 吉字节(GB): 1GB = 1024MB
- 太字节(TB): 1TB= 1024GB
2.4 程序运行
- 打开某个程序时,先从硬盘中把程序的代码加载到内存中
- CPU执行内存中的代码
注意
之所以要内存的一个重要原因,是因为cpu运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以，才使用存取速度更快的内存来保存运行时的数据。( 内存是电,硬盘是机械)
三、初识JavaScript
3.1 JavaScript是什么
- JavaScript 是世界上最流行的语言之一, 是一种运行在客户端的脚本语言 ( Script是脚本的意思)
- 脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
- 现在也可以基于Node.js技术进行服务器端编程
3.2 JavaScript的作用
- 表单动态校验 (密码强度检测) ( JS 产生最初的目的)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
3.3 HTML/CSS/JS的关系
3.4 浏览器执行JS简介
浏览器分成两部分：渲染引擎和 JS 引擎
- 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
- JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。
3.5 JS 的组成
3.5.1 ECMAScript
ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
3.5.2 DOM----文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
3.5.3 BOM----浏览器对象模型
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
3.6 JS初体验
JS有三种书写位置，分别为行内，内嵌和外部。
3.6.1 行内式JS
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on头的属性) ,如: onclick
- 注意单双引号的使用:在HTML中我们推荐使用双引号, JS中我们推荐使用单引号
- 可读性差,在htmI中编写JS大量代码时,仿便阅读;
- 引号易错,引号多层嵌套匹配时,非常容易弄混;
- 特殊情况下使用
3.6.2 内嵌式JS
<script> alert('Hello World!');</script>- 可以将多行JS代码写到
<script>标签中 - 内嵌 JS 是学习时常用的方式
3.6.3 外部JS文件
<script src="../js/my.js"></script>-
利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便
-
引用外部JS文件的script标签中间不可以写代码
-
适合于JS代码量比较大的情况
四、JS基本语法
4.1 JavaScript输入输出语句
为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
<script> // 这是一个输入框 prompt('请输入您的年龄'); //alert弹出警示框 alert('计算的结果是'); //console 控制台输出 给程序员测试用的 console.log('我是程序员能看到的'); </script>4.2 变量
白话：变量就是一个装东西的盒子
通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间
4.2.1 变量的使用
使用时分两步：1.声明变量 2.赋值
1.声明变量
var age； //声明一个名称为age的变量
-
var是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间。
-
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
-
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
声明多个变量：
var age=18, address='火影村', gz=2000;声明变量的特殊情况：
<script> // 1. 更新变量 var myname = 'pink老师'; console.log(myname); myname = '迪丽热巴'; console.log(myname); // 2. 声明多个变量 // var age = 18; // var address = '火影村'; // var gz = 2000; var age = 18, address = '火影村', gz = 2000; // 3. 声明变量的特殊情况 // 3.1 只声明不赋值 结果是？ 程序也不知道里面存的是啥 所以结果是 undefined 未定义的 var sex; console.log(sex); // undefined // 3.2 不声明 不赋值 直接使用某个变量会报错滴 // console.log(tel); // 3.3 不声明直接赋值使用 qq = 110; console.log(qq); </script>2.赋值
age=10; //给age这个变量赋值为10
3.变量的初始化
var age =10; //声明变量同时赋值为10
4.2.2 变量的命名规范
- 由字母(A-Z,a-z)，数字(0-9)，下划线(_)，美元符号($)组成，如:usrAge,num01,__name
- 严格区分大小写。 var app; 和 var App; 是两个变量
- 不能以数字开头。
- 不能是关键字，保留字。例如：var,for,while
- 遵循驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
- 推荐翻译网站：有道 爱词霸
4.3 变量小结
4.4 数据类型
4.4.1 为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
4.4.2 变量的数据类型
变量的用来存储值的所在处，它们有名字和数据类型。
变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型或者说动态语言。
这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
即js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的。
4.4.3 数据类型的分类
JS把数据类型分为两类：
- 简单数据类型（Number，String，Boolean，Undefined，Null）
- 复杂数据类型（Object）
4.4.3.1 数字型Number
JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。
1.数字进制型
最常见的进制有二进制、八进制、十进制、十六进制。
在JS中八进制前面加0，十六进制前面加 0x
2.数字型范围
JavaScript中数值的最大和最小值
3.数字型三个特殊值
4.isNaN()
4.4.3.2 字符串型String
字符串型可以是引号中的任意文本，其语法为 “双引号” 和 "单引号’’
2. 字符转义符
3. 字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
<script> //1。检测获取字符串的长度length var str = 'my name is andy'; console.log(str.length);</script>4.字符串拼接
- 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
// 2.字符串拼接 console.log('沙漠'+'骆驼'); console.log('pink老师'+'18');口诀：数值相加，字符相连。
5.字符串拼接加强
<script> console.log('pink老师' + 18); // pink老师18 console.log('pink老师' + 18 + '岁'); var age = 19; console.log('pink老师age岁'); // 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的 console.log('pink老师' + age + '岁'); // 变量和字符串相连的口诀： 引引加加 console.log('pink老师' + age + '岁'); </script>口诀：引引加加
- 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
- 变量是不能添加引号的，因为加引号的变量会变成字符串
- 如果变量两侧都有字符串拼接，口诀==“引引加加 ”，删掉数字，变量写加中间
4.4.3.3 布尔型Boolean
- 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
- 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
<script> var flag =true;//flag布尔型 var flag1=false;//flag1布尔型 console.log(flag+1); //true参与加法运算当作1来看 console.log(flag1+1); //false参与加法运算当作0来看 </script>
4.4.3.4 Undefined 和Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
//如果一个变量声明未赋值 就是undefined来定义数据类型 var str; console.log(str) var variable = undefined; console.log(variable+ 'pink');//unfinedpink console.log(variable + 1);//NaN undefined 和数字相加 最后的结果是NaN //null 空值 var space = null; console.log(space+'pink');//nullpink console.log(sace + 1);//1
4.4.4 获取变量数据类型
4.4.4.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
var num = 18;console.log(typeof num) // 结果 number 
4.4.4.2 字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
- 数字字面量：8, 9, 10
- 字符串字面量：'黑马程序员', "大前端"
- 布尔字面量：true，fals
4.4.5 数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变 量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
1. 转换为字符串
- toString() 和 String() 使用方式不一样
- 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一方式也称为隐式转换
<script> //1.把数字型转换为字符串型 变量.tostring() var num = 10; var str = num.toString(); console.log(str); console.log(typeof str); //2.我们利用string(变量) console.log(String(num)); //3.利用+拼接字符串的方法实现转换效果 console.log(num + ''); </script>2.转换为数字型(重点)
<script> var age = prompt('请输入您的年龄'); //1.parseInt(变量) 可以把字符型的转换为数字型 得到的是整数 console.log(parseInt(age)); console.log(parseInt(3.14));//3 取整 console.log(parseInt('120px')); //120 会去掉px单位 console.log(parseInt('rem120px'));//NaN //2.parseFloat(变量) 可以把字符型的转换为数字型，得到的是小数，浮点数 console.log(parseFloat(3.14)); console.log(parseFloat('120px'));// 120 会去掉这个px单位 console.log(parseFloat('rem120px'));// NaN //3.利用Number()变量 var str = '123'; console.log(Number(str)); //4.利用了算数运算 - */隐式转换 console.log('12'- 0 );//12 </script>3.转换为布尔型
- 代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、und
- 其余值都会被转换为 true
console.log(Boolean('')); //falseconsole.log(Boolean(0)); //falseconsole.log(Boolean(NaN)); //falseconsole.log(Boolean(null)); //falseconsole.log(Boolean(undefined)); //falseconsole.log(Boolean('小白')); //trueconsole.log(Boolean(12)); //true解释型语言和编译型语言
4.5 运算符
运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号
JavaScript 中常用的运算符有：
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
4.5.1 算术运算符
概念：算术运算符使用的符号，用于执行两个变量或值的算术运算。
4.5.2 浮点数的精度问题
浮点数值的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数
var result = 0.1 +0.2; //结果不是0.3，0.30000000000000004console.log(0.07 * 100); //结果不是7，而是7.000000000000001不要直接判断两个浮点数是否相等。
4.5.3 递增和递减运算符概述
1.前置递增运算符（++num）
++ num：先自加，再返回值
// 2. 前置递增运算符 ++ 写在变量的前面 var age = 10; ++age; // 类似于 age = age + 1 console.log(age); // 3. 先加1 后返回值 var p = 10; console.log(++p + 10);//输出结果为212.后置递增运算符（num++）
num++：先返回原值，再自加
<script> var num = 10; num++; // num = num + 1 ++num; console.log(num); // 1. 前置自增和后置自增如果单独使用 效果是一样的 // 2. 后置自增 口诀：先返回原值 后自加1 var age = 10; console.log(age++ + 10);//结果为20 console.log(age);//结果为11 </script>3.前置递增和后置递增小结
- 前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前写法更简单
- 单独使用时，运行结果相同
- 与其他代码联用时，执行结果会不同
- 前置递增：先自加，再返回值
- 后置递增：先返回值再自加
- 开发时，大多使用后置递增/减，并且代码独占一行
4.5.4 比较运算符
比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。
=小结
4.5.5 逻辑运算符
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值
<script> // 1. 逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false console.log(3 > 5 && 3 > 2); // false console.log(3 < 5 && 3 > 2); // true // 2. 逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true console.log(3 > 5 || 3 > 2); // true console.log(3 > 5 || 3 < 2); // false // 3. 逻辑非 not ！ console.log(!true); // false </script>逻辑与：两边都是 true才返回 true，否则返回 false
逻辑或：两边都为 false 才返回 false，否则都为true
逻辑非：逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false
短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
逻辑与
-
语法：表达式1 && 表达式2
-
如果第一个表达式的值为真，则返回表达式2
-
如果第一个表达式的值为假，则返回表达式1
逻辑或
-
语法：表达式1 || 表达式2
-
如果第一个表达式的值为真，则返回表达式1
-
如果第一个表达式的值为假，则返回表达式2
<script> // 1. 用我们的布尔值参与的逻辑运算 true && false == false // 2. 123 && 456 是值 或者是 表达式 参与逻辑运算？ // 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1 console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(0 && 1 + 2 && 456 * 56789); // 0 console.log('' && 1 + 2 && 456 * 56789); // '' // 如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN // 4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2 console.log(123 || 456); // 123 console.log(123 || 456 || 456 + 123); // 123 console.log(0 || 456 || 456 + 123); // 456 // 逻辑中断很重要 它会影响我们程序运行结果思密达 var num = 0; console.log(123 || num++); console.log(num); // 0 </script>4.5.6 赋值运算符
用来把数据赋值给变量的运算符
4.5.7 运算符优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与 比 逻辑或 优先级高
4.6 流程控制-分支
4.6.1 流程控制
流程控制就是来控制我们的代码按照什么结构顺序来执行。
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
4.6.2 分支结构--if分支语句
语法结构
if (条件表达式) { //执行语句 }4.6.3 分支结构--if else 双分支语句
4.6.4 分支结构--if else if 多分支语句
<script> // 1. 多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程 // 2. if else if语句是多分支语句 // 3. 语法规范 if (条件表达式1) { // 语句1; } else if (条件表达式2) { // 语句2; } else if (条件表达式3) { // 语句3; } else { // 最后的语句; } // 4. 执行思路 // 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句 // 如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推 // 如果上面的所有条件表达式都不成立，则执行else 里面的语句 // 5. 注意点 // (1) 多分支语句还是多选1 最后只能有一个语句执行 // (2) else if 里面的条件理论上是可以任意多个的 // (3) else if 中间有个空格了 </script>4.7 三元表达式
语法结构：
条件表达式 ？ 表达式1 ： 表达式2
即简化版的if else 语句。
<script> // 1. 有三元运算符组成的式子我们称为三元表达式 // 2. ++num 3 + 5 ? : // 3. 语法结构 // 条件表达式 ？ 表达式1 ： 表达式2 // 4. 执行思路 // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值 // 5. 代码体验 var num = 10; var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的 console.log(result); // if (num > 5) { // result = '是的'; // } else { // result = '不是的'; // } </script>4.8 分支流程控制switch语句
switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码，当要针对变量设置一系列的特定值的选项时，就可以使用switch。
switch (表达式) { case value1: 执行语句1; break; case value2: 执行语句2; break; ... default: 执行最后的语句; }它是使用表达式值直接与case语句中的值进行匹配，匹配成功后不执行其他语句，而if else是逐句匹配，所以switch语句的执行效率更高 。
注意：
- 在开发中，表达式我们经常写成变量
- 表达式中的值和case里面的值匹配的时候是 全等 ，即必须是值和数据类型一致才可以
- 如果当前的case 里面没有break，则不会退出switch，是继续执行下一个case
4.9 switch 语句和 if else if 语句的区别
- 一般情况下,它们两个语句可以相互替换
- swith..case 语句通常处理case为比较确定值的情况,而f.ele.. .语句更加灵活，常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if.. .else语句有几种条件,就得判断多少次。
- 当分支比较少时, if... else论句的执行效率比switch语句高。
- 当分支比较多时, switch语句的执行效率比较高,而且结构更清晰。
4.10 JavaScript流程控制-循环
循环的目的：可以重复执行某些语句。
4.10.1 for循环
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。
<script> // 1. for 重复执行某些代码， 通常跟计数有关系 // 2. for 语法结构 // for (初始化变量; 条件表达式; 操作表达式) { // // 循环体 // } // 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用 // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件 // 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减） </script>- 首先执行里面的计数器变量 var i = 1 .但是这句话在for 里面只执行一次 index
- 去 i <= 100 来判断是否满足条件， 如果满足条件 就去执行 循环体 不满足条件退出循环
- 最后去执行 i++ i++是单独写的代码 递增 第一轮结束
- 接着去执行 i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮
for循环相关案例
让用户控制输出的次数
// 我们可以让用户控制输出的次数 var num = prompt('请您输入次数'); for (var i = 1; i <= num; i++) { console.log('媳妇我错了');for循环重复不同的代码
for (var i = 1; i <= 100; i++) { if (i == 1) { console.log('这个人今年1岁了，他出生了'); } else if (i == 100) { console.log('这个人今年100岁了'); } else { console.log('这个人今年' + i + '岁了'); } }for循环重复某些操作（求1-100之间所有整数的累加和）
<script> // for 循环重复执行某些操作 比如说我们做了100次加法运算 // 求 1~100 之间的整数累加和 // 需要循环100次，我们需要一个计数器 i // 我们需要一个存储结果的变量 sum ，但是初始值一定是 0 // 核心算法：1 + 2 + 3 + 4 .... ，sum = sum + i; var sum = 0; // 求和 的变量 for (var i = 1; i <= 100; i++) { // sum = sum + i; sum += i; } console.log(sum); </script>⭐求学生成绩案例
<script> var total = prompt('请输入班级总人数'); var sum=0;//求总和 var avg=0;//求平均值 for (var i = 1 ; i <= total; i++){ var score = prompt('请输入学生'+i+'的成绩'); //因为从prompt取过来的数据为字符串型的，需要转换为数字型 sum = sum + parseInt(score) ; } avg = sum / parseInt(total) ; console.log( '学生总成绩为' + sum); console.log( '学生平均成绩为' + avg); alert( '学生总成绩为' + sum); alert( '学生平均成绩为' + avg); </script>⭐一行打印五个星星
<script> //一行打印n个星星 // for (var i = 1 ; i <= 10; i++){ // console.log('⭐'); // } //追加字符串的方式 var str = ''; for (var i = 1; i <= 5 ; i++ ){ str = str +'⭐'; } console.log(str); </script>4.10.2 双重for循环（循环嵌套）
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
执行语句;
}
<script> // 1. 双重for循环 语法结构 // for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) { // for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) { // // 执行语句; // } // } // 2. 我们可以把里面的循环看做是外层循环的语句 // 3. 外层循环循环一次， 里面的循环执行全部 // 4. 代码验证 for (var i = 1; i <= 3; i++) { console.log('这是外层循环第' + i + '次'); for (var j = 1; j <= 3; j++) { console.log('这是里层的循环第' + j + '次'); } } </script>双重循环代码执行方式：
⭐ 打印五行五列星星
<script> str = ''; for (var i = 1; i <= 5; i++){//外层循环负责打印五行 for (var j =1 ; j <= 5; j++){//里层循环赋值一行打印五个星星 str = str + '⭐'; } //如果一行打印五个星星就要另起一行 str = str + ''; } alert(str); console.log(str); </script>⭐用户自定义打印n行n列的星星
一定要记住：外层循环控制行数，内层循环控制列数
<script> var str = ''; var rows = prompt('请输入要打印星星的行数'); var cols = prompt('请输入要打印星星的列数'); for ( var i = 1; i <= parseInt(rows); i++){ for (var j = 1; j <= parseInt(cols); j++){ str = str +'⭐'; } str = str + ''; } console.log(str); </script>>⭐打印倒三角形
分析：
核心算法：
<script> var str = ''; for (var i = 1; i <= 10; i++){ for (var j = i ; j <= 10 ; j++){ str = str +'⭐'; } str = str + ''; } console.log(str); </script>⭐ 九九乘法表
案例分析：
<script> var str = ''; for (var i = 1; i <= 9; i++){ for (var j = 1; j <= i; j++){ //1 × 1 = 1 // str = str + '⭐'; str += j + '×' + i + '=' + i*j + ''; } str = str + ''; } console.log(str); </script>4.10.3 for循环小结
4.10.4 while循环
while循环可以在表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
结构：
while(条件表达式){ //循环体代码}执行思路：
-
先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
-
执行循环体代码
-
循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
<script> var num = 1; while (num <= 100){ console.log('how are you'); num++;//必须有计数器 //里面也应有操作表达式，完成计数器的更新，防止死循环 } </script>打印人的一生
<script> var age = 1; while (age <= 100){ console.log('您现在' + age + '岁啦'); age++; } </script>while语句计算1-100所有整数和
<script> var num = 1; var sum = 0; while (num <= 100){ sum = sum + num; num ++; } console.log(sum); </script>案例：弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问
<script> var message = prompt('你爱我吗？'); while (message !== '我爱你'){ massage = prompt('你爱我吗？'); } alert('啧啧啧'); </script>4.10.5 do- while循环
do... while语句其实是while语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
结构：
do { //循环体代码-条件表达式为true的时候重复执行循环一代码}while(条件表达式);- 执行思路跟while不同的地方在于：
- do while 先执行一次循环体 再判断条件
- 如果条件表达式结果为真，则继续执行循环体，否则退出循环
- do while 循环体至少执行一次
4.10.6 循环小结
4.11 continue
continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
// continue 关键字 退出本次（当前次的循环） 继续执行剩余次数循环 for (var i = 1; i <= 5; i++) { if (i == 3) { continue; // 只要遇见 continue就退出本次循环 直接跳到 i++ } console.log('我正在吃第' + i + '个包子'); }求1~100 之间， 除了能被7整除之外的整数和
var sum = 0; for (var i = 1; i <= 100; i++) { if (i % 7 == 0) { continue; } sum += i; } console.log(sum);4.12 break
break 关键字用于立即跳出整个循环
// break 退出整个循环 for (var i = 1; i <= 5; i++) { if (i == 3) { break; } console.log('我正在吃第' + i + '个包子'); }断点调试
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
