当前位置： 首页 > news >正文

JavaScript 入门教程

news 2025/7/26 21:08:31

JavaScript 是当今最流行的编程语言之一，主要用于网页开发，为静态页面添加交互功能。本教程将从零开始，全面介绍 JavaScript 的核心概念和用法，帮助初学者系统掌握这门语言。

一、JavaScript 简介

1.1 JavaScript 的历史

JavaScript 由 Netscape 公司的 Brendan Eich 在 1995 年开发，最初命名为 LiveScript，后因与 Sun 公司（现 Oracle）合作而更名为 JavaScript。1997 年，ECMA（欧洲计算机制造商协会）制定了 JavaScript 的标准规范 ECMA-262，称为 ECMAScript。

重要事实：

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

  • JavaScript 的版权目前归 Oracle 所有

  • ECMAScript 是 JavaScript 的标准规范，JavaScript 是 ECMAScript 的一种实现

1.2 前端开发三大核心技术

现代前端开发建立在三大核心技术之上：

  1. HTML：负责网页的结构和内容

  2. CSS：负责网页的样式和外观

  3. JavaScript：负责网页的行为和交互

三者各司其职，共同构建完整的网页体验。

二、JavaScript 基础

2.1 JavaScript 的引入方式

在 HTML 中使用 JavaScript 有两种主要方式：

  1. 内嵌脚本：

    <script type="text/javascript">alert("Hello World!");
</script>

  2. 外部引入（推荐）：

    <script src="myscript.js"></script>

遵循 Web 标准，建议将结构(HTML)、样式(CSS)和行为(JavaScript)分离，因此通常采用外部引入的方式。

2.2 变量与数据类型

2.2.1 变量声明

JavaScript 是弱类型语言，变量类型由值决定。声明变量使用 var、let 或 const 关键字：

var age = 25;          // 传统方式
let name = "John";     // ES6新增，块级作用域
const PI = 3.14159;    // ES6新增，常量

变量命名规则：

  • 可以包含字母、数字、下划线和美元符号

  • 不能以数字开头

  • 区分大小写

  • 不能使用保留字作为变量名

  • 推荐使用驼峰命名法（如：myVariableName）

2.2.2 数据类型

JavaScript 有 6 种基本数据类型和 1 种复合类型：

类型说明示例
number数字（不区分整型浮点型）var a = 123; var b = 3.14;
string字符串var s = "hello";
boolean布尔值（true/false）var flag = true;
undefined未定义的值var x;（x为undefined）
null空对象引用var obj = null;
symbolES6新增的唯一标识符let sym = Symbol();
object复合类型（对象、数组等）var obj = {name: "John"};

类型转换示例：

var num = "123";
console.log(parseInt(num));    // 字符串转整数：123
console.log(parseFloat("3.14")); // 字符串转浮点数：3.14
console.log(String(123));      // 数字转字符串："123"
console.log(Boolean(1));       // 数字转布尔：true

2.3 运算符

JavaScript 支持多种运算符：

  1. 算术运算符：+ - * / % ++ --

  2. 比较运算符：> >= < <= == === != !==

  3. 逻辑运算符：&& || !

  4. 赋值运算符：= += -= *= /=

特别注意：

  • == 会进行类型转换，=== 不会（推荐使用严格相等 ===）

  • "1" == 1 为 true，但 "1" === 1 为 false

2.4 流程控制

2.4.1 条件语句

if-else：

if (age > 18) {console.log("成年人");
} else {console.log("未成年人");
}

switch：

switch(day) {case 0: console.log("周日"); break;case 1: console.log("周一"); break;// ...default: console.log("无效日期");
}

三元运算符：

var result = score >= 60 ? "及格" : "不及格";
2.4.2 循环语句

for循环：

for (var i = 0; i < 10; i++) {console.log(i);
}

while循环：

var i = 0;
while (i < 10) {console.log(i);i++;
}

数组去重示例：

var arr = [1,2,2,3,4,4,5];
var uniqueArr = [];
for (var i = 0; i < arr.length; i++) {if (uniqueArr.indexOf(arr[i]) === -1) {uniqueArr.push(arr[i]);}
}
console.log(uniqueArr); // [1,2,3,4,5]

三、函数

3.1 函数定义与调用

JavaScript 有多种定义函数的方式：

函数声明：

function add(a, b) {return a + b;
}

函数表达式：

var add = function(a, b) {return a + b;
};

箭头函数（ES6）：

const add = (a, b) => a + b;

立即执行函数(IIFE)：

(function() {console.log("立即执行");
})();

3.2 作用域与闭包

变量作用域：

  • 全局变量：函数外部声明，整个程序可访问

  • 局部变量：函数内部声明，仅函数内可访问

闭包示例：

function outer() {var count = 0;return function() {count++;console.log(count);};
}
var inner = outer();
inner(); // 1
inner(); // 2

3.3 函数参数

JavaScript 函数参数灵活，不检查参数个数和类型：

