2023年JavaScript学习笔记.pdf资源-CSDN文库

需积分: 2 74 浏览量 2024-03-09 16:26:00 上传评论收藏 11.54MB PDF 举报

### JavaScript学习笔记 #### 1. 如何实现JavaScript JavaScript是一种强大的客户端脚本语言，用于增强网页交互性和动态效果。为了使HTML文档具备这些特性，我们需要掌握如何将JavaScript代码嵌入到HTML页面中。 ##### 1.1 如何把JavaScript代码放到HTML页面里有几种方法可以在HTML页面中插入JavaScript代码： - **使用`<script>`标签**：这是最直接的方法之一。通过在HTML代码中直接添加`<script>`标签，并在标签内部编写JavaScript代码。 ```html <script> // JavaScript 代码 </script> ``` - **使用`<script src="XXX.js">`调用外部的JavaScript文件**：这种方式允许我们将JavaScript代码存储在一个单独的`.js`文件中，并通过`src`属性引用该文件。 ```html <script src="example.js"></script> ``` 其中`example.js`是包含JavaScript代码的文件名。 - **如何与老浏览器打交道**：尽管现代浏览器广泛支持最新的JavaScript标准，但有时候仍然需要考虑到较旧版本的浏览器。这可能涉及使用polyfills来填补API差异，或者使用条件注释（conditional comments）来提供向后兼容的代码路径。 #### 1.2 把JavaScript代码放到HTML页面的不同位置 JavaScript代码可以根据需要放在HTML页面的不同位置，以适应不同的应用场景： - **将JavaScript代码放在`<body>`部分**：这通常是为了确保当JavaScript执行时，DOM元素已经被加载完成。这种方法适用于需要与用户交互的脚本。 ```html <body>  <script> // 与DOM相关的脚本 </script> </body> ``` - **将JavaScript代码放在`<head>`部分**：这种方式可以让脚本尽快执行，但可能导致DOM元素尚未完全加载的问题。通常用于不需要与DOM元素交互的脚本。 ```html <head> <script> // 不依赖于DOM的脚本 </script> </head> ``` - **示例代码**： ```html <html> <head> <script> // 初始化代码 </script> </head> <body> <button id="myButton">点击我</button> <script> document.getElementById("myButton").addEventListener("click", function() { alert("按钮被点击了!"); }); </script> </body> </html> ``` #### 2. JavaScript语句与注释 ##### 2.1 JavaScript语句结束符在JavaScript中，默认情况下每行代码自动被视为一个语句，但如果希望在同一行写多个语句，则需要用分号`;`分隔每个语句。 - **示例**： ```javascript var x = 5; var y = 10; console.log(x + y); ``` ##### 2.2 JavaScript代码块代码块是一组由花括号 `{}` 包围的语句，常用于控制结构（如if语句或循环）。 - **示例**： ```javascript if (x > 10) { console.log("x is greater than 10"); } ``` ##### 2.3 JavaScript注释注释用于在代码中添加解释性文字，它们不会被执行。 - **单行注释**：使用`//` ```javascript // 这是一条单行注释 ``` - **多行注释**：使用`/* ... */` ```javascript /* 这是多行注释 */ ``` ##### 2.4 JavaScript变量变量是用于存储数据值的容器。 - **命名规则**：变量名可以包含字母、数字、下划线（_）和美元符号（$）。它们必须以字母、下划线或美元符号开头。不允许使用保留关键字作为变量名。 - **声明或创建变量**：使用`var`, `let`, `const`关键字。 ```javascript var x = 10; let y = 20; const PI = 3.14; ``` - **重新声明变量**：使用`let`和`const`声明的变量不能在相同的范围内重复声明，而使用`var`声明的变量则可以。 #### 3. JavaScript运算符运算符是用来对操作数进行某种操作的符号。 ##### 3.1 基本运算符包括加、减、乘、除等基本数学运算。 - **示例**： ```javascript var x = 5 + 3; // 加法 var y = 10 - 5; // 减法 var z = 2 * 3; // 乘法 ``` ##### 3.2 位运算符位运算符用于按二进制位进行操作。 - **非运算**（~）：反转一个数值的所有二进制位。 - **与运算**（&）：比较两个数值的每一位，如果都是1，则结果为1；否则为0。 - **或运算**（|）：比较两个数值的每一位，只要有一个为1，则结果为1；否则为0。 - **异或运算**（^）：比较两个数值的每一位，如果相同则结果为0；不同则结果为1。 ##### 3.3 Boolean运算 Boolean运算用于处理逻辑值。 - **求反运算**（!）：反转布尔值。 - **与运算**（&&）：只有两个条件都为真时结果才为真。 - **或运算**（||）：只要有一个条件为真，结果就为真。 ##### 3.4 关系运算关系运算符用来测试操作数之间的关系，结果为布尔值。 - **小于**（<） - **大于**（>） - **小于等于**（<=） - **大于等于**（>=） - **等于**（==） - **不等于**（!=） ##### 3.5 等性运算符等性运算符用于比较两个值是否相等。 - **等于**（==）：仅比较值，不考虑类型。 - **严格等于**（===）：既比较值也考虑类型。 - **不等于**（!=） - **严格不等于**（!==） ##### 3.6 条件运算符条件运算符（三元运算符）用于基于某个条件返回不同的值。 - **示例**： ```javascript var result = (x > y) ? "x is greater" : "y is greater or equal"; ``` ##### 3.7 其他运算符 - **赋值运算符**：`=`, `+=`, `-=`等。 - **逗号运算符**：`,`，用于将多个表达式组合在一起。 - **typeof运算符**：用于获取变量的数据类型。 - **delete运算符**：用于删除对象的属性。 - **instanceof运算符**：用于检测构造函数的原型对象是否出现在某个实例的原型链上。 #### 4. with 语句 with语句提供了访问对象的属性和方法的简短方式。 - **语法**： ```javascript with (object) { // 在这里可以使用object的属性和方法 } ``` - **示例**： ```javascript var obj = { x: 10, y: 20 }; with (obj) { console.log(x + y); } ``` #### 5. 分支语句分支语句用于基于不同的条件执行不同的代码块。 ##### 5.1 if...else...语句根据条件决定执行哪段代码。 - **示例**： ```javascript if (x > 10) { console.log("x is greater than 10"); } else { console.log("x is less than or equal to 10"); } ``` ##### 5.2 switch语句根据不同的条件执行不同的代码块。 - **示例**： ```javascript switch (expression) { case value1: // code block 1 break; case value2: // code block 2 break; default: // code block } ``` #### 6. 消息框消息框用于显示信息给用户。 - **警告框**：`alert(message)`。 - **确认框**：`confirm(message)`。 - **提示框**：`prompt(message[, default])`。 #### 7. 函数函数是一组预编写的，用于执行特定任务的代码块。 - **一般定义到`<head>`标签之间**：这有助于减少页面加载时间，因为函数定义在页面渲染之前就已经完成。 ```html <head> <script> function greet(name) { console.log("Hello, " + name); } </script> </head> ``` 通过上述总结，我们可以了解到JavaScript的基础知识，包括如何将JavaScript代码嵌入到HTML页面中，以及一些基本的语法和概念。这些内容对于初学者来说是非常重要的入门知识。

资源推荐

资源详情

资源评论