JavaScript

目录

第一章 JavaScript简介

1.1 JavaScript的起源

  JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 

  在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

  为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

1.2 JavaScript的组成

  javascript组成一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

  核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。

1.3 JavaScript的引入方式

1.3.1 行内式

  <button onclick="window.alert('别点了')">点我呀</button>

1.3.2 嵌入式 

<script>
    document.write('就要点你')
  </script>

1.3.3 外链式 

 <script src="./03-外链式.js"></script>

1.4  JavaScript的输入输出

1.4.1 输出语句

1.4.1.1 用于在浏览器中弹出警告

<script>
​
   window.alert('未满18周岁禁止访问')

​</script>

1.4.1.2 用于在控制台中输出 

<script>
    console.log('123456')
  </script>

1.4.1.3 用于在网页中输出内容 

<script>
     document.write('我刚满18周岁~~~~~~')
  </script>

1.4.2 输入语句 

1.4.2.1 在浏览器中弹出输入框，用户可以输入内容

<script>
    prompt("请输入你的年龄")
  </script>

1.4.2.2 在浏览器中弹出确认框 

<script>
   confirm('你真的16周岁吗？')
  </script>

1.5 JavaScript的注释 

  注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。

  JS中的注释和Java的的一致，分为两种：

  单行注释：// 注释内容
  多行注释：/* 注释内容 */

1.5.1 单行注释

<script>
    // 这是注释内容
    console.log("Hello,World!");
</script>

1.5.2 多行注释

<script>
    /**
     * 这是注释内容
     */
    console.log("Hello,World!");
</script>

第二章 JavaScript基础语法

2.1、标识符

  所谓标识符，就是指给变量、函数、属性或函数的参数起名字。

  标识符可以是按照下列格式规则组合起来的一或多个字符：

  第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
  其它字符可以是字母、下划线、美元符号或数字。
  按照惯例，ECMAScript 标识符采用驼峰命名法。
  标识符不能是关键字和保留字符。

关键字：

2.2 变量

2.2.1变量是什么

2.2.2 变量的声明与赋值

 <script>
    // [先声明再赋值]

    //声明变量
    var tom;  //声明了一个tom变量
    var lily;
    var jack,jackson;  //同时声明了两个变量

    //为变量赋值
    tom = 'boy';
    lily = 'girl';

    //输出变量的值
    console.log(tom);

    // [在声明的同时直接赋值]
    var height = 188;
    console.log(height);
    
  </script>

2.2.3 let声明变量与赋值 

 <script>
    // let用于声明变量，是ES6新语法
    //ES6语法是指2015年推出的ECMAScript新规范

    var girlfriend = "张元英"
    var girlfriend = "白鹿"
    console.log(girlfriend) //bailu

    //let在声明变量时，在一个代码块内，不允许有变量去一样的名字
    //以一个花括号{}括起来的，为一个代码块
    let boyfriend = "魏大勋"
    boyfriend = "蔡徐坤"

    //变量值可以被更改，以最后一次值为准
    console.log(boyfriend)  //蔡徐坤

    {let boyfriend = "徐良"
      console.log(boyfriend);}
  </script>

2.2.4 const声明变量

 <script>
    // const和let一样，都是es6新语法

    //const一般声明的是不能改变的变量，也就是常量

    //const既不允许将一个变量名反复声明
    //也不允许在运行过程中变量的值

    const pi = 3.14
    console.log(pi)
    const r = 5
    C=2*pi*r
    S=pi*r*r
    console.log(C)
    console.log(S)
  </script>

2.2.5 变量声明不同 

   (1)初始化要求不同  

      使用var和let声明变量时可以先不初给化，而使用canst声明交量时必须初始化

    (2)重复声明不同，

      使用var和let声明的变量可以多次被修改,其值只与最近一次默值一致。

      驾使用const声明的变量,在整个运行过程中不能修改初值。

    (3)对块级作用域的支持不同.

      (使用一对花括号括起来的代码称为一个代码块所谓块级作用域  

      用的范围是当前代码块，离开当前代码块，安量就失效了。  

      使用var声明的变量支持全局作用城，使用let和const声明约变量支持块级作用域。)

2.3 数据类型

2.3.1 类型分类

  数据类型决定了一个数据的特征，比如：123和”123”，直观上看这两个数据都是123，但实际上      前者是一个数字，而后者是一个字符串。

  简单数据类型存储在栈内容中

  复杂数据类型的内容存储在堆内存中，

  地址存储在栈内存中

  对于不同的数据类型我们在进行操作时会有很大的不同。

  JavaScript中一共有5种基本数据类型：

  字符串型（String）
  数值型（Number）
  布尔型（Boolean）
  undefined型（Undefined）
  null型（Null）
  这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

2.3.1.1 字符串型（String）

2.3.1.2  数值型（Number）

<script>
     var time = 1704

      //最大值
      console.log(Number.MAX_VALUE);
      //Infinity表示无穷大，也属于数字型
      console.log(Number.MAX_VALUE * 2); //Infinity

      console.log(3 - 2);//1
      console.log("a" - 2);//NaN
      //NaN表示not a number，不是一个数
      //但是NaN属于数字类型

      //用isNaN()做判断，会得到true或false结果
      //当判断的数据是正常的数字，isNaN的结果为false
      //当判断的数据不是正常的数字，isNaN的结果为true

      console.log(isNaN());
      console.log(isNaN(123)); //false
      console.log(isNaN(Infinity)); //false
      console.log(isNaN("aaa")); //true
    
  </script>

2.3.1.3 布尔型（Boolean）

  该类型只有两个值，true和false

2.3.1.4  未定义类型（Undefined）

  只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。

2.3.1.5 空型（null）

  空型只有一个一个特殊的null值，表示变量没有指向任何对象

2.3.1.6 Object类型

  js中对象是一组属性与方法的集合。这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。

2.3.2 数据类型检测 

  当不确定一个变量或值是什么类型的数据时

  就用typeof操作符进行数据类型检测

