浏览器执行JS简介

JS组成

• DOM 页面文档对象类型

• BOM 浏览器对象类型

JS书写方式

行内式JS

语法格式：

<input type="button" value="唐伯虎点" onclick="alert('秋香')">

优缺点：

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

内嵌式

语法格式：

<script>
    // 通过alert来进行语句输出
    alert("刚开始学习JS 还是很懵逼的！！");
</script>

优缺点：

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

外部JS文件

语法格式：

<script src=my.js"></script>

优缺点：

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

JavaScript输入输出语句

变量

1. 声明变量

• 语法格式：

//声明变量
var age;//声明一个名称为age的变量
var age1, age2, ...;//这是代表集体声明
var age1 = age2 = age3 = 变量值;//这里指的是 第一个变量声明并赋值,其余的直接赋值       var age1 = 变量值; age2 = 变量值; age3 = 变量值

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

2. 赋值

• 语法格式：

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

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

3. 更新变量

• 语法格式：

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

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

4. 多个声明

• 语法格式：

// 3.声明多个变量
var address = '欧呦',
    age = 18,
    zy = 'student';

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

5. 变量声明的特殊情况

6. 变量的命名规范

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

数据类型

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

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

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

var x = 6; //x为数值型
var x = 'bill'; //x为字符串型

数据类型的分类

• JavaScript中的简单数据类型及其说明如下：

字符串型

1. 字符串引号嵌套

2. 字符串转义符

3. 字符串长度

4. 字符串的拼接

5. 获取变量的数据类型

var Name = '您好';
console.log(typeof Name); //string字符串型
var number = 100;
console.log(typeof number); //number
//prompt 取过来的值是：字符串型
var age = prompt('请输入您的年龄：');
alert('他的年龄是：' + age + '岁');
// 获取age变量的值
console.log('输入的值是：' + age);
// 获取用户输入的数据类型
console.log('输入的值是：' + typeof age + '数据类型');

6. 数据类型的转换

• toString()和String()使用方式不一样。
• 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

• 代表空、否定的值会被转换为false，如"、0、NaN、nul、undefined
• 其余值都会被转换为true

//案例
console.log(Boolean(0));//false
console.log(Boolean(''));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log('====================');
console.log(Boolean('欧呦'));//true
console.log(Boolean('shabi'));//true

运算符

• 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号
• 表达式必有返回值。

JavaScript常用的运算符

算术运算符

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

递增/递减运算符

1. 前置递增运算符

// 前置递增运算符
var num = 10;
++num;//类似于 num = num + 1;
console.log(num);//11

2. 后置自增运算符

// 后置自增运算符
var num1 = 10;
// 两个单独使用，效果是一样的
console.log(num1);//10 
// 但是num1++，是后置自增，是先返回原值，在加1
console.log(num1++ + 10);

比较运算符

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

逻辑运算符

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

//逻辑运算符
// && 与运算 两个为真才是真
console.log(3 < 2 && 3 > 2);//false
console.log(3 < 4 && 3 > 2);//true
// || 或运算  一个为真就是真
console.log(3 < 2 || 3 > 2);//true
console.log(3 < 4 || 3 > 2);//true
// not 运算 ! 单目取反
console.log(!false);//true

逻辑短路(逻辑中断)

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

1. 逻辑与

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

// 逻辑中断
// 如果表达式1 结果为真 则返回表达式2  逻辑与短路运算 如果表达式1为假 那么返回表达式1
console.log(123 && 345); //345
// 数值中0 是false 后面的逻辑运算均不参与
console.log(0 && 345 + 23 && 23 * 223); //0
// 如果有空的或者否定的为假 其余是真的 例如：0 '' null undefined NaN
console.log(null && 345 + 23 && 23 * 223); //null

2. 逻辑或

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

赋值运算符

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

运算符的优先级

流程控制

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

顺序流程控制

概念： 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行程序中大多数的代码都是这样执行的。
流程图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbMGNGd5-1647230803541)(…/…/Web/studey/响应式开发/bootstrap/Bootstrap初使用/栅格系统测试图/顺序流程.png)]

分支流程控制

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

流程图：

分支流程语句：

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

多分支语句

概念： 就是利用多个条件来选择不同的语句执行得到不同的结果多选1的过程

if (条件表达式1) {
    //语句1
} else if{
    //语句2
} else
if{
    //语句3
} else
{
    //语句4
}

注意点：

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

三元表达式

语法格式：
条件表达式 ？表达式1:表达式2

执行思路：

例如：

var num = 10;
var result = num > 5 ? '是的' : '不是的';//是的
console.log(result);

switch语句

1. switch语句也是多分支语句也可以实现多选1
2. 语法结构:switch转换、开关 ,case小例子或者选项的意思
   语法格式：

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

注意：

