跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.js大前端算法

JavaScript 基础语法与核心概念详解

JavaScript 作为客户端脚本语言的核心基础，涵盖变量、数据类型、运算符及控制流等关键语法。文章通过代码示例解析函数定义、事件处理、内置对象（String、Array、Date、Math）以及 DOM 操作技巧，并介绍计时器机制。适合初学者快速掌握 Web 交互开发的基本逻辑与实现方式。

暗影行者发布于 2026/3/15更新于 2026/6/515 浏览
JavaScript 基础语法与核心概念详解

JavaScript 基础语法与核心概念详解

简介与历史

JavaScript 是一门广泛应用于网页开发的脚本语言，它能让网页变得更加动态和具有交互性。作为一种客户端脚本语言，JavaScript 可以嵌入到 HTML 中，并被所有现代浏览器支持。

JavaScript、HTML 和 CSS 共同构成了网页的三大基石：

  • HTML：定义网页内容，如标题、正文、图像等。
  • CSS：修饰网页外观，如颜色、大小、位置、背景等。
  • JavaScript：实时更新网页内容，例如从服务器获取数据并更新页面，修改标签样式，让网页变得生动。

1. JavaScript 历史

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

脚本语言特点：无需编译，可以由解释器直接执行（如 SQL、Python、JavaScript）。解释器逐行从上到下解释执行。

注意：JavaScript 和 Java 完全是两种不同的语言。

  1. JavaScript 是嵌入在网页中的脚本语言。
  2. Java 是后端的高级语言，需要编译。

2. JavaScript 特点

  1. 解释型脚本语言：代码不需要编译，可以直接运行。
  2. 面向对象：不仅可以创建对象，也能操作已有对象。
  3. 弱类型：对数据类型没有严格要求，变量可初始化为任意类型，也可随时改变类型。
  4. 动态性：采用事件驱动，无需借助 Web 服务器即可响应用户输入（如点击、滚动）。
  5. 跨平台：不依赖操作系统，只要有浏览器支持即可运行。

环境搭建与执行顺序

JavaScript 程序不能独立运行，只能在宿主环境中执行，通常借助浏览器环境。

在 HTML 文档中嵌入 JavaScript

使用 <script> 标签可以在 HTML 页面中编写 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例</title>
    <script>
        // JavaScript 代码写的地方
        alert("你好 JavaScript");
    </script>
</head>
<body>
</body>
</html>

在脚本文件中编写 JavaScript 代码

JavaScript 也可以放在独立的 .js 文件中，通过 src 属性引入。

<script type="text/javascript" src="test.js"></script>

注意：定义了 src 属性的 <script> 标签不应再包含 JavaScript 代码，否则嵌入的代码会被忽略。

JavaScript 代码执行顺序

写在 <head> 标签中的代码会先于 <body> 标签中的代码执行。这是因为浏览器解析 HTML 时从上到下遇到 <script> 就会暂停渲染并执行。

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

基本语法

1. 变量

声明变量使用 var 关键字。

var name;
var name = "小明";

2. 数据类型

  1. 数值型 (number)：包括整型和浮点型。
  2. 布尔型 (boolean)：逻辑值 true 或 false。
  3. 字符串型：由单个或多个字符组成，使用单引号或双引号。
  4. undefined 类型：变量未赋值时的默认类型，值为 undefined。
  5. Object 类型：对象类型。

3. 算术运算符

用于执行数学运算，如加减乘除。

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

注意事项：

  • 字符串与数字相加会进行类型转换拼接。
  • 字符串与数字相减会尝试将字符串转为数字，若无法转换则返回 NaN。
  • == 只比较值，=== 比较值和类型。
var a = "10";
var b = 5;
var c = 10;
var d = "a";
// alert(c - b); // 减法：5
// alert(a - b); // 5 (字符串转数字)
// alert(d - c); // NaN (无法转换)
// alert(a == c); // true (值相等)
// alert(a === c); // false (类型不同)

4. 赋值运算

var x = 10;
x += 20; // 等同于 x = x + 20
console.log(x); // 输出：30

var x = 12, y = 7;
x -= y; // 等同于 x = x - y
console.log(x); // 输出：5

x = 5;
x *= 25; // 等同于 x = x * 25
console.log(x); // 输出：125

