JavaScript基础

# JavaScript

计算机基础

编程语言

• 编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。

• 计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

• 从事编程的人员，就是程序员。 但是一般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农”，或者 “程序猿”/ “程序媛”

• 注意：上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM 机、黑莓 PI、服务器等等。

计算机语言

• 计算机语言（computer language）指用于人与计算机之间通讯的语言，是人与计算机之间传递信息的介质。
  • 但是其概念比通用的编程语言要更广泛。
  • 例如，HTML是标记语言，也是计算机语言，但并不是编程语言。
• 计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。
• 实际上计算机最终所执行的都是 机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。

编程语言

什么是编程语言

• 编程语言（英语：programming language），是用来定义计算机程序的形式语言。
• 它是一种被标准化的交流技巧，用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下所应当采取的行动。
• 编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。
• 编程语言的特点：
  • 数据和数据结构
  • 指令及流程控制
  • 引用机制和重用机制
  • 设计哲学
• 如今通用的编程语言有两种形式：汇编语言和高级语言。
• 汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
• 高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

C语言：puts("你好");
PHP：echo "你好";
Java：System.out.println("你好");
JavaScript： alert("你好"）;

编程语言的历史

• 阶段一: 机器语言

  • 计算机的存储单元只有0和1两种状态，因此一串代码要让计算机“读懂”，这串代码只能由数字0和1组成。
  • 像这种由数字0和1按照一定的规律组成的代码就叫机器码，也叫二进制编码。
  • 一定长度的机器码组成了机器指令，用这些机器指令所编写的程序就称为机器语言。
  • 优点:
    • 代码能被计算机直接识别，不需要经过编译解析；
    • 直接对硬件产生作用，程序的执行效率非常高；
  • 缺点:
    • 程序全是些0和1的指令代码，可读性差，还容易出错；
    • 不易编写(目前没有人这样开发)；

• 阶段二: 汇编语言

  • 为了解决机器语言的缺陷，人们发明了另外一种语言——汇编语言。
  • 这种语言用符号来代替冗长的、难以记忆的0、1代码。(mov/push指令，经过汇编器，汇编代码再进一步转成0101)
  • 优点:
    • 像机器语言一样，可以直接访问、控制计算机的各种硬件设备；
    • 占用内存少，执行速度快；
  • 缺点:
    • 第一，不同的机器有不同的汇编语言语法和编译器，代码缺乏可移植性
      • 也就是说，一个程序只能在一种机器上运行，换到其他机器上可能就不能运行；
    • 第二，符号非常多、难记
      • 即使是完成简单的功能也需要大量的汇编语言代码，很容易产生BUG，难于调试；
  • 应用场景
    • 操作系统内核、驱动程序、单片机程序；

• 阶段三: 高级语言

  • 最好的编程语言应该是什么? 自然语言；
  • 而高级语言, 就是接近自然语言, 更符合人类的思维方式
  • 跟和人交流的方式很相似, 但是大多数编程语言都是国外发明的, 因为都是接近于英文的交流方式
  • 优点:
    • 简单、易用、易于理解，语法和结构类似于普通英文；
    • 远离对硬件的直接操作，使得一般人经过学习之后都可以编程，而不用熟悉硬件知识；
    • 一个程序还可以在不同的机器上运行，具有可移植性；
  • 缺点:
    • 程序不能直接被计算机识别，需要经编译器翻译成二进制指令后，才能运行到计算机上；
    • 种类繁多：JavaScript 、 C语言、C++、C#、Java、Objective-C 、Python等；

翻译器

• 高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。
• 翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。 记住 1 和 0 。

编程语言和标记语言区别

• 编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while 等具有逻辑性和行为能力的指令，这是主动的。

• 标记语言（ html ）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。

编程语言总结

• 计算机可以帮助人类解决某些问题
• 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
• 编程语言有机器语言、汇编语言、高级语言
• 高级语言需要一个翻译器转换为计算机识别的机器语言
• 编程语言是主动的有很强的逻辑性

计算机的组成

数据的存储

• 计算机内部使用二进制 0 和 1 来表示数据。
• 所有数据，包括文件、图片等最终都是以二进制数据（ 0 和 1 ）的形式存放在硬盘中的。
• 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。
• 硬盘、内存都是保存的二进制数据。

数据的存储单位

• bit < byte < kb < GB < TB <…..

  • 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位）

  • 字节(Byte)：1B = 8b

  • 千字节(KB)：1KB = 1024B

  • 兆字节(MB)：1MB = 1024KB

  • 吉字节(GB): 1GB = 1024MB

  • 太字节(TB): 1TB = 1024GB

  • ……

程序的执行

• 打开某个程序时，先从硬盘中把程序的代码加载到内存中

• CPU执行内存中的代码

• 注意：之所以要内存的一个重要原因，是因为 cpu 运行太快了，如果只从硬盘中读数据，会浪费 cpu 性能，所以才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

初识JavaScript

什么是JavaScript

• JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）

• 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行

• 现在也可以基于 Node.js 技术进行服务器端编程

JavaScript的起源

• 1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。

  • 这是历史上第一个比较成熟的网络浏览器，轰动一时。
  • 但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。
  • 网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。

• 网景公司当时想要选择一种语言来嵌入到浏览器中：

  • 采用现有的语言，比如Perl、Python、Tcl、Scheme等等, 允许它们直接嵌入网页;
  • 1995年网景公司招募了程序员Brendan Eich，希望将Scheme语言作为网页脚本语言的可能性；

• 就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出；

  • Java推出之后立马在市场上引起了轰动，Java当初有一个口号：“write once run anywhere”；
  • 网景公司动了心，决定与Sun公司结成联盟，希望将Java嵌入到网页中来运行；
  • Brendan Eich本人非常热衷于Scheme，但是管理层那个时候有点倾向于Java，希望可以简化Java来适应网页脚本的需求；

• 但是Brendan Eich对此并不感兴趣，他用10天时间设计出来了JavaScript；

  • 最初这门语言的名字是Mocha（摩卡）；
  • 在Navigator2.0 beta版本更名为LiveScript；
  • 在Navigator2.0 beta 3版本正式重命名为JavaScript，当时是为了给这门语言搭上Java这个热词；

• 当然10天设计出来语言足够说明Brendan Eich是天才，但是这门语言当时更像是一个多种语言的大杂烩;

  • 借鉴C语言的基本语法；
  • 借鉴Java语言的数据类型和内存管理；
  • 借鉴Scheme语言，将函数提升到”第一等公民”（first class）的地位；
  • 借鉴Self语言，使用基于原型（prototype）的继承机制。

• Brendan Eich曾经这样描述过JavaScript：

  • 与其说我爱Javascript，不如说我恨它，它是C语言和Self语言一夜情的产物；
  • 十八世纪英国文学家约翰逊博士说得好：’它的优秀之处并非原创，它的原创之处并不优秀。’
  • （the part that is good is not original, and the part that is original is not good.）

• 微软公司于1995年首次推出Internet Explorer，从而引发了与Netscape的浏览器大战。

  • 微软对Netscape Navigator解释器进行了逆向工程，创建了JScript，以与处于市场领导地位的网景产品同台竞争；
  • 这个时候对于开发者来说是一场噩耗，因为需要针对不同的浏览器进行不同的适配；

• 1996年11月，网景正式向ECMA（欧洲计算机制造商协会）提交语言标准。

  • 1997年6月，ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262;
  • ECMA-262是一份标准，定义了ECMAScript;
  • JavaScript成为了ECMAScript最著名的实现之一;
  • 除此之外，ActionScript和JScript也都是ECMAScript规范的实现语言；

• 所以说，ECMAScript是一种规范，而JavaScript是这种规范的一种实现。

JavaScript的作用

• 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）

• 网页特效

• 服务端开发( Node.js )

• 桌面程序( Electron )

• App( Cordova )

• 控制硬件-物联网( Ruff )

• 游戏开发( cocos2d-js )

HTML/CSS/JS的关系

浏览器执行JS

• 我们经常会说：不同的浏览器有不同的内核组成

  • Gecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；
  • Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
  • Webkit：苹果基于 KHTML 开发、开源的，用于Safari，Google Chrome之前也在使用；
  • Blink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等；
  • 等等…

• 事实上，我们经常说的浏览器内核指的是浏览器的排版引擎：

  • 排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎。

• 那么，JavaScript代码由谁来执行呢？

  • JavaScript引擎

• 浏览器分成两部分：渲染引擎 和 JS 引擎

  • 渲染引擎：用来解析 HTML 与 CSS ，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit

  • JS 引擎：也称为 JS 解释器。 用来读取网页中的 JavaScript 代码，对其处理后运行，比如 chrome 浏览器的 V8

• 浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

认识JavaScript引擎

• 为什么需要JavaScript引擎呢？
  • 我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的；
  • 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
  • 但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行；
  • 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；
• 比较常见的JavaScript引擎有哪些呢？
  • SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
  • Chakra：微软开发，用于IT浏览器；
  • JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
  • V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；
  • 等等…

内核和JS引擎的关系

• 这里我们先以WebKit为例，WebKit事实上由两部分组成的：
  • WebCore：负责HTML解析、布局、渲染等等相关的工作；
  • JavaScriptCore：解析、执行JavaScript代码；
• 小程序中也是这样的划分：
  • 在小程序中编写的JavaScript代码就是被JSCore执行的；

JavaScript的组成

• ECMAScript是JavaScript的标准，描述了该语言的语法和基本对象。
  • JavaScript是ECMAScript的语言层面的实现;
  • 因为除了语言规范之外，JavaScript还需要对页面和浏览器进行各种操作;
  • 除了基本实现之外，还包括DOM操作和BOM操作;
• 目前我们会针对性的学习ECMAScript，也就是语言层面的内容，特别是ES5之前的语法。

ECMAScript

• ECMAScript 是由 ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

• ECMAScript：ECMAScript 规定了 JS 的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套 JS 语法工业标准。

DOM

• 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

• 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM

• BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结

  构。通过 BOM 可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JavaScript应用

JavaScript初体验

• JS 有 3 种书写位置，分别为行内、内嵌和外部。

行内式JS

<input type="button" value="点我试试" onclick="alert('Hello World')" />

• 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），如：onclick

• 注意单双引号的使用：在 HTML 中我们推荐使用双引号, JS 中我们推荐使用单引号

• 可读性差， 在 html 中编写 JS 大量代码时，不方便阅读；

• 引号易错，引号多层嵌套匹配时，非常容易弄混；

• 特殊情况下使用

内嵌JS

<script>
	alert('Hello World~!');
</script>

• 可以将多行 JS 代码写到 script 标签中

• 内嵌 JS 是学习时常用的方式

外部JS文件

<script src="my.js"></script>

• 利于 HTML 页面代码结构化，把大段 JS 代码独立到 HTML 页面之外，既美观，也方便文件级别的复用

• 引用外部 JS 文件的 script 标签的中间不可以写代码

• 适合于JS 代码量比较大的情况

JavaScript注释

• 为了提高代码的可读性，JS 与 CSS 一样，也提供了注释功能。JS 中的注释主要有两种，分别是单行注释和多行注释。

• 单行注释与多行注释的注释方式如下：

// 单行注释 快捷键:ctrl + /
/*
  多行注释  默认快捷键: shift + alt + a
  多行注释	vscode中修改多行注释的快捷键: ctrl + shift +/
*/

JavaScript输入输出语句

• 为了方便信息的输入输出，JS 中提供了一些输入输出语句，其常用的语句如下：
  • 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

// 这是一个具有输入框的网页弹出框
prompt('请输入您的年龄');

// alert 弹出警示框输出的展示给用户的
alert('计算的结果是');

// console 控制台输出给程序员测试用的
console.log("我是程序员能看到的");

• 文档注释 VSCode 中需要在单独的 JavaScript 文件中编写才有效）

noscript 元素

• 如果运行的浏览器不支持JavaScript, 那么我们如何给用户更好的提示呢?
  • 针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案;
  • 最终，<noscript> 元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容;
• 下面的情况下, 浏览器将显示包含在<noscript>中的内容:
  • 浏览器不支持脚本;
  • 浏览器对脚本的支持被关闭。

JavaScript注意事项

• 注意一: script元素不能写成单标签
  • 在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签；
  • 即不能写成<script src="index.js"/>；
• 注意二: 省略type属性
  • 在以前的代码中，<script>标签中会使用 type=“text/javascript”；
  • 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言；
• 注意三: 加载顺序
  • 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序；
  • 推荐将JavaScript代码和编写位置放在body子元素的最后一行；
• 注意四: JavaScript代码严格区分大小写
  • HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写；

Chrome的调试工具

• 在前面我们利用Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们来调试JavaScript。
• 当我们在JavaScript中通过console函数显示一些内容时，也可以使用Chrome浏览器来查看：

• 另外补充几点：
  • 1.如果在代码中出现了错误，那么可以在console中显示错误；
  • 2.console中有个 > 标志，它表示控制台的命令行
    • 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码；
    • 如果希望编写多行代码，可以按下shift+enter来进行换行编写；
  • 3.在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程；

变量

什么是变量

• 白话：变量就是一个装东西的盒子。

• 通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

变量在内存中的存储

• 如果我们希望记录某一个之后会变量的数据，在JavaScript中我们可以定义一个 变量：
  • 一个变量，就是一个用于存放数值的容器；
  • 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据；
  • 变量的独特之处在于它存放的数值是可以改变的；

• 本质：变量是程序在内存中申请的一块用来存放数据的空间。
• 我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。
  • 例如，变量 message 可以被想象成一个标有 “message” 的盒子，盒子里面的值为 “Hello!”；
  • 并且，这个盒子的值，我们想改变多少次，就可以改变多少次；

变量的使用

• 变量在使用时分为两步：

  • 01 声明变量

  • 02 赋值

声明变量

// 声明变量
var age; // 声明一个 名称为age 的变量

• var 是一个 JS 关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

• age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

变量赋值

age = 10; // 给 age 这个变量赋值为 10

• = 用来把右边的值赋给左边的变量空间中,此处的 “=” 代表赋值的意思
• 变量值是程序员保存到变量空间里的值

// 1．声明了一个age的变量
var age;

// 2．赋值,把值存入这个变量中
age = 18;

// 3．输出结果
console.log(age);

变量初始化

• 声明一个变量并赋值， 我们称之为变量的初始化。

var age = 18; // 声明变量同时赋值为 18  变量的初始化

//4．变量的初始化
var myname = "pink老师";
console.log(myname);

案例-变量的使用

• 有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下：

  • 我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是 kakaxi@itcast.cn，我的工资2000.

var myname = "旗木卡卡西";
var address = "火影村";
var age = 30;
var email = "kakaxi@itcast.cn";
var gz = 2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(gz);

案例-变量的使用

• 01 弹出一个输入框，提示用户输入姓名。
• 02 弹出一个对话框，输出用户刚才输入的姓名。

// 1．用户输入姓名存储到一个 myname的变量里面
var myname = prompt('请输入您的名字');
// 2．输出这个用户名
alert(myname);

变量的更新

• 一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age = 18;
age = 81; // 最后的结果就是 81, 因为 18 被覆盖掉了

  // 1．更新变量
  var myname = 'pink老师';
  console.log(myname);//pink老师
myname ="迪丽热巴';
  console.log(myname);//迪丽热巴

同时声明多个变量

• 同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;

 //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);//报错:tel is not defined

// 3.3不声明直接赋值使用会变为全局变量
qq = 110;
console.log(qq); // 110

变量的命名规范

• 由字母( A-Za-z )、数字( 0-9 )、下划线( _ )、美元符号( $ )组成，如：usrAge, num01, _name

• 严格区分大小写。var app; 和 var App; 是两个变量

• 不能 以数字开头。 18age 是错误的

• 不能 是关键字、保留字。例如：var、for、while

• 变量名必须有意义。 MMD BBD nl → age

• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

• 推荐翻译网站： 有道 爱词霸

案例-交换两个变量的值

• 要求：交换两个变量的值 ( 实现思路：使用一个 临时变量 用来做中间存储 )

// js 是编程语言有很强的逻辑性在里面:实现这个要求的思路先怎么做后怎么做
// 1．我们需要一个临时变量帮我们
var temp;
var apple1 = "青苹果";
var apple2 = '红苹果';
// 2．把apple1 给我们的临时变量temp
temp = apple1;
// 3．把apple2里面的苹果给apple1
apple1 = apple2;
// 4．把临时变量里面的值给apple2
apple2 = temp;
console.log(apple1);
console.log(apple2);

变量总结

• 为什么需要变量？

  • 因为我们一些数据需要保存，所以需要变量

• 变量是什么？

  • 变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据

• 变量的本质是什么?

  • 变量是内存里的一块空间，用来存储数据。
  • 声明变量本质是去内存申请空间。

• 变量怎么使用的？

  • 我们使用变量的时候，一定要声明变量，然后赋值

• 什么是变量的初始化？

  • 声明变量的同时进行赋值,我们称之为变量的初始化

• 变量命名规范有哪些？

  • 变量名尽量要规范，见名知意——驼峰命名法

数据类型

数据类型简介

为什么需要数据类型

• 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

• 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

变量的数据类型

• 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
• JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串

• 在代码运行时，变量的数据类型是由 JS 引擎 根据 = 右边变量值的数据类型来判断的，运行完毕之后， 变量就确定了数据类型。

• JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6; // x 为number类型
var x = "Bill"; // x 为string类型

数据类型的分类

• JS 把数据类型分为两类：

  • 简单数据类型 （Number,String,Boolean,Undefined,Null）

  • 复杂数据类型 （object)

