html javascript (js) 部分

另外两篇html总结看这里！

html 基础
html css部分

javascript （js）

javascript 是一门脚本语言，主要是用于再网页上实现复杂的功能，让网页不再是静态的，而是动态（里面的内容阔以实时更新）网页，动画，画图之类的。

js语言类型

javascript是一门解释型语言，且为 轻量级的解释型语言

代码自上而下运行，且实时返回运行结果。代码在浏览器执行前不会做任何形式的转换，代码会直接以文本格式被接受和处理。

js 的作用

操作一段文本（字符串）

在网页中阔以相应发生多种类型的事件

提供一些应用程序的API使你的代码具备更多的能力

js的属性

async - 异步

告诉浏览器在遇到script元素时不要中断后续html内容的加载（使其可以同步加载）

简单来说，一般情况，js是从前往后，从上到下加载的，前面的js报错了之后，后面的js便不会再加载，而加了async后，前面js报错便不会影响后面的js加载

  <script async src=""></script>
  <script async src=""></script>
  <script src=""></script>

js的代码端口

javascript是一门客户端代码。
类似于java，php，python都是服务端代码。

服务器端的代码会在服务器上动态生成新内容，传输到客户端交给 js 动态渲染相应的信息

说说两种分类的概念：

客户端：客户也就是你，客服端也就是你这一端可以接触到的程序，手机app,web网页等，我们可以在客户端的界面上向服务器发送请求以及数据，交给服务器处理。

服务端：也就是为客户端提供“服务”，接收并储存客户端发送过来的数据或请求，并且对请求进行响应，发送数据给客户端的服务器之类的。

js的调用方式

调用方式	说明
内部js	严格区分大小写，所以调用方法时准确无误的输入
外部js	封装一个js，从外部调用
内联js	最好不要用内联js处理器去触发js方法

小贴士：

如果js需要处理html中标签，则放在html的body
如果是事件触发类型js，则放在html的head

js的注释方式

	// 单行注释方式
	
    /*
      多行注释方式
      多行注释方式
      多行注释方式
    */

js主要错误类型

语法错误
代码中存在的拼写错误会导致程序无法运行
逻辑错误
虽然语法正确,但执行结果与预期不同,则存在逻辑错误

js数据类型

共八种，前六种较常用到

number string boolean undefined object null symbol bigint

js数据类型 - number

在js中，数据类型用var let const三种方式表示

<script>
    let num1 = 5;
    let num2 = 5.5555;
</script>

let 和 var 定义变量区别

如果你同时命名了两个重名变量，var命名的变量，置于后面位置的会直接覆盖掉前面的

let 命名的变量，则会直接返回你初次定义的变量的值，并且页面中会报错，告诉变量已被声明

综上所述，建议定义变量时，尽量使用let进行定义

typeof 运算符

typeof ---- 用于检测数据类型(返回值是string)

<script>
    let num1 = 5;
    let num2 = 5.5555;
    console.log(typeof num1,typeof num2)
</script>

网页控制台打印结果：

算数运算符

加减乘除，求余，幂

	/*

    +  -  *  /  %(取模--求余数) **(幂)
    
    */

自增、自减

++ / - - 每次自动加1 / 减1

如果++ / - - 在数字前方，表示数字已经自增/自减完成
如果++ / - - 在数字后方，表示数字需要到下一步才会完成自增/自减

	//自增
	// num1++; 
	
	//自减
    // --num2;

赋值运算符

	let x = 3
    let y = 5

    x = y
    console.log(x)  //x输出为5

+=，-=，*=，/=

	/*
	
      +=
      x = 3
      x += 4 => x = x + 4

      -=
      x = 3
      x -= 4 => x = x - 4

      *=
      x = 3
      x *= 4 => x = x * 4

      /=
      x = 3
      x /= 4 => x = x / 4
      
    */

比较运算符

= (赋值)
== (全等于)只是值相等
=== (严格等于) 左右两边的值相等,且类型相等

!= (不等于)
!== (严格不等于 值和类型都不等于)

Number() 将任何东西转换成数字

Number() 将传递给他的任何东西转换成一个数字,如果确实转换不出来 则返回NaN(Not a Number)----数值型

    console.log(Number(str4), typeof Number(str4))

js数据类型 - string

<script>
    let str1 = '这是一个字符串'
    console.log(typeof str1, str1)
</script>

转义字符

例：有时必须要在字符串里显示一对单引号:

	let str2 = '这是一个\'字符\''
    console.log(str2)

