Javascript

javascript是一种运行在客户端的（游览器）的编程语言，实现人机交互。

作用：

网页特效（监听用户的一些行为让网页作出对应的反馈）

表单验证（针对表单数据的合法性进行判断）

数据交互（获取后台数据，渲染到前端）

服务端编程（nide.js）

组成：

ECMAScript:规定了js基础语言核心知识。比如：变量、分支语言、循环语句、对象等等

Wed Apls：

DOM:操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM:操作游览器，比如页面弹窗，检测窗口宽度、储存数据到游览器等等

javascript书写位置：

内部javascript：

直接写在html文件里，用script标签包住

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    
    
    
    
    
    <script>   </script>
</body>
</html>

外部javascript：

代码写在以.js结尾的文件里，通过script标签引入到html页面中（body标签底部）

<body>
    
    
    <script src="./user.js"> </script>
</body>

内联javascript：

代码写在标签内部

<body>
    <p onclick="alert('就是玩')">你能怎么样</p>
</body>

Javascript注释

单行注释：

符号：// ；让一行代码被注释掉；快捷键：ctrl+/

多行注释（块注释）

符号：在/* 和 */ 之间的所有内容都会被注释掉；快捷键：shift+alt+a

Javascript结束符

代码后面写分号

可写可不写

<body>
    
    
    
    <script>
        alert(1);
    </script>
</body>

Javascript输入输出语法

三种输出语法：

内容输出在body里面

<script>
    document.write('内容')
</script>

内容以弹窗方式显示内容

<script>
    alert('内容')
</script>

内容显示在鼠标右键检查里面的控制台内

<script>
    console.log('内容')
</script>

一种输出语法：

弹出一个对话框，输入内容即可

<script>
    prompt('输入内容')
</script>

Javascript变量：

变量是计算机存储数据的"容器"（变量是装内容的盒子）

声明变量

要使用变量，首先要创造变量。let 是script标签里面声明变量的关键字

<script>
    let 变量名字
</script>

变量赋值

变量名后面加上 '=' ，然后是内容。赋值完成

<script>
    let name
    name = 周树人
</script>

变量赋值

连用

<script>
    let age = 18 
</script>

更新变量

变量赋值后，可以通过再给变量赋值覆盖掉前面的赋值

<script>
    let age = 18
    age = 23
    document.write(age)
</script>

多个变量声明赋值

变量之间逗号隔开

<script>
    let age = 23 ,name = "周树人"

变量命名规则和规范

规则：

不能用关键字，例如：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

只能用下划线、字母、数字、$组成，且数字不能开头

字母严格区分大小写，如 Age 和 age 是不同的变量

规范：

起名要有意义

遵守小驼峰命名法，第一个单词首字母小写，后面每个单词首字母大写。例：userName

Javascript数据类型

两种数据类型：基本数据类型，引用数据类型

基本数据类型

number 数字型 string 字符串型 boolean 布尔型 undefined 未定义型 null 空类型

字符串类型：

通过单引号（ ''）、双引号（ ""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符 \，输出单引号或双引号

<script>
    let name1='小明'
    let name2="小红"
    let name3=`小亮`
    let name4=''(空字符)
    let name5='无穷'小亮'日常'（不符合要求）
</script>

字符串拼接

<script>
    document.write('还有'+'谁')//输出  还有谁
    let name1='我爱你'
    let name2='能不能开玩笑'
    document.write(name1+name2)// 输出  我爱你能不能开玩笑
</script>

模板字符串

拼接字符串和变量

所有内容用``（tab键上方，要英文状态下）符号包裹，变量用${}包裹，自然连接内容和变量


<script>
    document.write(`你们好，我${ai}你们`)
</script>

布尔类型：

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

<script>
    //你叫小红？
    let name=true//没错
    name=false//你叫小丽
</script>

未定义类型：

未定义是比较特殊的类型，只有一个值 undefined。

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为undefined。

<script>
    let age//声明了但没有给变量赋值
    document.write(age) //输出undefined
</script>

工作中的使用场景： 我们开发中经常声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

空类型

null 表示值为空

<script>
let name=null
</script>

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null 开发中的使用场景： 官方解释：把 null 作为尚未创建的对象大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

引用数据类型

object 对象 function 函数 array 数组

控制台检测数据类型

通过typeof关键字检测数据类型

<script>
    let age =18
    let name='小明'
    let flag=flase
    let money
    console.log(typeof age)//number  数字类型
    console.log(typeof name)//string 字符串
    console.log(typeof flag)//flag   布尔类型
    console.log(typeof money)//undefined  未定义类型

类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

<sript>
    console.log('100'+'100')//输出100100
</sript>

此时需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

缺点：转换类型不明确，靠经验才能总结

<script>
   name=+prompt('数字')有''有字符串符号在，输入数字也会变成字符串，但是前面加了+就会转换成数字类型

显式转换

Number(数据)**** 转成数字类型

如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字

NaN也是number类型的数据，代表非数字

