【前言】

编程语言

编程

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

计算机程序:就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令
从事编程的人员，就是程席员但是一般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农”或者“程序”/“程序媛。

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

计算计语言

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。

计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类.

实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。

编程语言

可以通过类似于人类语言的”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言(ProgrammingLanguage).
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇(不同编程语言的格式和词汇不一样，必须遵守。

汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

翻译器

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

编程语言和标记语言区别

编程语言有很强的逻辑和行为能力。在编程语言里你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的。
标记语言(html)不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的,他是被动的。

总结

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

计算机基础

计算机组成

数据存储

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

数据存储单位

程序运行

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

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

初始JavaScript

发展历史

布兰登艾奇(Brendan Eich，1961年~)。
神奇的大哥在1995年利用10天完成JavaScript设计。
网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript。

JavaScript是什么

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言 (Script是脚本的意思)
脚本语言:不需要编译，运行过程中由js 解释器 (js引擎) 逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程

JavaScript的作用

表单动态校验(密码强度检测) （ JS 产生最初的目的 )
网页特效
服务端开发(Nodejs)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

浏览器执行Js简介

浏览器分成两部分，渲染引擎和Js引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome 浏览器的 blink，老版本的webkit
Js引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome 浏览器的V8

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

JS的组成

ECMAScript

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

ECMAScript : CMAScript 规定了JS的编程语法和基核心知识，是所有浏资器广商共同遵守的一套S语法工业标准

DOM-文档对象模型

