Javascript

Javascript介绍

1、Javascript（是什么？）

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

2、作用（做什么？）

1、网页特效

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

2、表单验证

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

3、数据交互

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

4、服务端编程

（node.js）

3、Javascript的组成（有什么？）

1、ECMAScript：

规定了js基础语法核心知识。

比如：变量、分支语句、循环语句、对象等等

2、Web APIs：

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

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

4、javascript书写位置

css位置：

1、行内样式表

2、内部样式表

3、外部样式表

Javascript

1、内联JavaScript

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

规范：script标签写在</body>上面

拓展：slert（‘你好，js')页面弹出警告对话框

顺序加载html

2、内部JavaScript

代码写在标签内部

3、外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

1、script标签中间无需写代码，否则会被忽略

2、外部Javascript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读

一、内部JavaScript

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

规范：

script标签写在</body>上面

拓展：

alert（‘你好，js’）页面弹出警告对话框

JaveScript输入输出语法

1、输出语法：

document.write（’ 要输出的内容’）；

向body内输出内容

如果输出的内容写的是标签，也会被解析成网页元素

alert（‘要输出的内容’）；

页面弹出警告对话框

console.log（‘控制台打印’）；

控制台输出语法，程序员调试使用

2、输入语句：

prompt（‘您今年多大了’）

Javascript变量

1、变量：

-白话：

变量就是一个装东西的盒子。

-通俗：

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

-注意：

变量不是数据本身，它们仅仅是一个用于存储数据值的容器。可以理解为是一个个用来装东西的纸箱子

变量基本使用

1、声明变量：

要想使用变量，首先需要创建变量（专业说法：声明变量）

语法:

let : 变量名

1、声明变量有两部分构成：声明关键字、变量名（标识）

2、let即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语

2、变量赋值：

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个"=",然后是数值。

3、更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

变量的初始化：

let age=18

console.log(age)

4、声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它

变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量：是程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范

规则：必须遵守，不遵守报错

规范：建议，不遵守不会报错，但不符合业内通识

1、规则：

-不能用关键字

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

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

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

2、规范：

起名要有意义

遵守小驼峰命名法

第一个单词首字母小写，后面每个单词首字母大写。例：userName

let和var区别：

let为了解决var的一些问题

var声明：

1、可以先使用在声明（不合理）

2、var声明过的变量可以重复声明（不合理）

3、比如变量提升、全局变量、没有块级作用域等等

结论：

以后声明变量我们统一使用let

数据类型使用

数组：

（Array）是一种可以按顺序保存多个数据

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

-计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推

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

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

2、取值语法

-通过下标取数据

-取出来是什么类型的，就根据这种类型特点来访问

数据类型：

为什么要给数据分类？

1、更加充分和高效的利用内存

2、也更加方便程序员使用数据

JS数据类型整体分为两大类：

1、基本数据类型：

number数字型

string字符串型

boolean布尔型

undefined未定义型

null空类型

2、引用数据类型

object对象

function函数

array数组

可以是整数、小数、正数、负数

JavaScript中的正数、负数、小数等，统一称为——数字类型

注意事项：

1、JS是弱数据类型，变量到底属于哪种类型，只有赋值之后，我们才能确认

2、Java是强数据类型，例如 int a = 3 必须是整数

字符串类型（sring）

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

注意事项：

1、无论单引号或是双引号必须成对使用

2、单引号/双引号可以互相嵌套，但是不可以自己嵌套自己（口诀：外双内单，或者外单内双）

3、必要时可以使用转义符\，输出单引号或双引号

模板字符串

1、作用：

拼接字符串和变量

在没有它之前，要拼接变量比较麻烦

document.write('大家好，我叫' + name + ',今年' + age + '岁')

2、符号

``

在英文输入模式下按键盘的tab键上方那个键（1左边那个键）

内容拼接变量时，用${}包住变量

document.write(`大家好，我叫${name}，今年${age}岁`)

数据类型—布尔型

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

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

