一、什么是JavaScript

1.1、什么是JavaScript

1、JavaScript最初由Netscape公司的Brendan Eich在1995年创建，最初被用来增强网页的交互性和动态性。随后，JavaScript逐渐成为Web开发的重要组成部分，它可以用于创建动态网页、前端开发、服务端开发（Node.js）、移动应用开发等多个领域。

2、JavaScript具有以下特点：

  1. 客户端脚本语言：主要用于在网页上实现动态交互效果，通过修改网页内容和样式来响应用户操作，如表单验证、动画效果等。
  2. 弱类型：JavaScript是一种弱类型语言，变量的类型可以在运行时动态改变，不需要事先声明变量类型。
  3. 基于对象：JavaScript是一种基于对象的语言，它提供了一套内置对象和方法，使开发人员可以更方便地处理数据和操作网页元素。
  4. 事件驱动：JavaScript通过事件处理机制来响应用户的交互动作，比如点击、滚动、键盘输入等事件。
  5. 跨平台：JavaScript可以在几乎所有的现代浏览器上运行，并且也可以在服务器端（如Node.js）运行，使其具备了跨平台的优势。

1.2、JavaScript实现

1、ECMAScript

ECMAScript，即ECMA-262 定义的语言，并不局限于Web 浏览器。事实上，这门语言没有输入和输出之类的方法。ECMA-262 将这门语言作为一个基准来定义，以便在它之上再构建更稳健的脚本语言。Web 浏览器只是ECMAScript 实现可能存在的一种宿主环境（host environment）。宿主环境提供ECMAScript 的基准实现和与环境自身交互必需的扩展。扩展（比如DOM）使用ECMAScript 核心类型和语法，提供特定于环境的额外功能。其他宿主环境还有服务器端JavaScript 平台Node.js 和即将被淘汰的Adobe Flash。

2、ECMA-262 到底定义了什么

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 全局对象

3、DOM
文档对象模型（DOM，Document Object Model）是一个应用编程接口（API），用于在HTML 中使用扩展的XML。DOM 将整个页面抽象为一组分层节点。HTML 或XML 页面的每个组成部分都是一种节点，包含不同的数据。

比如下面的HTML 页面：

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p> Hello World!</p>
    </body>
</html>

DOM 通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用 DOM API， 可以轻松地删除、添加、替换、修改节点

4、BOM

IE3 和 Netscape Navigator 3 提供了浏览器对象模型（BOM） API，用于支持访问和操作浏览器的窗 口。使用 BOM，开发者可以操控浏览器显示页面之外的部分。

JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。

  • ECMAScript：由 ECMA-262 定义并提供核心功能。
  • 文档对象模型（DOM）：提供与网页内容交互的方法和接口。
  • 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。

JavaScript 的这三个部分得到了五大 Web 浏览器（IE、Firefox、Chrome、Safari 和 Opera）不同程度 的支持。所有浏览器基本上对 ES5（ECMAScript 5）提供了完善的支持，而对 ES6（ECMAScript 6）和 ES7（ECMAScript 7）的支持度也在不断提升。这些浏览器对 DOM 的支持各不相同，但对 Level 3 的支 持日益趋于规范。HTML5 中收录的 BOM 会因浏览器而异，不过开发者仍然可以假定存在很大一部分 公共特性

二、快速入门

2.1、引入JavaScript

1、行内

在haadb标签引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        这里引入
    </script>
</head>
<body>
    
</body>
</html>

在body标签标签引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <script>
        也可以这里引入
    </script>
</body>
</html>

2、外部

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


        <!-- 这里引入 -->
    <script src="js/demo1.js"></script>
</head>

<body>
    <!-- 也可以这里引入 -->
    <script src="js/demo1.js"></script>
</body>
</html>
  • 如果在head标签引入则加载完js文件才会显示页面
  • 如果在body标签引入则先显示页面再加载js文件

2.2、基本语法

一些规定

1、区分大小写

2、不能使用关键字作为函数名

