JavaScript基础语法学习总结(完结)

原创

已于 2022-03-14 11:17:08 修改 · 2.4k 阅读

53 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #编程语言 #js

于 2020-05-21 10:50:58 首次发布

一、初识JavaScript

1. JavaScript概述

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

2. JavaScript的作用

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

3. HTML/CSS/JS的关系

1）HTML/CSS标记语言：描述类语言

HTML决定网页结构和内容(决定看到什么)，相当于人的身体
CSS决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服、化妆

2）JS脚本语言：编程类语言

实现业务逻辑和页面控制(决定功能)，相当于人的各种动作

3）编程语言和标记语言的区别

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

4. 浏览器执行JS简介

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

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器，用来读取网页中的Javascript代码，并对其处理后运行，比如chrome浏览器的V8
浏览器本身并不会执行JS代码，JS引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

5. JS的组成

在这里插入图片描述

6、JS的3种书写方式：

行内式
内嵌式：最好的做法是把<script>标签放到HTML文档的最后，</body>标签之前，这样能使浏览器更快地加载页面
外部js文件

7、JS的注释

建议：单行用"//"，多行用“/*”

8、JS的输入输出语句

alert(msg)：浏览器弹出警示框
console.log(msg)：浏览器控制台打印输出信息
prompt：浏览器弹出输入框，用户可以输入(默认是字符串类型的)

二、变量

1、变量概述

变量是用来存放数据的容器
通俗来说变量就是一个装东西的盒子
我们可以通过变量名获取数据，甚至修改数据
本质：变量是程序中在内存中申请的一块用来存放数据的空间，类似于酒店的房间，一个房间就可以看做是一个变量

在这里插入图片描述

2、变量使用

使用步骤：

1）声明变量

//声明变量
	var age;

var是一个JS关键字，用来声明变量(Variable变量的意思)，声明变量后，计算机会自动为变量分配内存空间

2）赋值

	//赋值，把值存入变量中
	age = 18;

3）变量的初始化

变量的初始化：声明一个变量并赋值

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

4）变量语法扩展

1. 更新变量

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

	var age = 18;
	age = 66;//最后的结果就是66，因为18被覆盖了

2. 声明多个变量

	var age = 18;
	username = 'Mickey';
	score = '66';

3. 声明变量特殊情况

只声明，不赋值：undefined
不声明，不赋值，直接使用：报错
不声明，只赋值：可以正常使用，但是不建议使用，变成了全局变量

5）变量命名规范

由字母、数字、下划线、美元符号组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
变量名必须见名知意
遵守驼峰命名法，首字母小写，后面的单词首字母需要大写

案例：交换两个变量的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交换两个变量的值</title>
</head>

<body>
    <script>
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        var temp = '';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        alert(apple1 + apple2 + temp);
    </script>
</body>

</html>

三、数据类型

1. 数据类型简介

1）为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
2）变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

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

在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

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

3）数据类型的分类

JS 把数据类型分为两类：

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

2. 简单数据类型(基本数据类型)

在这里插入图片描述

2.1 数字型Number
JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。

1）数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。
在JS中八进制前面加0，十六进制前面加 0x

2）数字型范围

JavaScript中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

3）数字型三个特殊值

infinity：代表无穷大，大于任何数值
-infinity：代表无穷小，小于任何数值
NaN：Not a Number，代表一个非数值

4） isNaN

用来判断一个变量是否为非数字的类型，返回 true 或者 false
在这里插入图片描述

2.2 字符串型
字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’，因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

1）字符串引号嵌套

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

2）字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的，常用的转义符及其说明如下：
在这里插入图片描述

3）字符串拼接(数值相加，字符相连)

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
2.3 布尔型Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
2.4 Undefined和 Null
Undefined：一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）
Null：一个声明变量给 null 值，里面存的值为空

3. 获取变量数据类型

3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
不同类型的返回值：
3.2 字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量：8, 9, 10
字符串字面量：‘黑马程序员’, “大前端”
布尔字面量：true，false

4. 数据类型转换

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

4.1 转换为字符串

在这里插入图片描述

第三种加号拼接字符串转换方式使用更多，这一种方式也称之为隐式转换
4.2 转换为数字型（重点）

在这里插入图片描述

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

案例1：计算年龄

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算年龄</title>
</head>

<body>
    <script>
        var year = prompt('请输入您的出生日期：');
        var nowyear = new Date().getFullYear();
        alert('当前的年份是：' + nowyear);
        var age = nowyear - year;
        alert('您的年龄是：' + age);
    </script>
</body>

</html>

案例2：简单加法器

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单加法器</title>
</head>

<body>
    <script>
        var a = prompt('请输入第一个数：');
        var b = prompt('请输入第二个数：');
        //注意类型转换
        var sum = parseFloat(a) + parseFloat(b);
        alert('结果是：' + sum);
    </script>
</body>

</html>

4.3 转换为布尔型

在这里插入图片描述

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

四、解释型语言和编译型语言

1. 概述

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

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

2. 执行过程

在这里插入图片描述

五、关键字和保留字

1. 标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。

2. 关键字

关键字：是指 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 等。

3. 保留字

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

包括：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 等。

六、运算符(操作符)

1. 运算符的分类

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

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

2. 算数运算符

1）算术运算符概述

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。
在这里插入图片描述

2）浮点数的精度问题

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

	var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
	console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

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

3. 递增和递减运算符

1）递增和递减运算符概述

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

2）递增运算符

前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值

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

后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加

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

4. 比较运算符

1. 比较运算符概述

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

2. 等号比较

在这里插入图片描述

5. 逻辑运算符

1. 逻辑运算符概述

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
在这里插入图片描述

2. 逻辑与&&

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

3. 逻辑或 ||

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

4. 逻辑非！

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

5. 短路运算（逻辑中断）

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

1）逻辑与

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

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

2）逻辑或

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

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

6. 赋值运算符

概念：用来把数据赋值给变量的运算符。
在这里插入图片描述

7. 运算符优先级

在这里插入图片描述

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

七、流程控制

1. 流程控制概念

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

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。
在这里插入图片描述

2. 顺序流程控制

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

3. 分支流程控制

1）分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
在这里插入图片描述
JS 语言提供了两种分支结构语句：if 语句、switch 语句

if 语句
a. 语法结构

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

b. 执行流程
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200521135012453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZvY3VzbWlja2V5,size_16,color_FFFFFF,t_70)

if else语句（双分支语句）
a. 语法结构

	// 条件成立  执行 if 里面代码，否则执行else 里面的代码
	if (条件表达式) {
   
   
   	 // [如果] 条件成立执行的代码
	} else {
   
   
   	 // [否则] 执行的代码
	}

b. 执行流程
在这里插入图片描述

案例1：进入网吧

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进入网吧</title>
</head>

<body>
    <script>
        var age = prompt('请输入您的年龄：');
        if (age >= 18) {
    
    
            alert('欢迎进入网吧！');
        } else {
    
    
            alert('未成年人禁止进入网吧！');
        }
    </script>
</body>

</html>

案例2：判断闰年

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断闰年</title>
</head>

<body>
    <script>
        var year = prompt('请输入要检测的年份');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    
    
            alert('您输入的是闰年');
        } else {
    
    
            alert('您输入的是平年');
        }
    </script>
</body>

</html>

if else if 语句(多分支语句)
a. 语法结构

	// 适合于检查多重条件。
	if (条件表达式1) {
   
   
    	语句1；
	} else if (条件表达式2)  {
   
   
    	语句2；
	} else if (条件表达式3)  {
   
   
   	语句3；
 	....
	} else {
   
   
    	// 上述条件都不成立执行此处代码
	}

案例：判断成绩级别

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断成绩级别</title>
</head>

<body>
    <script>
        var score = prompt('请输入您的分数：');
        if (score >= 90) {
    
    
            alert('您的等级是A');
        } else if (score >= 80) {
    
    
            alert('您的等级是B');
        } else if (score >= 70) {
    
    
            alert('您的等级是C');
        } else if (score >= 60) {
    
    
            alert('您的等级是D');
        } else {
    
    
            alert('您的等级是E');
        }
    </script>
</body>

</html>

a. 执行逻辑

3. 三元表达式

1）语法结构

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

2）执行思路

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

案例：数字补0

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字补0</title>
</head>

<body>
    <script>
        var time = prompt('请输入一个0~59之间的数字：');
        var result = time < 10 ? '0' + time : time;
        alert(result);
    </script>
</body>

</html>

4. switch分支流程控制

1）语法结构

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

	switch( 表达式 ){
   
    
    	case value1:
        	// 表达式 等于 value1 时要执行的代码
        	break;
    	case value2:
        	// 表达式 等于 value2 时要执行的代码
        	break;
    	default:
        	// 表达式 不等于任何一个 value 时要执行的代码
	}

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

注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

案例：查询水果

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询水果</title>
</head>

<body>
    <script>
        var fruit = prompt('请输入您查询的水果：');
        switch (fruit) {
    
    
            case '苹果':
                alert('苹果的价格是3.5/斤');
                break;
            case '橘子':
                alert('橘子的价格是8.5/斤');
                break;
            case '香蕉':
                alert('香蕉的价格是1.5/斤');
                break;
            default:
                alert('没有此水果');
        }
    </script>
</body>

</html>

2）switch 语句和 if else if 语句的区别

一般情况下，它们两个语句可以相互替换
switch…case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
当分支比较少时，if… else语句的执行效率比 switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

五、循环

循环的目的：可以重复执行某些代码

1. for循环

语法结构：

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

案例1：求1~100之间所有数的平均值

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求1~100之间所有数的平均值</title>
</head>

<body>
    <script>
        var sum = 0,
            avg = 0;
        for (var i = 1; i <= 100; i++) {
    
    
            sum += i;
        }
        avg = sum / 100;
        console.log('1~100之间所有数的平均值为' + avg);
    </script>
</body>

</html>

案例2：求1~100之间所有偶数和、奇数和

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求1~100之间所有偶数和、奇数和</title>
</head>

<body>
    <script>
        var even = 0,
            odd = 0;
        for (var i = 1; i <= 100; i++) {
    
    
            if (i % 2 == 0) {
    
    
                even += i;
            } else {
    
    
                odd += i;
            }
        }
        console.log('1~100之间所有偶数和为' + even);
        console.log('1~100之间所有奇数和为' + odd);
    </script>
</body>

</html>

案例3：求1~100之间所有偶数和、奇数和

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求1~100之间所有能被3整除的数字的和</title>
</head>

<body>
    <script>
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
    
    
            if (i % 3 == 0) {
    
    
                sum += i;
            }
        }
        console.log('1~100之间所有能被3整除的数字的和为' + sum);
    </script>
</body>

</html>

案例4：求学生成绩

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求学生成绩</title>
</head>

<body>
    <script>
        var sum = 0,
            avg = 0;
        var num = prompt('请输入班级人数：');
        for (var i = 1; i <= num; i++) {
    
    
            var score = prompt('请输入第' + i + '个学生的成绩');
            sum += parseFloat(score);
        }
        avg = sum / num;
        alert('总成绩是：' + sum);
        alert('平均成绩是：' + avg);
    </script>
</body>

</html>

案例5：一行打印五个星星

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行打印五个星星</title>
</head>

<body>
    <script>
        var str = '';
        for (var i = 0; i < 5; i++) {
    
    
            str += '★';
        }
        console.log(str);
    </script>
</body>

</html>

2. 双重for循环：外层循环一次，内层for循环全部执行

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
   
   
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
   
     
       需执行的代码;
   }
}

案例1：打印五行五列星星

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印五行五列星星</title>
</head>

<body>
    <script>
        var str = '';
        for (var i = 0; i < 5; i++) {
    
    
            for (var j = 0; j < 5; j++) {
    
    
                str = str + '★';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>
</body>

</html>

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

案例2：打印n行n列的星星

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印n行n列的星星</title>
</head>

<body>
    <script>
        var str = '';
        var rows = prompt('请您输入行数：');
        var cols = prompt('请您输入列数：');
        for (var i = 0; i < rows; i++) {
    
    
            for (var j = 0; j < cols; j++) {
    
    
                str += '★';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</body>

</html>

案例3：打印倒三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset

最低0.47元/天解锁文章

新学期VIP享超值加赠

JavaScript基础语法学习总结(完结)

一、初识JavaScript

1. JavaScript概述

2. JavaScript的作用

3. HTML/CSS/JS的关系

1）HTML/CSS标记语言：描述类语言

2）JS脚本语言：编程类语言

3）编程语言和标记语言的区别

4. 浏览器执行JS简介

5. JS的组成

6、JS的3种书写方式：

行内式

内嵌式：最好的做法是把<script>标签放到HTML文档的最后，</body>标签之前，这样能使浏览器更快地加载页面

7、JS的注释

建议：单行用"//"，多行用“/*”

8、JS的输入输出语句

alert(msg)：浏览器弹出警示框

console.log(msg)：浏览器控制台打印输出信息

prompt：浏览器弹出输入框，用户可以输入(默认是字符串类型的)

二、变量

1、变量概述

变量是用来存放数据的容器

通俗来说变量就是一个装东西的盒子

我们可以通过变量名获取数据，甚至修改数据

本质：变量是程序中在内存中申请的一块用来存放数据的空间，类似于酒店的房间，一个房间就可以看做是一个变量

2、变量使用

使用步骤：

1）声明变量

var是一个JS关键字，用来声明变量(Variable变量的意思)，声明变量后，计算机会自动为变量分配内存空间

2）赋值

3）变量的初始化

4）变量语法扩展

1. 更新变量

2. 声明多个变量

3. 声明变量特殊情况

5）变量命名规范

案例：交换两个变量的值

结果如图：

三、数据类型

1. 数据类型简介

1）为什么需要数据类型

2）变量的数据类型

3）数据类型的分类

2. 简单数据类型(基本数据类型)

2.1 数字型Number

1） 数字型进制

2） 数字型范围

3） 数字型三个特殊值

4） isNaN

2.2 字符串型

1）字符串引号嵌套

2）字符串转义符

3）字符串拼接(数值相加 ，字符相连)

2.3 布尔型Boolean

2.4 Undefined和 Null

3. 获取变量数据类型

3.1 获取检测变量的数据类型

3.2 字面量

4. 数据类型转换

4.1 转换为字符串

4.2 转换为数字型（重点）

案例1：计算年龄

结果如图：

案例2：简单加法器

结果如图：

4.3 转换为布尔型

四、解释型语言和编译型语言

1. 概述

2. 执行过程

五、关键字和保留字

1. 标识符

2. 关键字

3. 保留字

六、运算符(操作符)

1. 运算符的分类

2. 算数运算符

1）算术运算符概述

2）浮点数的精度问题

3. 递增和递减运算符

1）递增和递减运算符概述

1）数字型进制

2）数字型范围

3）数字型三个特殊值

3）字符串拼接(数值相加，字符相连)

4. 逻辑非！

七、流程控制