数据类型—未定义类型

只有一个值undefined

什么情况出现未定义类型？

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

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

null表示值为空

let obj = null

null 和 undefined区别

1、undefined表示没有赋值

2、null表示赋值了，但是内容为空

null开发中的使用场景：

官方解释：

把null作为尚未创建的对象

大白话：

将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

检测数据类型

1、控制台输出语句：

控制台语句经常用于测试结果来使用

可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

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

let age = 18
let umane = '刘德华'
let flag = false
let buy 
console.log(age)    // number
console.log(uname)  // string 
console.log(flag)   // boolean
console.log(buy)    // undefind

类型转换

Javascript是弱数据类型：

Javascript也不知道变量到底属于哪种数据类型，只有赋值了才清除。

坑：

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行佳发运算

console.log('10000'+‘2000)  //  输出结果  100002000

此时需要转换变量的数据类型：

通俗来说：

就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换：

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

规则：

1、+号两遍只要有一个是字符串，都会把另外一个转成字符串

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

缺点:

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

小技巧：

+号作为正号解析可以转换成Number

<script>
        let num = prompt('请输入一个数字')
        console.log(num,typeof num)
        // 内部悄悄的把18转换成了字符串的'18'
        console.log('pink老师'+18)  // pink老师18
        console.log(10+'10')  // 1010
        // - * / 把字符串的'10'转换成数字型10
        console.log(10-'10') // 0
        // 小技巧
        let num = '10'
        console.log(num)
        console.log(+num)
        // console.log(-num)
        console.log(10 + +'10') ; // 20
</script>

练习：

<script>
      console.log(11 + 11)          // 22
      console.log('11' + 11)        // 1111
      console.log(11 - 11)          // 0
      console.log('11' - 11)        // 0
      console.log(1 * 1)            // 1
      console.log('1' * 1)          // 1
      console.log(typeof '123')     // string
      console.log(typeof + '123')   // number
      console.log(+'11' + 11)       // 22 
</script>

显式转换：

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换呢

概念：

自己写代码告诉系统该转换成什么类型

转换为数字型

1、Number（数据）

转成数字类型

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

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

2、paresInt（数据）

只保留整数

3、parsFloat（数据）

可以保留小数

<script>
      
      console.log(Number('10'))          //10
      console.log(parseInt('10'))        //10
      console.log(parseInt('10.111'))    //10
      console.log(parseFloat('10.999'))  //10.999
      // 区别：
      // 1、Number（）只能放数字类型的字符，不能放abc这样的
      // 否则返回额是NaN  not a number
      console.log(Number('10.01abc'))  //NaN
      // parseFloat()经常用于过滤单位
      console.log(parseFloat('10.01abc'))  // 10.01
      
</script>

概念：

自己写代码告诉系统该转成什么类型

转换为字符型：

1、String（数据）

2、变量.toString ( 进制)

案例:

分析：

1、提示age变量没有定义过

2、很可能age变量没有声明和赋值

3、或者我们输出变量名和声明的变量不一致引起的

分析:

1、提示“age”已经声明

2、很大概率是因为使用let重复声明了一个变量

3、注意let变量不允许多次声明同一个变量

分析：

1、提示参数少了）

2、很大概率是小括号不匹配，掉了一半

Javascript操作符

运算符

算术运算符

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

1、+ ：求和

2、- ：求差

3、* ：求积

4、/ ： 求商

5、% ：取模（取余数）

开发中经常作为某个数字是否被整除

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行

1、乘、除、取余优先级相同

2、加、减优先级相同

3、乘、除、取余优先级大于加、减

4、使用（）可以提升优先级

5、总结：先乘除后加减，有括号先算括号里面的~~~

赋值运算符

对变量进行赋值的运算符

已经学过的赋值运算符： = 将等号右边的值赋予给左边，要求左边必须是一个容器

其他赋值运算符：

1、+=

2、-=

3、*=

4、/=

5、%=

我们以+=赋值运算符来举例