网页控制台打印结果：

转义字符总归纳

/*
    
      \0空字符
      \'单引号
      \"双引号
      \\反斜杠
      \n换行
      \r回车
      \v垂直制表符
      \t水平制表符
      \b退格
      \f换页

    */

双引号"" 单引号’’ 反引号``

// 双引号"" 单引号'' 反引号`` (数字1左边那个按键)

反引号``的作用

反引号里，单双引号不需要进行转义，这是es6提出来的。

	let str3 = `"这是被双引号引起来的",'这是被单引号引起来的'`
    console.log(str3)

网页控制台打印结果：

拼接字符串

	let str4 = 'hello'
    let str5 = 'WORLD'
    let str6 = str4 + str5
    console.log(str6)

将真实的字符串和变量混合拼接

console.log(str4 + '这是我加的其他内容' + str5)

数字型和字符串相加,默认认为是在做字符串拼接,且数据类型会直接转换成字符串类型

	let num = 3.14
    let str = '1592'
    let data = num + str
    console.log(data, typeof data)

网页控制台打印结果：

toString() 将任何东西转换成字符串

toString() 每个数字都有一个toString的方法,目的是为了转换成等价的字符串

    console.log(num.toString())

只有返回值是最终结果的方法

.length获取字符串的长度

    let str7 = '这是很长一串的    字符串'
    console.log('.length:', str7.length)

字符串中查找子字符串并提取

从0开始检索到特定字符串字符str7 [字符串的下标,从0开始]

    console.log(str7[3])
    console.log(str7[str7.length - 1])

.indexOf() 查字符串中某字符的下标

.indexOf() 一般输入单个字符，返回字符串中此字符的下标

如果找的到是字符串，则返回此字符串开始字符的下标

如果没找到则返回-1

    let res0 = str7.indexOf('是')
    console.log(res0)       //1
    let res1 = str7.indexOf('长一串')  
    console.log(res1)       //3

.slice() 在字符串中截取截取字符

.slice() 如果只传一个值表示 截取从开始字符串的下标到字符串结束,如果传两个值,表示从一个需要被截取的区间(左闭右开)

    let res2 = str7.slice(3, 6);
    console.log(res2)

.to Upper/Lower Case() 全大/小写

    console.log(str4.toUpperCase())
    console.log(str5.toLowerCase())

.replace() 替换字符串的某个部分

.replace() 第一个值表示的查找的值,第二个值表示替换的值

    let res3 = str7.replace('长', '唱')

js数据类型 - array

	//定义一个数组
	let arr1 = ['数组1', '数组2', '数组3', '数组4', '数组5']
	//定义一个空数组
    let arr2 = []

typeof数组 返回object

    console.log(typeof arr1)

可以将任何一个类型的元素存储在数组中：字符串，数字，对象，变量，甚至数组

let arr3 = ['字符串', 1, true, ['数组1', '数组2', '内部的数组3'], arr1]

打印数组arr3中第4个元素的第3个元素

console.log(arr3[3][2])

获取数组的长度

    arr3.length

打印数组的每一项

	let arr4 = [1, 2, 3, 4, 5, 6, 7]
    for (let i = 0; i < arr4.length; i++) {
    console.log(arr4[i])
    }

.split() 将字符串转换成数组

	let myStr = 'https://www.baidu.com/'
    let myArr = myStr.split('/')
    let myArr2 = myArr[2].split('.')
    // 进行两次切割，最后将网址 www.baidu.com 切分为数组

数组转字符串

    // .join() 按照什么进行拼接
    console.log(myArr2.join('-'))
    
    // toString() 用逗号转换数组
    console.log(myArr2.toString())

添加和删除数组项

.push() 尾部添加

直接给数组的尾部添加一个或多个数组,返回值是返回添加完后的数组长度

	let myArray = ['彦祖', '德华', '古天乐', '郭富城']
	myArray.push('陈冠希')
    console.log(myArray)

.pop() 尾部删除

从数据尾部删掉一个或多个 返回已经删除的项目

	myArray.pop()
    console.log(myArray)
    // 输出结果： ['彦祖', '德华', '古天乐']

.unshift 头部插入

直接给数组的头部添加一个或多个数组

    myArray.unshift('随便一个')
    console.log(myArray)
    // ["随便一个", "彦祖", "德华", "古天乐"]

.shift() 头部删除

	myArray.shift()
    console.log(myArray)
    // ["彦祖", "德华", "古天乐"]

