3 前端（中）：JavaScript_js 才是色乐村淘-CSDN博客

本文链接：https://blog.csdn.net/smalltorch/article/details/145190908

文章目录

前言：JavaScript简介
一、ECMAscript（JavaScript基本语法）
二、BOM对象
三、DOM对象

前言：JavaScript简介

概念: 一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言: 不需要编译，直接就可以被浏览器解析执行了
功能:
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史:
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为:c–, 后来更名为:ScriptEase
- 1995年, Netscape(网景)公司，开发了一门客户端脚本语言: Livescript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
- 1996年，微软抄袭JavaScript开发出JScript语言
- 1997年，ECMA(欧洲计算机制造商协会)，制定了一套所有的客户端脚本语言要遵守的规范ECMAScript，就是所有客户端脚本语言的标准
  JavaScript = ECMAscript + JavaScript自己特有的东西(BOM+DOM)

一、ECMAscript（JavaScript基本语法）

ECMAscript是一套统一的标准，类似与数据库中的SQL语法，通用的。所以将其理解为JavaScript基本语法也是没有错的。

1 JavaScript与html结合方式（快速入门）

参考视频

与html的结合方式：
- 内部JS: 定义<script>标签，标签体里面的内容就是js代码
- 外部JS: 定义<script>标签，通过src属性引入外部的js文件
注意:
- <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序
- <script>可以定义多个。

内部JS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素状态示例</title>
    
</head>
<body>

    <!-- 内部JS：可以在html的任意位置插入js代码，注意插入的位置，位置不同，执行的时机也不同 -->
    <script>
        alert("hello world");          // 弹出一个警告框
    </script>

</body>
</html>

在这里插入图片描述
外部JS： js文件使用 .js后缀即可

b.js

alert("我是外部引入的b.js文件");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素状态示例</title>
    
</head>
<body>

    <!-- 外部部JS：可以在html的任意位置引入外部js，注意插入的位置，位置不同，执行的时机也不同 -->
    <script src="b.js"></script>

</body>
</html>

在这里插入图片描述

2 基本知识

（1）JavaScript注释（和Java注释一样）

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

（2）JS输出语句

使用 window.alert()写入警告框

使用 document.write()写入 HTML界面输出

使用 console.log()写入浏览器控制台

在这里插入图片描述

（3）{ }代码块

JS同样也是一门{ }代码块区分语言

3 变量

（0）函数作用域块级作用域全局作用域

学习变量前先来学习一下作用域的概念

作用域
- 函数作用域：顾名思义根据函数内外来区分变量作用域
  - 典型的就是python中的global关键字定义全局变量、局部变量
- 全局作用域：就是全局的意思
  - 典型就是各种类里面定义在最前面的 self、this这些属性变量
  - python中直接写在最外面的层的变量，作用域也是全局作用域
- 块级作用域：仅仅在{ }内起作用
  - 典型的就是java所有变量的作用范围都是根据{ }确定的
    就算是java中的类属性，是全局的，实际上也是因为其属于的{ }是最顶层，所以也才是全局的作用域
各种语言：
- python：函数作用域 + 全局作用域
  全局作用域：定义在最外层的变量；类属性（self）; 函数内部使用global声明的变量；（主要是这三种情况）
  函数作用域：变量定义在函数内外分为来确定变量的作用范围，函数内部定义的变量就只能函数内部使用，除非使用global声明才能继续外部也能访问
- java：块级作用域 + 全局作用域
  这个很好理解，java变量作用范围一切以{ }为标准
- JS：函数作用域+块级作用域+全局作用域
  这个JS就结合了python和java的一切情况了
  - 使用 var定义变量，就是python那一套，要使用函数作用域那一套规则
  - 使用let定义变量，那作用范围就是{ }，另外如果是在最顶层的文件用let定义变量，那作用范围也是全局，也变成了全局的了

（1）var关键字：var 变量名 = 初始化值;（当成python变量来理解）