基本数据类型

• JavaScript 中的简单数据类型及其说明如下：

数值型

数值型

• JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var age = 21; // 整数
var Age = 21.3747; // 小数

数值型进制

• 常见的进制有二进制、八进制、十进制、十六进制。

// 1.八进制数字序列范围：0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8

// 2.十六进制数字序列范围：0~9以及A~F
    var num = 0xA;
    console.log(num); // 10

• 现阶段我们只需要记住，在 JS 中八进制前面加 0，十六进制前面加 0x

// 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制
var num1 = 010;
console.log(num1); // 8  010  八进制 转换为 10进制 就是  8 
var num2 = 012;
console.log(num2); // 10

// 2. 十六进制  0 ~ 9  a ~ f    #ffffff  数字的前面加 0x 表示十六进制
var num3 = 0x9;
console.log(num3); // 9
var num4 = 0xa;
console.log(num4); // 10

数值型范围

• JavaScript 中数值的最大和最小值

// 3. 数字型的最大值
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// 4. 数字型的最小值
console.log(Number.MIN_VALUE); // 5e-324

• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

• 最小值：Number.MIN_VALUE，这个值为：5e-324

数值型的三个特殊值

// 5. 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大  
// 6. 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
// 7. 非数字
console.log('pink老师' - 100); // NaN