<script>
    let a = typeof (111)
      console.log(a); //number

      console.log(typeof ('111'));//string

      console.log(typeof NaN); //Number
      console.log(typeof -Infinity); //Number
      console.log(typeof true); //Boolean
      console.log(typeof "false");  //string
      console.log(typeof undefined); //undefined
      console.log(typeof null);  //object
    
  </script>

2.3.3 数据类型转换

  强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean。

2.3.3.1 转换为String类型

<script>
  let b = false
  console.log(typeof b); //boolean
  var c = toString(b)
  console.log(typeof c); //string
 </script>

 2.3.3.2 转换为Number类型

字符串 --> 数字
       如果是纯数字的字符串，则直接将其转换为数字
       如果字符串中有非数字的内容，则转换为NaN
       如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
布尔 --> 数字
       true 转成 1
       false 转成 0
null --> 数字
       null 转成 0
undefined --> 数字
       undefined 转成 NaN

<script>
 console.log(Number(true)); //1
  console.log(Number(false)); //0
  console.log(Number(undefined)); //NaN
  console.log(Number(null)); //0
  console.log(Number("123")); //123
  console.log(Number("123.a")); //NaN
  console.log(Number("")); //0
  console.log(Number("  ")); //0
  console.log(Number("true")); //NaN
  console.log(Number(""));
 </script>

2.3.3.3 将数据转换为布尔型数据

 转换时，代表空或者固定的值 [空字符串，数字0，NaN，null[undefined] 会转换成false]

 其他的值就会转换为true

 <script>
 let a = Boolean("")
  console.log(a); //false
  console.log(Boolean(" ")); //true
  console.log(Boolean("false")); //true
  console.log(Boolean(0)); //false
  console.log(Boolean(undefined)); //false
  console.log(Boolean(null)); //false
  console.log(Boolean("null")); //true
  console.log(Boolean(Infinity)); //true
  console.log(Boolean(2)); //true
 </script>

2.4 运算符

  运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果。

  比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回（number string boolean undefined object）

2.4.1 算术运算符

2.4.1.1 自增运算    

 <script>
 
  //自增运算  （前自增）
  let m = 10
  let n = 20
  m = ++n
  console.log(m); //21
  console.log(n); //21

  //自增运算 （后自增）
  m = n++;
  console.log(m); //21
  console.log(n); //22
 </script>

2.4.1.2 自减运算

<script>
 
   //自减运算 （前自减）
    m = --n
    console.log(m); //21
    console.log(n); //21

    //自减运算 （后自减）
    m = n--
    console.log(m); //21
    console.log(n); //20

    var x = 3
    console.log(x);
    console.log(++x); //4
    console.log(x++); //4
    console.log(x); //5

    console.log(--x); //4
    console.log(x); //4
    console.log(x--); //4
    console.log(x); //3

 </script>

2.4.2 字符串运算符

  隐式转换

  当两个数据类型不同时，js会按照固定的规则进行转换、

  字符串运算符；

  当加号遇见字符串，加号做拼接使用

<script>
    console.log(1 + 1); //2
      console.log(Infinity + 1); //Infinity
      console.log(1 + null); //1
      console.log(1 + true);// 2
      console.log(1 + false);//1

      console.log("12" - 0);//12
      console.log(null * 999); //0
      console.log(null * undefined); //NaN

      console.log(12 + "0"); //120
      console.log(1 + "1"); //11
      console.log(null + "999"); //null999

      var name = "xiaozhang"
      var age = 18
      console.log(name + "的年龄是" + age); //xiaozhang的年龄是18

 </script>

2.4.3 赋值运算符

  赋值运算符用于给 JavaScript 变量赋值。

  x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等同于	运算结果	在线实例
=	x=y		x=5	实例 >>
+=	x+=y	x=x+y	x=15	实例 >>
-=	x-=y	x=x-y	x=5	实例 >>
*=	x*=y	x=x*y	x=50	实例 >>
/=	x/=y	x=x/y	x=2	实例 >>
%=	x%=y	x=x%y	x=0	实例 >>

2.4.4 比较运算符 

  比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。使用 == 来做相等      运算

  1.当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类        型，然后在比较

 2. 使用 != 来做不相等运算
  不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进    行自动的类型转换，如果转换后相等它也会返回false

  3.使用 === 来做全等运算
  用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类    型不同，直接返回false 

  4.使用 !== 来做不全等运算
  用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的    类型不同，直接返回true

<script>
    //==相等运算符
    console.log(5 == "5"); //true

    //===全等运算符
    console.log(5 === "5"); //false

    //!= 不相等
    console.log(5 != "5"); //false

    // !== 不全等
    console.log(5 !== "5"); //true

    //==和!=在比较不同的数据类型时，会将比较数据转换为同一类型
    //===和!==则不会转换
  </script>

2.4.5 逻辑运算符

  && 逻辑与运算符 一假则假

  || 逻辑或运算符 一真则真

  <script>
    console.log(true && true) //true
    console.log(false && true) //false
    console.log(true && false); //false
    console.log(false && false); //false

    console.log(true || true); //true
    console.log(true || false); //true
    console.log(false || true); //true
    console.log(false || false); //false

    console.log(3 > 2 && 2>1); //true
    console.log(3>2 && 2<1); //false
    console.log(3>2 || 2<1); //true
  </script>

2.4.6 三元运算符

语法：条件表达式 ? 表达式1 : 表达式2

如果条件表达式的值为true, 则返回表达式1的执行结果

如果条件表达式的值为false, 则返回表达式2的执行结果

案例：

var age = prompt('请输入年龄')
    age >= 18 ? console.log('成年') : console.log('未成年');

2.4.7 运算符优先级

运算符优先级由上到下依次减小，对于同级运算符，采用从左向右依次执行的方法。

