From 26d5a28af70ea8f894a3db7fa7904677229fa8f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=99=BA=E5=AE=8F?= <1706442984@qq.com> Date: Thu, 24 Oct 2024 23:58:13 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=B0=E5=BB=BA=20=E9=99=88=E6=99=BA?= =?UTF-8?q?=E5=AE=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\351\231\210\346\231\272\345\256\217/.keep" | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 "\351\231\210\346\231\272\345\256\217/.keep" diff --git "a/\351\231\210\346\231\272\345\256\217/.keep" "b/\351\231\210\346\231\272\345\256\217/.keep" new file mode 100644 index 0000000..e69de29 -- Gitee From ff1c2352d6a58a21b6c94444ae102cd2e8a2d788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=99=BA=E5=AE=8F?= <1706442984@qq.com> Date: Thu, 24 Oct 2024 23:59:31 +0000 Subject: [PATCH 2/3] =?UTF-8?q?add=20=E9=99=88=E6=99=BA=E5=AE=8F/20241024?= =?UTF-8?q?=20JavaScript=E7=AC=AC=E4=B8=80=E8=AF=BE.md.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陈智宏 <1706442984@qq.com> --- ...pt\347\254\254\344\270\200\350\257\276.md" | 572 ++++++++++++++++++ 1 file changed, 572 insertions(+) create mode 100644 "\351\231\210\346\231\272\345\256\217/20241024 JavaScript\347\254\254\344\270\200\350\257\276.md" diff --git "a/\351\231\210\346\231\272\345\256\217/20241024 JavaScript\347\254\254\344\270\200\350\257\276.md" "b/\351\231\210\346\231\272\345\256\217/20241024 JavaScript\347\254\254\344\270\200\350\257\276.md" new file mode 100644 index 0000000..abc0a61 --- /dev/null +++ "b/\351\231\210\346\231\272\345\256\217/20241024 JavaScript\347\254\254\344\270\200\350\257\276.md" @@ -0,0 +1,572 @@ +# 第一章，与君初相见 + +## 第一节 + +### JavaScript 简介 + +1. JavaScript 是什么： + + JavaScript 是一种运行在浏览器的脚本编程语言。它不需要编译，可直接在浏览器上运行。 + +2. JavaScript 由什么组成： + + ECMAScript （基础语法）和 Web APIs （DOM、BOM）。 + + - ECMAScript: + 规定了js基础语法核心知识。 + - 比如：变量、分支语句、循环语句、对象等等 + - Web APIs : + - DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作 + - BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等 + + +感受一下 + + +### JavaScript 书写位置 + + + +JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 `script` 标签将 JavaScript 代码引入到 HTML 中，有三种方式： + +#### 1.内部方式 + +通过 `script` 标签包裹 JavaScript 代码 + +```html + + + + + JavaScript 基础 - 内部引入方式 + + + + + + +``` + +#### 2.外部方式 + +一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 `script` 标签的 `src` 属性引入 + +```javascript +// demo.js +document.write('前端技术！') +``` + +```html + + + + + JavaScript 基础 - 外部引入方式 + + + + + + +``` + +如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示： + +```html + + + + + JavaScript 基础 - 外部引入方式 + + + + + + +``` + +#### 3.行内方式 + +在HTML文档中可以在``标签、``标签中使用JavaScript脚本作为它们的属性值。 + +```html + + + + + JavaScript 基础 - 行内引入方式 + + + + 测试 + + + +``` + + +### 注释和结束符 + +通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法： + +#### 单行注释 + +使用 `// ` 注释单行代码 + +```html + + + + + JavaScript 基础 - 注释 + + + + + + +``` + +#### 多行注释 + +使用 `/* */` 注释多行代码 + +```html + + + + + JavaScript 基础 - 注释 + + + + + + +``` + +**注：编辑器中单行注释的快捷键为 `ctrl + /`、多行注释快捷键为`alt + shift + a`** + +### 结束符 + +在 JavaScript 中 `;` 代表一段代码的结束，多数情况下可以省略 `;` 使用回车（enter）替代。 + +```html + + + + + JavaScript 基础 - 结束符 + + + + + + +``` + +> 对于初学者，建议以;号来结束代码； + +### 文档输出内容 + +1. 向 `body` 内输出内容 + + ```js + // 输出一段文字内容 + document.write("我是 JS 输出的内容"); + + // 输出一个一级标签 + document.write("

我是一个一级标签