• Infinity ，代表无穷大，大于任何数值

• -Infinity ，代表无穷小，小于任何数值

• NaN ，Not a number，代表一个非数值

isNaN()

• 用来判断一个变量是否为( NaN )非数字的类型，返回 true 或者 false

// isNaN() 这个方法用来判断非数字   并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true
console.log(isNaN(12)); // false
console.log(isNaN('pink老师')); // true

字符串型

字符串型

• 字符串型可以是引号中的任意文本，其语法为 双引号 “ “ 和 单引号’ ‘

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

• 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

// 'pink'   'pink老师'  '12'   'true'
var str = '我是一个"高富帅"的程序员';
console.log(str);

字符串引号嵌套

• JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

字符串转义符

• 类似 HTML 里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

• 转义符都是\开头的，常用的转义符及其说明如下：

案例-弹出警示框

alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂啦～"');

字符串长度

• 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

// 1. 检测获取字符串的长度 length 
var str = 'my name is andy';
console.log(str.length); // 15

字符串拼接

• 多个字符串之间可以使用+进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串, + 号总结口诀：数值相加 ，字符相连

// 2. 字符串的拼接 +  只要有字符串和其他类型相拼接 最终的结果是字符串类型
console.log('沙漠' + '骆驼'); // 沙漠骆驼
console.log('pink老师' + 18); // 'pink老师18'
console.log('pink' + true); // pinktrue
console.log(12 + 12); // 24
console.log('12' + 12); // '1212'

• 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
• 变量是不能添加引号的，因为加引号的变量会变成字符串
• 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

var age = 19;
console.log('pink老师age岁');
// 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
console.log('pink老师' + age + '岁');
// 变量和字符串相连的口诀：  引引加加
console.log('pink老师' + age + '岁');