x = 50;
x /= 10; // 等同于 x = x / 10
console.log(x); // 输出：5

x = 100;
x %= 15; // 等同于 x = x % 15
console.log(x); // 输出：10

5. 字符串运算符

+ 和 += 除了数学运算外，还可用于拼接字符串。

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

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

6. 自增、自减运算符

用于对变量值进行 +1 或 -1 操作。

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

7. 比较运算符

比较左右两侧数据，返回布尔值。

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

8. 逻辑运算符

组合多个表达式，返回布尔值。

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

9. 条件运算符

基于条件对变量进行赋值。

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

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

10. 控制语句

选择结构
  1. 单一选择结构 (if)
  2. 二路选择结构 (if/else)
  3. 多路选择结构 (switch)
循环结构
  1. 计数器控制 (for)
  2. 开头测试 (while)
  3. 末尾测试 (do/while)
  4. 跳转控制 (break, continue)

函数

1. 定义函数

function functionName([arguments]) {
    javascript statements;
    [return expression]
}
  • function：定义关键字。
  • functionName：函数名。
  • arguments：参数列表，逗号分隔，可为空。
  • statements：函数体。
  • return：返回值，可选。
function sayHello(name) {
    alert("Hello " + name);
    return 0;
}

2. 函数调用

  1. 在 <script> 标签中直接调用。
  2. 在其他函数中调用。
  3. 通过组件（如按钮点击）调用。
<!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>

3. 全局函数

  1. parseInt(arg)：转换为整数。
  2. parseFloat(arg)：转换为浮点数。
  3. typeof(arg)：返回数据类型。
  4. eval(arg)：运算字符串。
  5. alert(String)：弹出提示框。
  6. console.log(String)：控制台打印。

事件

JS 事件是用户与网页交互时发生的事情（如点击、输入、按键）。当事件发生时，可以使用事件处理程序来检测并执行特定程序。

常用事件：

  • onclick()：鼠标点击。
  • onblur()：标签失去焦点。
  • onfocus()：标签获得焦点。
  • onmouseover()：鼠标移入。
  • onmouseout()：鼠标移出。
  • onload()：网页加载完毕。
  • onchange()：标签内容改变且失去焦点。
<!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>

内置对象

1. String 字符串

属性：

  • length：返回字符串长度。

方法：

  • charAt(n)：返回第 n 位字符。
  • indexOf(char)：返回首次出现位置。
  • lastIndexOf(char)：从后往前查找。
  • substring(start, end)：截取子串。
  • substr(start, length)：从 start 开始截取 length 长度。
  • split(分隔符)：分割为数组。
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']

2. Array 数组

数组是值的有序集合，索引从 0 开始。

var a = new Array();
a[0] = 1;
a[1] = "aaa";
a[5] = true;

var b = new Array(1, 2, 3, 4, 5);
var arr = [1, 2, 3, 4, 5];
arr[5] = 3;

属性：

  • length：数组元素个数。

方法：

  • join()：连接为字符串。
  • reverse()：反转数组。
  • sort()：排序（默认按字母，数字需自定义比较函数）。
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); // dlroW olleH

// 数字排序
console.log(arr.sort()); // 按字符排序：1,11,12,55,66,7,8,9
arr.sort(function(a, b) { return a - b; });
console.log(arr); // 1, 7, 8, 9, 11, 12, 55, 66

// 反序排列
arr.sort(function(a, b) { return b - a; });
console.log(arr); // 66, 55, 12, 11, 9, 8, 7, 1

3. Date

new Date() // 当前日期和时间
getFullYear() // 四位年份
getDate() // 月份中的某一天 (1~31)
getMonth() // 月份 (0~11)
getDay() // 星期几 (0~6)
getHours() // 小时 (0~23)
getMinutes() // 分钟 (0~59)
getSeconds() // 秒数 (0~59)

时钟示例：

<!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 id="myDiv"></div>
</body>
</html>

4. Math

提供数学计算功能。

  • PI：圆周率。
  • abs(x)：绝对值。
  • pow(x, y)：幂运算。
  • sqrt(x)：平方根。
  • ceil(x)：向上取整。
  • floor(x)：向下取整。
  • round(x)：四舍五入。
  • random()：0~1 之间的随机数。
  • max(x, y)：最大值。
  • min(x, y)：最小值。