变量: 一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言
- 强类型: 在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  int a = 3; 那么后面给a赋值只能是int, a = "hello"就是违法的 ---- 这就是强类型的含义
- 弱类型: 在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
  var a = 3; 那么后面对a进行赋值可以任意赋值任意类型， a = "hello"是合法的。（和python有点像）
语法：
- var 变量名 = 初始化值;
- var 变量名；
- var关键字就是声明一个变量，不管任意类型数据类型
加入函数的概念就可以引入全局变量与局部变量的概念
变量的定义使用var关键字，也可以不使用
- 用: 定义的变量是局部变量
- 不用: 定义的变量是全局变量(不建议)
  结合function函数理解。其实就是和python中的global关键字声明全局变量，一样的效果。
变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名

<script>
    var a;
    a = 10;
    alert(a);        // 弹出10这么一个提示框

    a = "hello";
    alert(a);        // 弹出hello这么一个提示框
</script>

【注】：js语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略(但不建议)

（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解），ES6才引入

规则：
- let 声明的变量是块级作用域（block scope），即变量只在声明它的代码块（如 {}）内有效。
- 如果在最外层，直接文件最上层都还没有{ }，那用let声明的变量同样是全局作用域了。

（3）var和let声明变量的区别？

举一个例子就明白了：
总结就是在{ }里面定义的var在{}外面也能访问（var作用范围只和函数内外有关），let不行（let作用范围只和{ }有关）

<script>
   {
     
       var a = 1;
   }
   console.log(a);     // 1

   {
     
       let b = 2;
   }
   console.log(b);     // Uncaught ReferenceError: b is not defined ,直接报错
</script>

4 常量 const

const 是 JavaScript 中用于声明常量的关键字，也是在 ES6（ECMAScript 2015）中引入的。
- const 声明的变量必须在声明时初始化，且不能重新赋值。
- 块级作用域: 与 let 类似，const 声明的变量具有块级作用域（block scope），即变量只在声明它的代码块（如 {}）内有效。

const PI = 3.14159;
const API_URL = "https://api.example.com";

5 数据类型（原始数据类型、引用数据类型）

（1）原始数据类型(基本数据类型)

number: 数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

string: 字符串。字符串 “abc”，“a”，‘abc’

boolean: true和false

null: 一个对象为空的占位符

undefined: 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

<script>
    // 定义number类型
    var num = 1;
    var num2 = 1.2;
    var num3 = NaN;

    // document.write()方法用于向文档写入HTML表达式(类似java中的System.out.println())
    document.write(num + "<br>");
    document.write(num2 + "<br>");
    document.write(num3 + "<br>");

    // 定义string类型
    var str = "hello";
    var str2 = 'world';
    document.write(str + "<br>");
    document.write(str2 + "<br>");

    // 定义boolean类型
    var bool = true;
    var bool2 = false;
    document.write(bool + "<br>");
    document.write(bool2 + "<br>");

    // 定义null类型和undefined类型
    var n = null;
    document.write(n + "<br>");
    var u = undefined;
    var u2;
    document.write(u + "<br>");
    document.write(u2 + "<br>");

</script>

在这里插入图片描述

（2）引用数据类型(对象)

（3）typeof(): 查看数据类型（类似python的type()函数）

<script>
    // 定义number类型
    var num = 1;
    document.write(num + "----" + typeof(num) + "<br>");        // 1----number
    
    var str2 = 'world';
    document.write(str2 + "----" + typeof(str2) + "<br>");      // world----string

    // 定义boolean类型
    var bool = true;
    document.write(bool + "----" + typeof(bool) + "<br>");      // true----boolean


    // 定义null类型和undefined类型
    var n = null;
    document.write(n + "----" + typeof(n) + "<br>");           // null----object
    var u = undefined;
    document.write(u + "----" + typeof(u) + "<br>");           // undefined----undefined
</script>

在这里插入图片描述
可以看到 null的数据类型竟然是object(对象)，这其实是JavaScript的一个bug，但是一直沿用至今
注释: 您也许会问，为什么 typeof 运算符对于 null 值会返回"object"。这实际上是 JavaScript 最初实现中的一个错误，然后被
ECMAScript 沿用了。现在，null 被认为是对象的占位符, 从而解释了这一矛盾，但从技术上来说,它仍然是原始值。