案例-弹窗输入内容

• 弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）
  • ① 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
  • ② 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 （程序内部处理）
  • ③ 使用 alert 语句弹出警示框（输出结果）

// 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
// 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 （程序内部处理）
// 使用alert语句弹出警示框（输出结果）
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);

布尔型

• 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

• 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

var flag = true; // flag 布尔型 
var flag1 = false; // flag1 布尔型
console.log(flag + 1); // 2 true 参与加法运算当1来看
console.log(flag1 + 1); // 1 false 参与加法运算当 0来看

Undefined 和 Null

• 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

// 如果一个变量声明未赋值 就是 undefined 未定义数据类型
var str;
console.log(str); // undefined
var variable = undefined;
console.log(variable + 'pink'); // undefinedpink
console.log(variable + 1); // NaN  undefined 和数字相加 最后的结果是 NaN

• 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11  null会作为0进行相加操作
console.log(true + vari); // 1 null会作为0进行相加操作

// null 空值
var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1); // 1  null会作为0进行相加操作

获取变量类型

typeof()

• typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // number

var num = 10;
console.log(typeof num); // number

var str = 'pink';
console.log(typeof str); // string

var flag = true;
console.log(typeof flag); // boolean

var vari = undefined;
console.log(typeof vari); // undefined

var timer = null;
console.log(typeof timer); // object

// prompt 取过来的值是 字符型的
var age = prompt('请输入您的年龄');
console.log(age); 
console.log(typeof age); // string

字面量

• 字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
  • 数字字面量：8, 9, 10
  • 字符串字面量：’黑马程序员’, “大前端”
  • 布尔字面量：true，false

console.log(18);
console.log('18');
console.log(true);
console.log(undefined);
console.log(null);

数据类型转换

• 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

• 我们通常会实现3种方式的转换：

  • 转换为字符串类型

  • 转换为数字型

  • 转换为布尔型

转为字符串

• toString() 和 String() 使用方式不一样。
• 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

// 1. 把数字型转换为字符串型 变量.toString()
var num = 10;
var str = num.toString();
console.log(str); //10
console.log(typeof str); //string

// 2. 我们利用 String(变量)   
var num = 10;
console.log(String(num)); // 10
console.log(typeof num); // number

// 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换
var num = 10;
console.log(num + ''); // 10
console.log(typeof num); // number

转换为数值型

• 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
• 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

var age = prompt('请输入您的年龄');
// 1. parseInt(变量)  可以把 字符型的转换为数字型 得到是整数
console.log(parseInt(age));
console.log(parseInt('3.14')); // 3 取整数部分,直接舍弃小数部分
console.log(parseInt('3.94')); // 3 取整数部分,直接舍弃小数部分
console.log(parseInt('120px')); // 120 会去掉这个px单位
console.log(parseInt('rem120px')); // NaN 不是数字开头的,结果就是NaN

// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN

// 3. 利用 Number(变量) 
var str = '123';
console.log(Number(str)); // 123
console.log(typeof Number(str)); // number
console.log(Number('12')); // 12
console.log(typeof Number('12')); // number

// 4. 利用了算数运算 -  *  /  隐式转换
console.log('12' - 0); // 12
console.log('123' - '120'); // 3
console.log('123' * 1); // 123

案例-计算年龄

• 此案例要求在页面中弹出一个输入框，我们输入出生年份后， 能计算出我们的年龄。

// 弹出一个输入框（prompt)，让用户输入出生年份 （用户输入）
// 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄  （程序内部处理）
// 弹出警示框（alert) ， 把计算的结果输出 （输出结果）
var year = prompt('请您输入您的出生年份');
var age = 2018 - year; // year 取过来的是字符串型  但是这里用的减法 有隐式转换
alert('您今年已经' + age + '岁了');

案例-简单加法器

• 计算两个数的值， 用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

// 先弹出第一个输入框，提示用户输入第一个值  保存起来
// 再弹出第二个框，提示用户输入第二个值  保存起来
// 把这两个值相加，并将结果赋给新的变量（注意数据类型转换）  
// 弹出警示框（alert) ， 把计算的结果输出 （输出结果）
var num1 = prompt('请您输入第一个值：');
var num2 = prompt('请您输入第二个值：');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是:' + result);

转换为布尔值

• 代表空、否定的值会被转换为 false ，如 ‘ ‘、0、NaN、null、undefined

• 其余值都会被转换为 true

    console.log(Boolean('')); // false
    console.log(Boolean(0)); // false
    console.log(Boolean(NaN)); // false
    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false
    
    console.log(Boolean('123')); // true
    console.log(Boolean('你好吗')); // true
    console.log(Boolean('我很好')); // true
console.log(Boolean(12)); // true

JavaScript运算符

• 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

• JavaScript中常用的运算符有：

  • 算数运算符

  • 递增和递减运算符

  • 比较运算符

  • 逻辑运算符

  • 赋值运算符

算术运算符

算术运算符概述

• 概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

console.log(1 + 1); // 2
console.log(1 - 1); // 0
console.log(1 * 1); // 1
console.log(1 / 1); // 1

// 1. % 取余 （取模）  
console.log(4 % 2); // 0
console.log(5 % 3); // 2
console.log(3 % 5); // 3

浮点数的精度问题

• 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。所以：不要直接判断两个浮点数是否相等 !

// 2. 浮点数 算数运算里面会有问题
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.07 * 100); // 7.000000000000001

// 3. 我们不能直接拿着浮点数来进行相比较 是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3); // false

• 01 我们怎么判断 一个数能够被整除呢？

  • 它的余数是 0 就说明这个数能被整除， 这就是 % 取余运算符的主要用途

• 02 请问 1 + 2 * 3 结果是？

  • 结果是7 ，注意算术运算符优先级的，先乘除，后加减，有小括号先算小括号里面的

表达式和返回值

• 表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
• 简单理解：是由数字、运算符、变量等组成的式子
• 表达式最终都会有一个结果，返回给我们，我们称为返回值

//  是由数字、运算符、变量等组成的式子 我们成为表达式   1 + 1 
console.log(1 + 1); // 2 就是返回值
// 1 + 1 = 2
// 在我们程序里面  2 = 1 + 1   把我们的右边表达式计算完毕把返回值给左边
var num = 1 + 1;

递增/递减运算符

• 如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。

• 在 JavaScript 中，递增（++）和递减（ – ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

• 注意：递增和递减运算符必须和变量配合使用。

前置递增运算符

• ++num 前置递增，就是自加 1，类似于 num = num + 1，但是 ++num 写起来更简单。

• 使用口诀：先自加，后返回值

var num = 10;
alert(++num + 10); // 21

// 1. 想要一个变量自己加1   num = num + 1 比较麻烦
var num = 1;
num = num + 1; // ++num
num = num + 1;
console.log(num); // 3

