前言
JavaScript 是目前最流行、应用最广泛的客户端脚本语言，能够让网页实现动态交互效果，是前端开发三大核心（HTML + CSS + JavaScript）之一。
HTML 负责搭建网页结构，CSS 负责美化页面样式，而 JavaScript 则让网页 “活” 起来：实现元素动态变化、响应用户点击 / 输入、处理表单数据、与服务器交互等功能。
本文从零基础角度，系统梳理 JavaScript 基础语法、核心概念与实战案例，帮助初学者快速入门，也适合有一定基础的开发者查漏补缺。
学习建议：编程重在动手实践，不要只停留在阅读代码。亲手敲一遍示例，运行查看效果，才能真正理解知识点。坚持多写多练，你一定会快速进步！
一、JavaScript 简介
1.1 什么是 JavaScript
JavaScript（简称 JS）是一种客户端脚本语言，主要用于网页开发，实现动态效果与交互功能，在 Web 开发中占据核心地位。
1.2 网页三剑客关系
- HTML：定义网页内容（标题、文本、图片、按钮等）—— 网页骨架
- CSS：修饰页面外观（颜色、大小、位置、布局等）—— 网页颜值
- JavaScript：实现动态交互、数据处理、事件响应 —— 网页行为
1.3 JavaScript 历史
- 原名：LiveScript，由网景公司开发
- 后与 Sun 公司合作，更名为 JavaScript
- 属于解释型脚本语言，无需编译，由浏览器引擎直接逐行执行
1.4 JavaScript 与 Java 的区别
两者完全不同，只是名字相似：
- JavaScript：脚本语言，嵌入网页运行，无需编译
- Java：后端高级语言，需要编译后运行
1.5 JavaScript 核心特点
- 解释型脚本语言：代码无需编译，直接运行
- 面向对象：可创建、操作对象
- 弱类型语言：变量类型不严格，可随时切换
- 动态性：事件驱动，直接响应用户操作
- 跨平台：依赖浏览器，Windows/macOS/Linux 均可运行
二、第一个 JavaScript 程序
JS 不能独立运行，必须依赖浏览器环境，嵌入 HTML 中执行。
2.1 内嵌 JS 代码
使用<script>标签包裹 JS 代码，可放在<head>或<body>中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个JS程序</title> <script> // 弹出提示框 alert("你好 JavaScript"); </script> </head> <body> </body> </html>2.2 外部 JS 文件
- 新建
test.js文件
alert("你好");- 在 HTML 中引入
<script type="text/javascript" src="test.js"></script>注意：设置了
src属性的<script>标签内部不能再写代码，否则会被忽略。
2.3 JS 执行顺序
先执行<head>中的 JS，再执行<body>中的 JS。
<script>alert("head 中的代码");</script> <body> <script>alert("body 中的代码");</script> </body>三、JavaScript 基础语法
3.1 变量
使用var关键字声明变量：
// 声明变量 var name; // 声明并赋值 var name = "小明";3.2 数据类型
- number：数值（整数、小数）
- boolean：布尔值（true /false）
- string：字符串（单 / 双引号包裹）
- undefined：未赋值变量默认类型
- object：对象类型
3.3 运算符
算术运算符
var x = 10, y = 4; console.log(x + y); // 14 console.log(x - y); // 6 console.log(x * y); // 40 console.log(x / y); // 2.5 console.log(x % y); // 2赋值运算符
=、+=、-=、*=、/=、%=
var x = 10; x += 20; // x = 30字符串拼接
+既可以加法，也可以拼接字符串：
var x = "Hello "; var y = "World!"; console.log(x + y); // Hello World!自增 / 自减
var x = 10; console.log(++x); // 11 console.log(x++); // 10比较运算符
==、===、!=、!==、<、>、<=、>=
==：只比较值===：值和类型都比较（推荐）
逻辑运算符
&&（与）、||（或）、!（非）
三元运算符
var a = 1, b = 2; var max = a > b ? a : b; // max = 23.4 流程控制语句
选择结构
- if
- if…else
- switch
循环结构
- for
- while
- do…while
- break / continue
四、函数
4.1 函数定义
function 函数名(参数){ // 函数体 return 返回值; }示例：
function sayHello(name){ alert("Hello " + name); return 0; }4.2 函数调用
- 直接调用
- 在其他函数中调用
- 通过 HTML 元素事件调用
<input type="button" value="点击" onclick="sayHello('张三')"/>4.3 常用全局函数
parseInt()：转整数parseFloat()：转浮点数typeof()：判断类型eval()：执行字符串表达式alert()：弹出提示console.log()：控制台打印
五、JavaScript 事件
事件是用户与网页交互时触发的动作，JS 可监听并处理。
常用事件
onclick：鼠标点击onblur：失去焦点onfocus：获得焦点onmouseover：鼠标移入onmouseout：鼠标移出onload：页面加载完成onchange：内容改变并失去焦点
示例：
<input type="text" onblur="test('red')" /> <script> function test(color){ document.getElementById("div").style.backgroundColor = color; } </script>六、JavaScript 内置对象
6.1 String 对象
var str = "Hello JavaScript"; str.length; // 长度 str.charAt(2); // 第3个字符 str.indexOf('J'); // 首次出现位置 str.substring(2,5); str.split(' '); // 分割为数组6.2 Array 数组
var arr = [1,7,8,9,11]; arr.length; arr.join('-'); arr.reverse(); arr.sort(function(a,b){return a-b}); // 数字排序6.3 Date 日期
var date = new Date(); date.getFullYear(); // 年 date.getMonth()+1; // 月 date.getDate(); // 日6.4 Math 数学对象
Math.PI; Math.abs(-5); Math.random(); // 0~1随机数 Math.max(1,5,9); Math.round(3.5); // 四舍五入七、HTML DOM 操作
DOM（文档对象模型）允许 JS 操作 HTML 元素。
7.1 获取元素
document.getElementById("id"); document.getElementsByTagName("p"); document.getElementsByClassName("cls"); document.getElementsByName("name");7.2 修改内容
// 修改文本/HTML document.getElementById("div").innerHTML = "新内容"; // 修改表单值 document.getElementById("input").value = "123";7.3 修改 CSS 样式
document.getElementById("div").style.color = "red"; document.getElementById("div").style.backgroundColor = "pink";八、计时函数
8.1 setTimeout
延迟执行一次：
setTimeout(function(){ alert("3秒后执行"); }, 3000);8.2 setInterval
循环执行：
var timer = setInterval(function(){},1000); clearInterval(timer); // 停止总结
本文覆盖了 JavaScript 入门核心知识点：
- JS 基础概念与特点
- 变量、数据类型、运算符
- 函数、事件、内置对象
- DOM 操作与定时器