"); + ``` + +2. 网页弹出警示框 + + ```js + alert("网页弹窗"); + ``` + +3. 向控制台输出内容，常用于调试 + + ```js + console.log("控制台输出内容"); + ``` + +### 输入语法 + +显示对话框，对话框内包含一段文字信息，用来提示用户输入内容 + +```js +prompt("请输入一段内容"); +``` + +### 代码执行顺序 + +1. 按照 HTML 文档流顺序执行 JavaScript 代码 +2. `alert()` 和 `prompt()` 会跳过页面渲染先被执行 + + +定义：计算机用于**存储数据**的**容器**，可以让计算机有记忆。_（注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器）_ + +### 变量的基本使用 + +#### 1.声明变量 + +语法： + +```js +let 变量名; +let 变量名 = 值, + 变量名 = 值; +``` + +1. 声明变量有两部分构成：声明关键字、变量名 + +2. `let` 即关键字，所谓关键字是系统提供的专门声明变量的词语 + + ```js + let age; + let money; + let text; + + let num1 = 20, + num2 = 30; + ``` + +#### 2.变量赋值 + +语法： + +```js +// 声明变量 +let age; + +// 进行赋值 +age = 18; + +// 声明同时并赋值（变量的初始化） +let num = 20; +``` + +#### 3.更新变量 + +语法： + +```js +// 变量初始化 +let age = 18; + +// 更新变量 +age = 19; +``` + +### 变量的其他初始化（不推荐使用） + +```js +let name = prompt("请输入姓名"); +``` + +### 变量的本质 + +1. 内存：计算机中存储数据的地方，相当于一个空间 +2. 变量：程序在内存中申请的一块用于存放数据的小空间 + +### 变量的命名规则与规范 + +#### 规则 + +1. JavaScript 内部已占用于单词（关键字或保留字）不允许使用 +2. 只能由下划线 `_` 、字母、数字、 `$` 组成，且不可以以数字开头 +3. 字母严格**区分大小写**,如 Age 和 age 是不同的变量 + +#### 规范 + +1. 尽量保证变量具有一定的语义，见字知义 + +2. 遵守小驼峰命名法：即第一个单词首字母小写，后面每个单词首字母大写 + + 例： `userName` `userId` `userNameOld` + + +### 关键字 + +JavaScript 使用专门的关键字 `let` 和 `var` 来声明（定义）变量，在使用时需要注意一些细节： + +以下是使用 `let` 时的注意事项： + +1. 允许声明和赋值同时进行 +2. 不允许重复声明 +3. 允许同时声明多个变量并赋值 +4. JavaScript 中内置的一些关键字不能被当做变量名 + +以下是使用 `var` 时的注意事项： + +2. 允许声明和赋值同时进行 +3. 允许重复声明 +4. 允许同时声明多个变量并赋值 + +大部分情况使用 `let` 和 `var` 区别不大，但是 `let` 相较 `var` 更严谨，因此推荐使用 `let`，后期会更进一步介绍二者间的区别。 + + + +## 常量 + +概念：使用 const 声明的变量称为“常量”。 + +使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。 + +命名规范：和变量一致 + +~~~javascript +const PI = 3.14 +~~~ + +>注意： 常量不允许重新赋值,声明的时候必须赋值（初始化） + +## 数据类型 + +> 计算机世界中的万事万物都是数据。 + +计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型： + +JavaScript的数据类型有数值，字符串，布尔， + + +注：通过 typeof 关键字检测数据类型 + +```html + + + + + JavaScript 基础 - 数据类型 + + + + + + +``` + +### 数值类型 number + +即我们数学中学习到的数字，可以是整数、小数、正数、负数 + +```html + + + + + JavaScript 基础 - 数据类型 + + + + + + +``` + +JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。 + +### 字符串类型 string + +通过单引号（ `''`） 、双引号（ `""`）或反引号`包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。 + +> `反引号标记的字符串，叫模板字符串 + +注意事项： + +1. 无论单引号或是双引号必须成对使用 +2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已 +3. 必要时可以使用转义符 `\`，输出单引号或双引号 + +```html + + + + + JavaScript 基础 - 数据类型 + + + + + + +``` + +### 布尔类型 + +表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 `true` 和 `false`，表示肯定的数据用 `true`，表示否定的数据用 `false`。 + +```html + + + + + JavaScript 基础 - 数据类型 + + + + + + +``` + +### undefined + +未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。 + +```html + + + + + JavaScript 基础 - 数据类型 + + + + + + +``` + +**注：JavaScript 中变量的值决定了变量的数据类型。** + +## 类型转换 + +> 理解弱类型语言的特征，掌握显式类型转换的方法 + +在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。 + +### 隐式转换 + +某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。 + +```html + + + + + JavaScript 基础 - 隐式转换 + + + + + +``` + +注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。 + +**模板字符串用`s{}`实现变量与字符串的拼接 + +### 显式转换 + +编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。 + +#### Number + +通过 `Number` 显示转换成数值类型，当转换失败时结果为 `NaN`（Not a Number）即不是一个数字。 + +```html + + + + + JavaScript 基础 - 隐式转换 + + + + + +``` + + + -- Gitee From 7806521fd5a6ed0a14512c5530672953b974fc30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=99=BA=E5=AE=8F?= <1706442984@qq.com> Date: Fri, 25 Oct 2024 00:00:03 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?= =?UTF-8?q?=E9=99=88=E6=99=BA=E5=AE=8F/.keep?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\351\231\210\346\231\272\345\256\217/.keep" | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 "\351\231\210\346\231\272\345\256\217/.keep" diff --git "a/\351\231\210\346\231\272\345\256\217/.keep" "b/\351\231\210\346\231\272\345\256\217/.keep" deleted file mode 100644 index e69de29..0000000 -- Gitee