// 2. 前置递增运算符  ++ 写在变量的前面
var age = 10;
++age; // 类似于 age = age + 1
console.log(age);

// 3. 先加1  后返回值
var p = 10;
console.log(++p + 10); // 21

后置递增运算符

• num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。

• 使用口诀：先返回原值，后自加

var num = 10;
alert(10 + num++); // 20

var num = 10;
num++; // num = num + 1    ++num;
console.log(num); // 11

// 1. 前置自增和后置自增如果单独使用 效果是一样的
// 2. 后置自增 口诀：先返回原值 后自加1 
var age = 10;
console.log(age++ + 10); // 20
console.log(age); // 11

案例-递增案例

var a = 10;
++a; // ++a  11    a = 11
var b = ++a + 2; // a = 12   ++a = 12
console.log(b); // 14

var c = 10;
c++; // c++ 11  c = 11
var d = c++ + 2; //  c++  = 11     c = 12
console.log(d); // 13

var e = 10;
var f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12
console.log(f); // 22
// 后置自增  先表达式返回原值 后面变量再自加1

前置递增和后置递增小结

• 前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前写法更简单

• 单独使用时，运行结果相同

• 与其他代码联用时，执行结果会不同

• 后置：先原值运算，后自加（先人后己）

• 前置：先自加，后运算（先已后人）

• 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num–;

比较运算符

比较运算符概述

• 概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

console.log(3 >= 5); // false
console.log(2 <= 4); // true

//1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
console.log(3 == 5); // false
console.log('pink老师' == '刘德华'); // flase
console.log(18 == 18); // true
console.log(18 == '18'); // true
console.log(18 != 18); // false

// 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
console.log(18 === 18); // true
console.log(18 === '18'); // false

赋值/等于/全等小结

逻辑运算符

• 概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑与

• 两边都是 true才返回 true，否则返回 false

// 1. 逻辑与 &&  两侧都为true  结果才是 true  只要有一侧为false  结果就为false 
console.log(3 > 5 && 3 > 2); // false
console.log(3 < 5 && 3 > 2); // true

逻辑或

• 两边都为 false 才返回 false，否则都为 true

// 2. 逻辑或 ||  两侧都为false  结果才是 false  只要有一侧为true  结果就是true
console.log(3 > 5 || 3 > 2); // true 
console.log(3 > 5 || 3 < 2); // false

逻辑非

• 逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

// 3. 逻辑非  not  ！ 
console.log(!true); // false

案例-逻辑运算符案例

var num = 7;
var str = "我爱你~中国~";

console.log(num > 5 && str.length >= num); // true

console.log(num < 5 && str.length >= num); // false

console.log(!(num < 10)); // false

console.log(!(num < 10 || str.length == num)); // false

短路运算(逻辑中断)

• 短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;也叫逻辑中断

• 01 逻辑与

  • 语法： 表达式1 && 表达式2

    • 如果第一个表达式的值为真，则返回表达式2的结果

    • 如果第一个表达式的值为假，则返回表达式1的结果

console.log( 123 && 456 ); // 456
console.log( 0 && 456 ); // 0
console.log( 123 && 456 && 789 ); // 789

// 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

• 02 逻辑或
  • 语法： 表达式1 || 表达式2
    • 如果第一个表达式的值为真，则返回表达式1的结果
    • 如果第一个表达式的值为假，则返回表达式2的结果

// 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++); // 123  因为直接返回了 123 , 表达式 num++ 并没有被执行
console.log(num); // 0

赋值运算符

• 概念：用来把数据赋值给变量的运算符。

var num = 10;
// num = num + 1; // 等同于: num++
// num = num + 2; // 等同于: num += 2;

num += 5;
console.log(num); // 15

var age = 2;
age *= 3;
console.log(age); // 6

运算符优先级

运算符优先级

• 一元运算符里面的逻辑非优先级很高

• 逻辑与比逻辑或优先级高

运算符优先级案例

console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true

var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); // true

var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); // false

var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); // true

var c = 2 === "2";
console.log(c); // false

var d = !c || b && a;
console.log(d); // true

JavaScript流程控制-分支

流程控制

• 在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

• 简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行

• 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

顺序流程控制

• 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

分支流程控制_if语句

• 由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果 , JS 语言提供了两种分支结构语句

  • if 语句

  • switch 语句

if语句语法结构:

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
	// 条件成立执行的代码语句
}

• 语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

if语句执行流程

// 2. 执行思路  如果 if 里面的条件表达式结果为真(true) , 则执行大括号里面的 执行语句 
// 如果if 条件表达式结果为假(false) , 则不执行大括号里面的语句, 则执行 if 结构后面的代码
// 3. 代码体验
if (3 < 5) {
    alert('沙漠骆驼');
}

if语句案例

// 弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
// 使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
var age = prompt('请输入您的年龄:');
if (age >= 18) {
    alert('我想带你去网吧偷耳机');
}

if else语句

// 1. 语法结构  if 如果  else 否则
// if (条件表达式) {
//     // 执行语句1
// } else {
//     // 执行语句2 
// }
// 2. 执行思路 如果表达式结果为真 那么执行语句1  否则  执行语句2

if else语句执行流程

// 3. 代码验证
var age = prompt('请输入您的年龄:');
if (age >= 18) {
    alert('我想带你去网吧偷耳机');
} else {
    alert('滚， 回家做作业去');
}
// 5. if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行  2选1
// 6.  else 后面直接跟大括号

if else案例-判断闰年

• 接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年

// 算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
// 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
// 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
// 一定要注意里面的且 &&  还有或者 || 的写法，同时注意判断整除的方法是取余为 0
var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('您输入的年份是闰年');
} else {
    alert('您输入的年份是平年');
}

if else案例-判断中奖

• 接收用户输入的姓名，来判断是否中奖， 如果输入的是刘德华，则提示中了5块钱， 否则提示没有中奖。
• 案例分析:
  • ① 弹出 prompt 输入框，让用户输入姓名，把这个值取过来保存到变量中
  • ② 使用 if 语句来判断是否存在这个姓名，如果存在，就执行 if 大括号里面的输出语句，否则就执行 else 里面的输出语句
  • ③ 一定要注意判断是否相等，用 == 或者 ===

// 算法 如果你叫刘德华 恭喜您中奖了，否则没有中奖
// 获得用户名
var username = prompt("请输入您的姓名：");
if( username == "刘德华") {
	alert("恭喜发财");
} else {
	alert("谢谢惠顾,欢迎下次再来");
}

if else if语句-语法结构

// 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 中间有个空格

if else if语句-执行流程

if else if 案例-判断级别

• 要求：接收用户输入的分数，根据分数输出对应的等级字母 A、B、C、D、E。

• 其中：

  • 90分(含)以上 ，输出：A

  • 80分(含)~ 90 分(不含)，输出：B

  • 70分(含)~ 80 分(不含)，输出：C

  • 60分(含)~ 70 分(不含)，输出：D

  • 60分(不含) 以下，输出： E