function logArgs() {console.log(arguments); // 类数组对象，包含所有参数
}
logArgs(1, "a", true);
ES6 剩余参数：javascriptfunction sum(...numbers) {return numbers.reduce((a, b) => a + b);
}
sum(1, 2, 3); // 6

四、对象与数组

4.1 对象

对象创建：

// 对象字面量
var person = {name: "John",age: 30,sayHi: function() {console.log("Hello!");}
};// 构造函数
var person = new Object();
person.name = "John";

对象操作：

// 访问属性
console.log(person.name);    // "John"
console.log(person["age"]);  // 30// 添加/修改属性
person.job = "Developer";// 删除属性
delete person.age;// 遍历属性
for (var key in person) {console.log(key + ": " + person[key]);
}

4.2 数组

数组创建：

var arr1 = [1, 2, 3];           // 字面量
var arr2 = new Array(4, 5, 6);  // 构造函数

数组常用方法：

方法描述示例
push/pop尾部添加/删除元素arr.push(4); arr.pop();
unshift/shift头部添加/删除元素arr.unshift(0); arr.shift();
slice截取子数组arr.slice(1,3)
splice添加/删除元素arr.splice(1,0,"a")
concat合并数组arr1.concat(arr2)
join数组转字符串arr.join("-")
reverse反转数组arr.reverse()
sort数组排序arr.sort()
indexOf查找元素索引arr.indexOf(2)
forEach遍历数组arr.forEach(console.log)
map映射新数组arr.map(x => x*2)
filter过滤数组arr.filter(x => x>2)
reduce累计计算arr.reduce((a,b)=>a+b)

数组示例：

var numbers = [1, 2, 3, 4, 5];// 遍历
numbers.forEach(function(num) {console.log(num);
});// 映射新数组
var doubled = numbers.map(n => n * 2);// 过滤
var evens = numbers.filter(n => n % 2 === 0);// 求和
var sum = numbers.reduce((a, b) => a + b, 0);

五、内置对象

5.1 Date 对象

创建日期对象：

var now = new Date();                   // 当前时间
var someDate = new Date("2023-01-15");  // 指定日期
var timestamp = new Date(1642204800000);// 时间戳创建

常用方法：

now.getFullYear();    // 年
now.getMonth();       // 月(0-11)
now.getDate();        // 日(1-31)
now.getDay();         // 星期(0-6)
now.getHours();       // 时(0-23)
now.getMinutes();     // 分(0-59)
now.getSeconds();     // 秒(0-59)
now.getTime();        // 时间戳(毫秒)

5.2 Math 对象

常用属性和方法：

Math.PI;             // 圆周率
Math.abs(-5);        // 绝对值: 5
Math.ceil(4.1);      // 向上取整: 5
Math.floor(4.9);     // 向下取整: 4
Math.round(4.5);     // 四舍五入: 5
Math.max(1, 3, 2);   // 最大值: 3
Math.min(1, 3, 2);   // 最小值: 1
Math.pow(2, 3);      // 2的3次方: 8
Math.sqrt(9);        // 平方根: 3
Math.random();       // 0-1随机数

5.3 JSON 对象

JSON 与对象转换：

var obj = {name: "John", age: 30};// 对象转JSON字符串
var jsonStr = JSON.stringify(obj);
// 结果: '{"name":"John","age":30}'// JSON字符串转对象
var newObj = JSON.parse(jsonStr);

六、DOM 操作

DOM (Document Object Model) 是 JavaScript 操作网页元素的接口。

6.1 获取元素

// 通过ID获取
var elem = document.getElementById("myId");// 通过类名获取(返回HTMLCollection)
var elems = document.getElementsByClassName("myClass");// 通过标签名获取(返回HTMLCollection)
var divs = document.getElementsByTagName("div");// 通过CSS选择器获取
var firstMatch = document.querySelector(".myClass");
var allMatches = document.querySelectorAll("div.myClass");

6.2 操作元素

修改内容：

elem.innerHTML = "<strong>新内容</strong>"; // 解析HTML
elem.textContent = "纯文本内容";           // 不解析HTML

修改样式：

elem.style.color = "red";
elem.style.fontSize = "20px";// 更好的方式是操作class
elem.classList.add("highlight");
elem.classList.remove("old-class");
elem.classList.toggle("active");

修改属性：

elem.setAttribute("data-id", "123");
var id = elem.getAttribute("data-id");
elem.removeAttribute("data-id");

6.3 事件处理

添加事件监听：

elem.addEventListener("click", function(event) {console.log("点击了元素", event.target);
});// 常见事件：
// click - 点击
// mouseover/mouseout - 鼠标移入/移出
// keydown/keyup - 键盘按下/释放
// focus/blur - 获取/失去焦点
// submit - 表单提交
// load - 资源加载完成

事件对象：

document.addEventListener("click", function(e) {console.log("点击位置:", e.clientX, e.clientY);e.preventDefault(); // 阻止默认行为e.stopPropagation(); // 阻止事件冒泡
});

七、BOM 操作

BOM (Browser Object Model) 是 JavaScript 操作浏览器窗口的接口。

7.1 window 对象

