JavaScript 基础知识详解 | 极客日志

JavaScriptNode.js大前端

JavaScript 基础知识详解

综述由AI生成JavaScript 是一种广泛用于网页开发的客户端脚本语言，具有解释型、面向对象、弱类型等特点。 JavaScript 的基础知识，包括其历史背景、与 Java 的区别、基本语法（变量、数据类型、运算符）、控制语句（选择结构、循环结构）、函数定义与调用、事件处理机制以及内置对象（String、Array、Date、Math）。此外，还涵盖了 HTML DOM 操作（查找元素、修改内容样式）和计时器功能（setTimeout、setInterval），旨在帮助初学者掌握 JavaScript 核心概念并应用于实际开发中。

灰度发布发布于 2026/3/29更新于 2026/5/2729 浏览

JavaScript 简介

JavaScript(简称 Js)是当前最流行、应用最广泛的客户端 (网页) 脚本语言，用来在网页中添加动态效果与交互功能，在 web 开发中拥有举足轻重的地位。

JavaScript、HTML、CSS 共同构成网页：

HTML: 用来定义网页内容，例如：标题、正文、图像等；
CSS: 用来修饰网页组件的外观，例如：颜色、大小、位置、背景等等；
JavaScript: 用来实时更新网页内容，例如：从服务器中获取数据并更新到网页中，修改某些标签的样式内容，可以让网页变得生动。

JavaScript 历史

JavaScript 原名: LiveScript，是由美国网景 (Netscape Communications Corporation) 开发的一种用于对网页操作的脚本语言，LiveScript 也是面向对象的。后来 sun 公司与网景合作更名为 JavaScript。

脚本语言: 无需编译，可以由某种解释器直接执行 (sql python html css JavaScript)，直接由某种解释器 (引擎) 解释执行，逐行从上到下解释执行。

JavaScript 和 Java 完全是两种不同的语言

区别

JavaScript 是嵌入在网页中，对网页进行各种操作的，是一种脚本语言；
Java 是一种后端的高级语言，是需要编译的。

JavaScript 特点

解释型脚本语言: JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。
面向对象: JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。
弱类型: JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
动态性: JavaScript 是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。
跨平台: JavaScript 不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。

第一个 JavaScript 程序

JavaScript 程序不能独立运行，只能在宿主环境中执行。一般情况下可以把 JavaScript 代码放在网页中，借助浏览器环境来运行。

在 HTML 文档中嵌入 JavaScript 代码

在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签，我们可以在 <script> 标签中编写 JavaScript 代码，具体步骤如下：

新建 HTML 文档；
在 <head> 标签或者 <body> 标签中插入 <script> 标签；
在 <script> 标签中写 JavaScript 代码。

示例：

<!DOCTYPE html>
<html>
<head>
    < =>

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        alert("写在<head>标签中");
    </script>
</head>
<body>
    <script>
        alert("写在<body>标签中");
    </script>
</body>
</html>

var name;

var name = "小明";

var x = 10; var y = 4;
console.log("x + y =", x + y); // 输出：x + y = 14
console.log("x - y =", x - y); // 输出：x - y = 6
console.log("x * y =", x * y); // 输出：x * y = 40
console.log("x / y =", x / y); // 输出：x / y = 2.5
console.log("x % y =", x % y); // 输出：x % y = 2

var a = "10"; var b = 5; var c = 10; var d = "a";
// + 字符串连接 加法运算
// alert(c-b); 减法
// alert(a-b); // 5 "字符串 (数字)" - 数值 = 数值 会把表达式中的数字 字符串尝试类型转换
// alert(d-c); // NaN 字符串不能转换为数值返回 NaN
// alert(a==c); true 只比较值是否相等
// alert(a===c); false 全等 比较值和类型

var x = 10; x += 20; console.log(x); // 输出：30
var x = 12, y = 7; x -= y; console.log(x); // 输出：5
x = 5; x *= 25; console.log(x); // 输出：125
x = 50; x /= 10; console.log(x); // 输出：5
x = 100; x %= 15; console.log(x); // 输出：10

var x = "Hello "; var y = "World!";
var z = x + y; console.log(z); // 输出：Hello World!
x += y; console.log(x); // 输出：Hello World!

var x;
x = 10; console.log(++x); // 输出：11 console.log(x); // 输出：11
x = 10; console.log(x++); // 输出：10 console.log(x); // 输出：11
x = 10; console.log(--x); // 输出：9 console.log(x); // 输出：9
x = 10; console.log(x--); // 输出：10 console.log(x); // 输出：9