parseInt(数据)

只保留整数

parseFloat(数据)

可以保留小数

<script>
    let age ="18"
    document.write(Number(age))//转为数字类型
    document.write(parsInt(age))
    document.write(parsFloat(age))

转换为字符型: String(数据)

变量.toString(进制)

<script>
    let age=18
    document.write(String(age))//转为字符串

Javascript运算符

算术运算符

数学运算符也叫算术运算符，主要包括加、减、乘、除、求余。

'+' '-' '*' '/' '%(求余)'。

先乘除后加减，有括号先算括号里面的

*圆的的Π：Math.PI.

赋值运算符

对变量进行赋值的运算符：将等号右边的值赋予给左边, 要求左边必须是一个容器

'+=' '-=' '*=' '/=' '%='

等号两边有同一变量可以使用赋值运算：

<script>
    let number=12
    number=number+1
    //可以使用赋值运算符简写成
    number+=1
</script>

一元运算符

自增:

<script>
    let i=1
    i++(自增)
</script>

前置自增：

<script>
    let i =1
    ++i//每执行一次，变量加一
    document.write(++i + 2)//输出结果为4
    //document.write(i+1+2)
    i先自身自增加一，在和后面的2相加
    document.write(i)//输出结果为2
    //相当于document.write(i=i+1)所以i输出为2
    因为i是自增
</script>

后置自增：

<script>
    let i=1
    i++//每执行一次，变量加一
    document.write(++i + 2)//输出结果为3
    //i先和2相加，先运算输出完毕后，i在加自增加一
    document.write(i)//输出结果为2
    //相当于document.write(i=i+1)所以输出为2
</script>

后置自增如果前面有后置自增的运算，那么先运算后自增

<script>
    let i=1
    document.write(i++ +2)
    //运算输出结果为3，运算输出后i++开始自增，此时i的值结果为2
    document.write(i++ +1)
    //运算输出结果为3，因为前面i已经后置自增了一次，那么i现在的值为2，所以运算结果是3，而这个运算里面i还是后置自增，所以运算输出后，i++开始自增，所以i的值为2+1=3
    document.write(i)
    //输出结果为3
</script>

案例

<script>
    let i =1
    document.write(i++ + ++i + i)//输出结果为7
    //拆分，i++是后置自增，先运算后自增，所以在运算里面i++是1，但是i的输出值却是2，因为自增的关系，但是不影响运算里面i++是1。
    //++i是前置自增，先自增，因为前面已经有一个i++后置自增了，而i++的输出值是2，所以运算里面++i是i++ + 1等于2+1等于3，此时i的输出值为3
    //所以运算document.write(i++ + ++i + i)输出值是(1+3+3)等于7
</script>

比较运算符

">" 左边是否大于右边

"<" 左边是否小于右边

">=" 左边是否大于或等于右边

"<=" 左边是缶小于或等于右边

"==" 左右两边是否想等

"===" 左右两边是否类型和值都相等（类型指基本数据类型）

"!==" 左右两边是否不全等

比较结果为boolean（布尔）类型，即只会得到true或false

逻辑运算符

用来解决多重条件判断

符号名称日常读法特点

"&&" 逻辑与并且 符号两边都符合条件才成立

"||" 逻辑或或者 符号两边有一个符合条件就成立

"!" 逻辑非取反 符号两边都不符合条件就成立

逻辑短路

只存在于符号"&&" "||",当满足一定条件会让右边的代码不执行

"&&" 左边不符合条件就短路

"||" 左边符合条件右边就不需要执行了，短路

Javascript语句

表达式和语句

表达式：是一组代码的集合，JavaScript解释器会将其计算出一个结果

语句：js整句或命令，js语句是以分号结束

区别：表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

<script>
    let i=1
    i=i+1//表达式
    document.write(i)//语句
</script>

分支语句

分支语句可以让我们有选择性的执行想要的代码

if分支语句

执行满足条件的代码

if单分支语句

<script>
    if (条件) {
        符合条件后要执行的代码
    }

if双分支语句

<script>
    if (条件) {
        满足条件后执行的代码
} else {
    不满足条件后执行的代码
}

if多分支语句

<script>
    if (条件1) {
        满足条件1后执行的代码
    } else if (条件2) {
        满足条件2后执行的代码
    } else {
        以上条件都不满足后执行的代码
    }//先判断条件一，条件一符合，执行条件1代码，其他不执行。条件1不符合则向下判断条件2，满足条件2执行条件2代码，其他不执行，若依然不满足继续往下判断，以此类推，如果所有条件都不符合，执行else的代码。
    //条件可以写n个
</script>

三元运算符

比if双分支更简单的写法，有时候也叫三元表达式

符号："?" ":" 配合使用，一般用来取值

<script>
    条件?满足条件执行的代码:不满足条件执行的代码
</script>

switch语句