js数据类型 - object

<script>
	let person1 = {}
	// 如果定义一个空数组，那么也会返回Object类型
    let arr = []
    console.log(typeof person1, typeof arr) // object object
    
    console.log(person1 instanceof Array)  //false
    // instanceof 数据类型  会返回true 或 false
</script>

对象更改与增加属性 举例

定义一个新的对象 person2
特点：1.最外层的大括号 2.大括号里面都以键值对存在

<script>
	let person2 = {
      name: {
        first: "li",
        last: "xiaoming"
      },
      age: 18,
      gender: 'male',
      bio: function () {
		// 关键字 "this" 指向了当前代码运行时的对象
        alert(this.name.first + '' + this.age)
      },
      hello: function () {
        alert('hello Word')
      },
    }
</script>

点标识符 - 去调用对象中的成员

    console.log(person2.name[0])
    console.log(person2.age)
    console.log(person2.gender)

设置对象中的成员

	//修改年龄age
	person2.age = 36
	
	//修改姓
    person2.name.first = 'zhang'
    
    //修改名
    person2['name']['last'] = "xiaoqiang"
    
    增加新的方法 newFun
    person2.newFun = function () {
      console.log('newFun')
    }
    
    console.log(person2)

js对象与json进行对比

相似点：
1.最外层的大括号
2.大括号里面都以键值对存在

不同点：
1.json 相当于是将js对象原原本本的复制进去了，里面支持支持字符串 数字 数组 布尔 以及字面值 – null undefined

2.json 是纯的数据格式，里面只有属性，不包含方法

3.json要求字符串和属性名周围使用双引号，单引号无效

4.与js对象属性可以不加引号不同，json中只有带引号的字符串可以作为属性

5.最后一个对象后面不能加逗号，会报错

let jsonValue = {
      "squadName": "Super hero squad",
      "homeTown": "Metro City",
      "formed": 2016,
      "secretBase": "Super tower",
      "active": true,
      "members": [{
          "name": "Molecule Man",
          "age": 29,
          "secretIdentity": "Dan Jukes",
          "powers": [
            "Radiation resistance",
            "Turning tiny",
            "Radiation blast"
          ]
        },
        {
          "name": "Madame Uppercut",
          "age": 39,
          "secretIdentity": "Jane Wilson",
          "powers": [
            "Million tonne punch",
            "Damage resistance",
            "Superhuman reflexes"
          ]
        },
        {
          "name": "Eternal Flame",
          "age": 1000000,
          "secretIdentity": "Unknown",
          "powers": [
            "Immortality",
            "Heat Immunity",
            "Inferno",
            "Teleportation",
            "Interdimensional travel"
          ]
        }
      ]
    }

推荐json格式验证网站
很方便，复制自己的json代码到里面，他会告诉你哪里报错了

js数据类型 - 函数

function 函数
函数称为对象方法的一部分

	// if else、switch、while、do while
    // 与java基本一模一样，除了声明变量不一样(用 let)

// &&与 ||或 !非

js 中常用的三种表示函数的方式

内置函数 - 通常情况下喜欢把内置函数称为方法

软件系统自带的函数，类似于 .slice() .split()等等

自定义函数 - 自己手写、命名的函数

    function myFun() {
      // 警告框
      alert('hello World');
      
      // 在控制台打印
      console.log();   
    }

    function alertFun() {
      myFun();
    }

匿名函数 - 通常情况下和事件处理程序一起使用，例如单击时触发下对应的方法

	console.log(document.querySelector('button'))
    
    // 查询选择器
    let btn = document.querySelector('button')
    
    btn.onclick = function () {
      alert('随便一句话')
    }

函数参数

	let myText = "随随便便写了一句话"
    console.log(myText.replace('随', '啊'))
    // 啊随便便写了一句话  replace默认只.替代一次
    
    // 传递多个参数时需要用逗号隔开，有一些参数是可选参数
    function name1(param1, param2) {
      console.log(param1, param2)
    }
    name1('字符串1', '字符串2')

函数的作用域

不同函数之间的作用域是彼此独立
for循环,条件if 他们之间不会的作用域不相互独立

作用域的冲突

定义两个js文件：

let nameValue = 'dehua';

function printName() {
  alert(nameValue)
}

let nameValue = 'yanzu';

function printName() {
  alert(nameValue)
}

同时调用两个js文件：

<head>
  <script src="./js/first.js"></script>
  <script src="./js/second.js"></script>
</head>