• 案例分析:

  • ① 按照从大到小判断的思路

• ② 弹出 prompt 输入框，让用户输入分数，把这个值取过来保存到变量中

  • ③ 使用多分支 if else if 语句来分别判断输出不同的值

//  伪代码       按照从大到小判断的思路
// 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
// 使用多分支 if else if 语句来分别判断输出不同的值
var score = prompt('请您输入分数:');
if (score >= 90) {
    alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
    alert('宝贝，你已经很出色了');
} else if (score >= 70) {
    alert('你要继续加油喽');
} else if (score >= 60) {
    alert('孩子，你很危险');
} else {
    alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}

三元表达式

• 三元表达式也能做一些简单的条件选择。 有三元运算符组成的式子称为三元表达式

语法结构

• 表达式1 ? 表达式2 : 表达式3;

执行思路

• 如果表达式 1 为 true ，则返回表达式 2 的值，如果表达式 1 为 false，则返回表达式 3 的值
• 简单理解： 就类似于 if else （双分支） 的简写

    // 1. 有三元运算符组成的式子我们称为三元表达式
    // 2. ++num     3 + 5     ? :

    // 3. 语法结构 
    // 条件表达式 ？ 表达式1 ： 表达式2

    // 4. 执行思路
    // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值

    // 5. 代码体验
    var num = 10;
    var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
    console.log(result); // 是的

    // 相当于:
// var num = 10;
    // if (num > 5) {
    //     result = '是的';
    // } else {
    //     result = '不是的';
    // }
// console.log(result); // 是的

案例-数字补0

• 用户输入数字，如果数字小于10，则在前面补 0 ，比如01，09 ，如果数字大于10，则不需要补，比如 20。

// 用户输入0~59之间的一个数字
// 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则  不做操作
// 用一个变量接受这个返回值，输出
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式   表达式 ？ 表达式1 ：表达式2 
var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量
alert(result);

switch语句

语法结构

• switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

• switch ：开关 转换 ， case ：小例子 选项
• 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
• 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
• switch 表达式的值会与结构中的 case 的值做全等(===)比较
• 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止整个 switch 语句代码的执行
• 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
• 注意： 执行 case 里面的语句时，如果没有 break，则继续执行下一个 case 里面的语句,指导遇到 break 才会停止 switch 的执行。

// 4. 代码验证
switch (8) {
    case 1:
        console.log('这是1');
        break;
    case 2:
        console.log('这是2');
        break;
    case 3:
        console.log('这是3');
        break;
    default:
        console.log('没有匹配结果'); // 没有匹配结果
}

// switch注意事项
var num = 1;
switch (num) {
    case 1:
        console.log(1); // 1
    case 2:
        console.log(2); // 2
    case 3:
        console.log(3); // 3
        break;
}
// 1. 我们开发里面 表达式我们经常写成变量
// 2. 我们 num 的值 和 case 里面的值相匹配的时候是 全等   必须是值和数据类型一致才可以 num === 1
// 3. break 如果当前的 case 里面没有 break 则不会退出switch 而是继续执行下一个case

switch语句-案例

• 用户在弹出框里面输入一个水果，如果有就弹出该水果的价格， 如果没有该水果就弹出“没有此水果”。

• 案例分析:
  • 01 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
  • 02 将这个变量作为 switch 括号里面的表达式。
  • 03 case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
  • 04 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
  • 05 将 default 设置为没有此水果。

// 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
// 将这个变量作为 switch 括号里面的表达式。
// case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
// 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
// 将 default 设置为没有此水果。
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
    case '苹果':
        alert('苹果的价格是 3.5/斤');
        break;
    case '榴莲':
        alert('榴莲的价格是 35/斤');
        break;
    default:
        alert('没有此水果');
}

switch与if else if的区别

• 01 一般情况下，它们两个语句可以相互替换

• 02 switch…case 语句通常处理 case 为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)

• 03 switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而 if…else 语句有几种条件，就得判断多少次。

• 04 当分支比较少时，if… else 语句的执行效率比 switch 语句高。

• 05 当分支比较多时，switch 语句的执行效率比较高，而且结构更清晰。

其他案例

• 01 判断时间阶段。 比如 用户输入12点 弹出 中午好 用户输入 18点 弹出傍晚好 用户输入 23点 弹出深夜好

// 因为 switch 中进行的是全等匹配,所以需要对输入的内容进行类型转换
var time = parseInt(prompt("请用户输入时间:"))
switch (time) {
  case 12:
    console.log("中午好")
    break;
  case 18:
    console.log("下午好")
    break;
  case 23:
    console.log("晚上好")
    break;
  default:
    console.log("你输入的时间没有匹配到问候语~~~");
}

• 02 比较两个数的最大值 （用户依次输入2个值，最后弹出最大的那个值）

// 因为 switch 中进行的是全等匹配,所以需要对输入的内容进行类型转换
var num1 = parseInt(prompt("请用户输入数字1:"))
var num2 = parseInt(prompt("请用户输入数字2:"))

if (num1 > num2) {
  console.log("最大值为" + num1)
} else if (num2 > num1) {
  console.log("最大值为" + num2)
} else {
  console.log("两个值大小相等:" + num1)
}

• 03 用户输入一个数，来判断是奇数还是偶数

var num = parseInt(prompt("请用户输入数字:"))
if (num % 2) {
  console.log("这是个奇数")
} else {
  console.log("这是个偶数")
}

• 04 根据用户输入的数值（数字1 到 数字 7），返回星期几

var week = parseInt(prompt("请用户输入1-7的数字:"))
switch (week) {
  case 1:
    console.log("星期1")
    break
  case 2:
    console.log("星期2")
    break
  case 3:
    console.log("星期3")
    break
  case 4:
    console.log("星期4")
    break
  case 5:
    console.log("星期5")
    break
  case 6:
    console.log("星期6")
    break
  case 7:
    console.log("星期7")
    break
  default:
    console.log("你输入的数字没有匹配到星期")
}

• 05 接收班长口袋里的钱数,若大于等于2000，请大家吃西餐。若小于2000，大于等于1500，请大家吃快餐。若小于1500，大于等于1000，请大家喝饮料。若小于1000，大于等于500，请大家吃棒棒糖。否则提醒班长下次把钱带够

var money = parseInt(prompt("班长你有多少钱请我们吃饭:"))
if (money >= 2000) {
  console.log("请大家吃西餐")
} else if (money >= 1500) {
  console.log("请大家吃快餐")
} else if (money >= 1000) {
  console.log("请大家喝饮料")
} else if (money >= 500) {
  console.log("请大家吃棒棒糖")
} else {
  console.log("班长,带够钱啊~~")
}

• 06 分数转换,给一个分数，判定等级。大于等于90 A，大于等于80小于90 B，大于等于70小于80 C ，大于等于60小于70 D，小于60 E

