目录
一、什么是编程语言
可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言。
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。
编程语言与标记语言的区别：?
编程语言（JavaScript）：有很强的逻辑和行为能力。再编程语言里，你会看到很多if else 、for、 while等具有逻辑性和行为能力的指令，这是主动的。
标记语言（html）：不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取，是被动的。
二、JavaScript介绍?
JavaScript 是世界上最流行的语言之一，是一种运行在客户端（自己的电脑）的脚本语言（Script是脚本的意思）?
脚本语言： 不需要编译，运行过程中由js解释器（js 引擎）逐行来进行解释并执行
1.HTML/CSS/JS的关系:
1.1 HTML/CSS标记语言——描述类语言:?
? ? HTML决定网页结构和内容（决定看到什么），相当于人的身体?
? ? CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆
?1.2 JS脚本语言——编程类语言：
? ? 实现业务逻辑和页面控制（决定功能），相当于人的各种动作
2.JavaScript 组成
? 2.1?ECMAScript: JavaScript语法
ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守? 的一套JS语法工业标准
? 2.2?DOM：页面文档对象模型
文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等).
? 2.3?BOM：浏览器对象模型
BOM (Browser Object Model ,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等
3.JS三种书写位置
? ?3.1 外部JS文件
? <script?src="my.js"></script>?? ?3.2 行内式JS
<input type="button" value="点击我试试" onclick="alert('Hello World')">? ?3.3 内嵌式JS
<script>
alert('你好呀！');
</script>?4.JS输入输出语句
| 方法 | 说明 | 归属 |
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
?
<script>
prompt('请输入您的年龄');
alert('计算的结果是');
console.log('我是程序员能看到的');
</script>
三、浏览器执行JS简介? ??
浏览器分成两部分： 渲染引擎 和 JS引擎
渲染引擎：用来解释HTML和CSS，俗称内核，比如chrome 浏览器的blink,老版本的webkit
JS引擎： 也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome 浏览器的V8?
浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。 JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
?
四、Javascript变量
1.什么是变量
通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
本质： 变量是程序在 内存 中申请的一块用来 存放数据 的空间
2.变量的使用
? ? 2.1 声明变量?
? ? ? ? var age; //声明一个 名称为 age 的变量
? ? ? ? var 是一个JS关键字，用来声明变量（variable变量的意思）。 使用该关键字声明变量后，计? ? ? ? ? 算机会自动为变量分配内存空间，不需要程序员管
? ? ? ? age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
? ? ? ? 声明变量的本质是：去内存申请空间
? ? ?2.2 赋值?
? ? age = 10; //给 age 这个变量赋值为 10
? ? ? ? = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
? ? ? ? 变量值是程序员保存到变量空间里的值
? ? ? 2.3?变量的初始化
? ? var age = 18; //声明变量同时赋值为 18
? ?var myname = '你们好呀';??
? ? ? ?声明一个变量并赋值，我们称之为 变量的初始化
?3.变量语法扩展
? ? ? ?3.1 更新变量
? ? ? ? 一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。?
? ? ? ? 3.2 同时声明多个变量
? ? ? 同时声明多个变量时，只需要写一个var,多个变量名之间使用英文逗号隔开。
var age = 18,
? ? address = '火影村',
?? ?gz = 2000;? ? ? ? ?3.3 声明变量特殊情况?
? ? ?
| 情况 | 说明 | 结果 |
| var age; console.log (age); | 只声明 不赋值 | undefined |
| console.log(age) | 不声明 不赋值 直接使用 | 报错 |
| age = 10; console.log (age); | 不声明 只赋值 | 10 |
?4.变量的命名规范
- 由字母(A-Z a-z).数字(0-9)、 下划线(_). 美元符号($ )组成,如: usrAge, num01,_name
- 严格区分大小写。var app;和var App;是两个变量
- 不能以数字开头。18age 是错误的
- 不能是关键字、保留字。例如:var、for、while
- 变量名必须有意义。
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
5.交换两个变量值
方法：?
1.我们需要一个临时变量
2. 把 变量1 给我们的临时变量
3. 把变量2 里面的值给 变量1
4. 把临时变量里的值给 变量2
如图所示，临时变量就好比图中的箱子，变量1和变量2分别是我们左手和右手拿着的两个不同颜色的球，我们要互换两只手所拿球的颜色，那么我们需要先把右手中黄色的球放进箱子，这是右手就空出来了，那就可以去把左手上的红球拿过来，此时左手就空了，左手就可以去箱子里把黄色的球拿过来，这样左右两边的球就互换啦~?
var x;
var item1 = 'red';
var item2 = 'yellow';
x = item1;
item1 = item2;
item2 = x;?五、Javascript数据类型
? 1.为什么需要数据类型
?在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
简单来说,数据类型就是数据的类别型号。比如姓名“张三”, 年龄18，这些数据的类型是不一样的。
?2. JS中简单数据类型
| 简单数据类型 | 说明 | 默认值 |
| Number | 数字型，包含 整型值和浮点型值，比如 21、0.21 | 0 |
| Boolean | 布尔值类型，如 true、 false, 等价于 1 和 0 | false |
| String | 字符串类型，如 "张三" 注意js里面，字符串都带引号 | "" |
| Undefined | var a; 声明了变量 a 但是没有给值， 此时 a = undefined | undefined |
| Null | var a = null; 声明了变量 a 为空值 | null |
?
?3. typeof检测变量数据类型?
var num = 100;
var tri = "警告"
var nul = null;
var unde = undefined;
console.log(typeof num);
console.log(typeof tri);
console.log(typeof nul);
console.log(typeof unde);?
?4.数据类型转换
把一种数据类型的变量转换成另外一种数据类型?
? ? 4.1 转换为字符串
| 方式 | 说明 | 案例 |
| toString() | 转成字符串 | var num = 1; alert(num.toString()); |
| String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num + '我是字符串'); |
其中加号拼接字符串的转换方式也称之为隐式转换
? ? ? ?4.2 转换为数字型（重点）
| 方式 | 说明 | 案例 |
| parseInt(string)函数 | 将string类型转成整数数值型 | parseInt('78') |
| parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat('78.21') |
| Number()强制转换函数 | 将string类型转换成数值型 | Number('12') |
| js 隐式转换（- * /） | 利用算术运算隐式转换为数值型 | '12' - 0 |
? ? ? 注意： parseInt 和 parseFloat 单词的大小写
? ? ? ? ? ? ? ? ? 隐式转换是我们在进行算术运算的时候，JS自动转换了数据类型
? ? ? ?4.3 转换为布尔型
| 方式 | 说明 | 案例 |
| Boolean()函数 | 其他类型转成布尔值 | Boolean('true')； |
? ? ? ? 注意： 代表 空、否定的值 会被转换为 false ， 如 '' 、0、NaN、null、undefined
? ? ? ? ? ? ? ? ? ? 其余的值都会被转换为 true
六、Javascript操作符
? ? ? ? ? ??运算符也被称为 操作符 ， 是用于实现赋值、比较和执行算术运算等功能的符号。
? ? ?1.算术运算符
? ? 概念： 算术运算使用的符号，用于执行两个变量或值的算术运算。
? ?表达式： 是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合?
? ?简单理解：是由数字、运算符、变量等组成的式子
? ?表达式最终都会有一个结果，返回给我们，我们称为返回值
? ??+、 -、 *、 /、 %
注意：?
? ? 浮点数值的最高精度是17位小数，但再进行算术计算时其精度远远不如整数。会有误差，所? ? ? ? ? 以，不要直接判断两个浮点数是否相等！?
? ? 一般用取余为0 来判断一个数能够被整除。
? ? 运算符有优先级，先乘除，后加减，有小括号先算小括号里面的
? ? ?2.递增和递减运算符
?递增（++） 和 递减（--）
---------------------------------------前置递增--------------------------------------------------------------------
++num 前置递增，自加1 ， 类似于 num=num+1
使用口诀： 先自加，后返回值
----------------------------------------后置递增-------------------------------------------------------------------
num++ 后置递增，自加1 ， 类似于 num=num+1
使用口诀： 先返回原值，后自加
在JS中，递增 （++） 和 递减（--）既可以放在变量的前面，也可以放在变量的后面。 放在变量前面时，我们可以称为 前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
注意： 递增和递减运算符必须和变量搭配使用
? ? ?3.比较运算符
概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果?
| 运算符名称 | 说明 | 案例 | 结果 |
| < | 小于号 | 1 < 2 | true |
| > | 大于号 | 1 > 2 | false |
| >= | 大于等于号（大于或者等于） | 2 >= 2 | true |
| <= | 小于等于号（小于或者等于） | 3 <= 2 | false |
| == | 判等号（会转型） | 37 == 37 | true |
| != | 不等号 | 37 != 37 | false |
| ===? ? ? !== | 全等 要求值和 数据类型都一致 | 37 === '37' | false |
? ?注意：?
? ? ? 等于符号 == ?默认会转换数据类型，会把字符串型的数据转换为数字型
? ? ? 所以， console.log(18 == '18'); // true
? ? ? 但是 === 意为全等 所以此时18 === ‘18’ 返回值为 false
? ? ?4.逻辑运算符
概念： 逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。 用于多个条件? ? ? ? ? ? ? ? ?的判断?
? ? ? ? ? ? ? ? ? ? ? ? ?&& 、 || 、 ！（逻辑非）
逻辑与： 两侧都为true结果才是true逻辑或： 两侧都为false结果才是false
逻辑非（也叫取反符），取布尔值相反的值
? 4.1 逻辑中断逻辑与
短路运算的原理： 当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值；
语法： 表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1
举例：
?123 && 645 ?// 结果为 645
? ‘ ’ && 123 // 结果为 ‘ ’ ?
? ? 4.2 逻辑中断逻辑或?
?语法： 表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2
表达式1 || 表达式2 || 表达式3 先执行1和2，再执行2和3
? ? ?5.赋值运算符
概念： 用来把数据赋值给变量的运算符。
=、+=、-=、*=、/=、%=
? ? ?6.运算符的优先级?
? ? ? ??
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++? --? ！ |
| 3 | 算数运算符 | 先 * / % 后 +? - |
| 4 | 关系运算符 | >? >= <? <= |
| 5 | 相等运算符 | ==? ? !=? ===? !== |
| 6 | 逻辑运算符 | 先 &&? 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
? ?一元运算符里面的逻辑非优先级很高
? ? 逻辑与比逻辑或优先级高?
知识点看完后来看看下面的例子（注释部分为答案）：
?
七、Javascript流程控制
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
?1. 顺序流程控制
?程序会按照 代码的先后顺序，依次执行
2. 分支流程控制if语句
由上到下执行代码的过程，根据不同的条件，执行不同的路径代码（执行代码多选一的过程）， 从而得到不同的结果
语法结构：?
//条件成立执行代码，否则什么也不做
if(条件表达式) {
? ? ?// 条件成立执行的代码语句
}if else; if else if else;
语句可以理解为一个行为，循环语句和分支语句就是典型的语句。 一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。
3. 三元表达式
有三元运算符组成的式子我们称为三元表达式
语法结构：
条件表达式 ？ 表达式1 ： 表达式2如果成立返回表达式1，否则返回表达式2
var num = 10;
var result = num >5 ? '是的' : '不是的';
4. switch语句
?switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置-系列的特定值的选项时,就可以使用switch.
switch(表达式) {
case value1:
? ? ? ? //表达式等于value1时要执行的代码
? ? ? ? break;
case value2:
? ? ? ?//表达式等于value2时要执行的代码
? ? ? ?break;?
?default :
? ? ? //表达式不等于任何一个value时要执行的代码
}
?
注意：?
1. 我们开发里面 表达式我们经常写成变量
2. 我们num的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
3. break 如果当前的case里面没有break 则不会退出 switch 是继续执行下一个case
5. switch和if else if的区别
- 一般情况下,它们两个语句可以相互替换
- switch..case语句通常处理case为比较确定值的情况,而if..else..语句更灵活,常用于范围判断(大于?等于某个范围)
- switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if.. .else语句有几种条件,就得判断多少次。
- 当分支比较少时, if.. else语句的执行效率比switch语句高。
- 当分支比较多时, switch语句的执行效率比较高,而且结构更清晰。
八、javascript循环
? 1. for循环? ??
在程序中,一组被重复执行的语句被称之 为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
for( 初始化变量; 条件表达式; 操作表达式） {
?? ?//循环体;
}
初始化变量 ? 就是用var声明的一个普通变量，通常用于作为计数器使用
条件表达式 ?就是用来决定每一次循环是否继续执行 ?就是终止的条件
操作表达式 ?是每次循环最后执行的代码 ?经常用于我们计数器变量进行更新(递增或者递减)
在for循环中，可以通过追加字符串的方式，来让一行显示
var str='';
for (var i; i <= num; i++) {
?? ? ? ? ?str = str+'?';
}
? 双重for循环：?
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个
for循环,这样的for循环语句我们称之为双重for循环。外层循环执行一次，里层循环全部执行
? 2. while循环
while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。
语法：
while (条件表达式) {
?? ? ? ?//循环体代码
}
执行思路：?
①先执行条件表达式,如果结果为true ,则执行循环体代码;如果为false ,则退出循环,执行后面代码
②执行循环体代码
③循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true ,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束
?
? 3. do while循环
do... while语句其实是while语句的一个变体。该循环会先执行次代码块 ,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
do {
? ? // 循环体代码 - 条件表达式为 true 时重复执行循环体代码?
} while(条件表达式)
执行思路：
①先执行一次循环体代码
②再执行条件表达式,如果结果为true ,则继续执行循环体代码,如果为false ,则退出循环,继续执行后面代码
注意:先再执行循环体,再判断,我们会发现d..while循环语句至少会执行一次循环体代码
? 4. continue和break的区别
continue关键字用于立即跳出本次循环（当前次的循环）,继续下一次循环 (本次循环体中continue之后的代码就会少执行一次).
for ( var i = 1; i <= 10; i++) {
?? ?if (i == 3) {
?? ? ? ?continue;
}console.log (’这是第’+i+‘次‘)；
}
---------------------------------------break---------------------------------------------------------------------------
break 关键字用于 立即 跳出整个循环（循环结束）
九、Javascript数组和冒泡排序?
? ?1. 数组（Array）??
数组可以把一组相关的数据一起存放，并提供方便的访问（获取）方式。
数组是指?一组数据的集合， 其中每个数据被称作元素，在数组中可以 存放任意类型的元素。 数组是一种将 一组数据存储在单个变量名下的优雅方式
数组中可以存放 ?任意类型 的数据，例如字符串，数字，布尔值等
?
? ?1.1 数组的创建方式? ? ?
1.利用 new 创建数组：
var 数组名 = new Array();
var arr = new Array();2.利用数组字面量创建数组:
var 数组名 = [ ];
var arr = ['小白','小黑'，’大黄‘,'瑞奇'];
注意：
我们数组里面的数据一定用逗号分隔
数组里面的数据 比如1，2 我们称为数组元素
?
? ?1.2 访问数组元素
索引（下标）：用来访问数组元素的序号（数组下标从 0 开始）。
数组可以通过 索引 来访问、设置、修改对应的数组元素，我们可以通过 “数组名[索引]” 的形式来获取数组中的元素。这里的访问 就是获取得到的意思。
var arr = [1,2,3];
alert(arr[1]);
? ?1.3 遍历数组
? ? ? ?就是把数组元素从头到尾访问一遍?
? ?1.4 数组长度
数组长度： 数组名.length
1.数组的长度是元素的个数 ?不要跟索引号混淆（数组索引号是从0开始的）
2. arr.length 动态检测数组元素的个数
? ?1.5 数组中新增元素
1. 通过修改 length 长度新增数组元素
可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的
但是多加的空间是没有给值的，就是声明变量未给值，默认就是 undefined?
2.通过修改数组索引新增数组元素可以通过修改数组索引的方式追加数组元素
如果是给已存在的索引，则是替换原来的数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据
如： arr[4]='pink';
? ?2.冒泡排序?
冒泡排序： 是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小） ?
一次比较两个元素，如果他们的顺序错误就把他们交换过来。
外层循环： 管趟数 （var i =0; i<arr.length-1; i++）
内层循环：每一趟交换的次数(var j = 0; j < arr.length - i - 1; j++){
? ? ? ? ?if(arr[j]>arr[j+1]) {}
}
来举个例子： 用冒泡排序实现下列效果：
代码：
var str = '';
for (var i = 1; i <= 10; i++) {
for(var j = 1; j <= i; j++) {
str = str + '?';
}
str = str + '\n';
}
console.log(str); ?
以上就是我今天分享的知识点啦~如果对你有帮助的话记得点个赞哟~?
?