前端学习日志-day15

最新推荐文章于 2025-12-15 06:58:03 发布

原创最新推荐文章于 2025-12-15 06:58:03 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #html5 #javascript

前端同时被 3 个专栏收录

22 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

今日所学总结

一、编程语言与计算机基础核心

1. 编程语言核心要点

核心定义：编程是为让计算机解决特定问题而编写程序代码的过程，编程语言是实现这一过程的工具。
分类与特性：分为机器语言（计算机可直接识别，由 0 和 1 组成）、汇编语言（用符号替代机器指令）、高级语言（贴近人类自然语言，如 JS、Python）；其中高级语言无法直接被计算机执行，必须通过翻译器转换成机器语言。
与标记语言的区别：编程语言具备强逻辑性，能主动向计算机发送指令以实现特定功能；标记语言（如 HTML、CSS）仅用于描述内容结构，供计算机读取展示，无需发送指令。

2. 计算机基础关键内容

计算机组成：
- 硬件：是计算机的物理部件，包括输入设备（如键盘、鼠标）、输出设备（如显示器、打印机）、CPU（中央处理器，负责运算和控制）、硬盘（长期存储数据）、内存（临时存储数据，断电丢失）。
- 软件：是计算机的逻辑指令集合，分为系统软件（如 Windows、macOS，管理硬件和支持其他软件运行）和应用软件（如 Office、浏览器，满足特定使用需求）。
数据存储：计算机内所有数据和指令均以二进制代码（0 和 1）形式存储；存储单位从最小到最大依次为 Bit（位）、Byte（字节）、KB、MB、GB、TB，换算关系为1Byte=8Bit，更高单位间遵循 1024 倍换算（如 1KB=1024Byte）。

二、JS 核心概念与书写、注释规则

1. JS 基础属性与浏览器关联

JS 定义：全称为 JavaScript，是一种运行在客户端（主要是浏览器）的脚本语言，属于解释性语言（逐句解释执行，无需提前编译）。
JS 作用：核心作用是在网页中实现业务逻辑（如表单验证、数据计算）和页面控制（如动态显示 / 隐藏元素、页面跳转），让静态网页具备交互能力。
浏览器组成与 JS 的关系：
- 渲染引擎（浏览器内核）：负责解析 HTML 和 CSS 代码，将其转换为可视化的网页界面，不处理 JS 代码。
- JS 引擎：专门用于解释和执行 JS 代码，如 Chrome 浏览器的 V8 引擎，是 JS 能在浏览器中运行的核心。

2. JS 的三大组成部分

JS 功能的实现依赖以下三部分协同工作，具体职责如下表：

组成部分	核心作用	应用场景示例
ECMAscript	定义 JS 的基础语言语法，包括变量、数据类型、运算符、语句等，是 JS 的语法规范核心	定义变量（`var a=10`）、编写条件语句（`if...else`）
Dom（页面文档对象模型）	将 HTML 文档抽象为 “文档树” 结构，提供操作 HTML 元素的接口（如增删改查元素、修改样式）	改变按钮文字（`document.getElementById("btn").innerText="点击"`）
Bom（浏览器对象模型）	提供操作浏览器窗口的接口，控制浏览器的行为（如打开新窗口、获取窗口大小、刷新页面）	弹出确认框（`confirm("确定退出吗？")`）、获取窗口宽度（`window.innerWidth`）

3. JS 的三种书写形式

不同书写形式适用于不同场景，具体规范如下：

行内式：适用于少量或单行 JS 代码，直接嵌入到 HTML 元素的事件属性中（如onclick、onmouseover）；语法为属性名="JS代码"，字符串需用单引号，示例：<button onclick="alert('Hello World')">点击弹窗</button>。
内嵌式：常用于学习或代码量较少的场景，将 JS 代码写在 HTML 文件的<head>标签内、<title>标签之后，用<script></script>标签包裹；注意代码需在标签内部，示例：
```
<head>
  <title>JS示例</title>
  <script>
    alert("这是内嵌式JS");
  </script>
</head>
```
外部式：适用于代码量较大的实际开发场景，是最规范的书写形式；步骤为：①在项目目录中创建后缀为.js的文件（如my.js），②在 HTML 文件中通过<script src="文件路径"></script>引入；注意：引入外部 JS 的<script>标签内不能再写其他 JS 代码，示例：
```

<script src="my.js"></script>

console.log("这是外部式JS");
```