3、标识符（变量、函数、名称等名称）

  • 第一个字符必须是一个字母、下划线（_）或美元符号（$）；
  • 剩下的其他字符可以是字母、下划线、美元符号或数字。

4、注释

<script>
    // 注释
  // 注释
      
    /*
        多行注释
        多行注释
        多行注释
    */
</script>
基本语法
    <script>
        var score = 71;
        if (score > 60 && score < 70) {
            alert("60~70")
        } else if (score > 70 && score < 80) {
            alert("70~80")
        } else {
            alert("other")
        }
        // console.1og(score)
    </script>

2.3、数据类型

数值，文本，图形，音频，视频…

==变量==

  • var关键字

​ 使用 var 操作符定义的变量会成为包含它的函数的局部变量。比如，使用 var 在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁：

function test() { 
 var message = "hi"; // 局部变量
} 
test(); 
console.log(message); // 出错！

​ 这里，message 变量是在函数内部使用 var 定义的。函数叫 test()，调用它会创建这个变量并给 它赋值。调用之后变量随即被销毁，因此示例中的最后一行会导致错误。不过，在函数内定义变量时省 略 var 操作符，可以创建一个全局变量：

function test() { 
 message = "hi"; // 全局变量
} 
test(); 
console.log(message); // "hi"

去掉之前的 var 操作符之后，message 就变成了全局变量。只要调用一次函数 test()，就会定义 这个变量，并且可以在函数外部访问到

注意 虽然可以通过省略 var 操作符定义全局变量，但不推荐这么做。在局部作用域中定 义的全局变量很难维护，也会造成困惑。这是因为不能一下子断定省略 var 是不是有意而 为之。在严格模式下，如果像这样给未声明的变量赋值，则会导致抛出 ReferenceError。

  • let 声明

let 作用域仅限于该块内部

let 不允许同一个块作用域中出现冗余声明

if (true) { 
 let age = 26; 
 console.log(age); // 26 
} 
console.log(age); // ReferenceError: age 没有定义

let 声明的范围是块作用域， 而 var 声明的范围是函数作用域

if (true) { 
 var name = 'Matt'; 
 console.log(name); // Matt 
} 
console.log(name); // Matt

==number==

js不区分小数和整数，Number

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

==字符串==

'abc' "bac"

==布尔值==

true , false

==逻辑运算==

&&    // 两个都为真，结果为真
||    // 一个为真，结果为真
!  // 真即假，假即真

==比较运算符==

=        // 赋值
==  // 等于（类型不一样，值一样，也会判断为true)
=== // 绝对等于(类型一样，值一样，结果true)

==null和 undefined==

  • null 空
  • undefined 未定义

==数组==

JS中的数组可以是不同类型，与java中都要相同的不一样，JS可以瞎定义

var arr = [1,2,3,45,"hello",null];

如果数组下标：如果越界了就会提示

undefined

==对象==

在JS中对象是大括号，数组是中括号

每个属性用逗号隔开，最后一给不用

var person = {
  name: "Ahxin",
  age: 18,
  tags: ['js','Java','Python']
}

取值：

person.age

console.log(person.age)
18

console.log(person.tags[1])
VM177:1 Java

2.4、严格检查模式

发现可以被打印出来

<script>
  i = 2;
</script>

添加“use strict”;设置为严格模式

<script>
  "use strict";
    i = 2;
</script>

可以看到报错了

严格模式下保留: implements、 package、 public 、interface、 protected、 static、 let 、private

三、数据类型

3.1、字符串

1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符 \

\'
\n
\t
\u4e2d
\x41
\u####         //Unicode字符
\x41            //Asc11字符

3、多行字符串编写，飘的用法

//tab 上面 esc键下面 ``
<script>
  "use strict";
    let o = "hihi";
    var msg = `你好

        ，早上好`;
</script>
>console.log(msg)
你好
        
        ，早上好

4、模板字符串,飘的用法

<script>
  "use strict";
    let o = "hihi";
    var msg = `你好，早上好${o}`;
</script>

5、字符串长度

let num = 'hello';
console.log(num.length); //5

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

let str = 'hello';