1、以前我们让一个变量1如何做的？

<script>
      let num = 1
      num = num + 1
      console.log(num)  // 结果是2
</script>
2、现在我们有一个简单的写法啦~~~

<script>
      let num = 1
      num += 1
      console.log(num)  // 结果是2
</script>

一元运算符

根据所需表达的个数，分为一元运算符、二元运算符、三元运算符玉

二元运算符：

例：

let num = 10 + 20

一元运算符：

例：正负号

我们以前让一个变量每次+1，以前我们做的呢？

let num = 1
num = num + 1
let num = 1
num += 1

更简便的写法：

自增：

符号：++

作用：让变量的值+1

自减：

符号：--

作用：让变量的值-1

使用场景：

经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了？

自增运算符的用法：

前置自增：

let num = 1
++num        // 让num的值加1变2
let num = 1
num++      // 让num的值加1变2

1、每执行1次，当前变量数值加1

2、其作用相当于num +=1

前置自增和后置自增如果参与运算就有区别：（难点）

前置自增：

先自加再使用（记忆口诀：++在前 先加）

// 前置自增
   let i = 1
​
// 先自加再使用
// console.log(++i + 2)  // 4
// 后置自增
   let i = 1
// 先使用后自加
    console.log(i++ + 2)  // 3

后置自增：

先使用再自加（记忆口诀：++在后 后加）

let i = 1
console.log(i++ + 2)  // 结果是3
//注意：此时的i是1
//先和2相加，先运算输出完毕后，i再自加是2

自增运算符的用法：

1、前置自增和后置自增独立使用时二者并没有差别

2、一般开发中我们都是独立使用

3、后面i++后置自增会使用相对较多

比较运算符

＞：左边是否大于右边

＜：左边是否小于右边

＞=：左边是否大于或等于右边

＜=：左边是否小于或等于右边

==：左右两边是否相等

===：左右两边是否类型和值都相等

！==：左右两边是否不全等

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

<script>
     console.log(3 > 5 )  // false
    console.log(5 >= 5)  //true
    // console.log(5 == 5)
    // == 只要值一样就是true ，不管数据类型
    console.log(5 = '5')
    console.log(5 == 'pink')
    // === 以后判断要用 === 开发常用  要求值和数据类型都一样
    console.log(5 === 5)
    console.log(5 === '5')
</script>

比较运算符的细节

一、字符串比较，是比较的字符对应的ASCII码

1、从左往右依次比较

2、如果第一位一样再比较第二位，依次类推

3、比较较的少，了解即可

二、NaN不等于任何值，包括它本身

三、尽量不要比较小数，因为小数有精度问题

四、不同类型之间比较会发生隐式转换

1、最终把数据隐式转换转成number类型再比较

2、所以开发中，如果进行准确的比较我们更喜欢===或者！==

逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true，结果才为true	一假则假
||	逻辑或	或者	符号两边有一个true就为true	一真则真
!	逻辑非	取反	true变false，false变true	真变假，假变真

逻辑运算符里的短路

符号	短路条件
&&	左边为false就短路
||	左边为true就短路

false 的五个值 ： 数字0 、 ''、 undefined、 null

Javascript流程控制及案例

表达式：

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

x = 7
3 + 4
num++

表达式和语句的区别：

表达式计算出一个值，但语句用来自行以使某件事发生（做什么事）

表达式 3+4

语句 alert（）弹出对话框

其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事

程序三大流程控制语句

1、顺序结构

2、分支结构

3、循环结构

分支语句：

1、可以让我们有选择性的执行想要的代码

2、分支语句包含：

、if分支语句

、三元运算符

、switch语句

if语句：

1、if语句有三种使用：单分支、双分支、多分支

2、单分支使用语法：

if （条件） {
     满足条件要执行的代码
}

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

双分支 if语法

if （条件） {
    满足条件要执行的代码
} else {
    不满足条件执行的代码
}

多分支if语法

例：