var score = parseInt(prompt("请输入你的分数:"))
if (score >= 90) {
  console.log("AAA")
} else if (score >= 80) {
  console.log("BBB")
} else if (score >= 70) {
  console.log("CCC")
} else if (score >= 60) {
  console.log("DDD")
} else {
  console.log("EEE")
}

JavaScript流程控制-循环

• 在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

• 在 JS 中，主要有三种类型的循环语句：

  • for 循环

  • while 循环

  • do…while 循环

for循环

• 在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

语法结构

• for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

for(初始化变量; 条件表达式; 操作表达式 ){
	//循环体
}

• 初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
• 条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
• 操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

// 1. for 重复执行某些代码， 通常跟计数有关系
// 2. for 语法结构
// for (初始化变量; 条件表达式; 操作表达式) {
//     // 循环体
// }
// 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用 
// 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
// 6. 代码体验 我们重复打印100局 你好
for (var i = 1; i <= 100; i++) {
    console.log('你好吗');
}

执行过程

1. 初始化变量，初始化操作在整个 for 循环只会执行一次。
2. 执行条件表达式，如果为 true，则执行循环体语句，否则退出循环，循环结束。
3. 执行操作表达式，此时第一轮结束。
4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
5. 继续执行操作表达式，第二轮结束。
6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

// for 循环的执行过程
for (var i = 1; i <= 100; i++) {
    console.log('你好吗');
}
// 1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index
// 2. 去 i <= 100 来判断是否满足条件， 如果满足条件  就去执行 循环体  不满足条件退出循环 
// 3. 最后去执行 i++  , i++ 是单独写的代码 递增  第一轮循环结束 
// 4. 接着去执行 i <= 100 如果满足条件  就去执行循环体  不满足条件退出循环   第二轮

案例-输出1-100

// 基本写法
for (var i = 1; i <= 100; i++) {
  console.log('这个人今年' + i + '岁了');
}

// for 循环可以执行相同的代码
for (var i = 1; i <= 10; i++) {
    console.log('媳妇我错了');
}

// 我们可以让用户控制输出的次数
var num = prompt('请您输入次数');
for (var i = 1; i <= num; i++) {
    console.log('媳妇我错了');
}

// for 循环可以重复执行不同的代码  因为我们有计数器变量 i 的存在, i每次循环值都会变化
// 我们想要输出1个人 1~100岁
// for (var i = 1; i <= 100; i++) {
//     console.log('这个人今年' + i + '岁了');
// }

for (var i = 1; i <= 100; i++) {
    if (i == 1) {
        console.log('这个人今年1岁了，他出生了');
    } else if (i == 100) {
        console.log('这个人今年100岁了，他死了');
    } else {
        console.log('这个人今年' + i + '岁了');
    }
}

案例-求1-100累加和

• 案例分析:
  • ① 需要循环100次，我们需要一个计数器 i
  • ② 我们需要一个存储结果的变量 sum ，但是初始值一定是 0
  • ③ 核心算法：1 + 2 + 3 + 4 …. ，sum = sum + i;

// 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 += i; // sum = sum + i;
}
console.log(sum); // 5050

案例-求1到100的平均数

// 1. 求1-100之间所有数的平均值   需要一个 sum 和的变量 还需要一个平均值 average 变量
var sum = 0;
var average = 0;
for (var i = 1; i <= 100; i++) {
    sum = sum + i;
}
average = sum / 100;
console.log(average);

// 求 1 到 n 的整数和,平均值
var num = parseInt(prompt("请输入整数N:"))
var sum = 0; // 和
var average = 0; // 平均值
for (var i = 1; i <= num; i++) {
  sum = sum + i;
}
console.log(sum); // 累加和
average = sum / num;
console.log(average); // 平均值

案例-求1到100的奇偶和

// 2. 求1-100之间所有偶数和奇数的和   我们需要一个偶数的和变量 even  还需要一个奇数 odd
var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
  if (i % 2 == 0) {
    even = even + i;
  } else {
    odd = odd + i;
  }
}
console.log('1~100 之间所有的偶数和是' + even); // 2550
console.log('1~100 之间所有的奇数和是' + odd); // 2500

案例-求被3整除的数字和

// 3. 求1-100之间所有能被3整除的数字的和   
var result = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        result += i; // result = result + i;
    }
}
console.log('1~100之间能够被3整数的数字的和是：' + result);

案例-求学生成绩

• 要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。

• 案例分析:

  • ① 弹出输入框输入总的班级人数 ( num )

  • ② 依次输入学生的成绩（保存起来 score），此时我们需要用到 for 循环，弹出的次数跟班级

  • 总人数有关系 条件表达式 i <= num

  • ③ 进行业务处理: 计算成绩。 先求总成绩（sum），之后求平均成绩（average）

  • ④ 弹出结果

// 弹出输入框输入总的班级人数(num)
// 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到
// for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num
// 进行业务处理: 计算成绩。 先求总成绩（sum）， 之后求平均成绩（average）
// 弹出结果
var num = prompt('请输入班级的总人数:'); // num 总的班级人数
var sum = 0; // 求和的变量
var average = 0; // 求平均值的变量
for (var i = 1; i <= num; i++) {
    var score = prompt('请您输入第' + i + '个学生成绩');
    // 因为从prompt取过来的数据是 字符串型的需要转换为数字型
    sum = sum + parseFloat(score);
}
average = sum / num;
alert('班级总的成绩是' + sum);
alert('班级平均分是：' + average);

案例-一行打印5个星星

• 我们采取追加字符串的方式，这样可以打印到控制台上。

// 循环输出五次 ★
for (var i = 1; i <= 5; i++) {
    console.log('★');
}

// 一行打印五个星星 
var str = '';
for (var i = 1; i <= 5; i++) {
    str = str + '★';
}
console.log(str);

// 一行打印指定个数的 ★
var num = prompt('请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++) {
    str = str + '★'
}
console.log(str);

双重for循环

双重for循环概述

• 很多情况下，单层 for 循环并不能满足我们的需求，比如我们要打印一个 5 行 5 列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。

• 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

双重for循环语法

// 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 + '次');
    }
}

案例-打印5行5列星星

• 核心：
  • 内层循环负责一行打印五个星星
  • 外层循环负责打印五行

// 打印五行五列星星
var str = '';
for (var i = 1; i <= 5; i++) { // 外层循环负责打印五行
    for (var j = 1; j <= 5; j++) { // 里层循环负责一行打印五个星星
        str = str + '★';
    }
    // 如果一行打印完毕5个星星就要另起一行 加 \n
    str = str + '\n';
}
console.log(str);

案例-打印N行N列星星

// 打印n行n列的星星
var rows = prompt('请您输入行数:');
var cols = prompt('请您输入列数:');
var str = '';
for (var i = 1; i <= rows; i++) {
    for (var j = 1; j <= cols; j++) {
        str = str + '★';
    }
    str += '\n';
}
console.log(str);

案例-打印倒三角

• ① 一共有10行，但是每行的星星个数不一样，因此需要用到双重 for 循环