档对象模型(DocumentObject Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过 DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

BOM-浏览器对象模型

BOM(Browser ObjectModel,简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

Js初体验

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

行内式Js

可以将单行或少量JS代码写在HTML标签的事件属性中(以on 开头的属性)，如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号,JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读;
引号易错，引号多层嵌套匹配时，非常容易弄混
特殊情况下使用

内嵌 Js

可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式

外部 Js

利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

Js注释

单行注释 ctrl + /

多行注释 ctrl + alt + a

Js输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

变量

概述

变量就是一个装东西的盒子

定义：

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

变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间。

类似我们酒店的房间，一个房间就可以看做是一个变量。

变量的使用

变量在使用时分为两步：1.声明变量 2.赋值

声明变量

// 声明变量

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

var 是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

赋值

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

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

变量的初始化

var age = 18; // 声明变量同时赋值为18

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

案例

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

<script>

// 1.用户输入姓名存储到一个 myname的变量里面

var myname = prompt('请输入您的名字');

// 2.输出这个用户名

alert(myname);

</script>

变量语法扩展

更新变量

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

var age = 18;

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

同时声明多个变量

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

var age = 10, name = ‘zs’，sex = 2;

声明变量特殊情况⭐

情况	说明	结果
var age; console.log(age);	只声明不赋值	undefined 未定义的
console.log(age)	不声明不赋值直接使用	报错
age = 10; console.log(age);	不声明只赋值	10

变量命名规范

由字母(A-Za-z)、数字（0-9）、下划线（_）、美元符号（$）组成，如： usrAge,num01_name
严格区分大小写。var app;和var App;是两个变量
不能以数字开头。 18age 是错误的。
不能是关键字、保留字。例如： var、for、while
变量名必须有意义。MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸

案例

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

数据类型

数据类型简介

为什么需要数据类型

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

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

变量的数据类型

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

var age = 10; // 这是一个数字型

var areYouOk = '是的'； // 这是一个字符串

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

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

var x = 6; // x为数字

var x = "Bill"; // x为字符串

数据类型的分类

Js把数据类型分为两类：

简单数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(object)

简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于 1 和 0	false
String	字符串类型，如“张三” 注意咱们js里面，字符串都带引号	""
Undefined	var a; 声明了变量a但是没有给值，此时 a = undefined	undefined
Null	vara = null; 声明了变量 a 为空值	null

数字型 Number

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

var age = 21; // 整数

var Age = 21.3747; // 小数

1.数字型进制

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

// 1.八进制数字序列范围： 0 ~ 7

var num1 = 07； // 对应十进制的7

var num2 = 019； // 对应十进制的19

var num3 = 08； // 对应十进制的8

// 2.十六进制数字序列范围： 0 ~9 以及 A ~ F

var num = 0xa;

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

2.数字型范围

javascript中数值的最大和最小值。

alert(Number.Max_VALUE); // 1.7976931348623157e+308

alert(Number.MIN_VALUE); // 5e-324

3.数字型三个特殊值

alert(Infinity); // Infinity

alert(-Infinity); // -Infinity

alert(NaN); // NaN

Infinity 代表无穷大（∞），大于任何数值
-Infinity 代表无穷小，小于任何数值
NaN ， Not a number ，代表一个非数值

4.isNaN()

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

注意：x是一个非数字，所以反过来计好记，是一个非数字就是 true ，不是一个非数字就是flase

字符串型 String

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

注意：

因为html标签里面的属性使用的是双引号，为了区分开我们js更推荐使用单引号

1.字符串引号嵌套

js可以用单引号嵌套双引号，或者双引号嵌套单引号

2. 字符串转义符

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

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

转义符	解释说明
\ n	换行符，n是newline的意思
\ \	斜杠 \
\ '	‘ 单引号
\ "	“ 双引号
\ t	tab 缩进
\ b	空格， b 是blank 的意思

<script>

// 字符串转义字符都是用 \ 开头但是这些字符要写到引号里面

var str1 = "我是一个'未来高富帅'\n的程序员";

console.log(str1);

var str1 = "我是一个'未来高富帅'\\的程序员";

console.log(str1);

var str1 = "我是一个'未来高富帅'\'的程序员";

console.log(str1);

var str1 = "我是一个'未来高富帅'\"的程序员";

console.log(str1);

var str1 = "我是一个'未来高富帅'\t的程序员";

console.log(str1);

var str1 = "我是一个'未来高富帅'\b的程序员";

console.log(str1);

</script>

字符串的长度及拼接

字符串长度

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

// 检测获取字符串的长度 length

var str = ‘my name is andy’;

console.log(str.length)； // 输出的字符串长度结果是 15

字符串拼接

多个字符串之间可以使用 +进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

// 字符串的拼接 +

conlose.log(‘沙漠’ + ‘骆驼’); // 输出结果是沙漠骆驼

<script>

// 字符串的拼接 + 只要有字符串和其他类型相拼接最终的结果是字符串类型

console.log('沙漠' + '骆驼'); // 输出结果是沙漠骆驼

console.log('张三' + 18); // 输出结果是张三18

console.log('zhangsan' + true); // 输出结果是 zhangsantrue

console.log(12 + 12); // 输出结果是 24

console.log('12' + 12); // 输出结果是 1212

</script>

总结口诀：数值相加，字符相连

字符串拼接加强

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

布尔型 Boolean

布尔类型有两个值：true （是、对）和false （不是、错）

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

<script>

var flag = true; // 布尔型

var flag1 = false; // 布尔型

console.log(flag + 1); // true 参与加法运算当 1 来看输出结果是 2

console.log(flag1 + 1); // flase 参与加法运算当 0 来看输出结果是 1

// 如果一个变量声明未赋值就是 undefined 未定义数据类型

var str;

console.log(str); // 输出结果是 undefined

var varibale = undefined; // 输出结果是 undefined

console.log(varibale + 'zhangsan'); // 输出结果是 undefinedzhangsan 相连

console.log(varibale + 1); // undefined 和数字相加最后的结果是 NaN

// null 空值

var space = null;

console.log(space + 'zhangsan'); // 输出结果是 nullzhangsan 相连

console.log(space + 1); // 输出结果是 1 null是空值空值加上1还是1

</script>

获取变量的数据类型

获取检测变量的数据类型

第一种方法，根据输出的结果判断数据类型

<script>

var num = 10;

console.log(typeof num); // typeof用于检测数据类型检测结果是 number数字型

var flag = ' zhangsan';

console.log(typeof str); // 检测结果是 string 字符串型

var flag = true;

console.log(typeof flag); // 检测结果是 true boolean布尔型

var vari = undefined;

console.log(typeof vari); // 检测结果是 undefined

var timer = null;

console.log(typeof timer); // 检测结果是 object

</script>

第二种方法，根据控制台输出的颜色判断

<script>

console.log(18); // 输出结果是 18 number数字型

console.log('zhangsan'); // 输出结果是 zhangsan 字符串型

console.log(true); // 输出结果是 true boolean布尔型

console.log(undefined); // 输出结果是 undefined

console.log(null); // 输出结果是 null

</script>

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

数字字面量:8,9,10
字符串字面量:‘张三’ ‘李四’
布尔字面量:true，false

数据类型的转换

什么是数据类型转换

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

转换为字符串类型

转换为数字型

转换为布尔型

转换为字符串型

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.String());
String() 强制转换	转成字符串	var num = 1; alert(String(num));
加号拼接字符串⭐	和字符串拼接的结果都是字符串	var num = 1; alert(num + “我是字符串”);

案例

<script>// 1.把数字型转换为字符串型  变量.toString()var num =10;var str = num.toString();console.log(str);               // 输出结果是  10 深黑色  说明是字符串型 console.log(typeof);            // 检测输出结果是  String  说明是字符串型 // 2.我们利用 String(变量)  console.log(String(num));       // 输出结果是  10 深黑色  说明是字符串型// 3.利用 “+” 拼接字符串的方法实现转换效果console.log(num + '');          // 输出结果是  10 深黑色  说明是字符串型   任何数字与字符串型的相加都是字符串型</script>

注意：三种转换方式，更喜欢第三种方式，也被称之为隐式转换。

转换为数字型（重点⭐⭐）

方式	说明	案例
parselnt(string)函数	将string类型转成整数数值型	parselnt('78')
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat('78.21')
Number()强制转换函数	将string类型转换为数值型	Number('12')
js隐式转换(- * /)	利用算数运算隐式转换为数值型	'12' - 0

<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 因为第一个字母是r 不是数字所以会显示NaN 代表一个非数值

// 2.parseFlooat(变量) 可以把字符型转换为数字型得到的是小数浮点数

console.log(parseFlooat(age));

console.log(parseFlooat('3.14')); // 输出结果是 3.14

console.log(parseFlooat('120px')); // 输出结果是 120 会去掉这个px单位

console.log(parseFlooat('rem120px')); // 输出结果是 NaN 因为第一个字母是r 不是数字所以会显示NaN 代表一个非数值

// 3.利用 Number(变量)

var str = '123';

console.log(Number(Str)); // 输出结果是 123

// 3.利用算数运算 - * / 隐式转换运算不能使用 + 号加号的话会连在一起比如下面的123120

console.log('12' - 0); // 输出结果是 12

console.log('123' - '120'); // 输出结果是 243

</script>

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean('ture')

代表空、否定的值会被转换为false ，如 ‘’ NaN null undefined
其余值都会被转换为ture

<script>

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('小白')); // 输出结果是 true