// 1、用户输入时间，等我们学api 自动获取时间
let time = prompt('请输入小时：')
// 2、多分支判断
if (time < 12) {
              document.write('上午好，好好工作')
 } else if （time < 18 ） {
              document.write('下午好，好好工作')
} else if （time < 20 ） {
              document.write('夜深了，头发还有吗？')
}

三元运算符

1、其实是比if双分支更简单的写法，有时候也叫做三元表达式

2、符号：？与：配合使用

3、语法：

条件？满足条件执行的代码：不满足条件执行的代码

4、一般用来取值

例：

<script>
if (3 < 5) {
       alert('第一个')
} else {
          alert('第二个')
}
  
 3 > 5 ? alert('第一个') ： alert('第二个')
 </script>

案例：

判断2个数的最大值

需求：用户输入2个数，控制台输出最大的值

let num1 = 40
let num2 = 30
// num1 > num2 ? console.log(num1) : console.log(num2)
​
let re = num1 > num2 ? num1 : num2
console.log(re)
//

断点

断点调试

作用：

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

浏览器打开调试界面

1、按f12打开开发者工具

2、点到sources一栏

3、选择代码文件

断点：

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

while循环

循环：

重复执行某段代码，而while：在....期间

while循环语法：

while (循环条件) {
       要重复执行的代码（循环体）
}

释义：

1、跟if语句很像，都满足小括号里的条件为true才会进入执行代码

2、while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断 条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

while循环注意事项：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

循环需要具备三要素：

1、变量起始值

2、终止条件（没有终止条件，循环会一直执行，造成死循环）

3、变量变化量（用自增或者自减）

案例：1~100

<script>
      //1、输出1~100个数字
      //起始值
      let i = 1
      // 终止条件
      while (i <=100) {
            document.write(' <p>是：${i} </p>') 
          //变量变化
          i++
      }
    
    
       //2、计算1~100 的累加和 1+2+3....+100
         let j = 1
         let sum = 0
         while (j <= 100) {
             // sum = sum +j
             sum += j
             j++
         }
         console.log(sum)  //5050
    
    
       //3、求1~100之间的偶数累加和
         let i = 1
         let sum =0
         while (i <=100) {
             if (i % 2 === 0){
                 // 此时 i 一定是偶数
                 sum = sum + i
             }
             i++
         }
         console.log(sum) 
        //3、求1~100之间的奇数累加和
         let i = 1
         let sum =0
         while (i <=100) {
             if (i % 2 ！== 0){
                 // 此时 i 一定是偶数
                 sum = sum + i
             }
             i++
         }
         console.log(sum) 
    
</script>

循环退出：

循环结束：

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

2、break：跳出所在循环

案例：

页面弹出对话框，'你爱我吗'，如果输入'爱'，则结束。否则一直弹出对话框

分析：

1、循环条件永远为真，一直弹出对话框

2、循环的时候，重新让用户输入

3、如果用户输入：爱，则退出循环（break）

<script>
     while (true) {
         let str = prompt('如果我是DJ，你还爱我吗？')
         if (str === '爱') {
             alert('我也爱你啊~~')
             break
         }
     }
</script>

简易ATM取款机

1、循环的时候，需要反复提示输入框，所以提示框写到循环里面

2、退出的调价是用户输入了4，如果是4，则结束循环，不在弹窗

3、提前准备一个金额预先存储一个数额

4、取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

5、输入不同的值，可以使用switch来执行不同的操作

<script>
      // 1、不断的弹出对话框
      // 2、金额的变量
      let money = 100;
      while (true) {
        let str = prompt(`请您选择操作：
          1、存钱
          2、取钱
          3、查看余额
          4、退出
          `);
        // 3、除非输入的是4 则退出循环 break
        if (str === "4") {
          break;
        }
        // 4、switch加减操作
        switch (str) {
          case "1":
            let cun = +prompt("请您输入存钱的金额：");
            // money = money + cun
            money += cun;
            break;
          case "2":
            let qu = +prompt("请您输入取钱的金额：");
            // money = money + qu
            money -= qu;
            break;
          case "3":
            // let  = prompt(`请您卡上的金额为：`)
            // money = money + cun
            // money += cun
            alert(`您卡上的余额是${money}元`);
            break;
        }
      }
    </script>