一元运算符 > 比较运算符 > 逻辑运算符 (逻辑与>逻辑或> 赋值运算符）

let a = 3 > 5 && 2 < 7 && 3 == 4
    console.log(a) // false

    let b = 2 == "2"
    console.log(b); //true

    let c = !b || a && c
    console.log(c); //false

    let d = a &&(c || b)
    console.log(d); //false

2.5 流程控制

2.5.1 选择结构

2.5.1.1 if语句 （单分支语句）

语法格式：

 if(条件表达式){代码块}

案例：

let age = prompt(`请输入您的年龄`)
    console4.log(age);
    if (age >= 18) {
      document.write("恭喜你成年了")
    }

2.5.1.2 if...else语句（双分支语句）

语法格式：

 if（条件表达式）{代码块1}else{代码块2}

案例：

 let score = prompt("请输入您的分数")
    if (score >= 60) {
      document.write("恭喜你及格了")
    }else {
      document.write("没及格")
    }

2.5.1.3 if...else if...else语句

语法格式：

if(条件表达式1) {

      代码段1

    }else if(条件表达式2) {

      代码段2

    } else if (条件表达式3) {

      代码段3

    } else if (条件表达式4) {

      代码段4

    } else {

      代码段n

    }

let ck = prompt("请输入您的存款")
      if (ck <= 3000) {
        document.write("喝蜜雪")
      } else if (ck <= 5000) {
        document.write("喝古茗")
      } else if (ck <= 7000) {
        document.write("喝瑞幸")
      } else if (ck <= 10000) {
        document.write("喝星巴克")
      } else {
        document.write('buhe')
      }

2.5.2 循环结构

2.5.2.1 for语句

语法格式：

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

需求；打印从0-100的数

 <script>
  for (let i = 0; i <= 100; i++) {
      console.log(i);
    }
  
 </script>

2.5.2.2 while循环

语法格式：

  while(条件表达式) {循环体}

案例：打印1-100

<script>
  var i = 0;
    while (i <= 100) {
      console.log(i)
      i++
    }
</script>

2.5.2.3 do... while循环

语法格式：

  do {循环体} while (条件表达式)

案例：打印0-100的值

<script>
   var i = 0
    do {
      console.log(i);
      i++
    } while (i <= 100)

</script>

2.5.3 跳转语句

2.5.3.1 break

break 语句跳出循环

<script>
  for (var i = 1; i <= 5; i++) {

    if (i == 3) {
      console.log("白雪公主吃了毒苹果");
      break
    }
    console.log("白雪公主吃了" + i + "个苹果");
  }
</script>

2.5.3.2 continue

continue语句结束当前循环

<script>
  for (var i = 1; i <= 5; i++) {

      if (i == 3) {
        console.log("白雪公主吃了虫苹果");
        continue
      }
      console.log("白雪公主吃了" + i + "个苹果");
    }
</script>

2.5.4 循环嵌套

嵌套循环的特点:

外层循环执行一次, 内层循环要执行完所有循环次数

一般习惯外层循环变量用i, 内层循环变量用j

案例：打印四排四列星星

<script>
  for (let i = 1; i <= 4; i++) {
      
        for (let j = 1; j <= 4; j++) {
          document.write('★')
        }
        document.write('<br>')
      }
</script>

 案例：金字塔        

<script>
   let jzt = +prompt('请输入行数')
     for (let i = 0; i <jzt; i++) {
       for (let j = 1; j <jzt-i; j++) {
         
       }
       for (let a = 0; a < 2*i+1; a++ ) {
         document.write('★')  
       }
       document.write('<br>')
     }
</script>

第三章 数组

3.1 概述

数组也是对象的一种，数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。

数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关，此处不用纠结，我们大多数时候都是相同类型元素的集合。数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。

使用typeof检查一个数组对象时，会返回object。

3.2 数组的基本操作

3.2.1 创建数组

1. 以数组字面量创建数组

<script>
   var array = [1, 2, 3, 4, 5]
    console.log(array); //[1, 2, 3, 4, 5]
</script>

2.以new Array()方式创建数组

<script>
   var array1 = new Array(1, 2, 3, 4, 5)
    console.log(array1); //[1, 2, 3, 4, 5]
</script>

3.2.2 数组构成

数组的值可以是任意类型的数据

<script>
    var array2 = ['string', 123, null, undefined, NaN, array]
      console.log(array2); //['string', 123, null, undefined, NaN, Array(5)]
</script>

3.2.3 数组长度

后面加.length

<script>
    var array2 = ['string', 123, null, undefined, NaN, array]
      console.log(array2.length); //6
</script>

3.2.4 访问数组

"数组索引"也称为"数组下标"，以数字表示，默认是从0开始以此递增

<script>
    var array2 = ['string', 123, null, undefined, NaN, array]
     console.log(array2(0)); //string
     console.log(array2(3)); //underfined
</script>

3.2.5 更改数组

通过下标更改

<script>
    var array4 = [1, 2, 3, 4, 5]
      array4[0] = 0
      console.log(array4); //[0,2,3,4,5]
</script>

3.2.6 新增数组

通过下标新增

<script>
    var array4 = [1, 2, 3, 4, 5]
      array4[7] = 10
        console.log(array4); //[0, 2, 3, 4, 5, empty ,empty, 10]
        console.log(array4.length); //8
</script>

3.2.7 删除数组

利用delete关键字 +下标删除

<script>
    var array4 = [1, 2, 3, 4, 5]
     delete array4[7]
      console.log(array4); // [0, 2, 3, 4, 5, empty ,empty,empty]
      console.log(array4.length); //8
</script>

3.2.8 修改元素长度

通过.length修改

<script>
      var array4 = [1, 2, 3, 4, 5];
      array4.length = 5;
      console.log(array4); //[0, 2, 3, 4, 5]
      array4.length = 20;
      console.log(array4); //[0, 2, 3, 4, 5, empty × 15]
    </script>

3.2.9 数组方法

1. 在数组前新增元素unshift

<script>
       var arr1 = [4, 5, 6]
        arr1.unshift(1, 2, 3)
        console.log(arr1); //[1, 2, 3, 4, 5, 6]
    </script>

2. 在数组后新增元素push

 <script>
      var arr1 = [4, 5, 6]
      rr1.push(7, 8, 9)
      console.log(arr1); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
    </script>

3.3 遍历数组

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

<script>
      var array = ["jack", "lily", "tom", "tony"]
      for (var i = 0; i <= array.length; i++) {
          console.log(array[i]);
          // jack
          // lily
          // tom
          // tony
        }
    </script>

需求：[60,78,86,55,32,97,40,10,99]最大值和最小值

<script>
      let score = [60, 78, 86, 55, 32, 97, 40, 10, 99]
      let max = score[0]
      let min = score[0]
      for (let i = 1; i < score.length; i++) {
        if (max < score[i]) {
          max = score[i]
        }
        if (min > score[i]) {
          min = score[i]
        }
      }
      console.log(max);
      console.log(min);
    </script>

需求：将数组["一","二","三","四","五"]反转

<script>
    var arr3 = ["一", "二", "三", "四", "五"]
    var arr4 = []
    for (var i = arr3.length - 1; i >= 0; i--) {
      console.log(i);
      console.log(arr3[i]);
      arr4.push(arr3[i])
    }
    console.log(arr4);
  </script>

3.4 二维数组

需求：二维数组求和

​
<script>
    var score = [
      [98, 67, 98, 88],
      [89, 79, 75, 66],
      [66, 78, 58, 98],
      [96, 53, 42, 81]
    ]
    let sum = 0

    for (var i = 0; i < score.length; i++) {
      console.log(i); //0,1,2,3
      sum = 0
      // console.log(sum); //会得到4个sum=0
      for (var j = 0; j < score[i].length; j++) {
        console.log(score[i][j]);
        sum += score[i][j]
      }
    }
    console.log("第" + (i + 1) + "位的学生的总成绩是" + sum);

  </script>

​

3.5 数组的迭代方法

3.5.1 map数组遍历器

  map 使用某种规则映射得到一个数组

  遍历数组中的每一个元素，并对每个元素进行相应的处理，并返回新的数组

  回调函数一定要有返回值

<script>
     var arr = [12, 13, 14, 15]
      //需求；生产一个新数组arr1
      var arr1 = []
      for (let i = 0; i < arr.length; i++) {
        arr1[i] = arr[i] + 1
      }
      console.log(arr1); //[13, 14, 15, 16]

      let arr2 = arr.map(function (v, i) {
          return v + 1
        })
        console.log(arr2);//[13, 14, 15, 16]

  </script>

3.5.2 filter数组过滤器

  filter用于筛选数组中满足条件的数组并返回

  形成的新数组长度 ！== 原数组长度

  回调函数执行的次数 == 数组长度

<script>
     let arr = [-10, 0, 10, -20, 38, 40]
      //需求: 
      let arr1 = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] >= 10) {
          arr1.push(arr[i])
        }
      }
      console.log(arr1); //[10, 38, 40]

      arr.filter(function (v, i) {
        return v >= 10
      })
      console.log(arr1);//[10, 38, 40]

  </script>