console.log(Boolean(12)); // 输出结果是 true

</script>

扩展阅读

解释行语言和编译型语言

概述

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

翻译器翻译的方式有两种:一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器是在代码执行之前进行编译，生成中间代码文件。
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

执行过程

类似于请客吃饭：

编译语言:首先把所有菜做好，才能上桌吃饭
解释语言:好比吃火锅，边吃边涮，同时进行

标识符

标识(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、packageprivate、protected、public short、static super、 synchronized throws、transientvolatile等

课后作业

<script>

var yourname = prompt('请输入您的姓名：');

var yourage = prompt('请输入您的年龄：');

var yourxingbie = prompt('请输入您的性别：');

alert('您的姓名是：' + yourname + '\n' + '您的年龄是：' + yourage + '\n' + '您的性别是：' + yourxingbie );

</script>

Js运算符

运算符

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

Js常用的运算符

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

算数数运算符

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

浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数

所以:不要直接判断两个浮点数是否相等!

提问

1.我们怎么判断一个数能够被整除呢 ?
它的余数是0就说明这个数能被整除，这就是% 取余运算符的主要用途

2.请问1+2*3结果是?
结果是7，注意算术运算符优先级的，先乘除，后加减，有小括号先算小括号里面的

表达式和返回值

表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解:是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给我们，我们成为返回值

递增和递减运算符

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

在JavaScript中，递增( ++)和递减(- )既可以放在变量前面，也可以放在变量后面。

放在变量前面时，我们可以称为前置递增(递减)运算符，
放在变量后面时，我们可以称为后置递增(递减)运算符。

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

前置递增运算符

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

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

后置递增变量符

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

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

练习

前置递增和后置递增小结

递增运算符可以简化代码的编写，让变量的值+1 比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置:先原值运算，后自加(先人后己)
前置:先自加，后运算(先已后人 )
开发时，大多使用后置递增/减，并且代码独占一行，例如:num++;或者num--;

比较运算符

概念

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

运算符名称	说明	案例	结果
<	小于号	1< 2	true
>	大于号	1> 2	false
>=	大于等于号（大于或者等于）	2>= 2	true
<=	小于等于号（小于或者等于）	3<= 2	false
==	判等号（会转型）	37== 37 37==' 37'(默认转换数据类型，会把字符串型的数据转换为数字型)	true
!=	不等号	37!= 37	false
=== （全等于，一摸一样） !== （不全等于）	全等要求值和数据类型都一致	37=== '37'	false

小结

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

逻辑运算符

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

逻辑运算符	说明	案例
&&	“逻辑与” ，简称 “与” and	true && false
\|\|	“逻辑或” ，简称 “或” or	true \|\| false
！	“逻辑非” ，简称 “非” not	! true

<script>

// 1.逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就是false

console.log(3 > 5 && 3 > 2); // 结果是false 如果一个错误另一个正确则是 false

console.log(3 < 5 && 3 > 2); // 结果是ture 如果两个正确则是 true

// 2.逻辑或 || or 两侧都为false 结果才是false 只要有一侧为true 结果就是true

console.log(3 > 5 || 3 > 2); // 结果是true 如果一个错误另一个正确则是 true

console.log(3 > 5 || 3 < 2); // 结果是false 如果两个都是错误则是 false

// 3.逻辑非 ! not

console.log(!true); // 结果是flase 非true 就是不是true 就是假的

console.log(!flase); // 结果是true 非flase 就是不是flase 就是真的

</script>

案例

短路运算（逻辑中断）

短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。

逻辑与短路运算

语法: 表达式1 &&表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

逻辑或 or 短路运算

如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2（和逻辑与相反）

案例：

赋值运算符

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

赋值运算符	说明	案例
=	直接赋值	var usrName = '我是值';
+= -=	加减一个数后在赋值	var age = 10; age+=5; // 15
*= /= %=	乘除取模后在赋值	var age = 2; age*=5; // 10

赋值运算符

说明

案例

直接赋值

var usrName = '我是值';

+= -=

加减一个数后在赋值

var age = 10;

age+=5; // 15

*= /= %=

乘除取模后在赋值

var age = 2;

age*=5; // 10

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符比如：++num ！num	++ -- !
3	算数运算符	先 * / % 后 + - 先乘除后加减
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	,

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

JavaScript 流程控制-分支

流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行

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

顺序流程控制

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

分支流程控制if语句

分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码(执行代码多选一的过程)，从而得到不同的结果

JS语言提供了两种分支结构语句

if 语句
switch语句

if 语句

// 1.if 的语法结构如果if

if (条件表达式) {

//执行语句

}

// 2.执行思路如果 if 里面的表达式结果为真（true）则执行大括号里面执行语句

// 如果 if 条件表达式结果为假则不执行大括号里面的语句则执行if 语句后面的代码

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

执行流程

案例

if slse语句（双分支语句）

语法结构

// 条件成立执行if里面的代码，否则执行slse里面的代码

if (条件表达式) {

// 【如果】条件成立执行的代码

} else {

// 【否则】执行的代码

}

案例

分析

<script>

var yourname = prompt('请您输入您的姓名：');

if ( yourname === '刘德华') {

alert('恭喜您中奖了！');

} else {

alert('很遗憾您没有中奖！');

}

</script>

if sles if 语句（多分支语句）

// 1.多分支语句就是利用多个条件来选择不同的语句执行得到不同的结果多选1 的过程

// 2.if else if 语句是多分支语句

// 3.语法规范

if (条件表达式1) {

// 语句1

} else if (条件表达式2) {

// 语句2

}else if (条件表达式3) {

// 语句3

}else {

// 如果上面的条件表达式1 2 3 都不符合那么就执行这个最后的语句

}

执行思路

如果条件表达式1 满足就执行语句1 执行完毕后，退出整个if 分支语句
如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
如果上面的所有条件表达式都不成立，则执行else里面的语句

注意

多分支语句还是多选1 最后只能有一个语句执行
else if 里面的条件理论上是可以任意多个的
else if 中间有个空格

执行流程

案例

三元表达式

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

// 1.有三元运算符组成的式子称为三元表达式

// 2.一元表达式 ++num 二元表达式 3 + 5 三元表达式 ? :

// 3.语法结构

// 4.如果条件表达式结果为真则返回表达式1 的值

// 如果条件表达式结果为假则返回表达式2 的值

// 5.代码体验

var num = 10;

var result = num > 5 ? '是的' : '不是的'; // 意思为如果num>5 为真则输出是的反之则输出不是的

console.log(result); // 输出结果为是的

// 相当于 if slse语句（双分支语句）中的

if (num > 5) {

result = '是的';

} else {

result = '不是的';

}

案例

var time = prompt('请您输入一个 0~ 59之间的一个数字');

// 三元表达式表达式 ? 表达式1 : 表达式2

// var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量

alart(result);

分支流程控制switch 语句

语法结构

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

// 1.switch 语句也是多分枝语句也可以实现多选1

// 2.语法结构 seith 转换开关 case 小例子或者选项的意思

switch(表达式) {

case value1:

执行语句1;

break; // break 退出的意思

case value2:

执行语句2;

break;

...

default:

执行最后的语句;

}

执行思路

利用我们的表达式的值和case 后面的选项值相匹配如果匹配上，就执行该case里面的语句如果都没有匹配上那么执行default里面的语句

代码验证

switch注意事项

我们开发里面表达式经常写成变量
我们num 的值和 case 里面的值相匹配的时候是全等必须是值和数据类型一致才可以 num === 1
break 如果当前的case 里面没有break 则不会退出switch 是继续执行下一个case

// 意思是如果case1 没有下面没有写break 则会一值输出case1 2 3的值知道下面的case里面有break才会退出

案例：查询水果

var fruit = prompt('请输入查询的水果：');

switch (fruit) {

case '苹果' :

alert('苹果的价格是 3.5元/斤');

break;

case '榴莲' :

alert('榴莲的价格是 20元/斤');

break;

default :

alert('没有此水果');

}

switch 语句和 if slse if 语句的区别

①一般情况下，它们两个语句可以相互

②替换switch..case 语句通常处理case为比较确定值的情况，而if...else...语句更加灵活，常用于范围判断(大于等于某个范围)
③switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if...else语句有几种条件，就得判断多少次。
④当分支比较少时，if...else语句的执行效率比switch语句高

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

JavaScript 流程控制-循环

循环

循环的目的

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

for 循环

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

语法结构

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

for (初始化变量；条件表达式；操作表达式) {

// 循环体

}

初始化变量: 就是用var 声明的一个普通变量通常用于作为计数器使用
条件表达式：就是用来决定每一次循环是否执行就是终止的条件
操作表达式：就是每次循环最后执行的代码经常用于我们计数器变量进行更新（递增或者递减）

代码体验：我们重复打印100句你好

<script>

for (var i = i; i <= 100; i++) {

console.log('你好吗');

}

</script>

首先执行里面的计数器变量 var i =1 但是这句话在for 里面只执行一次
去 i <= 100 来判断是否满足条件如果满足条件就去执行循环体不满足条件退出循环
最后去执行 i++ i++ 是单独写的代码递增第一轮结束
第二轮接着去执行 i <= 100 如果满足条件就去执行循环体不满足条件退出循环
以此类推

断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

断点调试可以帮我们观察程序的运行过程

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧

for 循环重复相同的代码

for 循环重复不相同的代码

for 循环还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变化。

for 循环重复某些相同的代码

for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算

课堂案例：求1 ~ 100之间所有整数的累加和

var sum = 0;

for (var i = 1; i <= 100; i++) {

sum = sum + i;

// 和 sum += i；意思一样

}

console.log(sum);

案例

案例：求学生成绩

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

案例分析：

var num = prompt('请输入班级的总人数：'); // num 总的班级人数

var sum = 0; // 求和的变量

var average = 0; // 求平均值的变量

for (var i = 1; i <= num; i++) {

var score = prompt('请您输入第' + i + '个学生成绩');

// 因为从prompt取过来的数据是字符串型的需要转换为数字型 parseFloat

sum = sum + parseFloat(score);

}

average = sum / num ;

alert('班级总的成绩是：' + sum);

alert('班级平均分是：' + average);

案例一行打印五个星星

var str = '';

for (var i = 1; i<= 5; i++) {

str = str + '⭐';

}

console.log(str);

双重for循环

案例打印五行五列星星

核心：

内层循环负责一行打印五个星星
外层循环负责打印五行

// 打印五行五个星星

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 列的星星

要求用户输入行数和列数，之后再控制台打印出用户输入行数和列数的星星

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 = str + '\n';

}