• ② 外层的 for 控制行数 i ，循环10次可以打印10行

• ③ 内层的 for 控制每行的星星个数 j

• ④ 核心算法： 每一行星星的个数 j = i ; j <= 10; j++

• ⑤ 每行打印完毕后，都需要重新换一行

// 打印倒三角形案例
var str = '';
for (var i = 1; i <= 10; i++) { // 外层循环控制行数
    for (var j = i; j <= 10; j++) { // 里层循环打印的个数不一样  j = i
        str = str + '★';
    }
    str += '\n';
}
console.log(str);

02.6 打印99乘法表

• 案例分析:

• ① 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环

• ② 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行

• ③ 内层的 for 循环控制每行公式 j

• ④ 核心算法：每一行 公式的个数正好和行数一致， j <= i;

• ⑤ 每行打印完毕，都需要重新换一行

• ⑥ 把公式用 i 和 j 替换

// 九九乘法表
// 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
// 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行  
// 内层的 for 循环控制每行公式  j  
// 核心算法：每一行 公式的个数正好和行数一致， j <= i;
// 每行打印完毕，都需要重新换一行
var str = '';
for (var i = 1; i <= 9; i++) { // 外层循环控制行数
    for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数  j <= i
        // 1 × 2 = 2
        // str = str + '★';
        str += j + '×' + i + '=' + i * j + '\t';
    }
    str += '\n';
}
console.log(str);

其他案例

  /* 用于拼接字符串 */
let res = ""
  /* 外层循环用于控制打印的行数 */
  for(let i = 0;i < 10;i++){
    /* 内层循环用于控制打印的个数*/
    for(let j= 0;j <= i; j++ ){
      res += "*"
    }
    /* 打印完成一行,换行*/
    res += "\n"
  }
/* 全部行数打印完成后输出 */
  console.log(res);

for循环总结

• for 循环可以重复执行某些相同代码

• for 循环可以重复执行些许不同的代码，因为我们有计数器

• for 循环可以重复执行某些操作，比如算术运算符加法操作

• 随着需求增加，双重for循环可以做更多、更好看的效果

• 双重 for 循环，外层循环一次，内层 for 循环全部执行

• for 循环是循环条件和数字直接相关的循环

• 分析要比写代码更重要

• 一些核心算法想不到，但是要学会，分析它执行过程

• 举一反三，自己经常总结，做一些相似的案例

while循环

语法结构

• while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

• while语句的语法结构如下：

while (条件表达式) {
	// 循环体代码
}

执行顺序

• 执行思路：
  • ① 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
  • ② 执行循环体代码
  • ③ 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

// 1. while 循环语法结构  while 当...的时候
// while (条件表达式) {
//     // 循环体
// }
// 2. 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环

// 3. 代码验证
var num = 1;
while (num <= 100) {
    console.log('好啊有');
    num++;
}
// 4. 里面应该也有计数器 初始化变量
// 5. 里面应该也有操作表达式  完成计数器的更新 防止死循环

• 注意:
  • 01 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
  • 02 while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

案例

• 1. 打印人的一生，从1岁到100岁

// 1. 打印人的一生，从1岁到100岁
var i = 1;
while (i <= 100) {
    console.log('这个人今年' + i + '岁了');
    i++;
}

• 2. 计算 1 ~ 100 之间所有整数的和

// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
    sum += j;
    j++
}
console.log(sum);

• 3. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。

// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
    message = prompt('你爱我吗?');
}
alert('我也爱你啊！');

do while循环

语法结构

• do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

// 1.do while 循环 语法结构
do {
    // 循环体
} while (条件表达式)
// 2.  执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环

执行顺序

• ① 先执行一次循环体代码

• ② 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

• 注意：先再执行循环体，再判断，我们会发现 do…while 循环语句至少会执行一次循环体代码

// 3. 代码验证
var i = 1;
do {
    console.log('how are you?');
    i++;
} while (i <= 100)
// 4. 我们的do while 循环体至少执行一次

案例

// 1. 打印人的一生，从1岁到100岁
var i = 1;
do {
    console.log('这个人今年' + i + '岁了');
    i++;
} while (i <= 100)

// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 100)
console.log(sum);

案例

• 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。

• 案例分析:

  • ① 弹出输入框，要求用户输入。

• ② 判断条件我们使用 do…while 循环。

  • ③ do… while 循环语句中的条件表达式只要输入的不是我爱你，就一直循环。

// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
do {
    var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');

do while 循环总结

• JS 中循环有 for 、while 、 do while

• 三个循环很多情况下都可以相互替代使用

• 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for

• while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些

• while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行

• while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体， 而 while 可能一次也不执行

• 实际工作中，我们更常用for 循环语句，它写法更简洁直观， 所以这个要重点学习

循环中的关键字

continue

• continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

• 例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

// continue 关键字   退出本次（当前次的循环）  继续执行剩余次数循环
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue; // 只要遇见 continue 就退出本次循环 直接跳到 i++
    }
    console.log('我正在吃第' + i + '个包子');
}

// 1. 求1~100 之间， 除了能被7整除之外的整数和 
var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 7 == 0) {
        continue;
    }
    sum += i;
}
console.log(sum);

break

• break 关键字用于立即跳出整个循环（循环结束）。

• 例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

// break 退出整个循环
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log('我正在吃第' + i + '个包子');
}

JavaScript简单/复杂类型

简单/复杂类型

• 简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

  • 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型,比如: string ，number，boolean，undefined，null

  • 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过,比如通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆和栈

• 堆栈空间分配区别：

  • 1. 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
  • 2. 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面

• 注意：JavaScript 中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。

简单类型的内存分配

• 值类型（简单数据类型）： string ，number，boolean，undefined，null

• 值类型变量的数据直接存放在变量（栈空间）中

复杂类型的内存分配

• 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

• 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

// 简单数据类型 null  返回的是一个空的对象  object 
var timer = null;
console.log(typeof timer); // object

// 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null 
// 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
// 2. 复杂数据类型 首先在栈里面存放地址,用十六进制表示,然后这个地址指向堆里面的数据

简单类型传参

• 函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

// 简单数据类型传参
function fn(a) {
    a++;
    console.log(a);
}
var x = 10;
fn(x);
console.log(x);

复杂类型传参

• 函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

// 复杂数据类型传参
function Person(name) {
    this.name = name;
}

function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?  刘德华   
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?   张学友
}

var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ?   刘德华 

f1(p);
console.log(p.name); // 4. 这个输出什么 ?   张学友

扩展阅读

解释型语言和编译型语言

概述

• 计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

• 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同

• 编译器是在代码执行之前进行编译，生成中间代码文件

• 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

执行过程

标识符/关键字/保留字

标识符

• 标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

• 标识符不能是关键字或保留字。

关键字

• 关键字：是指 JS 本身已经使用了的字，不能再用它们充当变量名、方法名。

• 包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

保留字

• 保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

• 包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

• 注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。