2.JavaScript基础

1.Javascript是什么

（1）运行在客户端的脚本语言

（2）不需要编译，运行过程中由js解释器逐行解释并执行

（3）可以用Node.js进行服务器端编程

2.作用

表单动态校验，网页特效，服务端开发(Node.js)，桌面程序，APP，控制硬件-物联网，游戏开发

3.浏览器执行JS

浏览器的组成

        渲染引擎：解析HTML与CSS，俗称内核，（chrome的blink，老版本的webkit等）

        JS引擎：读取JavaScript代码，并进行处理后运行(chrome的V8)

4.JS组成

（1）ECMAScript：JavaScript语法

（2）DOM：页面文档对象模型（对文档各种元素进行操作）

（3）BOM：浏览器对象模型（对浏览器窗口进行操作）

5.书写位置

（1）行内式

<input type="button" value="A" onclick="alert('B')">

（2）内嵌式

<script>
    alert("hhhh")
  </script>

(3)外部js

 <script src="mu.js">此处不能写代码</script>

6.注释

//单行注释(ctrl+/)

/*
多行注释 (Shift+alt+a)

*/

7.JS语法

7.1 输入输出语句

alert（msg）：弹出警示框

console.log(msg):打印输出信息

prompt:浏览器弹出输入框，用户输入

 <script>
    alert("hhhh")
    prompt("这是一个输入框，你的年龄");
    console.log('a');
  </script>

7.2变量

定义：存放数据的容器，通过变量名获取或修改数据，本质是程序在内存中申请的一块用来存放数据的空间。类似酒店的房间号

变量的使用：

（1）声明变量（声明变量就会在内存中创建一个空间，类似订酒店房间）

var age

（2）变量赋值（类似于客人住进去）

age=10；

（3）变量初始化

var age=10;
console.log(age)

示例

  <script>
    var myName = prompt("输入名字");
    var age = prompt("输入年龄");
    var address = prompt("输入地址");
    console.log(myName);
    console.log(age);
    console.log(address);
  </script>

变量语法拓展

1.更新变量

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

  <script>
    var age = 10;
    console.log(age);//10
    age = 18;
    console.log(age);//18
  </script>

2.声明多个变量

可以连续声明多个变量，变量之间逗号隔开

  <script>
  var age=10,
  address='ass',
  height='87';
  </script>

3.变量声明的特殊情况

（1）只声明不赋值，输出undefined

 <script>
    var age;
    console.log(age);//undefined
  </script>

（2）不声明，不赋值，直接使用会报错

（3）不声明直接赋值，可以正常输出

<script>
    age = 90;
    console.log(age)//90
  </script>

变量的命名规范

（1）由字母，数字，下划线，美元符号组成

（2）严格区分大小写

（3）不能以数字开头

（4）不能是关键字,尽量不要用name作为变量名

（5）变量名有意义

（6）驼峰命名法 myFirstName

示例：交换2个变量，引用一个中间变量

  <script>
    var one = 1, two = 2;
    console.log(one);//1
    console.log(two);//2
    var temp = one;
    one = two;
    two = temp;
    console.log(one);//2
    console.log(two);//1
  </script>

7.3数据类型

7.3.1 变量的数据类型

（1）JS是弱类型语言，不提前声明变量的类型，在程序运行中，类型被自动确定，根据等号右边的值自动确定

（2）变量的数据类型可以变化

 <script>
    var x = 5;
    console.log(x);
    x = 'apple';
    console.log(x);
    console.log(typeof (x));
  </script>

7.3.2 简单数据类型

Number：数字型，包含整型，浮点型，默认值为0；

 <script>
    var age = 10;
    var d = 8.9;
  </script>

        八进制，0-7，数字前面加0

  <script>
    var num = 010;
    console.log(num)
  </script>

        十六进制 0-9  a-f，数字前面加0x

 <script>
    var num = 0x9;
    console.log(num)
  </script>

        最大值和最小值

<script>
    console.log(Number.MAX_VALUE);
    console.log(Number.MIN_VALUE);
  </script>

        三个特殊值

 <script>
    alert(Infinity);
    console.log(-Infinity);
    console.log(NaN);//非数字;
    console.log('a'-19);//NaN
  </script>

        isNaN用来判断非数字，并且返回一个值，如果是数字，返回false，否则返回true

<script>
    console.log(isNaN(12));//false
    console.log(isNaN('n'));//true
  </script>

 String：字符串类型，默认“”；

 <script>
    var str = 'aaa';
  </script>

字符串转义符

符号	解释
\n	换行,newline
\\	\
\'	'
\"	"
\t	Tab缩进
\b	空格，blank

 字符串长度与拼接

（1）字符串长度length属性获得

  <script>
    var str = 'aa a';
    console.log(str.length);
  </script>