for循环语法

语法：

1、重复执行代码

2、好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

for (声明记录循环次数的变量；循环条件；变化值) {
      循环体
}

循环练习

<script>
// 1、利用for循环输出多少岁
for (let i = 1; i <=100; i++) {
        document.write(`我今年${i}岁了 <br>`)
}
​
​
// 2、求1~100偶数的累加和
let sum = 0 
for (let i = 1; i <= 100; i++) {
           // 筛选偶数
           if(i % 2 === 0) {
          //sum = sum + i
            sum += i
           }
       }
       document.write(sum) 
​
// 3、页面打印5个小星星
for (let i = 1; i <= 5; i++) {
              document.write('☆')
}
​
// 4、数组['马超'、 '赵云'、 '张飞'、 '关羽'、 '黄忠'] 依次打印出来
let arr = ['马超'， '赵云'， '张飞'， '关羽'， '黄忠']
// console.log(arr)
// document.write(arr)
// document.write(arr[0])
// document.write(arr[1])
// document.write(arr[2])
// document.write(arr[3])
// document.write(arr[4])
// 利用循环的方式
// arr.length 数组的长度 通过他可以告诉我们数组里面有几个元素
// 可以自由增加数组中的数据
// for (let i = 0; i <=4; i++){
   for (let i = 0; i <= arr.length - 1; i++){
    // docuent.write(arr[i])
    docuent.write(`名字是：${arr[i]} <br>`)
}
</script>

for循环的最大价值：循环数组

总结：

1、for循环和while循环有什么区别呢

— 当如果明确了循环的次数的时候推荐使用for循环

— 当不明确循环的次数的时候推荐使用while循环

循环结束：

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

— break：跳出所在的循环

<script>
    for (let i = 1; i < 6; i++){
        if (i === 2) {
            // continue  // 1345 继续 退出本次循环，继续下一次循环
            break        // 结束循环 退出整个循环
        }
        document.write(i)
    }
</script>

for循环嵌套

for (外部声明记录循环次数的变量；循环条件；变化值) {
  for (内部声明记录循环次数的变量；循环条件；变化值) {
    循环体
    }
}

一个循环里再套一个循环，一般用在for循环里

练习案例

<script>
     // 循环嵌套
    for (let i = 1; i < 6；i++){
        for (let j = 1; j < 6; j++) {
            document.write('
        for (let j = 1; j < 6; j++) {
            document.write('星')
        }
    }
        // 5*5=25 先执行i = 1 ，再在j循环里重复5次，往复五次就是五乘五
    
        
// 计算：加入每天记住5个单词，3天后一共能记住多少单词？
// 拆解：
// 1、第一天：5个单词
// 2、第二天：5个单词
// 3、第三天：5个单词
        // 1、外面的循环 记录第n天
        for ( let i = 1; i < 4; i++) {
            // 2、里层的循环记录多少个单词
            for ( let j = 1; j < 6; j++ ) {
                document.write(`记住第${j}个单词 <br>`)
            }
        }
        
// 打印五行五列的小星星
        // 外层行  里层每行几个小星星
        for (let i = 1; i < 6; i++) {
            for ( let j = 1; j < 6; j++){
                document.write('☆')
            }
            document.write('<br>')
        }
   
​
</script>

<script>
      // 打印倒三角星星
      // 1、利用双重for循环来做
      // 2、外层循环控制打印行，内层循环控制每行打印几个（列）
      // 3、内层循环的个数跟第几行是一一对应的
     // 外层打印几行
      for ( let i = 1; i < 6; i++) {
          // 里层打印几个星星
          for ( let j = 1; j <= i; j++) {
              document.write('☆')
          }
          document.write('<br>')
      }    
</script>