JZTXT

JavaScript

发布时间 2023-09-20 20:08:12作者: wolaile1

JavaScript

教程链接：18、面向对象class继承_哔哩哔哩_bilibili

1.什么是JavaScript

1.1概述

JavaScript是一门世界上最流行的脚本语言

Java、JavaScript

一个合格的后端人员，必须要精通JavaScript

1.2历史

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本~

但是大部分浏览器还只停留在es5代码上！

开发环境---线上环境，版本不一致

2.快速入门

2.1、引入JavaScript

1.内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <script>-->
<!--        alert("hello,world");-->
<!--    </script>-->
    <script src="第一个JavaScript文件.js"></script>
</head>
<body>

</body>
</html>

image-20230709102508892

2.外部引入

test.js

//...

test.html

 <script src="第一个JavaScript文件.js"></script>

2.2基本语法

image-20230709104512311

浏览器必备调试须知：

image-20230709104534155

2.3数据类型

数值、文本、图形、音频、视频.....

  • 变量

  • var

  • 数值number

    • js不区分小数和整数，Number

    • 123 //整数
123.1 //浮点数123。1
1.234e3 //科学计数法
-99 //复数
NaN  //not a number
Infinity //表示无限大

  • 字符串

    • ‘abc’ “abc”

  • 布尔值

    • true ， false

  • 逻辑运算

    && 两个都为真，结果为真

|| 一个为真，结果为真

！ 真即假，假即真

  • 比较运算符

  • =
== 等于（类型不一样，值一个样，也会判断为ture）
=== 绝对等于（类型一样，值一样，结果为true）

    这是一个js的缺陷，不要使用 ==比较

    须知：

    • NaN===NaN，这个与所有的数值都不相等，包括自己
    • 只能通过isNaN(NaN)来判断这个数是否是NaN

  • 浮点数问题：

console.log(1/3) === (1-2/3)

尽量避免使用浮点数进行运算，存在精度问题

  • null和undifined

    • null空

    • undifined 未定义

  • 数组

​ Java的数组元素必须一系列相同类型的对象

​ 取数组下标，如果越界了，就会

undifined

  • 对象

    对象是大括号image-20230709111115967

​ 取对象的值

console.name

2.4严格检查格式

image-20230709112705674

image-20230709112751000

3、数据类型

3.1字符串

1、正常字符串我们使用 单引号， 或者双引号包裹

2.注意转义字符\

\`
\n
\t
\u4e2d \u#### unicode
\x41    Ascall字符

3.多行字符串编写

image-20230709145536790

4.模板字符串

image-20230709145554110

5.字符串长度

image-20230709145911049

6.字符串的可变性、不可变

image-20230709145937310

7、大小写转换

image-20230709150004318

3.2数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]; //通过下标取值和赋值
arr[0]
arr[0] = 1,

  1. 长度

    arr.length

    注意：给arr.length赋值，数组大小就会发生变化，如果赋值太小，元素就会丢失

  2. indexOf，通过元素获得下标索引

    arr.indexof(2)
1

  3. slice() 截取Array的一部分，返回一个新数组，类似String中的substring

  4. push，pop尾部

    push:压入到尾部
pop：弹出尾部的一个元素

image-20230709152017811

image-20230709152210221

3.3对象

若干个键值对

image-20230709152736798

image-20230709152855591

image-20230709153139748

3.4流程控制

if判断

while循环，避免程序死循环

for循环

数组循环

image-20230709154118262

3.5Map和Set

ES6新特性

image-20230709154846098

4.函数

4.1定义函数

定义方式一

定义方式二

image-20230709170010595

image-20230709171521723

image-20230709171827249

4.2变量作用域

image-20230709172048975

image-20230709174138416

规范

由于我们所有的全局变量都会绑定我们的window上，如果不同的js文件，使用了相同的全局变量，冲突-->如何减少冲突？

image-20230709174720174

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

jQuery

局部变量与let

image-20230709175053666

常量const

在ES6之前，怎么定义常量:只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

image-20230709175410793

4.3方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西:属性和方法

image-20230709180123157

apply

5.内部对象

标准对象

image-20230709180609253

5.1、Date

image-20230709181143981

5.2JSON

json是什么

早期，所有数据传输习惯使用XML文件

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript 一切结尾对象，任何js支持的类型都可以用JSON来表示，number，string...

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有键值对都是用key.value

JSON和JS对象的转化

image-20230709191151164

5.3Ajax

  • 原生的js写法，xhr异步请求
  • jQuery封装好的方法 $("#name").ajax("")
  • axios请求

6.面向对象编程

6.1 什么是面向对象

原型对象

JavaScript、Java、c#...面向对象：Java与JavaScript有些区别！

  • 类：模板 原型对象

  • 对象：具体的实例

  1. 原型：

image-20230709192909234

  1. 继承

image-20230709193233848

本质：查看对象原型

image-20230709193654938

原型链

image-20230709194356329

7.操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

原生（内核）：

  • IE 6-11
  • Chrome
  • Sahart
  • FireFox
  • Opera

三方：

  • QQ浏览器
  • 360浏览器

window

window代表浏览器窗口

image-20230709194920897

image-20230709195118453

大多数时候，我们不会使用navigator对象，因为会被人修改！

不建议使用这些属性来判断和编写代码

image-20230709195550825

image-20230709195649225

image-20230710102640858

image-20230710103237410

history(不建议使用)

8.操作DOM对象（重点）

DOM文档对象模型

核心

浏览器网页就是一个DOM树形结构！

  • 更新：更新Dom结点
  • 遍历dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个Dom节点

要操作一个Dom节点，就必须先获得这个Dom节点

image-20230710104209382

更新节点

image-20230710105040737

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

image-20230710105506169

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖

image-20230710110112987

image-20230710112105949

insertBefore

image-20230710112340402

9.操作表单（验证）

表单是什么 form Dom 树

  • 文本框 text
  • 下拉框