【JavaWeb】JavaScript 零基础入门详解
目录
前言：
什么是 JavaScript？
JavaScript 简称 JS，是一门弱类型、解释型、客户端脚本语言，也是前端唯一的交互语言。
在前端三层架构中各司其职：
HTML（结构）：定义网页有什么内容（骨架）
CSS（样式）：定义网页长什么样子（颜值）
JavaScript（行为）：定义网页能做什么（交互、动态、逻辑、动作）
没有JS的网页是静态死页，有JS的网页才是动态活页。我们日常的点击弹窗、轮播图、表单验证、输入实时变化、下拉加载，全部由JS实现。
一、JavaScript 核心语法
1.1 JS 的三种引入方式
想要网页识别并执行JS代码，必须先正确引入，三种方式各有使用场景。
1、行内引入（写在标签上）
直接在HTML标签的事件属性中书写JS代码。
<!-- 点击触发弹窗 -->
<button onclick="alert('点击成功')">点击按钮</button>优点：写法简单、快速调试
致命缺点：结构与逻辑混杂、完全无法复用、不利于维护、不符合前端规范
使用场景：仅新手临时测试，企业项目禁止使用
2、内部引入（script标签）
在HTML页面中通过 <script> 标签包裹JS代码，新手练习首选，适合单页面简单效果。
最佳放置位置：</body> 结束标签之前（避免页面DOM还没加载完成，JS代码执行报错）
<body>
<h2>内部JS测试</h2>
<!-- JS代码写在这里 -->
<script>
// 浏览器弹窗输出
alert('页面加载完成！');
// 控制台输出（调试专用）
console.log('新手入门JS');
</script>
</body>3、外部引入（独立JS文件，企业开发标准）
单独创建 .js 后缀文件，HTML通过script标签引入，实现 结构、样式、逻辑三层完全分离。
步骤1：新建 index.js 文件，写入JS代码
console.log('外部JS文件引入成功！');步骤2：HTML页面引入文件
<script src="index.js"></script>核心优势：代码复用、多页面共用、结构清晰、便于维护
注意：外部引入的script标签，中间不能写代码，写了也不执行
引入方式优先级总结
行内JS > 内部JS > 外部JS，优先级高的代码会优先执行、覆盖低优先级样式/逻辑
1.2 JS 变量
1、变量是什么？
变量是存储数据的容器，程序运行中会频繁读取、修改、存储数据，所有动态数据都必须依靠变量存储。
变量工作流程：声明变量 → 赋值变量 → 调用/修改变量
2、变量声明三种方式
// 1. var：老式声明（全局变量，存在变量提升，不推荐）
var name = "小明";
// 2. let：新式声明（块级变量，可修改，常用）
let age = 18;
// 3. const：常量（固定不变，不可修改，必须初始化）
const PI = 3.14159;3、变量命名规范
-
由字母、数字、下划线、$组成，不能以数字开头
-
不能使用JS关键字（let、var、const、function等）
-
区分大小写（name 和 Name 是两个不同变量）
-
推荐使用小驼峰命名：userName、userAge
-
语义化命名，见名知意，禁止随意命名a、b、c
4、变量作用域
-
全局变量：函数外声明，整个页面任意位置可访问
-
局部变量：函数/代码块内声明，仅当前代码块可访问
-
块级作用域：let/const 自带，大括号{}内有效，解决全局污染
1.3 JS 六大基础数据类型
JS中所有数据都分类型，不同类型数据的操作方式不同。
分为 基本数据类型（5种）+ 引用数据类型（1种）
1、String 字符串
所有文本内容，必须用 单引号/双引号/反引号 包裹
let str1 = "前端开发";
let str2 = 'JS入门教程';
let str3 = `模板字符串${str1}`;2、Number 数字类型
包含整数、小数、负数、NaN
let num1 = 100;
let num2 = 99.9;
let num3 = -66;
let notNum = NaN; // 非数字，运算失败结果3、Boolean 布尔类型
只有两个值：true（真）、false（假），用于判断条件、开关状态
let isLogin = true;
let isShow = false;4、Undefined 未定义
变量只声明、未赋值时的默认值
let test;
console.log(test); // 输出 undefined5、Null 空值
手动赋值的空对象，代表「空、无」，用于清空变量数据
let data = null;6、Object 对象（引用类型）
复杂数据类型，包含：自定义对象、数组、函数、JSON，是JS核心
数据类型转换
1、隐式转换（浏览器自动转换）
console.log(10 + "20"); // 拼接字符串 1020
console.log(10 - "20"); // 自动转数字 -102、显式转换（手动转换）
// 转数字
Number("123");
// 转字符串
String(123);
// 转布尔值
Boolean(0);1.4 JS 函数
1、函数是什么？
函数是封装一段可重复执行的代码块，一段代码需要多次使用时，直接封装成函数，调用即可执行，大幅减少冗余代码，是代码复用的核心。
2、函数基础语法
// 函数声明
function 函数名(形参1,形参2){
// 函数体：功能逻辑
return 返回值; // 终止函数、向外返回结果
}
// 函数调用
函数名(实参1,实参2);3、完整实操案例
// 封装求和函数
function getSum(a,b){
return a + b;
}
// 调用函数
let res = getSum(10,20);
console.log(res); // 输出304、参数与返回值详解
-
形参：函数定义时的变量，用于接收数据
-
实参：函数调用时传入的真实数据
-
return：返回结果，同时终止函数执行，后面代码不执行
-
无return时，函数默认返回 undefined
5、函数分类
1. 普通函数：自定义功能，可传参、可返回值
function sum(a,b){
return a + b;
}2. 匿名函数：无函数名，多用于事件、定时器
let fn = function(){
console.log("匿名函数");
}箭头函数：ES6简化写法，简洁高效（常用）
// 箭头函数简化
const getSum = (a,b) => a + b;1.5 自定义对象 & JSON
1、自定义对象
对象以 键值对（key: value） 存储数据，用于描述一个完整事物的所有属性和行为。
// 自定义用户对象
let user = {
name: "李四",
age: 22,
gender: "男",
// 对象方法
sayHi: function(){
console.log("你好");
}
};
// 1. 读取属性两种方式
console.log(user.name);
console.log(user["age"]);
// 2. 修改属性
user.age = 23;
// 3. 新增属性
user.height = 180;
// 4. 删除属性
delete user.gender;对象遍历：
// 遍历对象所有属性
for(let key in user){
console.log(key, user[key]);
}2、JSON 数据格式
JSON （前后端交互标准）是 标准化、纯数据 的JS对象，是浏览器与服务器传输数据的唯一通用格式。
JSON 严格规范
所有键名必须双引号包裹
不能写注释
不能存放函数、undefined
格式极其严谨，错一个符号全部失效
// 标准JSON数据
let jsonData = {
"username": "test",
"password": "123456",
"status": true
};
// 核心转换方法（项目高频）
// 1. JS对象 => JSON字符串（传给后端）
let jsonStr = JSON.stringify(user);
// 2. JSON字符串 => JS对象（后端返回数据解析）
let jsObj = JSON.parse(jsonStr);1.6 DOM 文档对象模型
1、DOM 是什么？
DOM（Document Object Model）文档对象模型：
浏览器会把整个HTML页面，解析为一棵DOM树形结构，页面所有标签、文本、属性都是节点，JS可通过DOM对页面实现 增、删、改、查 所有操作。
2、DOM 四大核心能力
-
获取页面元素
-
修改元素内容、样式、属性
-
创建、新增、删除页面元素
-
绑定页面事件交互
3、最全获取元素方式
// 1. 根据ID获取（唯一元素）
let box = document.getElementById("box");
// 2. 根据类名获取（HTML集合）
let list = document.getElementsByClassName("list");
// 3. 根据标签名获取
let pList = document.getElementsByTagName("p");
// 4. 超级选择器（推荐！支持CSS选择器语法）
let one = document.querySelector(".box"); // 获取第一个
let all = document.querySelectorAll(".item"); // 获取所有4、DOM 完整操作合集
// 1. 修改文本内容
box.innerText = "纯文本内容";
// 2. 修改HTML结构内容
box.innerHTML = "<span style='color:red'>带样式文本</span>";
// 3. 修改行内样式
box.style.color = "#1677ff";
box.style.fontSize = "18px";
box.style.backgroundColor = "#f5f5f5";
// 4. 操作元素属性
box.setAttribute("title","我是标题"); // 设置属性
box.getAttribute("title"); // 获取属性
box.removeAttribute("title"); // 删除属性
// 5. 新增元素
let newP = document.createElement("p");
newP.innerText = "新增段落";
document.body.appendChild(newP);
// 6. 删除元素
box.remove();二、JS 事件监听与模块化优化
2.1 事件监听完整原理与语法
1、事件三要素
-
事件源：谁触发事件（按钮、盒子、输入框）
-
事件类型：触发什么行为（点击、移入、输入、滚动）
-
事件处理函数：触发后执行什么代码
2、标准事件监听语法
// 事件源.addEventListener(事件类型, 回调函数)
let btn = document.querySelector("button");
btn.addEventListener("click", function(){
alert("按钮点击触发成功");
});3、事件监听优势
-
支持多个同名事件叠加执行
-
结构与逻辑完全分离
-
支持事件解绑，可控性强
4、事件解绑
btn.removeEventListener("click", 函数名);2.2 前端最常用的8大事件
整理开发高频使用的事件，覆盖90%日常交互场景：
// 1. click 鼠标点击
btn.addEventListener('click', ()=>{});
// 2. mouseover 鼠标移入
box.addEventListener('mouseover', ()=>{});
// 3. mouseout 鼠标移出
box.addEventListener('mouseout', ()=>{});
// 4. input 输入框实时输入
input.addEventListener('input', ()=>{});
// 5. focus 输入框聚焦
input.addEventListener('focus', ()=>{});
// 6. blur 输入框失焦
input.addEventListener('blur', ()=>{});
// 7. scroll 页面滚动
window.addEventListener('scroll', ()=>{});
// 8. resize 窗口大小改变
window.addEventListener('resize', ()=>{});2.3 常见事件的问题与优化（JS模块化）
1、新手写事件的常见弊端
新手开发时，所有JS逻辑、事件、函数全部写在一个文件中，会出现严重问题：
-
代码混乱堆砌、难以维护
-
全局变量过多，变量命名冲突
-
代码复用率低、冗余严重
-
事件绑定杂乱，难以统一管理
2、解决方案：JS 模块化思想
模块化核心思维：将不同功能的代码，拆分、封装成独立模块，各司其职，互不干扰，实现 高复用、低耦合、易维护。
简单说：一个功能对应一个模块，拆分混乱代码，统一管理事件与逻辑。
3、入门级模块化实战优化
将页面所有交互逻辑，封装成对象模块，统一管理事件、方法，彻底解决代码混乱问题。
// 页面功能模块化封装
const PageModule = {
// 初始化所有事件
init(){
this.bindClickEvent();
this.bindHoverEvent();
},
// 封装点击事件
bindClickEvent(){
let btn = document.querySelector(".btn");
btn.addEventListener('click', ()=>{
alert('模块化点击事件');
})
},
// 封装悬浮事件
bindHoverEvent(){
let box = document.querySelector(".box");
box.addEventListener('mouseover', ()=>{
box.style.background = "#eee";
})
}
};
// 页面加载完成后初始化模块
window.onload = function(){
PageModule.init();
}4、模块化核心优势
-
解决变量污染：所有变量、方法都在模块内部，不会全局冲突
-
代码结构清晰：按功能拆分，一眼看懂代码逻辑
-
高度复用：模块方法可反复调用
-
便于维护迭代：修改某个功能，只需修改对应模块
5、进阶ES6模块化（企业开发标准）
真正项目开发中，使用 export / import 实现文件级模块化，拆分多个JS文件：
模块导出（module.js）
// 导出方法
export function getSum(a,b){
return a+b;
}模块导入（index.js）
// 导入模块方法
import { getSum } from './module.js';
三、JS 核心知识点总结
-
JS引入方式：行内、内部、外部（项目优先外部引入）
-
变量：let/const 新标准，语义化命名，规避全局污染
-
数据类型：五大基本类型 + Object引用类型，JSON是前后端交互核心
-
函数：代码复用核心，封装重复逻辑，支持传参和返回值
-
DOM操作：JS操控网页的核心，实现内容、样式、元素增删改查
-
事件监听：实现网页交互，掌握点击、移入、输入等常用事件
-
模块化优化：解决代码混乱、变量冲突，是前端工程化的基础
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)