6 （字符串方法）JS中的原始数据类型string的属性和常用方法

JS中的string字符串虽然是原始数据类型，但是里面存在和java中一样的自动装箱机制会将其封装成一个字符串对象，里面定义了一些方法我们是可以使用的。

（1）length属性

（2）charAt(索引位置)方法：返回指定位置的字符

（3）indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置

（4）trim()方法：去除字符串两端的空格

（5）substring(开始位置, 结束位置)方法：返回指定位置的字符

// JS中的string的属性和方法

// 1. length属性
var str = "hello";
console.log(str.length); // 5

// 2. charAt(索引位置)方法：返回指定位置的字符
console.log(str.charAt(0)); // h

// 3. indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置
console.log(str.indexOf("ll")); // 2

// 4 trim()方法：去除字符串两端的空格
var str2 = "  hello  ";
console.log(str2.trim()); // hello

// 5 substring(开始位置, 结束位置)方法：返回指定位置的字符
// 左闭右开
var str = "hello world";
console.log(str.substring(6, 10)); // worl

7 运算符

Java运算符参考

（1）一元运算符 ++, - - , +（正号，不是加）-（负号）

自增和自减的注意事项参考java里面的

正号：+1，+3
负号：-1，-3
就是数学上的那个，用于界面上可以展示的。正号和符号的特殊用法需要注意的就是在【6JavaScript自带强转功能在运算符运算中】

（2）算数运算符 + ，- ，*，/ ，%（取模）等等

略过，和java中的一样。

（3）赋值运算符 = ，+=，-=, *= 等等

（4）比较运算符 >, < , >=,<=, ==(宽松等于)，===（严格等于），!=(宽松不等于), !==(严格不等于)

==（宽松等于）
功能: 比较两个值是否相等，会进行自动类型转换再比较。

console.log(5 == "5"); // true，因为类型转换后相等
console.log(true == 1); // true，因为 true 转换为 1
console.log(null == undefined); // true

===（严格等于）
功能: 比较两个值是否相等，不会进行类型转换。
这个才是其他编程里面的等于

console.log(5 === "5"); // false，因为类型不同
console.log(true === 1); // false，因为类型不同
console.log(null === undefined); // false

!=（宽松不等于）
功能: 比较两个值是否不相等，会进行类型转换。

console.log(5 != "5"); // false，因为类型转换后相等
console.log(5 != 10);  // true
console.log(true != 1); // false，因为 true 转换为 1

!==（严格不等于）
功能: 比较两个值是否不相等，不会进行类型转换。

console.log(5 !== "5"); // true，因为类型不同
console.log(5 !== 10);  // true
console.log(true !== 1); // true，因为类型不同

【注】：>==是不合法的呦，别被带偏了。另外 5>"4"这种写法在javascript中会返回true，很神奇吧，这种设计自动的隐式转换规则放在现在是很离谱的，但是没有办法，javascript一开始设计就是要避免将报错信息展现在前端，为了兼容以前的产品，就没有将这种离谱的隐式转换规则改正过来。我们还是当遵从java那个隐式转换规则，这个javascript里面的太自由了，很危险，完全没有必要这么干

（5）逻辑运算符 &&（与） ||（或）！（非）

和java一样，&&（与）、 ||（或）都具有短路效果

（6）三元运算符：条件 ? 表达式1 : 表达式2

如果条件为 true，则返回表达式1 的值。
如果条件为 false，则返回表达式2 的值。

<script>
   var a = 3;
   var b = 4;
   var c = a > b ? 1:0;
</script>

（7） JavaScript运算符中的自动隐式转换功能

Java运算符强制转换特性参考
上面在演示的时候也挑出来几个演示了一下这个特性，这里再挑几个详细讲一下
注意: 在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换
在这个里面比较特殊的就是 + 这个运算符在什么情况下表示加号还是正号了

---- + ：加号与正号的区分（特性）及其各自特殊用法