console.log(str[0]) //h
str[0] = 'k';
console.log(str[0])    //h

7、大小写转换toUpperCase、toLowerCase

let num = 'hElLo';
console.log(num.toUpperCase()) //HELLO，转换为大写
console.log(num.toLowerCase()) //hello，转换为小写

8、字符串位置索引indexOf

let num = 'hElLo';
console.log(num)    // Hello world
console.log(num.indexOf('o'))    // 4
console.log(num.indexOf('H'))    // 0

9、截取字符串substring

let num = 'hElLo';
onsole.log(num.substring(1))    // ello world，从第1位开始 截取到最后一位
console.log(num.substring(3))    // o world ，从第3位开始 截取到最后一位

10、进制转换

let num1 = parseInt("1234blue");     // 1234 
let num2 = parseInt("");                     // NaN 
let num3 = parseInt("0xA");             // 10，解释为十六进制整数
let num4 = parseInt(22.5);                 // 22 
let num5 = parseInt("70");                 // 70，解释为十进制值
let num6 = parseInt("0xf");             // 15，解释为十六进制整数

3.2、数组

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

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

1、长度

let arr = [1,2,3,4];
console.log(arr)                    // [1, 2, 3, 4]
console.log(arr.length)        // 4

注意:加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

2、indexOf，通过下标索引

let arr = [1,2,3,4];
arr.indexOf(2)    //1

字符串的”1”和数字1是不同的

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

let arr = [1,2,3,4];
arr.slice(2)        // [3, 4]

4、push()、pop() 尾部

let arr = [1,2,3,4];
arr.push("7","5")     // [1, 2, 3, 4, '7', '5']
arr.pop()                        // '5'
arr                                    // [1, 2, 3, 4, '7']

5、unshift()、shift()

let arr = [1,2,3,4];
arr.unshift("7")            // 往前面添加
arr                                        // ['7', 1, 2, 3, 4]

arr.shift()                        // '7'
arr                                        // [1, 2, 3, 4]

6、sort() 排序

let arr = ['c','a','b'];
arr.sort();                            // ['a', 'b', 'c']

7、元素反转reverse()

let arr = ['c','a','b'];
arr.reverse()                        // ['b', 'a', 'c']

8、concat()

let arr = ['c','a','b'];
arr.concat('1','2')                            // (5) ['c', 'a', 'b', '1', '2']
arr                                                            // (3) ['c', 'a', 'b']

注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符join

let arr = ['c','a','b'];
arr.join('+')                                    // 'c+a+b'

10、多维数组

arr = [['1','2'],['A','B']];
arr[0][6]                        // '2'
arr[1][0] = 'K'            // 'K'
arr[1][0]                        // 'K'

数组:存储数据(如何存，如和取 方法都可以自己实现!)

3.3、对象

var 对象名 ={
  属性名：属性值，
  属性名：属性值，
  属性名： 属性值
}
var person = {
  name: "Ahxin",
  age: 18,
  email: "ahxin@gmail.com",
  score: 20
}

Js中对象，{....}表示一个对象，键值对描述属性xXXX:XXXX，多个属性之间使用逗号隔开，最后一个属性不加逗号!

1、对象赋值

person.age = 17        //17
person.age                // 17

2、使用一个不存在的对象属性，不回报错! undefined

person        // {name: 'Ahxin', age: 17, email: 'ahxin@gmail.com', score: 20}
person.kk    // undefined

3、动态的删减属性，通过 de|ete 删除对象的属性

delete person.name        // true
person                                // {age: 17, email: 'ahxin@gmail.com', score: 20}

4、动态的添加，直接给新的属性添加值即可

person                                        // {name: 'Ahxin', age: 18, email: 'ahxin@gmail.com', score: 20}
person.newName = "王五"        // '王五'
person                                        // {name: 'Ahxin', age: 18, email: 'ahxin@gmail.com', score: 20, newName: '王五'}

5、判断属性值是否在这个对象中! xxx in xxx!

'age' in person            // true
name in person            // false
'name' in person        // true

6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('age')
true
person.hasOwnProperty('email')
true
person.hasOwnProperty('email1')
false