3.5.3 forEach数组遍历器

  forEach也是用于遍历数组

  forEach没有返回值，不用写return

<script>
    let arr = [1, 2, 3, 4, 5, 6, 7]
    let sum = o
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    console.log(sum); //28

    let sum1 = 0
    arr.forEach(function (value) {
      sum1 += value
    })
    // arr.forEach(val => sum1 += val)

    
  </script>

第四章 函数

4.1 函数概述

函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。

通常情况下，JavaScript代码是自上而下执行的，不过函数体内部的代码则不是这样。如果只是对函数进行了声明，其中的代码并不会执行，只有在调用函数时才会执行函数体内部的代码。

这里要注意的是JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function。

4.2 函数创建

使用 函数对象 来创建一个函数（几乎不用）

语法格式：

var 函数名 = new Function("执行语句");

使用 函数声明 来创建一个函数（比较常用）

语法格式：

function 函数名([形参1,形参2,...,形参N]) {
    语句...
}

4.3 函数调用

无序函数

function demo() {
      console.log('我是一个函数');
    }

有序函数

 function sum(a, b) {
      console.log(a + b);
    }
    sum(100, 200)
    sum(999, 888)

4.4 函数参数

JS中的所有的参数传递都是按值传递的，也就是说把函数外部的值赋值给函数内部的参数，就和把值从一个变量赋值给另一个变量是一样的，在调用函数时，可以在()中指定实参（实际参数），实参将会赋值给函数中对应的形参

调用函数时，解析器不会检查实参的类型，所以要注意，是否有可能会接收到非法的参数，如果有可能，则需要对参数进行类型的检查，函数的实参可以是任意的数据类型

调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值，如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

4.5 函数的返回值

 函数的返回值是指在函数调用后获得的数据

 这个数据需要通过return关键字返回，让函数外可以看到

function total1(price, num) {
      return (price * num)
    }
    console.log(total1(9999, 12))

4.6 函数进阶

4.6.1 函数表达式

函数表达式是指将函数值赋给变量的表达式

let num = 1
    console.log(num); //1

    let fun = function sum(num1, num2) {
      console.log(num1 + num2); //3
    }
    // 定义函数表达式之后，不能通过函数名调用函数
    // sum(1,2)
    // 需要通过变量名调用函数
    fun(1, 2)

4.6.2 匿名函数

当使用函数表达式时，可以删除函数的名字

let fun1 = function (num1, num2) {
      console.log(num1 + num2); //3
    }
    fun1(1, 2)

    let fun2 = function (num1, num2) {
      return num1 + num2
    }
    console.log(fun2(1, 2)); //3

4.6.3 箭头函数

 删除function关键字

 在参数()和函数体{}之间放上 =>

let fun3 = (num1, num2) => {
      return num1 + num2
    }
    console.log(fun3(1, 2)); //3

4.7 回调函数

就是在a中，传入一个函数b作为参数，参数函数b就是回调函数

function demo(a, b) {
      console.log(a + b);
    }
    demo(1, 2)
    demo(11, 22)
    demo(111, 222)

    function cal(num1, num2, fn) {
      return fn(num1, num2)
    }

    var num = cal(10, 20, function (num1, num2) {
      return num1 + num2
    }
    )
    console.log(num); //30
    console.log(cal(30, 40, function (num1, num2) { return num1 + num2 })); //70

