跟着pink老师学前端之JavaScript-基础部分

1. 初始JavaScript

1.1 JavaScript是什么

• JavaScript是一种运行在客户端的脚本语言。
• 脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行。
• 现在也可以基于Node.js技术进行服务端编程。

1.2 JavaScript的作用

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

1.3 浏览器执行JS简介

浏览器分成两部分：

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

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

1.4 JavaScript的组成

JavaScript由ECMAScript语法、DOM（页面文档对象模型）和BOM（浏览器对象模型）三部分组成。

1. ECMAScript

​ ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2. DOM

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

3. BOM

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

2. JS初体验

js习惯用单引号。

1. 行内式的js：直接写到元素的内部

     <input type="button" value="riki" onclick="alert('kawaii！')">
   

2. 内嵌式的js

   <script>
       alert('rikiwa kawaii desu!');
   </script>
   

3. 外部js script是双标签

   <script src="my.js"></script>
   //引用外部的script两个标签中间不允许写东西
   

3. JavaScript语言核心

3.1 输入输出语句

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

3.2 变量

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

变量的基础知识和java语言、C语言比较相似，相同的部分就不做笔记了。

变量的使用：

// 1. 用户输入姓名存储到一个叫myname的变量中
var myname = prompt('请输入姓名:');
// 2. 输出这个姓名
alert(myname);
 // 声明多个变量
var name = 'riki',
    age = 27,
    sex = 'm';

特殊情况：

1. 只声明不赋值，结果是？undefined
2. 不声明不赋值，结果是？报错
3. 不声明，直接赋值，结果是？输出值

命名规范：

• 字母、数字、下划线、和美元符号组成。
• 严格区分大小写。
• 不能以数字开头。
• 不能是关键字和保留字。
• 变量名必须有意义。
• 遵守驼峰命名法。首字母小写，后面单词的首字母大写。
• 尽量不要用name这个词作为变量名，这个词在有些浏览器中具有含义。

3.3 数据类型

js是一种弱类型或者说动态语言，js的变量数据类型不用提前声明变量的类型，**是只有程序在运行过程中，根据等号右边的值来确定的。**运行完毕后，变量就确定了数据类型。js拥有动态类型，意味着相同的变量可用作不同的类型。

var x = 6;	//x为数字
var x = "bill";	//x为字符串

简单数据类型

简单数据类型	说明	默认值
Number	数字类型，包含整型和浮点型	0
Boolean	布尔值	false
String	字符串，带引号	“”
Undefined	声明变量却没有给值	undefined
Null	声明变量为空值	null

1. 数字型Number

1. 八进制：0~7，程序里面数字前面加0表示八进制。

   var num1=010;
   console.log(num1);  //010八进制转换为十进制是8
   var num2=012;
   console.log(num2);  //012八进制转换为十进制是10
   

2. 十六进制：0_9，af，数字前面加0x是十六进制。

   var num3=0xa;
   console.log(num3);  //0xa十六进制转换为十进制是10
   

3. 数字型的最大值

   console.log(Number.MAX_VALUE);	//1.7976931348623157e+308
   

4. 数字型的最小值

   console.log(Number.MIN_VALUE);	//5e-324
   

5. 无穷大

   console.log(Number.MAX_VALUE * 2);	//Infinity
   

6. 无穷小

   console.log(-Number.MAX_VALUE * 2);	//-Infinity
   

7. 非数字

   console.log('riki' - 27)  //NaN
   

   isNaN（）：判断非数字方法，如果是数字返回false，如果不是数字返回true。

2. 字符串型String

在一个简单字符串中，用单引号和双引号都可以，由于HTML里的属性用的是双引号，所以这里推荐使用单引号。

引号的嵌套

由于js匹配引号时使用的是就近原则，所以要在字符串中使用引号时使用外双内单，或者外单内双。

字符串的拼接

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

3. 布尔型Boolean

true在参与加法运算时当成1处理，false当成0处理。

4. Undefine和Null

Undifined

• 一个变量只声明不赋值输出undefine。
• 和数字类型、布尔类型相连输出NaN。
• 和字符串相连输出新的字符串。

Null

• 和数字相连输出数字本身。

5. typeof

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

控制台输出内容判断数据类型：

• 黑色：字符型；
• 蓝色：数字型
• 深蓝色：布尔型；
• 灰色：undefined和null

6. 字面量

一眼能看出来是什么类型的值。

3.4 数据类型的转换

1. 转换成字符串

// 1. 把数字型转换为字符串类型 变量.toString()
var num = 10;
var str = num.toString();
console.log(typeof str);    //String
// 2. 利用String()
console.log(String(num));
// 3. 利用+ 拼接字符串的方法，最常用，也成为隐式转换
console.log(num + '');

2. 转换为数字型

var age = prompt('请输入年龄：');
// 1. parseInt(变量) 把字符型的转换为整型数字型
console.log(parseInt(age));
console.log(parseInt('3.89'));  //3取整
console.log(parseInt('120px')); //120 会去掉后面的字母
console.log(parseInt('rem120px'));  // NaN

// 2. parseFloat(变量) 把字符型的转换为浮点数字型
console.log(parseFloat('3.89'));  //3.89
console.log(parseFloat('3'));   //3

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

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

3. 转换成布尔型

// 1. false
console.log(Boolean(''));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(0));
console.log(Boolean(undefined));
// 2. true除了以上五个，其余都是true

3.4 标识符、关键字、保留字

1. 标识符：开发人员为变量、属性、函数、参数取的名字。
2. 关键字：js本身已经使用了的字。
3. 保留字：实际上就是预留的“关键字”，未来可能会成为关键字的字。

3.5 运算符

注意：

1. console.log(18 == '18')	//true，==会默认转换数据类型，会把字符串型的数据转换为数值型的数据
   console.log(18 === '18')	//false，===代表全等，要求两边的值和数据类型完全相同
   

2. 短路运算：

   逻辑与短路：如果表达式1为真，返回表达式2；如果表达式为假，返回表达式1。类比于狼人杀里面预言家拿警徽留警徽流的反向操作，即狼警。验出第一警徽流是狼，警徽给他；验出第一警徽流是好人，警徽给第二个人。

   逻辑或短路：如果表达式1为真，返回表达式1；如果表达式1为假，返回表达式2。好人预言家警长。

3. 运算符优先级：由高到低

   优先级	运算符	顺序
   1	小括号	（）
   2	一元运算符	++ – ！
   3	算术运算符	先* / %后+ -
   4	关系运算符	> >= < <=
   5	相等运算符	== != === !==
   6	逻辑运算符	先&& 后||
   7	赋值运算符	=
   8	逗号运算符	，

4. JavaScript流程控制

4.1 switch

switch语法结构：当要针对变量设置一系列特定值的选项时，就可以使用switch。

switch (表达式) {
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    ...
    default:
    	执行最后的语句;
        break;
}

1. 表达式的值和case里面的值相匹配的条件是二者全等。
2. 如果当前case里面没有break，则不会退出switch，而是不管有没有匹配上，都要执行下一个case里面的语句。

4.2 continue和break

continue

for (var i = 1; i <= 5; i++) {
   
    if (i == 3) {
   
        continue;   //只要遇到continue就退出本次循环
    }
    console.log('我正在吃第' + i + '个包子');
}
输出结果：
我正在吃第1个包子
我正在吃第2个包子
我正在吃第4个包子
我正在吃第5个包子

break

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