4. JS 的注释规则

注释用于解释代码功能，不影响程序执行，是提高代码可读性的重要方式，分为两种类型：

单行注释：仅注释一行内容，语法为// 注释内容；快捷键为ctrl+/（Windows），示例：// 这是单行注释，用于解释下面的变量定义。
多行注释：用于注释多行内容（如函数说明、代码块功能），语法为/* 注释内容 */；快捷键为ctrl+shift+/（Windows），示例：
```
/* 这是多行注释
   用于解释下面的弹窗功能
   点击按钮时触发alert */
onclick="alert('Hello')"
```

三、JS 输入输出与变量关键知识

1. JS 输入输出语句

输入输出语句是 JS 与用户交互、调试代码的核心工具，共 3 个（2 个输出、1 个输入），需注意字符串内容必须加单引号：

弹出警示框（输出）：语法为alert(内容)；功能是在浏览器中弹出一个包含指定内容的提示框，需用户点击 “确定” 才能关闭，示例：alert('欢迎访问网页')。
弹出输入框（输入）：语法为prompt(提示内容)；功能是弹出一个带输入框的对话框，可获取用户输入的内容（返回值为字符串类型），示例：var name = prompt('请输入你的名字')（将用户输入的名字存入name变量）。
控制台日志输出（输出）：语法为console.log(内容)；功能是在浏览器的 “控制台”（按 F12 打开 “开发者工具”，切换到 Console 面板）中输出内容，主要用于开发时调试代码（用户不可见），示例：console.log('当前年龄：18')。

2. 变量核心知识

变量是 JS 中存储数据的基础容器，本质是在计算机内存中开辟的一块指定空间，关键要点如下：

变量的声明与赋值（初始化）：
- 语法：var 变量名 = 所赋值;；其中var是 JS 的关键字，作用是告诉浏览器 “为这个变量分配内存空间”，变量名是自定义的标识，所赋值是存储的数据，示例：var age = 18;（声明age变量，赋值为 18）。
- 注意：变量初始化时，var关键字不可省略（省略会导致变量成为全局变量，存在风险）。
变量语法扩展：
- 更新变量：对已声明的变量重新赋值，新值会覆盖旧值（遵循 “就近原则”），示例：var age = 18; age = 20;（最终age的值为 20）。
- 多个变量声明：可在一行内同时声明多个变量，变量间用英文逗号,分隔，末尾用分号;结束，示例：var age = 10, sex = '男', myname = 'pink老师';（同时声明age、sex、myname三个变量）。
- 声明的特殊情况：
  1. 只声明不赋值：变量会被赋予默认值undefined（表示 “未定义”），示例：var score;（score的值为undefined）。
  2. 不声明不赋值：直接使用变量会导致浏览器报错（“变量未定义”），示例：console.log(score);（报错）。
  3. 不声明只赋值：代码可运行（变量会成为全局变量），但不符合规范，不推荐使用，示例：score = 90;（不推荐）。
变量的命名规范：命名需遵循严格规则，否则会导致代码报错或可读性差，具体规则如下：
1. 组成规则：变量名只能由英文大小写字母、数字、下划线_、美元符号$组成，不能包含其他特殊字符（如空格、中文、@等）。
2. 开头规则：不能以数字开头（如1age是错误的，age1是正确的）。
3. 意义规则：命名必须有明确意义，让他人能快速理解变量用途（如用userName表示用户名，不用a、b等无意义字母）。
4. 关键字 / 保留字规则：不能使用 JS 的关键字（JS 已占用的字，如var、if、for）或保留字（当前未用但未来可能成为关键字的字，如class、enum）；同时尽量不用name作为变量名（可能与浏览器内置属性冲突）。
5. 大小写规则：采用 “驼峰命名法”，即第一个单词首字母小写，后面单词首字母大写（如userAge、loginTime）。
6. 区分大小写：JS 严格区分大小写，Age和age是两个不同的变量（var Age=18; var age=20;两者互不影响）。