4.8 函数作用域

4.8.1 全局作用域

  全局作用域：全局变量拥有全局作用域

  全局变量: 在函数体外声明的变量或在函数体内省略var关键字声明的变量

var name = "张三"
    let age = 18
    function fun() {
      console.log(name);
      console.log(age);
    }
    fun()
    console.log(name);
    console.log(age);

4.8.2 局部作用域

  局部作用域：局部变量/函数变量拥有局部作用域

  局部变量：在函数体内利用var关键字声明的变量

function fun1() {
      var sex = "men"
      console.log(sex); // "men"

      sex1 = "women" //sex1是省略var声明的变量，属于全局变量
    }
    fun1()
    // console.log(sex); //not defined
    console.log(sex1);

4.8.3 块级作用域

块级作用域：被块级变量所拥有，在分支语句或循环大括号中定义的变量

  一般一个花括号{}为一个代码块

    块级变量:let关键字声明的变量。

for (let i = 0; i < 5; i++) {
      console.log("循环内部" + i);
    }
    console.log("循环内部" + i); //not defined

4.9 定时器函数

4.9.1 setTimeout

 setTimeout(() => {}, timeout)

 用来设置某个函数在多少毫秒之后执行

setTimeout(() => {
      console.log("要抢票了");
    }, 3000);

4.9.2 setInterval

 setInterval(() => {}, interval);

 用来设置某个函数在多少时间间隔后反复执行

 setInterval(() => {
      console.log("要抢票了");
    }, 3000);

4.10 函数嵌套

嵌套函数：在函数中声明的函数就是嵌套函数，嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。

 let demo = "111"

    // 声明函数
    function func() {
      let demo = "222"

      function fun1() {
        let demo = "333"
        console.log(demo);
      }
      console.log(demo);

      fun1()
    }

    // 使用函数
    func()

4.11 闭包函数

是一种代码形式，内部函数访问外部函数的局部变量

闭包的作用：将变量以函数的形式保护起来，解决变量污染问题

举例：js函数outer中有一个函数inner

    函数inner访问了函数outer定义的局部变量demo，此时就产生了闭包

    变量所在的函数就是闭包函数，在这里，outer是闭包函数

 function outer() {
      let demo = "123"
      function inner() {
        console.log(demo);
      }
    }

第五章 对象

5.1 概述

 对象：(object)是一种复杂数据类型

     (简单数据类型存储在栈中，复杂数据类型的内容存储在堆中，地址存储在堆中)

     对象形式：以键值对的形式存储多个数据

5.2 介绍对象

5.2.1 创建对象

创建对象有两种方式：

第一种方式：

var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);

第二种方式：

var person = {
    name: "孙悟空",
    age: 18
};
console.log(person);

5.2.2 对象新增

 <script>
    let obj = {
        name: "张三",
        sex: "man",
        age: 18,
        gfs: ["小美", "小丽", "小爱"],
        func: function () {
          console.log("见一个爱三个");
        }
      }

      obj.bf = "李四"
        console.log(obj);

  </script>

5.2.3 对象修改

<script>
    let obj = {
        name: "张三",
        sex: "man",
        age: 18,
        gfs: ["小美", "小丽", "小爱"],
        func: function () {
          console.log("见一个爱三个");
        }
      }

      obj.bf = "王五"
        console.log(obj);

  </script>

5.2.4 对象删除

 <script>
    let obj = {
        name: "张三",
        sex: "man",
        age: 18,
        gfs: ["小美", "小丽", "小爱"],
        func: function () {
          console.log("见一个爱三个");
        }
      }

     delete obj.gfs
      console.log(obj);

  </script>

5.2.5  对象遍历

 <script>
    let obj = {
        name: "张三",
        sex: "man",
        age: 18,
        gfs: ["小美", "小丽", "小爱"],
        func: function () {
          console.log("见一个爱三个");
        }
      }

     for (let key in obj) {
        console.log(ley); //打印属性名
        console.log(obj[key]); //打印属性值
      }

  </script>

5.3 Math对象

<script>
    // 1. 内置对象：由JS作者提交编写好的对象，直接使用即可

    const r = 5
    const pi = 3.14
    const C = 2 * pi * r
    console.log(C);

    // a.圆周率：Math.PI
    console.log(Math.PI);
    const c = 2 * Math.PI * r
    console.log(c);

    // b.绝对值：Math.abs()
    console.log(Math.abs(-3)); //3
    console.log(Math.abs(3)); //3

    // c.求最大/最小值：Math.max() /Math.min()
    console.log(Math.max(5, 7, 2, 9, 0, 3, -1)); //9
    console.log(Math.min(5, 7, 2, 9, 0, 3, -1)); //-1

    //d.四舍五入：Math.round()
    console.log(Math.round(3.3)); //3
    console.log(Math.round(-3.3)); //-3
    console.log(Math.round(-3.6)); //-4

    //e.向上取整：Math.ceil()
    console.log(Math.ceil(1.4)); //2
    console.log(Math.ceil(-1.4)); //-1

    //f.向下取整:Math.floor()
    console.log(Math.floor(1.4)); //1
    console.log(Math.floor(-1.4)); //-2

    //g.生成一个0-1的随机小数：Math.random
    console.log(Math.random());

    //生成一个0-100之间的随机整数
    console.log(Math.random() * 101);
    console.log(Math.round(Math.random() * 100));
  </script>

5.4 Date对象

<script>
    // 时间戳：1978年
    console.log(new Date().getTime());

    // 获取年份
    console.log(new Date().getFullYear()); //2024
    // 获取月份
    console.log(new Date().getMonth());
    // 获取日期
    console.log(new Date().getDate());
    // 获取星期
    console.log(new Date().getDay());
    // 获取小时
    console.log(new Date().getHours());
    // 获取分钟
    console.log(new Date().getMinutes());

    console.log("今天是" + new Date().getFullYear() + "年" + new Date().getMonth() + "月"
      + new Date().getDate() + "日" + "星期" + new Date().getDay());


    var date = new Date()
    // 设置年份
    date.setFullYear(2004)
    //设置月份
    date.setMonth(11)
    date.setDate(23)
    //打印月份
    console.log(date.getFullYear() + "年" + date.getMonth() + "月"
      + date.getDate() + "日" + "，我出生了");



  </script>