<script>
    switch(数据) {
        case 值1：
            代码1
            break
        case 值2：
            代码2
            break
        default：
            代码n
            break
}//找到跟条件全等的case值，并执行里面的代码，若没有全等，则执行default里的代码。
</script>

switch case语句一般用于等值判断,不适合于区间判断

switch case一般需要配合break关键字使用没有break会造成case穿透

for循环

循环语句

断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试界面

按F12打开开发者工具
点到sources一栏
选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

while循环

while循环语法

<script>
    while (循环条件) {
        要重复执行的代码(循环体)
}//while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近条件的过程。所以循环需要具备三要素：

1.变量起始值

2.终止条件(没有终止条件，会一直循环，造成死循环)

3.变量变化量(用自增或自减)

<script>
    let i =1(变量起始值)
    while (i<=5){//终止条件，当i大于5时就不符合条件，停止循环
        document.witer('我')
        i++(变量变化量)
    }
</script>

循环退出

continue：结束本次循环，继续下次循环

while循环退出

<script>
    let i=1
    while(i<=10){
        if (i==5) {
            i++(不加自增会陷入死循环)
            continue 
        }
        document.write(i)
        i++
    }//输出结果为1234678910，因为设置了if（i=5）就跳过5的循环，继续下次循环。所以输出结果中没有5
</script>

for循环退出

<script>
    for(let i=1;i<=10;i++) {
        if (i==5) {
            continue
        }
        document.write(i)
    }//输出结果为1234678910，因为设置了if（i=5）就跳过5的循环，继续下次循环。所以输出结果中没有5
    //for循环中，不需要加i++，它会跳到i++，然后在进行判断条件，不会死循环。
</script>

循环嵌套

<script>
     for (let i = 0; i <= 3; i++) {   //外部循环
            document.write(i)//外部循环体
            for (let z = 4; z <= 9; z++) {//内部循环
                document.write(z)//内部循环体
            }
            document.write('<br />')//外部循环体结束后换行
        }
    //输出结果0456789
           // 1456789
           // 2456789
           // 3456789
    //可以看出每一个外部循环体都有一个内部整体循环
</script>

数组

let+数组名（变量名）=【1，2，3，4，........】

数组是按顺序保存，所以每个数据都有自己的编号

计算机中的编号从0开始，所以1的编号为0，2编号为1，以此类推

在数组中，数据的编号也叫索引或下标

数组可以存储任意类型的数据

<script>
    let number = [1,2,3,4,......]
    unmber[0]//表示1，1是编号0
    unmber[1]//表示2，2是编号1
</script>

输出

<script>
    let number = [000,111,222,333,444]
    document.write(number[0])//输出内容000，000是编号0
</script>

<script>
    let numbers = [111,222,333,444,555]
    document.write(numbers.length)//数组长度，输出结果为5，因为数组长度为5
    document.write(numbers[100])//超出数组长度，显示undefined
</script>

数组长度

属性单位：nums.length

<script>
    let nums=[11,22,33,44]
    document.write(nums.length)//输出4
</script>

数组元素增加删除

数组前面添加元素

<script>
    let numbers=[11,22,33,44,55]
    numbers.unshift('00')
    document.write(numbers)
    //输出数组【00，11，22，33，44，55】
</script>

数组后面添加元素

<script>
     let numbers=[11,22,33,44,55]
     numbers.push('00')
     document.write(numbers)
    //输出数组【11，22，33，44，55，00】

删除数组第一个元素

<script>
     let numbers=[11,22,33,44,55]
     numbers.shift()
     document.write(numbers)
    //输出数组【22，33，44，55】
</script>

删除数组最后一个元素

<script>
     let numbers=[11,22,33,44,55]
     numbers.pop()
     document.write(numbers)
    //输出数组【11，22，33，44】
</script>

改变数组元素

<script>
    let nums=[11,22,33,44,55]
    nums[2]=99//把编号2（33）改成99
    //如果是改成0000的话，输出最对只能输出一个0
    document.write(nums)//输出[11,22,99,44,55]
</script>

清空数组

<script>
    let nums=[11,22,33]
    nums.splice(0)
    //或者num.length=0
</script>

获取数组最后一个元素

<script>
    let nums=[11,22,33]
    document.write(nums[nums.length-1])

Javascript前半部分

Javascript

作用：

组成：

javascript书写位置：

内部javascript：

外部javascript：

内联javascript：

Javascript注释

Javascript结束符

Javascript输入输出语法

Javascript变量：

声明变量

变量赋值

变量赋值

更新变量

多个变量声明赋值

变量命名规则和规范

Javascript数据类型

基本数据类型

字符串类型：

布尔类型：

未定义类型：

空类型

引用数据类型

控制台检测数据类型

类型转换

隐式转换

显式转换

Javascript运算符

算术运算符

赋值运算符

一元运算符

比较运算符

逻辑运算符

Javascript语句

表达式和语句

分支语句

if分支语句

三元运算符

switch语句

循环语句

断点调试

while循环

循环退出

循环嵌套

数组

数组长度

数组元素增加删除