var x = 25; var y = 35; var z = "25";
console.log(x == z); // 输出：true
console.log(x === z); // 输出：false
console.log(x != y); // 输出：true
console.log(x !== z); // 输出：true
console.log(x < y); // 输出：true
console.log(x > y); // 输出：false
console.log(x <= y); // 输出：true
console.log(x >= y); // 输出：false

var year = 2021; // 闰年可以被 400 整除，也可以被 4 整除，但不能被 100 整除
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
    console.log(year + " 年是闰年。");
} else{
    console.log(year + " 年是平年。");
}

var result = (条件表达式)?结果 1:结果 2

var c = 1; var b = 2; var a = c > b ? c : b; // a = b;

function functionName([arguments]) {
    javascript statements;
    [return expression]
}

function sayHello(name){
    alert("Hello " + name);
    return 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function test(text){
            alert(text);
        }
        test("函数在<script>标签中调用");
        function a(){
            test("函数在其他函数中调用");
        }
        a();
    </script>
</head>
<body>
    <input type="button" value="测试" onclick="test('组件调用函数')"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <!-- 点击事件 -->
        onclick:<input type="button" value="onclick" onclick="test('pink')" />
        <br />
        <!-- onblur() 标签失去焦点 -->
        onblur:<input type="text" onblur="test('red')" />
        <br />
        <!-- onfocus() 标签获得焦点-->
        onfocus:<input type="text" onfocus="test('blue')"/>
        <br />
        <!-- onmouseover() 鼠标被移到某标签之上 -->
        onmouseover:<input type="text" onmouseover = "test('black')"/>
        <br />
        <!-- onmouseout 鼠标从某标签移开-->
        onmouseout:<input type="text" onmouseout = "test('aqua')"/>
        <br />
        <!-- onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序 -->
        onchange:<input type="text" onchange = "test('yellow')"/>
    </div>
    <script>
        var obj = document.getElementById("div");
        function test(color) {
            obj.style.backgroundColor = color;
        }
    </script>
</body>
</html>

var string = new String("String 字符串 r2323");
console.log(string.charAt(2)); // 打印结果是：e
console.log(string.indexOf('r'));//打印结果是：3
console.log(string.lastIndexOf('r')); //打印结果是：9
console.log(string.substring(2,5)); // 打印结果是:rin
console.log(string.substr(2,3));//打印结果是:rin
console.log(string.split('r'));//打印结果是:一个数组:'st' 'ing 字符串' '2323'

var arr = new Array();

[下标] = 值;

var arr = new Array(, , ...);

var a = new Array();
a[0] = 1;
a[1] = "aaa";
a[5] = true;
var b = new Array(1,2,3,4,5);
var a = [1,2,3,4,5];
a[5] = 3;

var arr = [1, 11, 12, 55, 66, 8, 7, 9];
console.log(arr.join()); //打印结果:1,11,12,55,66,8,7,9
var str = "Hello World";
var reversedStr = str.split("").reverse().join("");
console.log(reversedStr); // Output: "dlroW olleH"
console.log(arr.sort()); // Output: [1,11,12,55,66,7,8,9] 这里是根据字符计算的
arr.sort(function(a, b) { return a - b; });
console.log(arr); // Output: [1, 7, 8, 9, 11, 12, 55, 66]
//反序排列
arr.sort(function(a, b) { return b - a; });
console.log(arr); // Output: [66, 55, 12, 11, 9, 8, 7, 1]

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function addTextToDiv() {
            var myDiv = document.getElementById('myDiv');
            var currentDate = new Date();
            var year = currentDate.getFullYear();
            var month = currentDate.getMonth() + 1;
            var day = currentDate.getDate();
            var hour = currentDate.getHours();
            var minutes = currentDate.getMinutes();
            var seconds = currentDate.getSeconds();
            myDiv.innerHTML = year + "年" + month + "月" + day + "日 " + hour + ":" + minutes + ":" + seconds;
        }
        setInterval("addTextToDiv()",1000);
    </script>
</head>
<body onload="addTextToDiv()">
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function test(){
            document.getElementById("button").value = "按钮";
        }
    </script>
</head>
<body>
    <input type="button" value="测试" onclick="test()"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function test(){
            document.getElementById("img").src = "img/3.jpg";
        }
    </script>
</head>
<body>
    <input type="button" value="测试" onclick="test()"/>
    <img src="img/1.jpg"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function test(){
            document.getElementById("div").innerHTML = "加油胜利就在前方";
        }
    </script>
</head>
<body>
    <input type="button" value="测试" onclick="test()"/>
    <div>你好，登山者</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function test(){
            document.getElementById("div").innerHTML = "加油胜利就在前方";
        }
        function color(){
            document.getElementById("div").style.color = "pink";
        }
    </script>
</head>
<body>
    <input type="button" value="测试" onclick="test()"/>
    <div>你好，登山者</div>
    <input type="button" value="修改颜色" onclick="color()"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        var color = ['red','green','blue'];
        var i = 0;
        function test(){
            var obj1 = document.getElementById("text");
            var obj2 = document.getElementById("button");
            obj1.style.backgroundColor = color[i];
            i++;
            if(i==color.length){ i=0; }
            obj2.value = color[i];
        }
    </script>
</head>
<body>
    <div></div>
    <input type="button" value="red" onclick="test()"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>setTimeout 示例</title>
    <script>
        function showMessage() {
            alert("这是一个 setTimeout 示例！");
        }
        // 调用 showMessage 函数，在 3 秒后显示消息
        setTimeout("showMessage()", 3000);
    </script>
</head>
<body>
    <h1>setTimeout 示例</h1>
    <p>页面加载后将在 3 秒后显示一条消息。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>setTimeout 和 clearTimeout 示例</title>
    <script>
        var timeoutID;
        function showMessage() {
            alert("这是一个 setTimeout 示例！");
        }
        function setupTimeout() {
            timeoutID = setTimeout(showMessage, 3000);
        }
        function cancelTimeout() {
            clearTimeout(timeoutID);
            alert("定时器已取消！");
        }
    </script>
</head>
<body>
    <h1>setTimeout 和 clearTimeout 示例</h1>
    <p>页面加载后将在 3 秒后显示一条消息。</p>
    <button onclick="setupTimeout()">设置定时器</button>
    <button onclick="cancelTimeout()">取消定时器</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text"/>
    <br />
    <br />
    <input type="button" value="开始" onclick="startTime()"/>
    <input type="button" value="停止" onclick="stopTime()"/>
    <input type="button" value="复位" onclick="fuwei()"/>
    <script>
        var num = 0;
        var textobj = document.getElementById("text");
        textobj.value = 0;
        var index;
        function jishi(){
            num++;
            textobj.value = num;
        }
        function startTime(){
            index = setInterval("jishi()",1000);
        }
        function stopTime(){
            clearInterval(index);
        }
        function fuwei(){
            num = 0;
            textobj.value = 0;
        }
    </script>
</body>
</html>

JavaScript 基础知识详解

JavaScript 简介

JavaScript 历史

JavaScript 特点

第一个 JavaScript 程序

在 HTML 文档中嵌入 JavaScript 代码

更多推荐文章

相关免费在线工具

在脚本文件中编写 JavaScript 代码

JavaScript 代码执行顺序

基本语法

1. 变量

2. 数据类型

3. 算术运算符

4. 赋值运算

5. 字符串运算符

6. 自增、自减运算符

7. 比较运算符

8. 逻辑运算符

9. 条件运算符

10. 控制语句

选择结构

循环结构

函数

1. 定义函数

2. 函数调用

3. 全局函数

事件

内置对象

1. String 字符串

2. Array 数组

3. Date

4. Math

Html DOM

1. 查找元素

2. 改变 HTML

3. 改变 CSS

计时

更多推荐文章

相关免费在线工具

JavaScript 基础知识详解

JavaScript 简介

JavaScript 历史

JavaScript 特点

第一个 JavaScript 程序

在 HTML 文档中嵌入 JavaScript 代码

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

在脚本文件中编写 JavaScript 代码

JavaScript 代码执行顺序

基本语法

1. 变量

2. 数据类型

3. 算术运算符

4. 赋值运算

5. 字符串运算符

6. 自增、自减运算符

7. 比较运算符

8. 逻辑运算符

9. 条件运算符

10. 控制语句

选择结构

循环结构

函数

1. 定义函数

2. 函数调用

3. 全局函数

事件

内置对象

1. String 字符串

2. Array 数组

3. Date

4. Math

Html DOM

1. 查找元素

2. 改变 HTML

3. 改变 CSS

计时

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具