5.5 Array对象

<script>
     var course = ["web", "java"]
      // push()在数组末尾添加元素
      course.push("JS")
      console.log(course); //['web', 'java', 'JS']

      //unshift()在数组前新增元素
      course.unshift("计算机基础")
      console.log(course); //['计算机基础', 'web', 'java', 'JS']

      //pop()删除数组中最后一个元素
      course.pop()
      console.log(course); //['计算机基础', 'web', 'java']

      //shift()删除数组中第一个元素
      course.shift()
      console.log(course); // ['web', 'java']
      course.splice(1, 1, "js", "Vue", "node")
      console.log(course);

      var arr = [1, 2, 3, 4, 5, 6, 7]
      // splice(startIndex,deleteCount) splice起始下标
      arr.splice(3, 3) //表示从下标3(数字4) 开始删除3个数字
      console.log(arr); //[1, 2, 3, 7]
      arr.splice(2, 2)
      console.log(arr); //[1, 2]
      // splice()
      arr.splice(2, 0, 3, 4, 5, 6, 7)
      console.log(arr);

      // reverse():颠倒数组中元素的索引
      arr.reverse()
      console.log(arr); //[7, 6, 5, 4, 3, 2, 1]

      var demo = [23, 65, 78, 9, 13, 7, 24, 15]
      // sort() 对数值进行排序
      // 升序排序

      demo.sort(function (a, b) {
        return a - b
      })
      console.log(demo);//[7, 9, 13, 15, 23, 24, 65, 78]
      // 降序排序
      demo.sort(function (a, b) {
        return b - a
      })
      console.log(demo); //[78, 65, 24, 23, 15, 13, 9, 7]
  </script>

5.6 String对象 

5.6.1 概述

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

String()：可以将基本数据类型字符串转换为String对象
Number()：可以将基本数据类型的数字转换为Number对象
Boolean()：可以将基本数据类型的布尔值转换为Boolean对象

但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果，在这一章节中，我们重点介绍String()对象的属性和方法。

5.6.2 String对象 

<script>
    var str = "Helloworld"

    //访问字符串长度
    console.log(str.length);// 10

    //根据字符串返回下标 (索引)
    // indexOf() 返回元素在下标中第一次出现的下标，没有则是-1
    // lastIndexOf() 返回元素在字符串中第一次
    console.log(str.indexOf("o"));//4
    console.log(str.lastIndexOf("o"));//6
    console.log(str.lastIndexOf("v"));//-1

    //根据索引返回字符串
    //chatAt()
    console.log(str.charAt(7));// r

    //字符串类型,不改变原字符串
    // slice(startIndex)
    console.log(str.slice(5)); //world
    console.log(str);

    // slice(startIndex,EndIndex) //从第一个参数(下标)，截取到end的下标前的元素。
    console.log(str.slice(4, 7)); //owo

    var str1 = "hello"
    var str2 = "world"
    //: 字符串连接：concat()
    console.log(str1.concat(str2));//helloworld

    // 大小写转化
    // toUpperCase() 小写转化为大写
    // toLowerCase() 大写转化为小写
    console.log(str1.toUpperCase());//HELLO
    console.log("HELLO".toLowerCase());//hello

    // 字符串的替换
    // replace(str1,str2) 将str1替换为str2
    console.log(str);
    console.log(str.replace("world", "js"));//Hellojs

    // 字符串的分隔(将字符串转为数组)
    // split(分隔符)
    console.log(str.split());//['Helloworld']
    console.log(str.split(""));//['H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']
    console.log(str.split("o"));//['Hell', 'w', 'rld']
  </script>

第六章 DOM

6.1 DOM概述

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为 对象树 ：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

6.2 获取元素案例

6.2.1  隔行变色

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

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

<body>
  <!-- html部分 -->
  <button id="btn">点我啊，给你点颜色看看</button>
  <ul>
    <li>给你点黄色看看</li>
    <li>给你点绿色看看</li>
    <li>给你点黄色看看</li>
    <li>给你点绿色看看</li>
    <li>给你点黄色看看</li>
    <li>给你点绿色看看</li>
    <li>给你点黄色看看</li>
    <li>给你点绿色看看</li>
  </ul>

  <!-- js部分 -->

  <script>
    // 1.获取元素
    let btn = document.getElementById("btn")
    console.log(btn);
    let liList = document.getElementsByTagName("li")
    console.log(liList);

    // 获取元素
    // document.getElementById("id属性值") 根据id属性获取元素
    // document.getElementsByTagName("标签名") 根据标签名获取元素

    //2.注册事件
    btn.onclick = function () {

      //3.事件处理
      for (let i = 0; i < liList.length; i++) {
        if (i % 2 == 0) {
          console.log("黄色");
          liList[i].style.backgroundColor = "yellow"
        } else {
          console.log("绿色");
          liList[i].style.backgroundColor = "green"
        }
      }
    }

    // 元素对象.事件属性 = 事件处理函数
    // element.onclick(单击事件) = 事件处理函数

    // 元素样式操作
    // element.style. 样式属性名 ="样式属性值"
    // backgroundColor 设置背景颜色

  </script>
</body>

</html>

 