3.4、流程控制

1、if判断

var hasPermission = true;
var isAdmin = false;

if (hasPermission && isAdmin) {
  console.log('管理员权限已授予');
} else if (hasPermission || isAdmin) {
  console.log('普通权限已授予');
} else {
  console.log('没有权限');
}
var score = 85;

if (score >= 90) {
  console.log('优秀');
} else if (score >= 80) {
  console.log('良好');
} else if (score >= 60) {
  console.log('及格');
} else {
  console.log('不及格');
}

2、while循环

var count = 0;

while (count < 5) {
  console.log('当前计数：' + count);
  count++;
}
var number = 5;
var factorial = 1;
var i = 1;

while (i <= number) {
  factorial *= i;
  i++;
}

console.log(number + '的阶乘是：' + factorial);            // 5的阶乘是：120

3、for循环

for (var i = 0; i < 5; i++) {
  console.log('遍历: ' + i);
}
var numbers = [1, 2, 3, 4, 5];
for (var i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

4、forEach循环

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach(function(n){
  console.log(n)
});

3.5、Map() & Set()

1、Map()

// ES6  Map
var map = new Map([ ['too', 100],['jack', 88] ])
console.log(map.get('jack'))        // 88
map.set('admin',123)                        // Map(3) {'too' => 100, 'jack' => 88, 'admin' => 123}

2、Set()

var set = new Set( [3,1,1,1,1] );
set        // Set(2) {3, 1}  set可以去重
set.add(2); //添加
set.delete(1); //删除
console.log(set.has(3)); //判断都个函数存在否

3.6、iterator

1、遍历数组

// 通过for of 索引数值
var arr = [3,4,5]
for (var x of arr){
  console.log(x)
} 
// for in 索引下标
var arr = [3,4,5]
for (var x in arr){
  console.log(x)
}

2、遍历Map()

// 通过for of 遍历
var map = new Map( [["took",100],["jack",90],["haha",80]]);
for (let x of map){
  console.log(x)
}

3、遍历Set()

// 通过for of 遍历
var set = new Set( [44,5,66] );
for (let x of set) {
  console.log(x)
}

四、函数

4.1、函数的定义

1、定义方式一

绝对值函数

"use strict"
function abs(x){
  if( x >= 0){
    return x;
  }else{
    return -x;
  }
}

一旦执行到return 代表函数结束，返回结果!
如果没有执行return,函数执行完也会返回结果，结果就是undefined

2、定义方式二
var abs1 = function(x){
    if( x >= 0){
        return x;
    }else{
        return -x;
    }
}
3、调用函数
abs(10)        // 10
abs(-10)    // 10
4、arguments
function abs(x) {
  console.log("x=>"+x);
  for (var i = 0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
}
  1. arguments对象是函数内部的一个本地对象，类似于数组（但不是真正的数组）。
  2. arguments对象包含了所有传递给函数的参数，以及一些与参数有关的信息。
  3. arguments对象没有length属性以外的其他数组方法，它只有length属性和可以通过索引访问的参数值。
  4. arguments对象的索引从0开始，第一个参数可以通过arguments[0]访问，第二个参数通过arguments[1]访问，以此类推。
5、rest
function aaa(a, rest) {
  console.log("a=>" + a);
  console.log("b=>" + b);
  console.log(rest);
}
  1. rest parameters 生成的是真正的数组，可以使用数组的所有方法。
  2. rest parameters 只包含那些没有对应命名参数的参数，而 arguments 对象包含了所有传递给函数的参数。
  3. rest parameters 更加直观和易读。

4.2、变量的作用域

在javascript中， var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~(非要想实现的话，后面可以研究一下闭包)

function a(){
  var x = 1;
  x = x + 1;
  console.log("变成2:" + x);
};

// Uncaught ReferenceError: x is not defined，
//  未捕获的ReferenceError:x未定义，
x = x + 2;

==如果两个函数使用了相同的变量名，只要在函数内部，就不冲突==

function func1() {
  var x = 10;
  console.log('func1 x:', x); // 输出: func1 x: 10
}

function func2() {
  var x = 20;
  console.log('func2 x:', x); // 输出: func2 x: 20
}

func1();
func2();

==内部函数可以访问外部函数的成员，反之则不行，就进原则==

这是因为 JavaScript 支持词法作用域（也称为静态作用域）

function outer() {
  var x = 10;

  function inner() {
    console.log(x); // 内部函数可以访问外部函数的局部变量
  }

  inner();
}

outer(); // 输出: 10
console.log(x); // 报错: x is not defined

在这个例子中，我们有一个外部函数 outer，它定义了一个局部变量 x 和一个内部函数 inner。内部函数 inner 可以访问外部函数 outer 的局部变量 x，并输出它的值。但是在外部函数 outer 外部，我们尝试访问 x 时会得到一个错误，因为 x 只在 outer 的作用域内可见。

==提升变量的作用域==

1、变量提升：

console.log(a); // 输出: undefined
var a = 10;
console.log(a); // 输出: 10

在这个例子中，变量 a 在声明之前被访问，由于变量提升，a 被视为已经声明但未赋值，因此输出 undefined。然后在后面的赋值语句中，a 被赋值为 10，并输出 10。

2、函数提升：

foo(); // 输出: "Hello, I am foo!"

function foo() {
  console.log("Hello, I am foo!");
}

在这个例子中，函数 foo 在声明之前被调用，由于函数提升，foo 被视为已经声明并且可以直接调用，因此输出 "Hello, I am foo!"。

3、函数表达式不会提升：

console.log(bar); // 输出: undefined
var bar = function() {
  console.log("Hello, I am bar!");
};
bar(); // 输出: "Hello, I am bar!"

在这个例子中，变量 bar 是一个函数表达式，不会被提升。在变量被赋值之前访问 bar 会得到 undefined，而在赋值后才能正确调用并输出 "Hello, I am bar!"。

==全局函数==

1、全局函数

var x = 1;
function func(){
  console.log(x);
}
func();
console.log(x);

2、全局对象windows

var x = 'xxx';
alert(x);
alert(window.x);

3、规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如果能够减少冲突?

// 唯一全局变量
var AhxinApp = {};

// 定义全局变量
KuangApp.name = 'A-hxin';
KuangApp.add = function (a, b) {
  return a + b;
};

// 调用全局变量和方法
console.log(AhxinApp.name); // 输出: A-hxin
console.log(AhxinApp.add(3, 5)); // 输出: 8

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

4、局部作用域let

function func(){
  for (var i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log('这个作用域可以用',i+1);
}

ES6 let关键字，解决局部作用域冲突问题!

function func(){
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log('这个作用域不能用',i+1); // Uncaught ReferenceError: i is not defined
}

建议大家都是用 let 去定义局部作用域的变量;

5、常量const

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

var PI = '3.14';

console.log(PI);    // 3.14
PI = '123';         // 可以改变这个值
console.log(PI);    // 123

在ES6 引入了常量关键字 const

const PI = '3.14';    // 只读变量
console.log(PI);
PI = '123';         // TypeError: Assignment to constant variable.

4.3、方法

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

var person = {
  birth: 2004,
  age: function(){
    var now = new Date().getFullYear();
    return now - this.birth;
  }
}
person.age() //19

this.代表什么？拆开上面的代码看看~

function getAge(){
  var now = new Date().getFullYear();
  return now - this.birth;
}

var person = {
  birth: 2004,
  age: getAge
}

// person.age()    // 19
// getAge()        // NaN

//apply
getAge.apply(person,[]);    // 19

五、内部对象

==1、标准对象==

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NanN
'undefined'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1、Date

基本使用

// 创建一个表示当前时间的 Date 对象
var now = new Date();

// 获取当前时间的年份，返回一个四位数的年份（例如：2023）
now.getFullYear();

// 获取当前时间的月份，返回一个从 0 到 11 的整数，0 表示一月，11 表示十二月
now.getMonth();

// 获取当前时间是星期几，返回一个从 0 到 6 的整数，0 表示星期日，6 表示星期六
now.getDay();

// 获取当前时间的小时数，返回一个从 0 到 23 的整数
now.getHours();

// 获取当前时间的分钟数，返回一个从 0 到 59 的整数
now.getMinutes();

// 获取当前时间的秒数，返回一个从 0 到 59 的整数
now.getSeconds();

// 获取当前时间的时间戳（以毫秒为单位），时间戳是从 1970 年 1 月 1 日 00:00:00 UTC 到当前时间的毫秒数
now.getTime();

转换

var now = new Date(1691314593082);

now.toDateString()
'Sun Aug 06 2023'
now.toLocaleString()
'2023/8/6 17:36:33'
now.toTimeString()
'17:36:33 GMT+0800 (中国标准时间)'

5.2、JSON

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

  • JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript 一切皆为对象、任何js支持的类型都可以用JSON来表示;number, string...格式:

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

JSON字符串和JS对象的转化

// JSON 字符串
var jsonString = '{"name":"Jack","age":"18","sex":"男"}';

// 使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象
var jsonObject = JSON.parse(jsonString);

console.log(jsonObject)
// 输出：{name: 'Jack', age: '18', sex: '男'}

JavaScript 对象转换为 JSON 字符串

var jaonString = JSON.stringify('{name: "John", age: 25, isStudent: true}')

console.log(jaonString)
VM2624:1 "{name: \"John\", age: 25, isStudent: true}"

5.3、Ajax

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

六、面向对象编程

6.1、什么是面向对象

javascript、Java、C#......面向对象;javascript有些区别!

  • 类:模板
  • 对象:具体的实例

JavaScript这个需要大家换一下思维方式!

原型对象：

var person = {
  name: "Jack",
  age: 18,
  get: function(){
    console.log("我的名字是：",this.name,"我的年龄是:", this.age);
  }
};
var student = {
  sex: "男"
};

console.log(person.name);
console.log(student.name); // undefined

__peroto__

var person = {
  name: "Jack",
  age: 18,
  get: function(){
    console.log("我的名字是：",this.name,"我的年龄是:", this.age);
  }
};
var student = {
  sex: "男"
};
student.__proto__ = person; // 类似于继承
console.log(person.name);

console.log(student.name); // Jack
function Student(name) { 
  this.name = name;
}
//给student新增一个方法
student.prototype.hello = function () { 
  alert('Hel1o')
};

6.2、class对象

class 关键字，是在ES6引入的

1、定义一个类、属性、方法

class student{
  constructor(name){
    this.name = name;
  }
  hello(){
    alert("hello");
  }
}
var xm = new student("xiaom");

xm.name        // 'xiaom'

6.3、extends继承

class student {
  constructor(name) {
    this.name = name;
  }
  hello() {
    alert("hello");
  }
}

class ahxin extends student {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  myGrade() {
    alert('我是ahxin');
  }
}

var xm = new student("xiaom");
var ahxinObj = new ahxin("ahxin", 1);

本质:查看对象原型

七、操作BOM对象

浏览器对象模型（BOM，Browser Object Model）描述为 JavaScript 的核心

7.1、 window 对象

BOM 的核心是 window 对象，表示浏览器的实例。

对象在浏览器中有两重身份，

  • 一个是 ECMAScript 中的 Global 对象
  • 另一个就是浏览器窗口的 JavaScript 接口。

所有 对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义的 parseInt()等全局方法

window.alert(1)            // 弹出警告框
window.innerHeight    // 窗口的内部高度
window.innerWidth        // 窗口的内部宽度
window.outerHeight    // 窗口的外部高度
window.outerWidth        // 窗口的外部宽度

7.2、Navigator

navigator.userAgent;     // 输出浏览器的用户代理字符串
navigator.appName;         // 输出浏览器的名称
navigator.appVersion; // 输出浏览器的版本信息
navigator.platform;     // 输出操作系统平台
navigator.language;     // 输出首选语言

大多数时候，我们不会使用navigator不建议使用这些属性来判断和编写代码
对象，因为会被人为修改!

7.3、screen

console.log("屏幕宽度：" + screen.width + " 像素");
console.log("屏幕高度：" + screen.height + " 像素");
console.log("可用宽度：" + screen.availWidth + " 像素");
console.log("可用高度：" + screen.availHeight + " 像素");
console.log("屏幕颜色深度：" + screen.pixelDepth + " 位");
console.log("屏幕方向：" + screen.orientation.type);

7.4、location

location 代表当前页面的URL信息

host:"www.baidu.com"    // 主机
href: "https://www.baidu.com/"    // 地址
protocol: "https:"    // 协议
reload: ƒ reload()        // 方法
location.assign('https://a-hxin.cn');    // 设置新的地址

7.5、document

document.title
'百度一下，你就知道'

document.title = '更改title'

获取具体文档树节点

<dl id="app">
  <dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaScript</dd>
</dl>
<script>
  var dl = document.getElementById('app')
</script>

console.log(dl)    // 打印获取树

获取cookie

document.cookie
'39da3atest_time_id=89; 39f9621ff'

劫持cookie原理

Cookie 中，一般加密存放着当前用户的登陆凭证。如果 Cookie 被劫持，那么黑客就可以不使用密码，直接登陆到用户的账号中。

获取cookie（可能通过引入JS）--> 利用cookie登录网站。

服务器端可以设置 Cookie: httpOnly

history.back()            // 后退
history. forward()    // 前进

八、操作DOM对象

浏览器网页就是一个Dom 树形结构!

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

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

8.1、获取DOM节点

<div id="father">
  <h1>一级标题</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  // 对应css选择器
  var h1 = document.getElementsByTagName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');
  var father = document.getElementById('father');

  var childrens = father.children;    //获取父节点下的所有子节点
  father.firstChild;  // 获取第一个子节点
  father.lastChild;   // 获取最后一个子节点
  p1.lastElementChild;    // 获取最后一个子元素节点
  p1.nextElementSibling;  // 获取下一个兄弟元素节点
</script>

8.2、更新DOM节点

==innerText==修改文本的值

操作文本；

<h1 id="text">更新DOM节点</h1>
<script>
  var text = document.getElementById('text')
</script>

text.innerText = '我被更新了'   // 修改文本的值
text.innerHTML = '<h5>我被更新了<h5>'    // 可以解析HTML标签

操作CSS

text.style.color = 'pink';    // 解析CSS
text.style.fontSize = '20px';    // 解析CSS
text.style.padding = '100px';     // 解析CSS

8.3、删除DOM节点

<div id="father">
  <h1>DOM删除</h1>
    <dt>编程语言</dt>
    <dd id="T1">文本1</dd>
    <dd id="T2">文本2</dd>
    <dd id="T3">文本3</dd> 
</div>

<script>
  var father = document.getElementById('father');
    var T1 = document.getElementById('T1')
</script>

father.removeChild(T1);    // 删除

另一种删除方式：

father.children    // 获取到子节点

father.removeChild(father.children[0]);

注意:删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意!

8.4、创建和插入DOM节点

1、追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavasE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
  var 
        js = document.getElementById('js');
        list = document.getElementById('list');
</script>

list.appendChild(js)

2、创建一个新的标签

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavasE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
  var 
        js = document.getElementById('js');
        list = document.getElementById('list');
// 创建一个新节点newP
newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = '这是一个新p'

list.appendChild(newP) //添加进去
</script>
<script>
  var 
        js = document.getElementById('js');
        list = document.getElementById('list');
// 创建一个新节点newP
        newP = document.createElement('p');
        newP.id = 'newP';
        newP.innerText = '这是一个新p'

list.appendChild(newP) //添加进去
body = document.getElementById('color');
body.style.backgroundColor = '#61d3ba';
</script>

九、操作表单（验证）

9.1、表单是什么 form DOM树

名称标签
文本框text
下拉框
单选框radio
多选框checkbox
隐藏域hidden
密码框password
.........——

表单的目的:提交信息

最后修改：2024 年 01 月 24 日
© 允许规范转载
咱们谁跟谁，用不着～