JavaScript 会根据上下文自动区分它们是加号还是正号。

区分正号和加号
- 加号 (+): 作为二元运算符（有两个操作数），用于加法或字符串拼接。
- 正号 (+): 作为一元运算符（只有一个操作数），用于将操作数转换为数字。
加号 (+)：加号用于算术加法或 字符串拼接。
- 算数加法：这个不用讲也知道
  当操作数都是数字时，+ 表示加法运算。
- 字符串拼接（只要有一个操作数是字符串就表示拼接）
  当至少有一个操作数是字符串时，+ 表示字符串拼接。

console.log("hell0" + 10000); // "Hello10000"

正号 (+)
- 数字转换（比较常见就是字符串转数字，+可以让其自动强转）
  当 + 作为一元运算符（只有一个操作数）时，它会尝试将操作数转换为数字。
- 布尔值转换
  布尔值 true 和 false 会被转换为 1 和 0。
- 其他类型转换
  如果操作数无法转换为数字，则结果为 NaN。
  很显然负号也有这些转换规则

let str = "123";
let num = +str;
console.log(num); // 123（数字类型）

console.log(+true);  // 1
console.log(+false); // 0

console.log(+"Hello"); // NaN
console.log(+null);    // 0
console.log(+undefined); // NaN

---- boolean规则 + 自动转换

其他类型转boolean:
- number: 0或NaN为假，其他为真
- string: 除了空字符串(“”)，其他都是true
- null&undefined: 都是false
- 对象: 所有对象都为true
  这些规则是 JavaScript 隐式类型转换的一部分，通常用于条件判断、逻辑运算等场景。特别是结合当成 while （条件），if (条件)，这些里面条件如果不是布尔就会自动按照上面规则转换成布尔

if (0) {
   
  console.log("This will not run");
}
if ("Hello") {
   
  console.log("This will run");
}

（8）总结

JavaScript运算符中的自动转换功能很离谱，实际开发中我们最好还是按照java的规则来，但是也要知道一点这些离谱的自动转换，防止其他人秀操作你看不懂。自己写，java的规则就能实现，何必玩这些有的没的折磨自己。

8 流程控制语句

先回顾一下JS里面的JS规则

其他类型转boolean:
- number: 0或NaN为假，其他为真
- string: 除了空字符串(“”)，其他都是true
- null&undefined: 都是false
- 对象: 所有对象都为true
  这些规则是 JavaScript 隐式类型转换的一部分，通常用于条件判断、逻辑运算等场景。特别是结合当成 while （条件），if (条件)，这些里面条件如果不是布尔就会自动按照上面规则转换成布尔

（1）if…else…

语法：

if (条件) {
   
    // 条件为 true 时执行的代码
}

if (条件) {
   
    // 条件为 true 时执行的代码
} else {
   
    // 条件为 false 时执行的代码
}

if (条件1) {
   
    // 条件1为 true 时执行的代码
} else if (条件2) {
   
    // 条件2为 true 时执行的代码
} else {
   
    // 所有条件为 false 时执行的代码
}

（2）switch语句