6.2.2 微博评论框

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .count {
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- textarea 多行文本框 -->
    <!-- placeholder 占位符 -->
    <!-- maxlength 最大字符量 -->
    <textarea name="" id="" cols="30" rows="10" placeholder="说点什么吧" maxlength="140"></textarea>
  </div>
  <span class="count">0</span>
  <span>/</span>
  <span>140</span>

  <script>
    // 1.获取元素
    let area = document.querySelector("#area")
    console.log(area);
    let count = document.querySelector(".count")
    console.log(count);

    // 根据css选择器获取元素
    // document.querySelector("id选择器") 根据id选择器获取元素
    // document.querySelector(".class类选择器") 根据class类选择器获取元素

    //2.设置事件
    area.oninput = function () {
      // console.log(this.value);// 打印输入框的内容
      // console.log(this.value.length);// 打印输入框内容的长度
      count.innerHTML = this.value.length
    }
    // 元素对象.事件属性 = 事件处理函数
    // element.oninput(输入事件)=事件处理函数
    // 设置内容
    // element.innerHTML =“HTML内容”

  </script>
</body>

</html>

 

6.2.3 开关灯

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

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

<body>
  <input type="button" value="关灯" id="btn">
  <script>
    // 1.获取元素
    let btn = document.getElementById("btn")
    console.log(btn);

    //2.事件处理
    //按钮点击事件
    btn.onclick = function () {

      // document.body 获取文档中的body标签
      let body = document.body

      if (this.value == "关灯") {
        this.value = "开灯"
        // this.style.backgroundColor = "black"
        body.style.backgroundColor = "black"
      } else {
        this.value = "关灯"
        // this.style.backgroundColor = "white"
        body.style.backgroundColor = "white"
      }
    }


    // 元素对象.事件属性 = 事件处理函数
    // element.onclick(单击事件) = 事件处理函数

    // 设置内容
    // element.innerHTML =“HTML内容”
  </script>
</body>

</html>

 

6.3 获取内容操作 

6.3.1 真香

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

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

<body>
  <div id="text">我王境泽就是饿死，死外边，从这里跳下去，也不会吃你们的东西</div>
  <input type="button" value="王子变形记" id="btn" onclick="changeText()">

  <script>

    function changeText() {
      document.getElementById("text").innerHTML = "真香"
    }

    // 设置内容
    // element.innerHTML =“HTML内容”
  </script>


</body>

</html>

 

点击按钮之后：

6.3.2 显示实时时间

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-size: 50px;
      text-align: center;
    }

    span {
      /* 设置字体加粗 */
      font-weight: bolder;
      color: blue;
    }
  </style>
</head>

<body>
  <p>现在是<span id="clock">09:28:00</span></p>
  <!-- <input type="button" value="测试按钮" onclick="showTime()"> -->
  <script>
    function showTime() {
      var date = new Date()

      console.log(date.getHours());
      console.log(date.getMinutes());
      console.log(date.getSeconds());

      // var text = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
      // console.log(text);
      // document.getElementById("clock").innerHTML = text

      var text2 = time(date.getHours() + ":" + time(date.getMinutes()) + ":" + time(date.getSeconds()))
      document.getElementById("clock").innerHTML = text2
    }

    function time(t) {
      if (t < 10)
        t = "0" + t
      return t
    }

    // 定时器函数
    // setIterval
    setInterval(showTime, 1000)
  </script>
</body>

</html>

 6.4 元素样式操作

6.4.1 改变盒子大小

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: blue;
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <div class="box" id="box">小</div>

  <script>
    // 1.获取元素
    let box = document.getElementById("box")

    // 定义一个变量。存储用户的点击数
    var i = 0

    // 2.注册事件
    box.onclick = function () {
      ++i
      console.log(i);
      // 单击次数为奇数，变大
      if (i % 2) {
        this.style.width = "500px"
        this.style.height = "500px"
        this.innerHTML = "大"
      } else {
        // 单击次数为偶数，变小
        this.style.width = "50px"
        this.style.height = "50px"
        this.innerHTML = "小"
      }
    }
  </script>
</body>

</html>

点击按钮之后：

 6.4.2 单击按钮变色

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

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

<body>
  <button>按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
  <button>按钮四</button>
  <button>按钮五</button>
  <button>按钮六</button>

  <script>
    // getElementsByTagName("button")获得页面中所有标签名为button的数组
    var btns = document.getElementsByTagName("button")
    console.log(btns);

    // 遍历btns数组，为数组中的每一个元素设置点击事件
    for (let i = 0; i < btns.length; i++) {
      console.log(i);
      btns[i].onclick = changeColor
    }

    function changeColor() {
      for (let j = 0; j < btns.length; j++) {
        //this为正在点击的按钮
        if (btns[j] == this) {
          console.log(this);
          console.log(btns[j]);
          this.style.backgroundColor = "pink"
        } else {
          console.log(btns[j]);
          btns[j].style.backgroundColor = "gray"
        }
      }
    }
  </script>
</body>

</html>

点击按钮之后：

6.4.3 一闪一闪亮晶晶

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

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

<body>
  <img src="./xx.png" alt="" id="star">

  <script>
    let star = document.getElementById("star")

    // onmouseover 鼠标移入事件
    star.onmouseover = function () {
      // display = "none" 设置元素隐藏
      star.style.display = "none"
    }

    // onmouseout 鼠标移出事件
    star.onmouseout = function () {
      // display = "block" 设置元素显示
      star.style.display = "block"
    }
  </script>
</body>

</html>

 

鼠标移出后为空白