<body>
  <script>
    printName();
    // 输出结果为 second.js的 yanzu
    
    // Uncaught SyntaxError: Identifier 'nameValue' has already been declared
</body>

生成随机数

 	Math.random()    
 	//0~1里随机生成一个数
    
    console.log(Math.random())

js 事件

事件是您在编程时系统内发生的动作或者发生的事情

常见的事件动作

用户在某个元素上点击鼠标或悬停光标
用户在键盘中按下某个按键
用户调整浏览器的大小或者关闭浏览器窗口
一个网页停止加载
提交表单
播放、暂停、关闭视频
发生错误

常见的事件处理方式

1- 通过事件处理器进行操作

元素.on事件类型 = function () {匿名函数体}

创建一个按钮，用来触发事件处理：

<button>这是事件处理器的按钮 </button><br>

设置js事件样式，使得每次点击按钮会使网页背景颜色随机改变：

	<script>
		//设置颜色随机函数
        function randomNumber(num) {
          let res = Math.floor(Math.random() * num)
          return res
        }
        
        document.querySelector('button').onclick = function () {
          // JS可以修改css样式 当点击按钮时 修改网页的背景色
          let randomColor = 'rgb(' + randomNumber(255) + ',' + randomNumber(255) + ',' + randomNumber(255) + ')'
          console.log(randomColor)
          document.body.style.backgroundColor = randomColor
        }
	</script>

2- 行内事件处理器

<script>
	function bgColorChange() {
      let randomColor = 'rgb(' + randomNumber(255) + ',' + randomNumber(255) + ',' + randomNumber(255) + ')'
      console.log(randomColor)
      document.body.style.backgroundColor = randomColor
    }
</script>

3- 事件监听 增加的事件监听(事件类型)

.addEventListener(‘click’, 方法的名字)

.removeEventListener(方法名字) 移除事件

<script>
	function conValue() {
      console.log(111111111111)
    }
    document.querySelectorAll('button')[2].addEventListener('click', bgColorChange)
    document.querySelectorAll('button')[2].addEventListener('click', conValue)
</script>

日常生活推荐使用事件监听和事务处理器
如果给一个元素增加多个事件,推荐使用事件监听

DOM简介与DOM操作

DOM：文档对象模型(Document object Model)，操作网页上的元素的API，比如让盒子移动、变色、轮播图等。

对于一个浏览器来说 是由三个部分组成的
navigator - 导航栏
window - 窗口对象
document - 文档对象

document 是载入窗口的实际页面，通过dom操作可以去控制一个元素的文本内容，样式，或者是创建一个元素，甚至是删除

元素节点

元素节点：一个元素，存在dom之中

根节点：在html的中，html就是他的根节点 顶层节点
子节点：直接位于另一个节点内节点
后代节点：位于一个节点内的任意位置的节点，
父节点：一个字节的上一层的节点
兄弟节点：同一等级的节点
文本节点：包含了字符串的节点

用js修改属性值、关元素/节点内容

.textContent 修改元素的文本内容
.innerHTML 自动解析文本中的标签
.innerText

<script>
	link.href = "http://www.baidu.com/"  
    link.textContent = '这是我修改之后的内容'
    link.innerHTML = "这是我修改之后的内容<b>加粗</b>"
    link.innerText = "这是我修改之后的内容"
</script>

获取元素节点

通过三种方法：
1.通过id ：document.getElementById
2.通过元素名 ：document.getElementsByTagName
3.通过类名 ：document.getElementsByClassName

<body>
  <section>
    <img class="imgClass" src="../imgs/admin/icon_帮助.svg" alt="" srcset="">
    <p id="pId">这是一个属于p标签的文 <a href="https://www.baidu.com/">这是a</a> </p>
  </section>
  <script>
  link.href = "http://www.baidu.com/"
  
  let link = document.querySelector('a')
  let img = document.querySelector('.imgClass')
  let pId = document.querySelector('#pId')

  console.log(document.getElementById("pId"))
  console.log(document.getElementsByTagName('a'))
  console.log(document.getElementsByClassName("imgClass"))
  </script>
</body>

创建，插入，删除元素

document.createElement 创建元素

	let newP = document.createElement("p")
    newP.textContent = "这是我辛辛苦苦手动创建的p标签"
    console.log(newP)

appendChild 给指定元素内部的尾部插入一个子节点

	document.querySelector('section').appendChild(newP)

removeChild 删除指定元素内部中一个子节点/元素

document.querySelector('section').removeChild(newP)