在java中，switch语句可以接受的数据类型：byte int shor char, 枚举(jdk1.5)，string(jdk1.7）
在JS中, switch语句可以接受任意的原始数据类型
语法：

switch (表达式) {
   
    case 值1:
        // 表达式等于值1时执行的代码
        break;
    case 值2:
        // 表达式等于值2时执行的代码
        break;
    default:
        // 表达式不等于任何值时执行的代码
}

var day = "Monday";
switch (day) {
   
    case "Monday":
        console.log("今天是周一");
        break;
    case "Tuesday":
        console.log("今天是周二");
        break;
    default:
        console.log("今天不是周一或周二");
}

（3）while 循环

语法：

while (条件) {
   
    // 循环体
}

var sum = 0;
var num = 1;
while (条件) {
   
    sum = sum + num;
    num++;
}
alter(sum); // 5050

（4）for循环

语法：
for循环这里还有很多变体，这里我们先学习最基本的

for (初始化; 条件; 更新) {
   
    // 循环体
}

var sum = 0;
for (var i = 1; i <= 100; i++){
   
sum += i;
}
alter(sum);

（5）break，continue，return 语句

和其他编程语言完全一样。

（6）练习：9x9乘法表（待定！！！！！！！）

参考视频

9 函数

（1）函数的定义方式一：常用

介绍: 函数(方法)是被设计为执行特定任务的代码块。
定义: JavaScript 函数通过 function 关键字进行定义，语法为:
注意:
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- 和python的函数比较像，都不用声明参数类型
调用: 函数名称(实际参数列表)
- 注意JS中，函数调用可以传递任意个数的参数
  下面的add例子，其他语言都要严格 add(10,20)才行，但JS可以add(10,20,40,50), 随便传它只取前两个

（2）函数的定义方式二：了解即可

介绍：在JS中函数也是一个对象，因此也提供了下面这种定义函数方式

（3）JS函数声明中的隐藏arguments数组

在JS中定义函数时该函数会自动创建一个隐藏的数组arguments，用来存放调用中传入的实际参数封装所有的实际参数
在函数内部我们可以直接用变量名arguments访问这个数组
利用这个特性我们可以实现JS中的可变参数

基本演示

// arguments 是一个类数组对象，包含了函数调用时传入的所有参数
function add(){
   
    console.log(arguments[0]);                 
    console.log(arguments[1]);
}

add(1,2,

3 前端（中）：JavaScript

文章目录

前言：JavaScript简介

一、ECMAscript（JavaScript基本语法）

1 JavaScript与html结合方式（快速入门）

2 基本知识

（1）JavaScript注释（和Java注释一样）

（2）JS输出语句

使用 window.alert()写入警告框

使用 document.write()写入 HTML界面 输出

使用 console.log()写入浏览器控制台

（3）{ }代码块

3 变量

（0）函数作用域 块级作用域 全局作用域

（1）var关键字：var 变量名 = 初始化值;（当成python变量来理解）

（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解） ，ES6才引入

（3）var和let声明变量的区别？

4 常量 const

5 数据类型（原始数据类型、引用数据类型）

（1）原始数据类型(基本数据类型)

number: 数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)

string: 字符串。字符串 “abc”，“a”，‘abc’

boolean: true和false

null: 一个对象为空的占位符

undefined: 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

（2）引用数据类型(对象)

（3）typeof(): 查看数据类型（类似python的type()函数）

6 （字符串方法）JS中的原始数据类型string的属性和常用方法

（1）length属性

（2）charAt(索引位置)方法：返回指定位置的字符

（3）indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置

（4）trim()方法：去除字符串两端的空格

（5）substring(开始位置, 结束位置)方法：返回指定位置的字符

7 运算符

（1）一元运算符 ++, - - , +（正号，不是加）-（负号）

（2）算数运算符 + ，- ，*，/ ，%（取模）等等

（3）赋值运算符 = ，+=，-=, *= 等等

（4）比较运算符 >, < , >=,<=, ==(宽松等于)，===（严格等于），!=(宽松不等于), !==(严格不等于)

（5）逻辑运算符 &&（与） ||（或） ！（非）

（6）三元运算符 ：条件 ? 表达式1 : 表达式2

（7） JavaScript运算符中的自动隐式转换功能

---- + ：加号与正号的区分（特性）及其各自特殊用法

---- boolean规则 + 自动转换

（8）总结

8 流程控制语句

（1）if…else…

（2）switch语句

（3）while 循环

（4）for循环

（5）break，continue，return 语句

（6）练习：9x9乘法表 （待定！！！！！！！）

9 函数

（1）函数的定义方式一：常用

（2）函数的定义方式二：了解即可

（3）JS函数声明中的隐藏arguments数组

使用 document.write()写入 HTML界面输出

（0）函数作用域块级作用域全局作用域

（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解），ES6才引入

number: 数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

（5）逻辑运算符 &&（与） ||（或）！（非）

（6）三元运算符：条件 ? 表达式1 : 表达式2

（6）练习：9x9乘法表（待定！！！！！！！）