跳到主要内容JavaScript 前端开发：从入门到精通 | 极客日志JavaScript大前端
JavaScript 前端开发：从入门到精通
JavaScript 前端开发基础涵盖了变量数据类型、运算符与控制结构、函数与作用域、DOM 操作及事件处理等核心内容。文章介绍了 let 和 const 声明方式，逻辑与算术运算符的使用，以及 for 循环和条件判断语句。函数部分阐述了定义调用、作用域规则及闭包概念。DOM 操作章节演示了通过类名、标签名、ID 获取元素，修改属性样式及增删元素的方法。事件处理部分讲解了点击、表单提交、键盘鼠标等常见事件的监听与响应机制，为构建交互式网页提供基础技术支撑。
KernelLab2 浏览 引言
在当今的互联网世界中，前端开发扮演着至关重要的角色。而 JavaScript 无疑是前端开发领域的核心技术之一。它就像一把神奇的钥匙，打开了创建交互式网页的大门。无论是炫酷的动画效果、动态的数据更新，还是复杂的用户交互逻辑，JavaScript 都能轻松应对。从简单的网页表单验证到构建大型的单页面应用程序（SPA），JavaScript 的应用场景无处不在。
JavaScript 基础
变量与数据类型
数据类型
JavaScript 有多种数据类型，包括基本数据类型和复杂数据类型。基本数据类型有：Number：用于表示数字，包括整数和浮点数。例如：let num = 42; 或 let floatNum = 3.14;。String：用于表示文本。可以使用单引号或双引号来创建字符串。例如：let str = 'Hello, JavaScript!'; 或 let anotherStr = "This is also a string."。Boolean：只有两个值 true 和 false，用于表示逻辑值。例如：let isTrue = true;。Null：表示一个空值。例如：let emptyValue = null;。Undefined：当一个变量声明但未赋值时，其值为 undefined。例如：let undef; console.log(undef); // 输出 undefined。
复杂数据类型主要有：Array：用于存储一组有序的值。例如：let fruits = ['apple', 'banana', 'cherry'];。
Object：这是 JavaScript 中最复杂的数据类型。对象可以包含多个属性和方法。例如：
let person = { name: 'John', age: 30, sayHello: function() { console.log('Hello!'); } };
变量声明
在 JavaScript 中，我们可以使用 var、let 和 const 来声明变量。var 是早期的变量声明方式，它存在变量提升的问题。例如：
console.log(a);
var a = 5;
let 和 const 是 ES6 引入的新方式。let 声明的变量不存在变量提升，且不允许在相同作用域内重复声明。const 用于声明常量，一旦赋值就不能再修改。
console.log(b);
b = ;
c = ;
c = ;
微信扫一扫，关注极客日志
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具
- 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
let
10
const
20
30
运算符
逻辑运算符
逻辑运算符包括与（&&）、或（||）和非（!）。&& 运算符当两个操作数都为真时返回真，|| 运算符当至少一个操作数为真时返回真，! 运算符用于取反。例如：
let a = true;
let b = false;
console.log(a && b);
console.log(a || b);
console.log(!a);
比较运算符
比较运算符用于比较两个值，返回一个布尔值。包括等于（==）、不等于（!=）、全等（===）、不全等（!==）、大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。全等运算符会比较值和数据类型，而等于运算符只比较值。例如：
console.log(5 == '5');
console.log(5 === '5');
算术运算符
JavaScript 中的算术运算符包括加（+）、减（-）、乘（*）、除（/）和取模（%）。需要注意的是，加法运算符在处理字符串时会进行字符串拼接。例如：
let num1 = 5;
let num2 = 3;
console.log(num1 + num2);
let str1 = 'Hello, ';
let str2 = 'world!';
console.log(str1 + str2);
控制结构
循环语句（for、while、do - while）
do - while 循环：与 while 循环类似，但会先执行一次代码块再检查条件。例如：
let k = 0;
do {
console.log(k);
k++;
} while (k < 2);
while 循环：在条件为真时持续执行代码块。例如：
let j = 0;
while (j < 3) {
console.log(j);
j++;
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
条件语句（if - else）
if - else 语句用于根据条件执行不同的代码块。例如：
let score = 80;
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
函数
函数定义与调用
函数是 JavaScript 中的重要组成部分，可以将一段可重复使用的代码封装起来。函数可以使用函数声明或函数表达式来定义。
let multiply = function(num1, num2) { return num1 * num2; };
console.log(multiply(2, 4));
函数可以有参数和返回值。参数是函数接收外部传入的值，返回值是函数执行后返回的结果。
function add(num1, num2) { return num1 + num2; }
console.log(add(3, 5));
函数作用域
JavaScript 中的函数有自己的作用域。在函数内部定义的变量在函数外部是不可访问的，而在函数外部定义的变量在函数内部如果没有同名变量则可以访问。
闭包
闭包是 JavaScript 中一个比较高级但非常重要的概念。它允许函数访问其定义时所在的词法作用域，即使在函数在其词法作用域之外被执行时。
function outerFunction() {
let count = 0;
function innerFunction() {
count++;
return count;
}
return innerFunction;
}
DOM 操作
DOM 简介
DOM（Document Object Model）是文档对象模型，它将 HTML 文档表示为一个树形结构。在 JavaScript 中，我们可以通过 DOM API 来操作 HTML 元素，如获取元素、修改元素属性、添加或删除元素等。
获取元素
通过类名获取元素
document.getElementsByClassName 方法用于获取具有特定类名的所有元素。例如：
<!DOCTYPE html>
<html>
<body>
<div class="myClass">类名为 myClass 的 div 1</div>
<div class="myClass">类名为 myClass 的 div 2</div>
<script>
let myClassElements = document.getElementsByClassName('myClass');
for (let i = 0; i < myClassElements.length; i++) {
console.log(myClassElements[i].innerHTML);
}
</script>
</body>
</html>
通过标签名获取元素
使用 document.getElementsByTagName 方法可以获取指定标签名的所有元素。例如：
<!DOCTYPE html>
<html>
<body>
<p>段落 1</p>
<p>段落 2</p>
<script>
let paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerHTML);
}
</script>
</body>
</html>
通过 ID 获取元素
可以使用 document.getElementById 方法来获取具有特定 ID 的元素。例如：
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">这是一个 div 元素</div>
<script>
let myDiv = document.getElementById('myDiv');
console.log(myDiv.innerHTML);
</script>
</body>
</html>
修改元素属性
可以通过 JavaScript 来修改元素的各种属性，如修改元素的样式、内容等。
修改内容
可以使用 innerHTML 属性来修改元素的内容。例如：
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">原始内容</div>
<script>
let myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '新内容';
</script>
</body>
</html>
修改样式
可以直接修改元素的 style 属性来改变其样式。例如：
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">原始 div</div>
<script>
let myDiv = document.getElementById('myDiv');
myDiv.style.backgroundColor = 'blue';
myDiv.style.width = '200px';
</script>
</body>
</html>
添加和删除元素
删除元素
可以使用 parentNode.removeChild 方法来删除一个元素。例如：
<!DOCTYPE html>
<html>
<body>
<div id="parentDiv">
<div id="childDiv">要删除的 div</div>
</div>
<script>
let childDiv = document.getElementById('childDiv');
let parentDiv = document.getElementById('parentDiv');
parentDiv.removeChild(childDiv);
</script>
</body>
</html>
添加元素
可以使用 document.createElement 创建新元素，然后使用 appendChild 方法将其添加到父元素中。例如：
<!DOCTYPE html>
<html>
<body>
<div id="parentDiv"></div>
<script>
let parentDiv = document.getElementById('parentDiv');
let newDiv = document.createElement('div');
newDiv.innerHTML = '新创建的 div';
parentDiv.appendChild(newDiv);
</script>
</body>
</html>
事件处理
事件简介
事件是用户与网页交互时产生的动作，如点击、鼠标移动、键盘按键等。JavaScript 可以通过事件处理程序来响应这些事件。
添加事件处理程序
内联方式
可以在 HTML 元素的属性中直接添加事件处理程序。不过这种方式将 JavaScript 代码与 HTML 代码混合，不利于维护，一般不推荐使用。
脚本方式
可以使用 JavaScript 在脚本中为元素添加事件处理程序。这里使用了 addEventListener 方法，它可以为元素添加多个相同类型的事件处理程序，并且可以更好地控制事件的传播。
常见事件类型
表单事件
对于表单元素，有 submit（表单提交）、change（表单元素值改变）等事件。例如：
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<input type="text" id="myInput">
<input type="submit" value="提交">
</form>
<script>
let myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
event.preventDefault();
console.log('表单提交');
});
let myInput = document.getElementById('myInput');
myInput.addEventListener('change', function() {
console.log('输入框内容改变');
});
</script>
</body>
</html>
这里在表单的 submit 事件处理程序中使用了 event.preventDefault 方法来阻止表单的默认提交行为。
键盘事件
键盘事件有 keydown（键盘按键按下）、keyup（键盘按键松开）等。例如：
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myInput">
<script>
let myInput = document.getElementById('myInput');
myInput.addEventListener('keydown', function(event) {
console.log('按下的键码:', event.keyCode);
});
</script>
</body>
</html>
鼠标事件
常见的鼠标事件包括 click（点击）、mouseover（鼠标移到元素上）、mouseout（鼠标移出元素）等。例如：
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">鼠标悬停测试</div>
<script>
let myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseover', function() {
this.style.backgroundColor = 'blue';
});
myDiv.addEventListener('mouseout', function() {
this.style.backgroundColor = 'red';
});
</script>
</body>
</html>