console.log(str);

课堂案例：打印倒三角形

var str = '';

for(var i = 1; i <= 10; i++) {

for(var j = i; j <= 10; j++) {

str = str + '⭐';

}

str = str + '\n';

}

console.log(str);

课堂案例：打印正三角形

var str = '';

for(var i = 1; i <= 10; i++) {

for(var j = 1; j <= i; j++) {

str = str + '⭐';

}

str = str + '\n';

}

console.log(str);

课堂案例：打印九九乘法表

分析：

共有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++) {

// 1 × 2 = 2

// str = str + '⭐';

str += j + '×' + i + '=' + i * j + '\t';

}

str = str + '\n';

// \n 换行 \t 空格

}

console.log(str);

for循环小结

for循环可以重复执行某些相同代码
for 循环可以重复执行些许不同的代码，因为我们有计数器
for 循环可以重复执行某些操作，比如算术运算符加法操作
随着需求增加，双重for循环可以做更多、更好看的效果
双重for 循环，外层循环一次，内层for循环全部执行
for循环是循环条件和数字直接相关的循环
分析要比写代码更重要
一些核心算法想不到，但是要学会，分析它执行过程
举一反三，自己经常总结，做一些相似的案例

while循环

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

while 当...的时候

while语句的语法结构如下:

while (条件表达式) {

// 循环体代码

}

