JS基础知识（第十五天）
一，前言
今天学JS，第三天。
二，JS简介和导入方式
一，简介
JavaScript（简称 JS）是一种广泛使用的高级编程语言，主要用于 Web 开发。它最初由 Netscape 公司的 Brendan Eich 在 1995 年创建，最初命名为 LiveScript，后更名为 JavaScript。尽管名字相似，但 JavaScript 与 Java 没有直接关系。
主要特点
- 客户端脚本语言：可在浏览器中直接执行，实现网页交互效果
- 动态类型：变量类型不需要预先声明
- 面向对象：支持基于原型的对象模型
- 事件驱动：适合处理用户交互和网页事件
- 跨平台：在所有现代浏览器中都得到支持
- 灵活：可用于前端、后端 (Node.js)、移动应用等多种场景
核心用途
- 实现网页交互功能（表单验证、动画效果等）
- 动态修改网页内容（DOM 操作）
- 处理异步请求（AJAX、Fetch API）
- 构建复杂的单页应用（SPA）
- 服务器端编程（Node.js）
- 移动应用开发（React Native、Ionic）
二，导入方式
JavaScript 的导入方式
JavaScript 代码可以通过多种方式添加到 HTML 文档中：
1. 内联脚本
直接将 JavaScript 代码放在 HTML 文件的<script>标签内：
<!DOCTYPE html>
<html>
<head><title>内联脚本示例</title>
</head>
<body><button id="myButton">点击我</button><script>// 内联JavaScript代码document.getElementById("myButton").addEventListener("click", function() {alert("按钮被点击了！");});</script>
</body>
</html>
2. 外部脚本文件
将 JavaScript 代码保存为单独的.js 文件，然后在 HTML 中通过<script>标签的 src 属性引入：
<!DOCTYPE html>
<html>
<head><title>外部脚本示例</title>
</head>
<body><button id="myButton">点击我</button><!-- 引入外部JavaScript文件 --><script src="script.js"></script>
</body>
</html>
三，JS基础语法
一，JavaScript 变量和数据类型
JavaScript 是一种动态类型语言，变量在使用前不需要声明类型，类型会在运行时自动确定。下面介绍 JavaScript 中的变量声明和数据类型。
变量声明
在 JavaScript 中，有三种方式声明变量：
1. 使用 var 关键字
var name = "John";
var age = 30;
var isStudent = false;
- 函数作用域：变量在整个函数内可见
- 存在变量提升：可以在声明前访问（值为 undefined）
- 可以重复声明
- 在 ES6 后，var 的使用逐渐减少
2. 使用 let 关键字（ES6 引入）
let name = "John";
let age = 30;
let isStudent = false;
- 块级作用域：变量只在声明它的块（{}）内可见
- 不存在变量提升：不能在声明前访问
- 不允许重复声明（在同一作用域内）
- 推荐用于大多数变量声明
3. 使用 const 关键字（ES6 引入）
声明常量
const PI = 3.14159;
const user = { name: "John", age: 30 };
- 块级作用域
- 声明时必须赋值，且不能重新赋值（但对象属性可以修改）
- 推荐用于常量和不需要重新赋值的变量
数据类型
JavaScript 有两种数据类型：
基本数据类型
基本数据类型是不可变的，直接存储在栈内存中。
- Number：数字类型，包括整数和浮点数
let num1 = 42; // 整数
let num2 = 3.14; // 浮点数
let num3 = 1.23e5; // 科学计数法 (1.23 * 10^5)
let num4 = NaN; // 非数字
let num5 = Infinity; // 无穷大
- String：字符串类型，表示文本
let str1 = "Hello"; // 双引号
let str2 = 'World'; // 单引号
let str3 = `Hello ${str1}`; // 模板字符串（ES6）
- Boolean：布尔类型，表示真或假
let isTrue = true;
let isFalse = false;
- Null：表示有意的空值
let emptyValue = null;
- Undefined：表示变量已声明但未赋值，或函数没有返回值
let undefinedValue; // 自动赋值为undefined
- Symbol：唯一且不可变的数据类型（ES6 引入）
const id = Symbol("id");
- BigInt：表示任意大的整数（ES2020 引入）
javascript
const bigNum = 9007199254740991n;
引用数据类型
引用数据类型存储在堆内存中，变量保存的是内存地址引用。
Object：通用的无序数据集合
const person = {name: "John",age: 30,hobbies: ["reading", "swimming"],address: {city: "New York",zip: "10001"}
};
Array：有序的数据集合
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "hello", true, {key: "value"}];
Function：可执行的代码块
const greet = function(name) {return `Hello, ${name}!`;
};
Date：处理日期和时间
const today = new Date();
类型检查
可以使用以下方法检查变量的类型：
typeof 运算符：返回基本类型的字符串表示
typeof 42; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"
typeof 123n; // "bigint"
typeof null; // "object" (历史遗留问题)
typeof {}; // "object"
typeof []; // "object"
typeof function(){}; // "function"
instanceof 运算符：检查对象是否是某个构造函数的实例
[] instanceof Array; // true
[] instanceof Object; // true
new Date() instanceof Date; // true
Object.prototype.toString.call()：获取对象的精确类型
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call(new Date()); // "[object Date]"
Array.isArray()：专门检查是否为数组
Array.isArray([]); // true
Array.isArray({}); // false
最佳实践
- 优先使用 const：除非变量需要重新赋值，否则使用 const
- 避免 var：尽量使用 let 和 const 替代 var
- 明确类型转换：避免隐式类型转换，使用显式转换函数
- 类型检查：在关键操作前检查变量类型
- 空值处理：区分 null 和 undefined，避免未定义错误
二，JavaScript 控制语句
控制语句是编程语言中用于控制程序执行流程的基本结构。JavaScript 提供了多种控制语句，用于根据条件执行代码或重复执行代码块。
条件语句
1. if-else 语句
用于基于条件执行不同的代码块：
let age = 18;if (age >= 18) {console.log("成年人");
} else {console.log("未成年人");
}// 多条件分支
if (age < 13) {console.log("儿童");
} else if (age < 18) {console.log("青少年");
} else {console.log("成年人");
}
2. 三元运算符
简化 if-else 语句的简写形式：
let age = 18;
let message = age >= 18 ? "成年人" : "未成年人";
console.log(message); // 成年人
3. switch 语句
用于基于不同条件执行不同代码块：
let day = 3;
let dayName;switch (day) {case 1:dayName = "星期一";break;case 2:dayName = "星期二";break;case 3:dayName = "星期三";break;case 4:dayName = "星期四";break;case 5:dayName = "星期五";break;case 6:case 7: // 多个case共享相同的代码dayName = "周末";break;default:dayName = "无效的日期";
}console.log(dayName); // 星期三
循环语句
1. for 循环
用于已知循环次数的情况：
// 标准for循环
for (let i = 0; i < 5; i++) {console.log(i); // 输出: 0, 1, 2, 3, 4
}// 遍历数组
const fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {console.log(fruits[i]);
}// 遍历对象属性（不推荐，更适合用for-in）
const person = { name: "张三", age: 30, city: "北京" };
const keys = Object.keys(person);
for (let i = 0; i < keys.length; i++) {console.log(keys[i] + ": " + person[keys[i]]);
}
2. while 循环
在条件为真时重复执行代码块：
let i = 0;
while (i < 5) {console.log(i); // 输出: 0, 1, 2, 3, 4i++;
}// 注意：如果条件永远为真，会导致无限循环
// while (true) {
// console.log("无限循环");
// }
3. do-while 循环
至少执行一次代码块，然后在条件为真时重复执行：
let i = 0;
do {console.log(i); // 输出: 0, 1, 2, 3, 4i++;
} while (i < 5);// 即使条件一开始就为假，do-while也会执行一次
let j = 10;
do {console.log(j); // 输出: 10j++;
} while (j < 5);
这里就说这么多，跟Java差不多。
四，JS函数
JavaScript 函数
函数是 JavaScript 中的核心概念，它允许你封装代码块以便重复使用。JavaScript 中的函数非常灵活，可以作为变量传递、作为参数接收，甚至可以返回其他函数。
函数定义
JavaScript 有几种定义函数的方式：
1. 函数声明
function greet(name) {return `Hello, ${name}!`;
}console.log(greet("John")); // 输出: Hello, John!
- 函数声明会被提升（hoisted），可以在定义前调用
- 具有函数名，便于调试和递归调用
2. 函数表达式
const greet = function(name) {return `Hello, ${name}!`;
};console.log(greet("John")); // 输出: Hello, John!
- 函数是匿名的（可以有名称用于递归）
- 不会被提升，必须在定义后调用
- 可以作为参数传递给其他函数
3. 箭头函数
const greet = (name) => `Hello, ${name}!`;console.log(greet("John")); // 输出: Hello, John!
- 语法更简洁
- 没有自己的 this、arguments、super 或 new.target
- 适合简单的、无状态的函数
- 不能使用 arguments 对象
- 不能使用 yield 关键字
函数调用
1. 作为函数调用
function greet() {return "Hello!";
}console.log(greet()); // 输出: Hello!
2. 作为方法调用
const person = {name: "John",greet: function() {return `Hello, my name is ${this.name}`;}
};console.log(person.greet()); // 输出: Hello, my name is John
3. 作为构造函数调用
function Person(name) {this.name = name;this.greet = function() {return `Hello, my name is ${this.name}`;};
}const john = new Person("John");
五，JS事件
JavaScript 事件是网页与用户交互的核心机制，它们允许代码对用户行为或浏览器操作做出响应。以下是关于 JS 事件的详细介绍：
1. 事件类型
JS 事件可分为以下几类：
鼠标事件
click：点击元素时触发。dblclick：双击元素时触发。mouseover/mouseout：鼠标移入 / 移出元素时触发。mousemove：鼠标在元素上移动时触发。mousedown/mouseup：鼠标按下 / 释放时触发。
键盘事件
keydown：按下键盘按键时触发。keyup：释放键盘按键时触发。keypress：按下并释放可打印字符键时触发（已逐渐被keydown替代）。
表单事件
submit：表单提交时触发。change：表单元素值改变时触发（如输入框、下拉框）。input：输入框内容变化时实时触发。focus/blur：元素获得 / 失去焦点时触发。
窗口事件
load：页面资源加载完成时触发。resize：窗口大小改变时触发。scroll：页面滚动时触发。beforeunload/unload：页面卸载前 / 卸载时触发。
2. 事件监听方式
有三种方式绑定事件：
1. HTML 内联事件
直接在 HTML 标签中添加事件属性（不推荐，分离性差）。
<button onclick="handleClick()">点击我</button>
2. DOM 0 级事件处理程序
通过 JavaScript 直接赋值给元素的事件属性。
const button = document.querySelector('button');
button.onclick = function() {console.log('按钮被点击了');
};
3. DOM 2 级事件处理程序（推荐）
使用 addEventListener() 方法，支持多个监听器和事件捕获 / 冒泡。
button.addEventListener('click', function() {console.log('按钮被点击了');
});// 移除事件监听器（需使用相同的函数引用）
const handleClick = () => console.log('点击');
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);
六，DOM
DOM（文档对象模型），它操作允许开发者通过 JavaScript 与 HTML 文档交互，动态地改变文档的结构、样式和内容。文档树是整个文档的层次结构表示。每个节点都有父节点、子节点和同级节点。文档节点是整个文档树的根节点，而其他节点则分布在树的不同层次上。DOM 为这个文档树提供了一个编程接口，开发者可以使用 JavaScript 来操作这个树状结构。
1. DOM 树结构
DOM 将文档视为由节点（Node）组成的树形结构：
- 文档节点（Document）：整个文档的根节点。
- 元素节点（Element）：HTML 标签（如
<div>、<p>）。 - 文本节点（Text）：元素内的文本内容。
- 属性节点（Attribute）：元素的属性（如
id、class）。 - 注释节点（Comment）：HTML 注释。
2. 访问 DOM 节点
通过 JavaScript 可以使用多种方法获取 DOM 元素：
全局选择器
document.getElementById('id')：通过 ID 获取元素。document.getElementsByTagName('tag')：返回标签名匹配的元素集合（HTMLCollection）。document.getElementsByClassName('class')：返回类名匹配的元素集合。
var element = document.getElementById('myElement');
var elements = document.getElementsByClassName('myClass');
var paragraphs = document.getElementsByTagName('p');CSS 选择器（推荐）
document.querySelector('selector')：返回匹配选择器的第一个元素。document.querySelectorAll('selector')：返回匹配选择器的所有元素（NodeList）。
节点关系
element.parentNode：获取父节点。element.childNodes：获取所有子节点（包括文本节点）。element.children：获取所有子元素节点（HTMLCollection）。element.firstChild/element.lastChild：获取第一个 / 最后一个子节点。element.nextSibling/element.previousSibling：获取下一个 / 上一个兄弟节点。
3. 修改 DOM 内容
可以动态更新元素的内容、属性和样式：
内容修改
-
element.textContent：获取或设置元素的文本内容（包含子元素文本）。 -
element.innerHTML：获取或设置元素的 HTML 内容（可能存在 XSS 风险）。 -
element.outerHTML：获取或替换整个元素（包括自身）。 -
element.getAttribute('attr')：获取属性值。 -
element.setAttribute('attr', 'value')：设置属性值。 -
element.removeAttribute('attr')：移除属性。 -
element.id/element.className：直接访问id、class等属性。
/ 修改元素文本内容
element.innerHTML = '新的文本内容';// 添加新的子元素
var newElement = document.createElement('div');
element.appendChild(newElement);// 移除子元素
var childElement = element.firstChild;
element.removeChild(childElement);
样式操作
element.style.property：设置内联样式（如element.style.color = 'red'）。element.classList.add('class')/remove()/toggle()：操作 CSS 类。
4. 创建和删除节点
动态添加或移除 DOM 元素：
创建节点
// 创建元素节点
const newDiv = document.createElement('div');// 创建文本节点
const textNode = document.createTextNode('Hello');// 添加文本到元素
newDiv.appendChild(textNode);// 设置属性
newDiv.id = 'new-element';
newDiv.className = 'container';
插入节点
// 添加到父元素末尾
parentElement.appendChild(newElement);// 在参考元素前插入
parentElement.insertBefore(newElement, referenceElement);// 替换子元素
parentElement.replaceChild(newElement, oldElement);
删除节点
// 方式1：通过父元素删除
parentElement.removeChild(childElement);// 方式2：直接删除自身（现代浏览器支持）
element.remove();
总结
- 核心概念：DOM 是 HTML/XML 的树形接口，支持动态修改文档。
- 选择元素：优先使用
querySelector()和querySelectorAll()。 - 操作技巧：使用
DocumentFragment批量处理节点，减少重排。 - 性能建议：缓存元素引用，避免频繁 DOM 操作。
通过 DOM 操作，可以实现丰富的动态效果和交互体验，是前端开发的基础技能。
七，进阶~移动端布局
移动端布局是针对手机、平板等移动设备优化网页显示的技术。
主流的实现方案有两种：
- 通过
rem、vw/vh等单位，实现在不同设备上显示相同比例进而实现适配。 - 响应式布局，通过媒体查询
@media实现一套 HTML 配合多套 CSS 实现适配；
1.核心概念
viewport可以翻译为视区或者视口。是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。
著作权归极客侠 GeeksMan所有 基于GPL 3.0协议 原文链接：https://docs.geeksman.com/front-end/4.front-end-mobile.html
视口（Viewport）
通过 <meta> 标签控制页面在移动设备上的显示区域：
viewport 视口。如果要实现浏览器适配移动端，首先我们要统一标准视口。在 html 的 head 中添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-
width=device-width: 将视口的宽度设置为设备的宽度。这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局；initial-scale=1.0: 设置初始的缩放级别为 1.0。这也有助于确保网页在加载时以原始大小显示，而不是被缩小或放大；minimum-scale=1.0: 最小缩放比例为 1；maximum-scale=1.0: 最大缩放比例为 1；user-scalable=no：不允许用户缩放。这行代码的作用是告诉浏览器，网页的布局应该以设备的宽度为基准，初始缩放级别为 1.0
2.rem
CSS中最常用的最基础的单位是px像素，在移动端最常用到rem，通过使用rem单位可以相对与根元素的字体大小来定义布局和元素的尺寸，从而使网页更灵活地适应不同的屏幕尺寸。
remrem 是一个倍数单位，它是基于 html 标签中的 font-size 属性值的倍数。只要我们在不同的设备上设置一个合适的初始值，当设备发生变化 font-size 就会自动等比适配大小，从而在不同的设备上表现统一。
示例：
若 <html> 的字体大小为 16px，则：
1rem = 16px2rem = 32px0.5rem = 8px
为什么使用 rem？
1. 响应式布局
- 通过调整根字体大小，可实现页面整体缩放，适合适配不同屏幕尺寸。
2. 无障碍支持
- 用户调整浏览器默认字体大小时，
rem单位的元素会随之缩放，提升可读性。
3. 简化计算
- 结合
px到rem的转换，可更直观地实现设计稿还原。
3. 如何使用 rem？
1. 设置根字体大小
-
方式 1：直接在 CSS 中设置（不推荐，可能导致与用户浏览器设置冲突）：
html {font-size: 16px; /* 基准字体大小 */ } -
方式 2：使用百分比（推荐），保持与用户浏览器默认设置的一致性：
html {font-size: 100%; /* 默认为 16px，取决于用户浏览器设置 */ } -
方式 3：结合
px和rem（常用技巧）：html {font-size: 62.5%; /* 16px × 62.5% = 10px，便于计算 */ }此时，
1rem = 10px，1.6rem = 16px，简化了转换。
2. 在 CSS 中使用 rem
/* 假设 html 字体大小为 10px（62.5%） */
.container {width: 30rem; /* 300px */padding: 1.5rem; /* 15px */
}
.title {font-size: 2.4rem; /* 24px */
}
3. 动态调整根字体大小（移动端适配）
通过 JavaScript 根据屏幕宽度动态设置根字体大小，实现等比缩放：
function setRemUnit() {const docEl = document.documentElement;const width = docEl.clientWidth;// 假设设计稿宽度为 750px，将其等比缩放docEl.style.fontSize = width / 750 * 100 + 'px';
}
window.addEventListener('resize', setRemUnit);
setRemUnit(); // 初始化
此时，若设计稿中元素宽度为 375px，则 CSS 中写为 3.75rem（375 ÷ 100）。
** VS Code 插件**
- px to rem：自动将
px转换为rem。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动端rem适配原理布局</title><style>html{font-size: 20px;}.box_rem{width: 2rem;height: 2rem;background-color: red;}.bpx_px{width: 300px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="box_rem"></div><div class="bpx_px"></div><script>function restHtmlfontsize(){var html = document.documentElement;var width = html.clientWidth;html.style.fontSize = width / 16 + 'px';}restHtmlfontsize();window.onresize = function(){restHtmlfontsize();}</script>
</body>
</html>
就先到这里吧。