• 我们num的值和case里面的值相匹配的时候是全等必须是值和数据类型一致才可以
• 如果当前的case里面没有break则不会退出switch是继续执行下一个case

循环

目的：

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

For循环

解释：

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

语法格式：

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

断点调试：

• 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行的显示错误，停下。
• 浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点
• Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
• F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化

双重For循环

• 很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
• 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for循环语句我们称之为双重for循环。

For循环特点

• for循环可以重复执行某些相同代码
• for循坏可以重复执行些计不同的代码，因为我们有计数器
• for循环可以重复执行某些操作，比如算术运算符加法操作
• 随着需求增加，双重for循环可以做更多、更好看的效果
• 双重for循环，外层循环一次，内层for循环全部执行
• for循环是循环条件和数字直接相关的循环

for...in的对象循环

• for in循环 来遍历对象中的属性值

语法格式：

for (变量 in 对象名){
    //执行语句
}

示例：

let arr = [96, 85, 62, 34, 30, 32, 64, 40, 57, 86];
for (let k in arr) {
    //依次遍历数组对象的下标和下标所对应的元素值
    console.log(k + ':' + arr[k]);//0:96 1:85 2:62 3:34 4:30 5:32 6:64 7:40 8:57 9:86
}

while循环

解释：

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

执行思路：

• 先执行条件表达式，如果结果为true，则执行循环体代码；如果为false，则退出循环，执行后面代码
• 执行循环体代码
• 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束

语法格式：

while (条件表达式) {
//执行循环体
}
//执行思路：当条件表达式为真时，则执行循环体，当条件表达式为假时，则跳出循环

do…while循环

语法结构：

do {
    //循环体
} while (条件表达式)
//执行思路： 跟while不同的地方在于 do while先执行一次循环体 在判断条件，如果表达式结果为真，则继续执行循环体，否则退出循环

循环小结

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

continue break

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

代码示例：

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue;//只要遇见 continue就退出本次循环，直接跳到 i++
    }
    console.log('我在吃第' + i + '个包子');
}

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

语法示例：

// break关键字， 退出整个循环
for (var i = 1; i <= 5; i++) {
    if (i == 4) {
        break;//只要遇到break，立马退出整个循环
    }
    console.log('这是吃的第' + i + '个包子');
}

JS命名规范

1. 标识符命名规范

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

2. 操作符规范

   • 各个操作符之间最好用一个空格隔开

数组

概念:
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是种将一组数据存储在单个变量名下的优雅方式。

语法格式：

//普通变量一次智能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr = [1, 2, 3, 4, 5]

创建数组

创建数组的方式

1. 利用 new创建数组

语法格式：

var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组

2. 利用数组字面量创建数组

语法格式：

//1. 使用数组字面量的方式创建空的数组
var 数组名 = [];
//1.使用数组字面量的方式创建带初始值的数组
var 数组名 = [1, 2, 3, 4, 5];

3. 直接创建一个空数组

语法格式：

var arr = []; //创建一个新的空数组

遍历数组

遍历:

• 就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名）。

数组中新增元素

可以通过修改length长度以及索引号增加数组元素

1. 通过修改length长度新增数组元素

   • 可以通过修改length长度来实现数组扩容的目的
   • length属性是可读写的

2. 通过修改数组索引新增数组元素

   • 可以通过修改数组索引的方式追加数细元素
   • 不能直接给数组名赋值，否则会覆盖掉以前的数据

冒泡排序

函数

函数的基本信息

函数的使用

//1. 声明函数
function 函数名() {
    //函数体
}

注意：

• function全部小写 声明函数的关键字
• 函数是做某件事情，函数名一般是动词
• 函数不调用自己不执行

语法格式：

//2. 调用函数
函数名();

匿名的声明方式

1. 命名函数

语法格式：

function 函数名() { //利用函数关键字自定义函数（命名函数）
    //函数体
}

2. 匿名函数

语法格式：

let fn = function () { //函数表达式（匿名函数
    // 函数体
}
// 调用
fn();

注意:

• fn是变量名 不是函数名
• 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而函数表达式里面存的是函数
• 函数表达式也可以进行传递参数

函数的参数

语法格式：

//1.声明函数
function 函数名(形参1, 形参2...){
    //函数体
}
//2.调用函数
函数名(实参1, 实参2...);

函数的参数个数不匹配

• 如果实参的个数和形参的个数一样，则正常输出结果
• 如果实参的个数多于形参的个数 会取到形参的个数
• 如果实参的个数小于形参的个数 多余的行参定义为undefined 结果为Nan

函数的返回值

语法格式：

function 函数名() {
    return 需要返回的结果
}
函数名();

• 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名（）通过return实现的
• 只要函数遇到return就把后面的结果返回给函数的调用者 函数名（）等于 return 后面的结果
• return语句之后的代码不被执行
• return只能返回一个值,返回的结果是最后一个值。
• 没有返回值return的时候，调用函数返回的结果是undefined