（2）字符串拼接

字符串+任何类型=拼接后的字符串；

  <script>
    var str = 'aa a' + 9;
    console.log(str.length);//5
    console.log(typeof (str));//string
    console.log(12+'12')//1212
    console.log(12+12)//24
  </script>

Undefined：声明变量但未赋值(var a),默认undefined；

Null：声明a为空值，var a=null,默认null

  <script>
    var flag = true;
    var flag1 = false;
    console.log(flag);//true,视为1
    console.log(flag1);//false，视为0
    console.log(flag + 1);//2;
    console.log(flag1 + 1);//1;
    //声明变量未赋值是undefined
    var a = undefined;
    console.log(a + 'a');//undefineda
    console.log(a + 7);//NaN
    //null空值
    var space = null;
    console.log(space + 'a');//nulla
    console.log(space + 1);//1
  </script>

7.3.3 检测数据类型 typeof

 <script>
    console.log(typeof (10));
    console.log(typeof ('op'))
  </script>

7.3.4 字面量

字面量是源代码中一个固定值表示法

数字字面量：9，10

字符串字面量：'字符串'

布尔字面量：true，false

7.3.5 数据类型转换

7.3.5.1 转换为字符串类型

（1）toString()

变量名.toString()

 <script>
    var num = 190;
    console.log(num.toString());
  </script>

（2）String()强制转换

String（变量名）

<script>
    var num = 190;
    console.log(String(num));
  </script>

（3）加号拼接字符串

  <script>
    var num = 190;
    console.log(num + '');
  </script>

7.3.5.2 转换为数字型

(1)parseInt(string)

(2)parseFloat(string)

(3)Number()强制转换

(4)隐式转换（利用+，-，*）

  <script>
    var a = '78';
    var b = '9.8';
    console.log(a + b)//789.8
    console.log(parseInt(a) + parseFloat(b))//87.8
    console.log(Number(a) + Number(b));//87.8
    console.log(parseInt('12px'));//12  计算时去掉了单位
    console.log(a - 8);//70
  </script>

7.5.3.3 转换为布尔型

Boolean（）

注意代表空，否的值会被转换为false

 <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('niha'));//true
    console.log(Boolean(90));//true
  </script>

7.6 解释型语言和编译型语言

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

解释器在运行时进行即使解释，并立即执行

8.运算符

8.1 算术运算符

算术运算符

+

-

*

/

%(取余)

注意浮点数的运算特性，尽量避免浮点数判断相等

  <script>
    console.log(0.1 + 0.2);//0.30000000000000004
    console.log(0.7 * 100);//70
    var num = 0.1 + 0.2;
    console.log(num == 0.3);//false
  </script>

8.2 自增运算符

递增运算符

后置递增（先返回值再运算）	前置递增（先运算再返回值）
a=a++	a=++a
<script> var a = 9; a = a++; console.log(a);//9 </script>	<script> var a = 9; a = ++a; console.log(a);//10 </script>

8.3 比较运算符

比较运算符

<

>

>=

<=

==

!=

===(要求值和类型都一致)

!==(要求值和类型都一致)

注意：==会默认转换数据类型，将字符串类型转换为数字型

<script>
    console.log(18 == '18');//true
  </script>

8.4 逻辑运算符

逻辑运算符

运算符	说明
&&	与
||	或
！	非

8.4.1 注意短路运算（逻辑中断）

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

8.4.1.1 逻辑与短路

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

如果表达式1为真，返回表达式2

如果表达式1为假，返回表达式1

 <script>
    console.log(1 && 'a');//a
    console.log(1 && 0);//0
    console.log(0 && 89);//0
    console.log(0 && 1 + 2 && 456 * 777);//0
    console.log(1 && 89 * 7 && 0);//0
    console.log(1 && 0 && 67 + 89);//0
  </script>

8.4.1.2 逻辑或中断

语法：表达式1||表达式2

如果表达式1为真，则返回表达式1

如果表达式1为假，则返回表达式2

 <script>
    console.log(1 || 'a');//1
    console.log(1 || 0);//1
    console.log(0 || 89);//89
    console.log(0 || 1 + 2 || 456 * 777);//3  后面的不再运算
    console.log(0 || 89 + 7 || 8);//96
    console.log(1 || 0 || 67 + 89);//1
  </script>

8.5 赋值运算符

赋值运算符

=

+= ，-=

*=        /=        %=

8.6 运算符优先级

运算符优先级

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

 <script>
    console.log(4 >= 6 || '人' != 'jjjj' && !(12 * 2 == 144) && true);//true
    var num = 10;
    console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');//true
  </script>

 <script>
    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;//true;
    console.log(d);
  </script>