JavaScript 基础语法与核心概念详解 | 极客日志

JavaScriptNode.js大前端算法

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

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

暗影行者发布于 2026/3/150 浏览

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 完全是两种不同的语言。

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

2. JavaScript 特点

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

环境搭建与执行顺序

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

在 HTML 文档中嵌入 JavaScript

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

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

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

<!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); // 减法：5
// alert(a - b); // 5 (字符串转数字)
// alert(d - c); // NaN (无法转换)
// alert(a == c); // true (值相等)
// alert(a === c); // false (类型不同)

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

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 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 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;

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

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>

<!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";

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

<!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>

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

clearTimeout(timeoutID);

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>