执行顺序：

执行思路：

当条件表达式结果为true 则执行循环体否则退出循环
执行循环体（输出‘好啊有’）
执行计数器 num++
然后再执行条件表达式完成计数器的更新防止死循环（这里在num到101后，就不再循环了）

案例：打印人的一生，从1岁到100岁

var i = 1;

while (i <= 100) {

console.log('这个人今年' + i + '岁了');

i++;

}

案例：计算 1~100之间所有整数的和

var sum = 0; // 求和的值

var j = 1;

while (j <= 100) {

// sum += j;

sum = sum + j;

j++;

}

console.log(sum);

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

分析：

弹出输入框，要求用户输入。
判断条件比较复杂我们使用while 循环while 循环
语句中的条件表达式只要输入的不是我爱你，就一直循环

var message = prompt('你爱我吗?')

while (message !== '我爱你') {

message = prompt('你爱我吗?')

}

alert('我也爱你')

do while 循环

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

语法结构：

do {

// 循环体

} while (条件表达式)

执行思路：

跟while不同的地方在于 do while

1.先执行一次循环体

2.再判断条件

3.如果条件表达式结果为真，则继续执行循环体，否则退出循环

我们的do while 最少执行一下

案例：打印人的一生，从1岁到100岁

var i = 1;

do {

console.log('这个人今年' + i + '岁了');

i++;

}while(i <= 100)

案例：计算 1~100之间所有整数的和

var sum = 0;

var j = 1;

do {

sum += j;

j++;

}while (j <= 100)

console.log(sum);

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

do {

var message = prompt('你爱我吗?')；

}while（message !== '我爱你'）

alert('我也爱你呀');

循环小结

JS中循环有 for、while、 do while
三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
while和 do...while 可以做更复杂的判断条件比for 循环灵活一些
while和 do...while执行顺序不一样，while先判断后执行，do...while先执行一次，再判断执行

continue break

continue关键字

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

break关键字

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

Javascript命名规范以及语法格式

标识符命名规范

变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词

操作符命名规范

单行注释

其他规范

作业

JavaScript （一）相关推荐

【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
[JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人数组引用类型分析数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
linux下用js生成xml,js2xml:将javascript字符串转换为xml
有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...