JavaScript - 技术栈

一.JavaScript简介

一种广泛使用的高级编程语言，主要用于在网页中实现交互功能（HTML和CSS不是编程语言，而是标记语言）

JS的主要特点：

动态类型：变量的数据类型在运行时确定，无需提前声明
解释型语言：代码通常由浏览器直接解释执行，不需要编译
事件驱动：支持响应用户操作（如点击、滚动、键盘输入等）
跨平台：可在各种操作系统和设备上的浏览器中运行
多范式：支持面向对象、函数式、命令式等多种编程风格

JS的主要用途：

前端开发：操控网页内容（通过DOM操作）、响应用户交互（按钮点击、表单验证等）、动态加载内容（如AJAX、Fetch API）
后端开发：使用Node.js可以用JavaScript编写服务器端程序、可以构建API、数据库交互、文件处理等
移动与桌面应用
游戏与动画

HTML定义网页内容结构，CSS描述网页的布局样式，JavaScript负责网页中的行为部分。

JavaScript是基于对象的事件驱动的程序语言，其程序代码是嵌入在HTML网页文件中，利用浏览器进行解释执行。

那么如何在网页中应用JavaScript呢？

因为JavaScipt是嵌入在HTML网页中运行的，它在网页中的位置有三种

（1）存放在网页头部<head>......</head>之间，不过已经是早期网页中的标准做法，但从网页性能和用户体验的角度来看，并不推荐

浏览器在解析HTML文档时，遇到<script>标签会暂停/阻塞后续HTML的解析，直到脚本下载并执行完毕。如果JS文件很大内容很多，暂停时间很长，用户会看到一个长时间的白屏.

并且如果你的JS代码试图操作<body>中的元素，但此时还没有解析到body中的内容，代码就会报错

（2）存放在网页正文<body>.......</body>之间

（3）外置JavaScript，即独立的JavaScript脚本文件（扩展名为.js）。在HTML文档中通过使用

html 复制代码

<script src="JavaScript文件"> </script>

来调用并执行脚本。

二.JS的基础学习

先要安装：

在vscode中要安装扩展插件open in browser 和Live Server ，还有Error Lens

open in browser插件用于打开浏览器；

Live Server插件便于查看代码运行结果（ctrl+s保存浏览器界面就会自动发生变化，不用再手动点击浏览器左上方的refresh键；且win键加箭头可以分屏显示，让一屏写代码，一屏就能看到运行效果，利用电脑的这个快捷键可以使得开发效率大大提高）

Error Lens可以在写代码的过程中如果出现错误，就会显示出红色的警告！

1.JS的书写位置

和CSS一样，有三种书写位置

1.行内JS

2.内部JS

直接写在HTML文件里，用script标签包裹住。

其中script标签要写body标签中的最末尾，即最靠近</body>的地方。

写在</body>上方而不是<body>下方可以让HTML元素显示在js代码的上方，方便js对HTML元素操作

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 内部js -->
     <script>
        alert('你好，js~')
     </script>
</body>
</html>

运行结果：

3.外部JS

先新建一个.js文件myjs.js

内容如下：

javascript 复制代码

alert('你好，书写位置在HTML文档外部的js~')

然后在HTML文件里书写代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./myjs.js"></script>
</body>
</html>

上面代码中的src实现的src的英文全称其实是source，表示源头，来源，源文件。

运行结果：

注意：

（1）script标签中无需写代码，写了内容也不会被执行。

（2）外部JS会使代码更加有序，更易于复用；且没有了脚本的混合，HTML也会更加易读。因此书写外部JS代码是一个良好的习惯。

2.JS中的注释与结束符

1.单行注释

作用：//右边的内容是注释部分

快捷键：ctrl + /

2.多行注释

/**/

作用：/*和*/中间的部分是注释部分

快捷键：shift + alt + a

3.结束符

用英文的分号；表示语句的结束

在实际开发中，;可写可不写，浏览器（JavaScript引擎）可以自动推断浏览器的位置

在现代开发中，越来越多的人开始在语句结束后不加分号

为了统一，建议要么都加分号，要么都不加分号

3.JS的输入输出语法

1.输出语法

1.document.write()

作用：向body内输出内容

注意：如果输出的内容写的是标签，那么标签也会被解析成网页元素

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write('向文档写入内容')
    </script>
</body>
</html>

运行结果：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write('向文档写入内容')
        document.write('一级标题')
    </script>
</body>
</html>