// 窗口尺寸
var width = window.innerWidth;
var height = window.innerHeight;// 打开新窗口
window.open("https://example.com");// 定时器
var timer = setTimeout(function() {console.log("3秒后执行");
}, 3000);// 清除定时器
clearTimeout(timer);// 周期性定时器
var interval = setInterval(function() {console.log("每秒执行一次");
}, 1000);
clearInterval(interval);

7.2 location 对象

// 获取当前URL
var url = location.href;// 重定向
location.href = "https://example.com";
location.assign("https://example.com"); // 记录历史
location.replace("https://example.com"); // 不记录历史// 刷新页面
location.reload();

7.3 navigator 对象

// 浏览器信息
console.log(navigator.userAgent);// 检测插件
if (navigator.plugins["Flash"]) {console.log("支持Flash");
}

7.4 screen 对象

console.log("屏幕分辨率:", screen.width, "x", screen.height);
console.log("可用屏幕大小:", screen.availWidth, "x", screen.availHeight);

八、ES6+ 新特性

8.1 let 和 const

let x = 1;    // 块级作用域变量
const PI = 3.14; // 常量，不可重新赋值

8.2 箭头函数

const add = (a, b) => a + b;// 等同于
const add = function(a, b) {return a + b;
};

8.3 模板字符串

const name = "John";
console.log(`Hello, ${name}!`); // 支持多行和变量插值

8.4 解构赋值

// 数组解构
const [a, b] = [1, 2];// 对象解构
const {name, age} = {name: "John", age: 30};// 函数参数解构
function greet({name, age}) {console.log(`Hello, ${name}, you are ${age}`);
}

8.5 扩展运算符

// 数组展开
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1,2,3,4]// 对象展开
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3}; // {a:1, b:2, c:3}

8.6 Promise 和 async/await

// Promise
function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => resolve("数据加载成功"), 1000);});
}fetchData().then(data => console.log(data)).catch(error => console.error(error));// async/await
async function getData() {try {const data = await fetchData();console.log(data);} catch (error) {console.error(error);}
}

九、最佳实践

9.1 代码风格

  1. 使用一致的缩进（2或4个空格）

  2. 使用分号结束语句

  3. 使用驼峰命名法

  4. 常量使用全大写

  5. 注释清晰，解释复杂逻辑

9.2 性能优化

  1. 减少DOM操作，批量更新

  2. 使用事件委托处理大量元素事件

  3. 避免全局变量污染

  4. 使用节流(throttle)和防抖(debounce)优化频繁事件

9.3 调试技巧

  1. 使用 console.log() 输出调试信息

  2. 使用浏览器开发者工具调试

  3. 使用 debugger 语句设置断点

  4. 使用 try-catch 处理潜在错误

十、学习资源推荐

  1. MDN JavaScript 文档：最权威的 JavaScript 参考

  2. 《JavaScript 高级程序设计》：经典教材

  3. 《你不知道的 JavaScript》：深入理解 JavaScript

  4. ES6 入门教程：阮一峰的在线教程

  5. JavaScript30：30天纯JavaScript挑战项目

通过本教程，你应该对 JavaScript 有了全面的了解。记住，编程最好的学习方式是实践，多写代码，多尝试，逐步提升你的 JavaScript 技能！

http://www.dtcms.com/a/296761.html

相关文章：

  • 【MySQL】MySQL 事务和锁详解
  • Linux应用开发基础知识——进程学习2(exec函数、system函数、popen函数)（三）
  • C语言：20250724笔记（函数-指针）
  • S7-200 SMART 编程基础详解：从语言、数据结构到寻址方式
  • Spring Bean生命周期七步曲：定义、实例化、初始化、使用、销毁
  • C语言（十）
  • 面试150 寻找峰值
  • Leetcode-.42接雨水
  • 【Linux基础知识系列】第六十四篇 - 了解Linux的硬件架构
  • 【学习】数字化车间与智能工厂如何推进制造业转型
  • 放款需要注意的事项
  • C++实战：人脸识别7大核心实例
  • 【Java】空指针(NullPointerException)异常深度攻坚：从底层原理到架构级防御，老司机的实战经验
  • 网络测试工具
  • UE 加载本地Json文件
  • 【Servo】裸机还是RTOS驱动架构如何选？
  • C++核心编程学习--对象特性--对象的初始化和清理
  • MCU（微控制器）中的高电平与低电平？
  • 基于LiteOS的OTA组件实现对终端固件的差分升级和全量升级
  • Rust与YOLO目标检测实战
  • 【redis其它面试问题】
  • 【OD机试】矩阵匹配
  • JavaScript高级特性与优化全解析
  • JManus Plan-Act模式：如何对用户的需求进行规划和执行
  • 【第五节】列表渲染
  • p5.js 椭圆的用法：从基础到创意应用
  • Java 实现 B/S 架构详解：从基础到实战，彻底掌握浏览器/服务器编程
  • 北京-4年功能测试2年空窗-报培训班学测开-第五十九天-模拟面试前
  • 前端学习日记（十二）
  • MongoDB常用场景