【JavaWeb】JavaScript 零基础入门详解-二趣网

前言：

什么是 JavaScript？

一、JavaScript 核心语法

1.1 JS 的三种引入方式

1、行内引入（写在标签上）

2、内部引入（script标签）

3、外部引入（独立JS文件，企业开发标准）

引入方式优先级总结

1.2 JS 变量

1、变量是什么？

2、变量声明三种方式

3、变量命名规范

4、变量作用域

1.3 JS 六大基础数据类型

1、String 字符串

2、Number 数字类型

3、Boolean 布尔类型

4、Undefined 未定义

5、Null 空值

6、Object 对象（引用类型）

数据类型转换

1、隐式转换（浏览器自动转换）

2、显式转换（手动转换）

1.4 JS 函数

1、函数是什么？

2、函数基础语法

3、完整实操案例

4、参数与返回值详解

5、函数分类

1.5 自定义对象 & JSON

1、自定义对象

2、JSON 数据格式

JSON 严格规范

1.6 DOM 文档对象模型

1、DOM 是什么？

2、DOM 四大核心能力

3、最全获取元素方式

4、DOM 完整操作合集

二、JS 事件监听与模块化优化

2.1 事件监听完整原理与语法

1、事件三要素

2、标准事件监听语法

3、事件监听优势

4、事件解绑

2.2 前端最常用的8大事件

2.3 常见事件的问题与优化（JS模块化）

1、新手写事件的常见弊端

2、解决方案：JS 模块化思想

3、入门级模块化实战优化

4、模块化核心优势

5、进阶ES6模块化（企业开发标准）

三、JS 核心知识点总结

前言：

什么是 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); // 输出 undefined

5、Null 空值

手动赋值的空对象，代表「空、无」，用于清空变量数据

let data = null;

6、Object 对象（引用类型）

复杂数据类型，包含：自定义对象、数组、函数、JSON，是JS核心

数据类型转换

1、隐式转换（浏览器自动转换）

console.log(10 + "20"); // 拼接字符串 1020 console.log(10 - "20"); // 自动转数字 -10

2、显式转换（手动转换）

// 转数字 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); // 输出30

4、参数与返回值详解

形参：函数定义时的变量，用于接收数据
实参：函数调用时传入的真实数据
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操控网页的核心，实现内容、样式、元素增删改查
事件监听：实现网页交互，掌握点击、移入、输入等常用事件
模块化优化：解决代码混乱、变量冲突，是前端工程化的基础

企业官网建设流程全解析

前言：

什么是 JavaScript？

一、JavaScript 核心语法

1.1 JS 的三种引入方式

1、行内引入（写在标签上）

2、内部引入（script标签）

3、外部引入（独立JS文件，企业开发标准）

引入方式优先级总结

1.2 JS 变量

1、变量是什么？

2、变量声明三种方式

3、变量命名规范

4、变量作用域

1.3 JS 六大基础数据类型

1、String 字符串

2、Number 数字类型

3、Boolean 布尔类型

4、Undefined 未定义

5、Null 空值

6、Object 对象（引用类型）

数据类型转换

1、隐式转换（浏览器自动转换）

2、显式转换（手动转换）

1.4 JS 函数

1、函数是什么？

2、函数基础语法

3、完整实操案例

4、参数与返回值详解

5、函数分类

1.5 自定义对象 & JSON

1、自定义对象

2、JSON 数据格式

JSON 严格规范

1.6 DOM 文档对象模型

1、DOM 是什么？

2、DOM 四大核心能力

3、最全获取元素方式

4、DOM 完整操作合集

二、JS 事件监听与模块化优化

2.1 事件监听完整原理与语法

1、事件三要素

2、标准事件监听语法

3、事件监听优势

4、事件解绑

2.2 前端最常用的8大事件

2.3 常见事件的问题与优化（JS模块化）

1、新手写事件的常见弊端

2、解决方案：JS 模块化思想

3、入门级模块化实战优化

4、模块化核心优势

5、进阶ES6模块化（企业开发标准）

三、JS 核心知识点总结

热门文章

文章分类

标签云

相关文章

告别网盘限速：LinkSwift 终极下载助手完全指南

StardewPlanner：基于网格化约束的可视化农场规划系统架构解析

显存优化解码：ComfyUI-WanVideoWrapper如何让8GB显卡也能生成高清视频

需要专业的网站建设服务？