运行效果：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write('向文档写入内容')
        document.write('<h1>一级标题</h1>')
    </script>
</body>
</html>

运行结果：

打开开发者工具：

2.alert()

作用：页面弹出警告对话框

3.console.log()

作用：控制台输出语法，程序员调试使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write('向文档写入内容')
        document.write('<h1>一级标题</h1>')
        console.log('我向控制台输入了内容！')
    </script>
</body>
</html>

运行效果：

2.输入语法

prompt()

html 复制代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <script>
        prompt('请输入你的姓名：')
        </script>
    </body>
</html>

运行效果：

4.JS中的代码执行顺序

JavaScript代码的执行顺序：

按HTML文档流执行JavaScript代码（从上往下执行）

但是有例外，alert()和prompt()会跳过页面渲染先被执行

5.字面量

在计算机科学中，字面量（literal）是计算机描述的事和物

数字字面量： 520

字符串字面量： '黑马程序员'

数组字面量： []

对象字面量： {}

6.变量的声明和赋值

变量是用来存储数据的容器

1.变量的声明

javascript 复制代码

let 变量名

声明关键字：let

变量名

2.变量的赋值

等号=，用来赋值

3.代码示例

html 复制代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>JS变量的声明和使用</title>
    </head>
    <body>
        <script>
            let age
            age = 18
            console.log(age)
        </script>
    </body>
</html>

打开开发者工具并点击控制台（console）：

4.变量的初始化

即在变量的声明的同时就给它赋值

html 复制代码

<script>
    let age = 18
    let name = '张三'
</script>

7.变量的基本使用

1.更新变量

html 复制代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>JS变量的使用</title>
    </head>
    <body>
        <script>
            let age = 18
            console.log(age)
            age = 19
            console.log(age)
        </script>
    </body>
</html>

效果：

不能为已经声明过的变量再声明，如下面：

declare：宣布，声明

variable：易变的，多变的；变量（因此编程中有用var来作为变量名的）

打开开发者工具：

2.声明多个变量

html 复制代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>JS变量的使用</title>
    </head>
    <body>
        <script>
            // let age = 18
            // console.log(age)
            // let age = 19
            // console.log(age)

            let age = 18, uname = '张三'
            console.log(age, uname)
        </script>
    </body>
</html>

打开开发者工具并点击Console：

3.输入输出加变量的练习

html 复制代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>JS变量的使用</title>
    </head>
    <body>
        <script>
            // let age = 18
            // console.log(age)
            // let age = 19
            // console.log(age)

            // let age = 18, uname = '张三'
            // console.log(age, uname)

            let uname =  prompt("请输入你的名字：")
            document.write(uname)

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

效果：

会在网页中输出：

4.var和let的区别

var关键字可以在变量使用后在声明这个变量，这是不合理的

html 复制代码

<htnml>
    <head>
        <meta charset="UTF-8">
        <title>let和var的区别</title>
    </head>
    <body>
        <script>
            console.log(num)
            var num = 100
        </script>
    </body>
</htnml>

有一个变量提升的过程

相当于代码：

html 复制代码

<stcipt>
    var num
    console.log(num)
    num = 100
</script>

再运行，在开发者工具的控制台中也是出现"undifined"

换成：

html 复制代码

<script>
    console.log(num)
    let num = 100
</scipt>

结果：

不能在num未初始化前访问它

8.数组

1.数组的声明

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = ['小天','小飞','小刚']
        console.log(arr[0])
        document.write(arr[2])
    </script>
</body>
</html>

效果：

2.数组的长度

利用length属性

html 复制代码

console.log(arr.length) // 返回3

9.常量

常量的本质也是变量，只是常量的值不会改变，是固定的

用const关键字来声明（constant：持续不断的，经常发生的；恒定的；常数）

html 复制代码

const PI = 3.14

注意：常量在声明的时候必须赋值，否则报错（不需要重新赋值的变量用const声明）

10.数据类型

JS的数据类型分为两大类，为基本数据类型和引用数据类型。

基本数据类型：number、string、boolean、undefined（未定义型）、null（空类型）

引用数据类型：object对象

JS是一门弱数据类型语言，声明变量时没有强制变量的数据类型

11.模板字符串

在JS中，要使用${}进行变量插值，必须使用反引号（`）包裹字符串！！！

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name = prompt("请输入你的姓名：")
        document.write(`你好，${name},欢迎来到2026年，现在是2026年1月1日0点59分`)
    </script>
</body>
</html>