四、数据类型与转换核心要点

1. 数据类型的基本特性

动态类型特性：JS 是 “动态类型语言”，变量的数据类型不由声明时决定，而是由所赋的值的类型决定；赋值不同，变量类型会随之改变，示例：var a = 18;（a是数字型），a = '18';（a变为字符串型）。
类型分类：JS 数据类型分为简单数据类型（又称 “基本数据类型”，如数字型、字符串型）和复合数据类型（又称 “引用数据类型”，如对象、数组，本次笔记暂未详细介绍）。

2. 简单数据类型的关键特性

简单数据类型是 JS 中最基础、最常用的类型，共 5 种，具体特性如下表：

数据类型	关键字	核心特性	默认值	示例
数字型（Number）	Number	1. 包含整数（如 10、-5）和浮点数（如 3.14、0.01）； 2. 支持多进制：二进制（前缀`0b`，数字 0~1）、八进制（前缀`0o`，数字 0~7）、十六进制（前缀`0x`，数字 0~9、a~f）； 3. 范围限制：最大值为`Number.MAX_VALUE`，最小值为`Number.MIN_VALUE`； 4. 特殊值：`infinity`（正无穷大）、`-infinity`（负无穷大）、`NaN`（非数字，如`10/'a'`结果为`NaN`）； 5. 判断工具：`isNaN(变量)`函数，返回`true`表示变量是非数字，返回`false`表示是数字	0	`var num = 10;`（整数）、`var num2 = 0b101;`（二进制，对应十进制 5）
字符串型（String）	String	1. 用于表示文本，需用单引号`''`或双引号`""`包裹（推荐用单引号）； 2. 引号嵌套规则：“外单内双” 或 “外双内单”（避免冲突），如`'He said "Hello"'`、`"She's happy"`； 3. 转义符：需在引号内使用，配合`\`表示特殊字符，常用转义符：`\n`（换行）、`\\`（显示斜杠`\`）、`\'`（显示单引号）、`\"`（显示双引号）、`\t`（缩进，相当于 Tab 键）、`\b`（空格）； 4. 长度计算：用`变量.length`获取字符串的字符个数（空格、符号均算一个字符）； 5. 拼接规则：用`+`拼接字符串，与字符串拼接的其他类型（如数字、布尔值）会自动转为字符串，示例：`'年龄：' + 18`（结果为`'年龄：18'`）	`""`（空字符串）	`var str = 'Hello JS';`、`var str2 = '姓名："张三"'`
布尔型（Boolean）	Boolean	1. 仅用于表示 “真” 或 “假”，只有两个值：`true`（真，等价于数字 1）、`false`（假，等价于数字 0）； 2. 常用于条件判断（如`if`语句），表示条件是否成立	false	`var isLogin = true;`（表示已登录）、`var isShow = false;`（表示隐藏）
未定义型（undefined）	undefined	1. 变量只声明不赋值时的默认值； 2. 运算特性：与字符串拼接时直接显示`undefined`（如`'值：' + undefined`结果为`'值：undefined'`），与数字运算时结果为`NaN`（如`10 + undefined`结果为`NaN`）	undefined	`var a;`（`a`的值为`undefined`）
空型（null）	null	1. 表示 “空值”，主动赋值给变量表示该变量无具体内容； 2. 运算特性：与字符串拼接时直接显示`null`（如`'值：' + null`结果为`'值：null'`），与数字运算时结果为原数字（如`10 + null`结果为 10）	null	`var b = null;`（`b`的值为`null`）