6.4.4 我方了 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .btn {
      margin: 20px;
    }

    .changeBox {
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <!-- 当给box盒子增加changeBox类名时，圆角弧度的类名就也添加给了这个盒子 -->
  <!-- 需要设置点击事件，自动的完成changeBox类名的移出和添加 -->
  <div class="box"></div>
  <!-- <div class="box changeBox"></div> -->
  <button class="btn">我圆了</button>
  <button class="btn">我方了</button>

  <script>
    // getElementsByClassName("类名") 通过类名获取元素,得到所有这个类名的数组
    var box = document.getElementsByClassName("box")
    var btns = document.getElementsByClassName("btn")
    console.log(box);
    console.log(btns);

    btns[0].onclick = function () {
      console.log(box[0].classList); // ['box', value: 'box']
      box[0].classList.add("changeBox")
      console.log(box[0].classList); //['box', 'changeBox', value: 'box changeBox']
    }

    btns[1].onclick = function () {
      console.log(box[0].classList); // ['box', value: 'box']
      box[0].classList.remove("changeBox")
      console.log(box[0].classList); //['box', 'changeBox', value: 'box changeBox']
    }

    // element.classList:获取元素的类名列表
    // element.classList.add("类名"):为元素添加类名
    // element.classList.remove(“类名”):为元素移除类名
  </script>
</body>

</html>

点击我圆了：

6.5 元素属性操作

6.5.1 我哭了 

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

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

<body>
  <img src="./wkl.jpg" alt="" width="400px" height="300px" id="pic">
  <script>
    // 1.获取图片元素
    var pic = document.getElementById("pic")
    console.log(pic);

    // 2.为元素设置事件
    // onmouseenter 鼠标移入事件
    pic.onmouseenter = function () {
      this.src = "./wzd.jpg"
    }

    // onmouseleave 鼠标移出事件
    pic.onmouseleave = function () {
      this.src = "./wkl.jpg"
    }
  </script>
</body>

</html>

鼠标移入后：

6.5.2 404

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

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

<body>
  <input type="text" placeholder="请输入内容">
  <button>搜索</button>

  <script>
    let input = document.querySelector("input")
    let btn = document.querySelector("button")

    // 2.设置事件
    btn.onclick = function () {
      // 修改input属性的value属性
      input.value = "404NotFound"

      // 修改button标签的disabled，开启禁用模式
      this.disabled = true
    }
  </script>
</body>

</html>

 

6.5.3 显示和隐藏密码 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  img {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }

  .box {
    display: flex;
  }
</style>

<body>
  <div class="box">
    <input type="text" id="input">
    <img src="./by.jpg" alt="" id="img">
  </div>
  <!-- 当input标签的type属性为password时，为密码框
    <input type="password"> 
  -->

  <script>
    let input = document.getElementById("input")
    let img = document.getElementById("img")

    img.onclick = function () {
      if (input.type == "text") {
        input.type = "password"
        img.src = "./by.jpg"
      } else {
        input.type = "text"
        img.src = "./zy.jpg"
      }
    }
  </script>
</body>

</html>

隐藏后：

6.6 节点操作案例

6.6.1 删除水平线

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

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

<body>
  <h1>JavaScript程序设计</h1>
  <hr />
  <h2>什么是JavaScript</h2>
  <p>JavaScript是一门基于对象和事件驱动的嵌入式脚本语言</p>
  <hr />
  <h2>第一部分 JavaScript概述</h2>
  <p>JavaScript的发展历史</p>

  <input type="button" value="删除水平线" onclick="delhr()">

  <script>
    function delhr() {
      let hrs = document.querySelectorAll("hr")
      console.log(hrs);// [hr, hr]

      for (let i = 0; i < hrs.length; i++) {
        var hr = hrs[i]
        console.log(hr);

        // parentNode 获取父节点
        console.log(hr.parentNode);

        // previousSibling 获取上一个兄弟节点
        console.log(hr.previousSibling);
        // previousElementSibling 获取上一个兄弟节点原素
        console.log(hr.previousElementSibling);
        // nextSibling 获取下一个兄弟节点
        console.log(hr.nextSibling);
        // nextElementSibling 获取下一个兄弟节点元素
        console.log(hr.nextElementSibling);

        // 移除节点
        // node.removeChild(child)
        // node表示父节点，child表示node中需要被移除的子节点
        hr.parentNode.removeChild(hr)
      }
    }
  </script>
</body>

</html>

 

点击按钮后:

 6.6.2 简易留言板

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./02-节点操作案例2-简易留言板.css">
</head>

<body>
  <h1>留言板</h1>
  <ul></ul>
  <textarea name="" id="" placeholder="请输入您的留言"></textarea>
  <button class="sub">发布</button>

  <script>
    let ul = document.querySelector("ul")
    console.log(ul);
    let tr = document.querySelector("textarea")
    console.log(tr);
    let btn = document.querySelector("button")
    console.log(btn);

    btn.onclick = function () {
      // textarea标签的value属性，指在文本框输入的内容
      console.log(tr.value);

      //3. 非空判断
      if (tr.value == "") {
        alert("您没有输入任何的内容")
        return false
      } else {

        // 4.创建节点
        // document.createElement("标签名")
        var li = document.createElement("li")

        // 5.将text多行文本框的内容赋值给li元素
        li.innerHTML = tr.value

        // 8.删除按钮
        // 8.1 创建一个删除按钮(createElement)
        //8.2 为删除按钮增加内容(innerHTML)
        //8.3 为删除按钮增加点击事件(onclick = function(){})
        //8.4 点击删除按钮，移除父元素(removeChild)
        //8.5 把删除按钮添加到li元素中(li.appendchild(button))
        var btn2 = document.createElement("button")
        btn2.innerHTML = "删除"
        btn2.onclick = function () {
          ul.removeChild(li)
        }
        li.appendChild(btn2)

        // 6. 添加节点
        // insertBefore() 将一个节点添加到父节点的指定节点的前面
        // 第一个参数是要添加的节点
        // 第二个参数是父节点中指定的子节点
        ul.insertBefore(li, ul.children[0])

        //7.将文本框内容情况
        text.value = ""
      }
    }
  </script>
</body>

</html>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 10px;
}

div {
  border: 3px solid seagreen;
  width: 700px;
}

h1 {
  text-align: center;
  color: yellowgreen;
}

ul {
  margin-top: 50px;
  width: 500px;
  height: 200px;
  border: seagreen 3px dashed;
  margin: 30px auto;
  list-style: none;
}

li {
  width: 400px;
  padding: 5px;
  background-color: #eee;
  font-size: 14px;
  margin: 15px auto;
}

li a {
  float: right;
}

textarea {
  width: 400px;
  height: 50px;
  border: 3px solid seagreen;
  outline: none;
  resize: none;
  display: block;
  margin: 20px auto 5px;
}

.sub {
  display: block;
  background-color: seagreen;
  color: seashell;
  width: 200px;
  height: 30px;
  margin: 10px auto;
}

.remove {
  float: right;
}