break,continue,return 的区别

• break：结束当前的循环体（如for、while）
• continue：跳出本次循环，继续执行下次循环（如for、while）
• return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

argunments的使用

伪数组：

• 伪数组 并不是真正意义上的数组
• 具有数组的length属性
• 按照索引的方式进行存储的
• 它没有真正数组的一些方法 push（）, pop（）等等

Javascript作用域

1. 全局作用域: 整个Script标签 或者是一个单独的js文件
2. 局部作用域: 在函数内部就是局部作用域,只在函数内部起效果

变量的作用域:

• 全局变量
  1. 在全局作用域下的变量在全局下都可以使用
  2. 如果在函数内部 没有声明直接赋值的变量 也属于全局变量
• 局部变量
  1. 在局部作用域下的变量 后者在函数内部的变量就是局部变量
  2. 函数的形参也可以看做是局部变量

执行效率:

1. 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
2. 局部变量当我们程序执行完毕就会销毁，比较节约内存资源

作用域链

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

语法格式:

let num = 5;
//链式查询,就近原则
function 函数名() {//外部函数
    let num = 10;
    function 函数名1() {//内部函数
        console.log(num);//10
    }
    函数名1();
}
函数名();

预解析

1. 我们js引擎运行js分为两步：预解析、 代码执行

• 预解析js引擎会把js里面所有的var还有function提升到当前作用域的最前面
• 代码执行 、按照代码书写的顺序从上往下执行

对象

属性

• 事物的特征，在对象中用属性来表示（常用名词）

方法

• 事物的行为，在对象中用方法来表示（常用动词）

利用对象字面量创建对象

let 对象名 = {
    属性1: 属性值1,
    属性2: 属性值2,
    属性3: 属性值3,
    ....
}
// 输出
console.log(对象名.属性1);

注意:

• 里面的属性或者方法我们采取键值对的形式 属性名：属性值
• 多个属性或者方法中间用逗号隔开的
• 方法冒号后面跟的是一个匿名函数
• 调用对象 : 调用对象的属性我们采取 对象名.属性名

利用new Object 创建对象

let 对象名 = new Object{//创建了一个空对象
    对象名.属性1 = 属性值1;
    对象名.属性2 = 属性值2;
    对象名.属性3 = 属性值3;
...
}

注意：

• 我们是利用 等号=赋值 的方法添加对象的属性和方法
• 每个属性和方法之间 用分号结束

利用构造函数创建对象

语法格式：

function 对象名(属性名1, 属性名2, 属性名3, 属性名4) {//构造函数名字首字母要大写
    this.属性名1 = 属性名1;
    this.属性名2 = 属性名2;
    this.属性名3 = 属性名3;
    this.属性名4 = function () {
        console.log('输出语句');
    };
}
// 调用
let 变量名 = new 对象名(属性值1, 属性值2, 属性值3....);//调用函数返回是一个对象，然后进行控制台输出

注意：

• 构造函数名字首字母要大写
• 我们构造函数不需要return 就可以返回结果
• 我们调用构造函数必须使用 new
• 我们的属性和方法前面必须添加this

内置对象

• JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象
• 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的，我们JS API讲解
• 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
• JavaScript提供了多个内置对象：Math 、Array、Date、string等

查询文档

地址：

• MDN: https://developer.mozilla.org/zh-CN/

日期对象

日期格式化：

数组对象

1. 添加删除数组元素的方法

注意：

• push和unshift都是可以给数组追加新的元素
• push()/unshift()参数直接写数组元素就可以了
• push/unshift完毕之后，返回的结果是新数组的长度
• 原数组也会发生变化

数组排序

数组索引

数组转化为字符串

示例：

// 1.toString()将我们的数组转换为字符串
console.log(arr7.toString());   //75,42,59,76,82,92,50,11,34,31
// 2.join（分隔符）
console.log(arr7.join('、'));    //75、42、59、76、82、92、50、11、34、31  可以换我们的分隔符

其他函数

字符串对象

• 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean
• 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
• 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1.生成临时变量，把简单类型包装成为复杂类型
let temp  = new  String('andny');
// 2. 赋值给我们的声明变量
str = temp;
// 3.销毁临时变量
temp = null;

| 返回一个字符串 |

示例：

// 1.toString()将我们的数组转换为字符串
console.log(arr7.toString());   //75,42,59,76,82,92,50,11,34,31
// 2.join（分隔符）
console.log(arr7.join('、'));    //75、42、59、76、82、92、50、11、34、31  可以换我们的分隔符

其他函数

字符串对象

• 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean
• 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
• 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1.生成临时变量，把简单类型包装成为复杂类型
let temp  = new  String('andny');
// 2. 赋值给我们的声明变量
str = temp;
// 3.销毁临时变量
temp = null;