DOM 操作

DOM (Document Object Model) 是文档对象模型，允许 JavaScript 操作 HTML 文档的所有标签。

1. 查找元素

  1. document.getElementById("id")：通过 ID 查找。
  2. document.getElementsByTagName("tag")：通过标签名查找。
  3. document.getElementsByClassName("class")：通过类名查找。
  4. document.getElementsByName("name")：通过 name 查找。

2. 改变 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>

修改图片源：

document.getElementById("image").src = "new.jpg";

修改 HTML 内容：

document.getElementById("div").innerHTML = "新内容";

3. 改变 CSS

修改标签样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function color() {
            document.getElementById("div").style.color = "pink";
        }
    </script>
</head>
<body>
    <input type="button" value="修改颜色" onclick="color()" />
    <div>你好，世界</div>
</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 id="text"></div>
    <input type="button" value="red" onclick="test()" />
</body>
</html>

计时器

JavaScript 支持在设定时间间隔后执行代码。

setTimeout

在未来某时刻执行一次代码。

setTimeout("showMessage()", 3000); // 3 秒后执行

取消定时器：

clearTimeout(timeoutID);

setInterval

每隔指定时间重复调用。

setInterval("jishi()", 1000); // 每秒执行

取消定时器：

clearInterval(index);

计时器实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" id="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>

目录

  1. JavaScript 基础语法与核心概念详解
  2. 简介与历史
  3. 1. JavaScript 历史
  4. 2. JavaScript 特点
  5. 环境搭建与执行顺序
  6. 在 HTML 文档中嵌入 JavaScript
  7. 在脚本文件中编写 JavaScript 代码
  8. JavaScript 代码执行顺序
  9. 基本语法
  10. 1. 变量
  11. 2. 数据类型
  12. 3. 算术运算符
  13. 4. 赋值运算
  14. 5. 字符串运算符
  15. 6. 自增、自减运算符
  16. 7. 比较运算符
  17. 8. 逻辑运算符
  18. 9. 条件运算符
  19. 10. 控制语句
  20. 选择结构
  21. 循环结构
  22. 函数
  23. 1. 定义函数
  24. 2. 函数调用
  25. 3. 全局函数
  26. 事件
  27. 内置对象
  28. 1. String 字符串
  29. 2. Array 数组
  30. 3. Date
  31. 4. Math
  32. DOM 操作
  33. 1. 查找元素
  34. 2. 改变 HTML
  35. 3. 改变 CSS
  36. 计时器
  37. setTimeout
  38. setInterval
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

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

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • VR 视频下载工具 N_m3u8DL-RE 使用指南
  • GitHub Copilot 集成安全风险及防护实践
  • LangGraph 在 LangChain 中的应用：图论驱动的多 Agent 协作
  • ROS 2 自主导航机器人系统架构与 SLAM
  • 哈希表实现原理与代码详解
  • Python 基于 Flask 的小区停车场管理系统设计与实现
  • AI 调参技巧：网格搜索优化
  • CTF 夺旗赛入门教程：从零开始掌握网络安全竞技
  • AI 视频生成模型构建、实现与调试指南
  • Cloudflare 反爬绕过：Canvas/WebGL/WebRTC 多维度浏览器指纹隐身实战
  • AI 大模型应用开发体系化学习路线
  • Kafka 生产者 API 快速上手与 Scala 实现
  • Python 属性描述符：从原理到 ORM 实践详解
  • Vivado 2023.2 安装指南：从零搭建 FPGA 开发环境
  • 飞算 JavaAI 实战：47 分钟重构高耦合遗留系统
  • Gemma-3-12b-it 显存管理：动态分段分配与 OOM 预防机制
  • 离散 PR 控制器原理、C 语言实现及逆变闭环验证
  • 动态跟量下单算法（POV）实现与解析
  • 二叉树 DFS 实战：计算布尔值与路径数字和
  • SharpaWave 量产：0.005N 视觉基触觉手与模块化设计助力通用机器人

相关免费在线工具

  • 加密/解密文本

    使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online

  • Gemini 图片去水印

    基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印，支持批量处理与下载。 在线工具，Gemini 图片去水印在线工具，online

  • 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