3. 数据类型的检测与转换

（1）数据类型检测

检测工具：typeof(变量)函数（或typeof 变量），用于判断变量的数据类型，返回结果为字符串（如'number'、'string'）。

示例：

var num = 18;
console.log(typeof(num)); // 输出'number'
var str = '18';
console.log(typeof str); // 输出'string'

（2）数据类型转换

在实际开发中，常需将一种数据类型转为另一种（如将用户输入的字符串转为数字计算），三种核心转换方向如下：

转换方向	方法	语法示例	特点
转为字符串型	1. `变量.toString()`方法	`var num=18; var str=num.toString();`	需确保变量有值（`undefined`和`null`不能用此方法）
	2. `String(变量)`函数	`var num=18; var str=String(num);`	通用方法，可转换`undefined`和`null`（如`String(undefined)`结果为`'undefined'`）
	3. 拼接空字符串（`+''`）	`var num=18; var str=num + '';`	最简单常用，利用字符串拼接特性自动转换
转为数字型	1. `parseInt(变量)`函数	`var str='18.5'; var num=parseInt(str);`	只保留整数部分（无论小数点后是否大于 5），结果为数字型；若无法转换则返回`NaN`（如`parseInt('a18')`为`NaN`）
	2. `parseFloat(变量)`函数	`var str='18.5'; var num=parseFloat(str);`	保留浮点数部分，结果为数字型；同样无法转换时返回`NaN`（如`parseFloat('18a')`为 18）
	3. `Number(变量)`函数	`var str='18.5'; var num=Number(str);`	严格转换，仅能转换纯数字字符串（如`Number('18a')`为`NaN`），布尔值转换为 1（`true`）或 0（`false`）
	4. 算术运算（`-`/`*`/`/`）	`var str='18'; var num=str - 0;`	利用算术运算特性自动转换，仅适用于能转为数字的字符串；不可用`+`（`+`会转为字符串拼接）
转为布尔型	`Boolean(变量)`函数	`var num=18; var bool=Boolean(num);`	1. 转为`false`的情况：空字符串（`''`）、数字 0、`null`、`NaN`、`undefined`； 2. 其他情况（如非空字符串、非 0 数字、`true`）均转为`true`

五、扩展核心术语与语言区别

1. 解释语言与编译语言的区别

两种语言的核心差异在于 “执行方式”，直接影响代码运行效率和开发流程：

解释语言：如 JS、Python；执行时由解释器逐句解释代码并立即执行，无需提前编译；优点是开发便捷（修改代码后无需重新编译），缺点是执行效率较低。
编译语言：如 C、Java；执行前需通过编译器将全部代码整体编译为机器语言文件（如.exe文件），再运行编译后的文件；优点是执行效率高，缺点是开发流程稍复杂（修改代码需重新编译）。

2. 标识符、关键字、保留字的定义

三者均与变量命名相关，需严格区分以避免代码错误：

标识符：开发者自定义的名称，用于给变量、函数、属性、参数等命名；命名需遵循变量命名的组成规则（如userName、getAge均为合法标识符）。
关键字：JS 语言本身已定义并使用的字，具有特定语法功能，不能作为标识符（如var、if、else、for、function）。
保留字：当前 JS 版本中未作为关键字使用，但未来版本可能会成为关键字的字，建议不作为标识符（如class、enum、export、import）。

今日作业

1.作业描述

弹出输入框以此输入姓名，年龄，性别，然后弹出警示框输出用户姓名，年龄及性别。

2.作业实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var username = prompt('请输入您的姓名：');
        var age = prompt('请输入您的年龄：');
        var sex = prompt('请输入您的性别：');
        var str = '您的姓名：' + username + '\n您的年龄：' + age + '\n您的性别：' + sex;
        // var str = '您的姓名：' + username + '\n' + '您的年龄：' + age + '\n' + '您的性别:' + sex;
        alert(str);
    </script>
</head>

<body>

</body>

</html>