目录前言什么是 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 自定义对象 JSON1、自定义对象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 核心知识点总结前言什么是 JavaScriptJavaScript 简称JS是一门弱类型、解释型、客户端脚本语言也是前端唯一的交互语言。在前端三层架构中各司其职HTML结构定义网页有什么内容骨架CSS样式定义网页长什么样子颜值JavaScript行为定义网页能做什么交互、动态、逻辑、动作没有JS的网页是静态死页有JS的网页才是动态活页。我们日常的点击弹窗、轮播图、表单验证、输入实时变化、下拉加载全部由JS实现。一、JavaScript 核心语法1.1 JS 的三种引入方式想要网页识别并执行JS代码必须先正确引入三种方式各有使用场景。1、行内引入写在标签上直接在HTML标签的事件属性中书写JS代码。!-- 点击触发弹窗 -- button onclickalert(点击成功)点击按钮/button优点写法简单、快速调试致命缺点结构与逻辑混杂、完全无法复用、不利于维护、不符合前端规范使用场景仅新手临时测试企业项目禁止使用2、内部引入script标签在HTML页面中通过script标签包裹JS代码新手练习首选适合单页面简单效果。最佳放置位置/body结束标签之前避免页面DOM还没加载完成JS代码执行报错body h2内部JS测试/h2 !-- JS代码写在这里 -- script // 浏览器弹窗输出 alert(页面加载完成); // 控制台输出调试专用 console.log(新手入门JS); /script /body3、外部引入独立JS文件企业开发标准单独创建.js后缀文件HTML通过script标签引入实现结构、样式、逻辑三层完全分离。步骤1新建index.js文件写入JS代码console.log(外部JS文件引入成功);步骤2HTML页面引入文件script srcindex.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、c4、变量作用域全局变量函数外声明整个页面任意位置可访问局部变量函数/代码块内声明仅当前代码块可访问块级作用域let/const 自带大括号{}内有效解决全局污染1.3 JS 六大基础数据类型JS中所有数据都分类型不同类型数据的操作方式不同。分为基本数据类型5种 引用数据类型1种1、String 字符串所有文本内容必须用单引号/双引号/反引号包裹let str1 前端开发; let str2 JS入门教程; let str3 模板字符串${str1};2、Number 数字类型包含整数、小数、负数、NaNlet 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时函数默认返回undefined5、函数分类1. 普通函数自定义功能可传参、可返回值function sum(a,b){ return a b; }2. 匿名函数无函数名多用于事件、定时器let fn function(){ console.log(匿名函数); }箭头函数ES6简化写法简洁高效常用// 箭头函数简化 const getSum (a,b) a b;1.5 自定义对象 JSON1、自定义对象对象以键值对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 是什么DOMDocument 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 stylecolor: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 ab; }模块导入index.js// 导入模块方法 import { getSum } from ./module.js;三、JS 核心知识点总结JS引入方式行内、内部、外部项目优先外部引入变量let/const 新标准语义化命名规避全局污染数据类型五大基本类型 Object引用类型JSON是前后端交互核心函数代码复用核心封装重复逻辑支持传参和返回值DOM操作JS操控网页的核心实现内容、样式、元素增删改查事件监听实现网页交互掌握点击、移入、输入等常用事件模块化优化解决代码混乱、变量冲突是前端工程化的基础
【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 自定义对象 JSON1、自定义对象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 核心知识点总结前言什么是 JavaScriptJavaScript 简称JS是一门弱类型、解释型、客户端脚本语言也是前端唯一的交互语言。在前端三层架构中各司其职HTML结构定义网页有什么内容骨架CSS样式定义网页长什么样子颜值JavaScript行为定义网页能做什么交互、动态、逻辑、动作没有JS的网页是静态死页有JS的网页才是动态活页。我们日常的点击弹窗、轮播图、表单验证、输入实时变化、下拉加载全部由JS实现。一、JavaScript 核心语法1.1 JS 的三种引入方式想要网页识别并执行JS代码必须先正确引入三种方式各有使用场景。1、行内引入写在标签上直接在HTML标签的事件属性中书写JS代码。!-- 点击触发弹窗 -- button onclickalert(点击成功)点击按钮/button优点写法简单、快速调试致命缺点结构与逻辑混杂、完全无法复用、不利于维护、不符合前端规范使用场景仅新手临时测试企业项目禁止使用2、内部引入script标签在HTML页面中通过script标签包裹JS代码新手练习首选适合单页面简单效果。最佳放置位置/body结束标签之前避免页面DOM还没加载完成JS代码执行报错body h2内部JS测试/h2 !-- JS代码写在这里 -- script // 浏览器弹窗输出 alert(页面加载完成); // 控制台输出调试专用 console.log(新手入门JS); /script /body3、外部引入独立JS文件企业开发标准单独创建.js后缀文件HTML通过script标签引入实现结构、样式、逻辑三层完全分离。步骤1新建index.js文件写入JS代码console.log(外部JS文件引入成功);步骤2HTML页面引入文件script srcindex.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、c4、变量作用域全局变量函数外声明整个页面任意位置可访问局部变量函数/代码块内声明仅当前代码块可访问块级作用域let/const 自带大括号{}内有效解决全局污染1.3 JS 六大基础数据类型JS中所有数据都分类型不同类型数据的操作方式不同。分为基本数据类型5种 引用数据类型1种1、String 字符串所有文本内容必须用单引号/双引号/反引号包裹let str1 前端开发; let str2 JS入门教程; let str3 模板字符串${str1};2、Number 数字类型包含整数、小数、负数、NaNlet 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时函数默认返回undefined5、函数分类1. 普通函数自定义功能可传参、可返回值function sum(a,b){ return a b; }2. 匿名函数无函数名多用于事件、定时器let fn function(){ console.log(匿名函数); }箭头函数ES6简化写法简洁高效常用// 箭头函数简化 const getSum (a,b) a b;1.5 自定义对象 JSON1、自定义对象对象以键值对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 是什么DOMDocument 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 stylecolor: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 ab; }模块导入index.js// 导入模块方法 import { getSum } from ./module.js;三、JS 核心知识点总结JS引入方式行内、内部、外部项目优先外部引入变量let/const 新标准语义化命名规避全局污染数据类型五大基本类型 Object引用类型JSON是前后端交互核心函数代码复用核心封装重复逻辑支持传参和返回值DOM操作JS操控网页的核心实现内容、样式、元素增删改查事件监听实现网页交互掌握点击、移入、输入等常用事件模块化优化解决代码混乱、变量冲突是前端工程化的基础
