当前位置：首页 > news >正文

JavaScript

news 来源：原创 2025/5/15 7:30:15

JavaScript

js核心语法

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

组成：
- ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

js引入方式

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

第一种方式：内部脚本，将JS代码定义在HTML页面中
- JavaScript代码必须位于
- 一般会把脚本置于元素的底部，可改善显示速度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 引入方式</title>
</head>
<body>
  
  <script>
    alert('Hello JS')
  </script>
</body>
</html>

第二种方式：外部脚本，将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含

alert('Hello JS')

在html文件中，通过引入js文件demo.js，如下：

<script src="js/demo.js"></script>

注意1：demo.js中只有js代码，没有标签引入外部JS文件时，标签不能自闭合，如：

JS基础语法

输出语句

在JS中有3种输出语句，分别是：

api	描述
window.alert(…)	警告框
document.write(…)	在HTML 输出内容
console.log(…)	写入浏览器控制台

我们定义如下这么一段JS，来做一个测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法</title>
</head>
<body>

    <script>
        //方式一: 写入浏览器的body区域
        document.write("Hello JS (document.write)");

        //方式二: 弹出框
        window.alert("Hello JS (window.alert)");

        //方式三: 控制台
        console.log("Hello JS (console.log)")
    </script>
</body>
</html>

变量

接下来，我们再来讲解JS中的变量。在js中，变量的声明和java中还是不同的。

JS中主要通过 let 关键字来声明变量的。
JS是一门弱类型语言，变量是可以存放不同类型的值的。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头
- 变量名严格区分大小写，如：name和Name是不同的变量
- 不能使用关键字作为变量名，如：let、if、for等

变量的声明示例如下所示：

<script>
    //变量
    let a = 20;
    a = "Hello";
    alert(a);
</script>

上述的示例中，大家会看到变量a既可以存数字，又可以存字符串。因为JS是弱类型语言。

常量

在JS中，如果声明一个场景，需要使用const关键字。一旦声明，常量的值就不能改变（不可以重新赋值）。

数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为：原始数据类型和引用数据类型。那这部分，我们先来学习原始数据类型，主要包含以下几种类型：

数据类型	描述
number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引(‘…’)、双引号(“…”)、反引号(`...`)皆可，正常使用推荐单引号
boolean	布尔。true，false
null	对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof 关键字可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

    <script>
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object

        var a ;
        alert(typeof a); //undefined

    </script>
</body>
</html>

对于字符串类型的数据，除了可以使用双引号（“…”）、单引号（‘…’）以外，还可以使用反引号（``）。而使用反引号引起来的字符串，也称为 模板字符串。

模板字符串的使用场景：拼接字符串和变量。
模板字符串的语法：
- ... ：反引号（英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）
- 内容拼接时，使用 ${ } 来引用变量

具体示例如下：

  <script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>

函数

**函数（function）**是被设计用来执行特定任务的代码块，方便程序的封装复用。那我们学习函数，主要就是学习JS中函数的定义及调用的语法。

方式一

格式如下：

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。
返回值也不需要声明类型，直接return即可

示例：

function add(a, b){
    return a + b;
}

如果要调用上述的函数add，可以使用：函数名称(实际参数列表)

let result = add(10,20);
alert(result);

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10,20,30,40);
alert(result);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b，而30和40没有变量接受，但是不影响函数的正常调用。

方式二

刚才我们定义函数，是为函数指定了一个名字。那我们也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。那接下来，方式二，就来介绍一下匿名函数的定义和调用。

**匿名函数：**是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。

匿名函数定义可以通过两种方式：函数表达式和箭头函数。

示例一（函数表达式）：

var add = function (a,b){
    return a + b;
}

示例二（箭头函数）：

var add = (a,b) => {
    return a + b;
}

上述匿名函数声明好了之后，是将这个函数赋值给了add变量。那我们就可以直接通过add函数直接调用，调用代码如下：

let result = add(10,20);
alert(result);

而箭头函数这种形式，在现在的前端开发中用的会更多一些。

自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.方法名()

JS DOM

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

那么我们学习DOM技术有什么用呢？主要作用如下：

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM操作

DOM的核心思想：将网页的内容当做对象来处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到标签身上。
document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)
我们可以通过如下两种方式来获取DOM元素。
- 根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
- 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但没有push、pop等数组方法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-DOM</title>
</head>
<body>

  <h1 id="title1">11111</h1>
  <h1>22222</h1>
  <h1>33333</h1>

  <script>
    //1. 修改第一个h1标签中的文本内容
    //1.1 获取DOM对象
    // let h1 = document.querySelector('#title1');
    //let h1 = document.querySelector('h1'); // 获取第一个h1标签

    let hs = document.querySelectorAll('h1');

    //1.2 调用DOM对象中属性或方法
    hs[0].innerHTML = '修改后的文本内容';
  </script>
</body>
</html>

事件监听

前端部分事件就是我们交互时自动执行的操作比如点击的交互特效等等

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能，这就是事件监听。
例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。

JS事件是JS非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。

1. 事件监听语法

事件源.addEventListener('事件类型', 要执行的函数);

在上述的语法中包含三个要素:

事件源: 哪个dom元素触发了事件, 要获取dom元素
事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
要执行的函数: 要做什么事

JavaScript对于事件的绑定还提供了另外2种方式（早期版本）：

1). 通过html标签中的事件属性进行绑定

例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

<input type="button" id="btn1" value="点我一下试试1" onclick="on()">

<script>
    function on(){
        alert('试试就试试')
    }
</script>

2). 通过DOM中Element元素的事件属性进行绑定

依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。

例如一个按钮，我们对于按钮可以绑定单机事件，可以通过DOM元素的属性，为其做事件绑定。

<body>
    <input type="button" id="btn1" value="点我一下试试1">
    <script>
      document.querySelector('#btn1').onclick = function(){
          alert("按钮2被点击了...");
      }
    </script>
</body>

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="事件绑定1">
    <input type="button" id="btn2" value="事件绑定2">
    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })

        document.querySelector('#btn2').onclick = function(){
            alert("按钮2被点击了...");
        }
    </script>
</body>
</html>

addEventListener 与 on事件区别:

on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用 addEventListener .

复用js

在当前html文件中由于我们用script> 标签导入太多js语句尽管代码能够正常运行但是导致js代码复用性较差因此我们可以像java一样将js代码模块化例如用script>标签将外部js文件导入html中将不同的js文件用import导包将需要应该复用的方法用export暴露（类似 puplic）这样我们就实现了代码的复用此时需要在html文件中导入script src=”” type = “module”>