02 JavaScript用法和语法

JavaScript用法

HTML 中的 Javascript 脚本代码必须位于标签之间。

Javascript 脚本代码可被放置在 HTML 页面的和部分中。

在这里插入图片描述

head中的

在 HTML 的头部（<head>）中，可以使用<script>标签来包含 JavaScript 代码。这通常用于引入外部 JavaScript 文件或者在页面加载时执行特定的 JavaScript 操作。以下是一些<script>标签的常见用法：

引入外部 JavaScript 文件

<head> <script src="path_to_your_script.js"></script> </head>

上面的代码将在页面加载时引入一个外部的 JavaScript 文件。请将"path_to_your_script.js"替换为实际的 JavaScript 文件路径。

内联 JavaScript 代码

<head> <script> // 在这里编写你的 JavaScript 代码 alert('Hello, World!'); </script> </head>

这段代码将在页面加载时执行内联的 JavaScript 代码，无需引入外部文件。

在使用<script>标签时，请谨慎考虑脚本的位置、加载顺序以及对页面性能的影响。

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的或部分中，或者同时存在于两个部分中。

通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

head中的 JavaScript 函数

在 HTML 中的 <head> 部分可以包含 JavaScript 代码，通常是通过 <script> 标签来实现。这些 JavaScript 函数可以在页面加载时执行、响应用户交互或者处理其他事件。

下面是一个简单的例子，展示了如何在 <head> 中定义一个 JavaScript 函数并在页面加载时执行：

<!DOCTYPE html> <html> <head> <title>JavaScript Function Example</title> <script> function greet() { 
      alert('Hello, World!'); } window.onload = function() { 
      greet(); }; </script> </head> <body> <h1>JavaScript Function Example</h1> </body> </html>

在这个例子中，定义了一个名为 greet 的 JavaScript 函数，当页面加载完成时，会弹出一个包含 “Hello, World!” 的警告框。

除了页面加载时执行函数外，JavaScript 函数还可以响应用户的交互事件，例如点击按钮、提交表单等。这样的函数可以在 <head> 中定义，或者直接在 HTML 元素的事件属性中引用。

body 中的 JavaScript 函数

在 <body> 中定义 JavaScript 函数也是很常见的做法，特别是用于处理用户交互事件或动态更新页面内容。下面是一个简单的示例，展示了如何在 <body> 中定义和调用一个 JavaScript 函数：

<!DOCTYPE html> <html> <head> <title>JavaScript Function Example</title> </head> <body> <h1>JavaScript Function Example</h1> <button onclick="greet()">Click me</button> <script> function greet() { 
      alert('Hello, World!'); } </script> </body> </html>

在这个例子中，定义了一个名为 greet 的 JavaScript 函数，当用户点击页面上的按钮时，会触发这个函数并弹出一个包含 “Hello, World!” 的警告框。

在 <body> 中定义 JavaScript 函数的优势是可以直接与页面元素进行交互，使得函数更具交互性和实时性。另外，这样的函数也更容易与页面内容进行集成和管理。

外部的 JavaScript

外部的 JavaScript指的是将JavaScript代码单独存储在一个外部文件中，然后通过<script>标签将其引入到HTML页面中。这种方式有助于提高代码的可维护性和重用性，并使页面结构更清晰。

以下是一个简单的示例，展示了如何在HTML页面中引入外部的JavaScript文件：

在HTML页面中引入外部的JavaScript文件（例如script.js）：

<!DOCTYPE html> <html> <head> <title>External JavaScript Example</title> </head> <body> <h1>External JavaScript Example</h1> <script src="script.js"></script> </body> </html>

script.js文件中的内容：

function greet() { 
    alert('Hello, World!'); } greet();

在这个示例中，script.js文件包含了一个名为greet的JavaScript函数，它在页面加载时被调用并弹出一个包含"Hello, World!"的警告框。

通过外部引入JavaScript文件，可以使代码更具可读性和可维护性，同时也可以提高页面加载速度和缓存效果。这种方式尤其适用于需要在多个页面中共享相同代码的情况。

JavaScript语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

JavaScript 是一个脚本语言。

它是一个轻量级，但功能强大的编程语言。

JavaScript 字面量

JavaScript 字面量是指表示固定值的直接文本表示法，它们不需要进行计算或处理即可直接使用。JavaScript中有多种类型的字面量，包括字符串、数字、布尔值、数组、对象等。
在这里插入图片描述

下面是一些常见类型的JavaScript字面量示例：

字符串字面量：用单引号或双引号括起来的文本。

let str1 = 'Hello'; let str2 = "World";

数字字面量：表示数字的直接文本。

let num1 = 42; let num2 = 3.14;

布尔值字面量：表示真或假的值。

let bool1 = true; let bool2 = false;

数组字面量：用方括号括起来的一组值。

let arr = [1, 2, 3, 4];

对象字面量：用花括号括起来的一组键值对。

let obj = { 
   name: 'Alice', age: 30};

函数字面量：表示一个匿名函数。

let add = function(a, b) { 
    return a + b; };

JavaScript字面量在编写代码时非常常见，它们可以直接在代码中使用，而不需要额外的操作或计算。这使得代码更易读和易懂。

JavaScript 变量

JavaScript 变量用于存储数据值，并且可以在程序中随时修改和访问这些值。在JavaScript中，变量的声明使用 var、let 或 const 关键字。

下面是一些关于JavaScript变量的基本概念：

使用 var 关键字声明变量（已经被let和const替代）：

var x = 10; var name = 'Alice';

使用 let 关键字声明块级作用域的变量（推荐使用let代替var）：

let y = 20; let age = 30;

使用 const 关键字声明常量，其值不能被修改：

const PI = 3.14; const MAX_SIZE = 100;

变量命名规则：
- 变量名可以包含字母、数字、下划线和美元符号，但不能以数字开头。
- 变量名区分大小写。
- 避免使用JavaScript的保留关键字作为变量名。
变量赋值：

let a = 5; let b = 'Hello'; let c = true;

变量类型：
JavaScript是一种动态类型语言，变量的类型是根据赋给它们的值来确定的，同一个变量可以在不同的时刻存储不同类型的值。
变量作用域：
- 使用 var 声明的变量在函数内部是局部作用域，在函数外部是全局作用域。
- 使用 let 和 const 声明的变量在块级作用域内有效，比如在 {} 中。

JavaScript变量在编程中起着非常重要的作用，它们可以用来存储数据、进行计算和控制程序的流程。希望这些基本概念能帮助您更好地理解JavaScript变量的使用。如果您有任何问题或需要进一步的解释，请随时告诉我。

JavaScript 语句

JavaScript 语句是构成 JavaScript 程序的基本单位，它们用于执行特定的操作或任务。每个 JavaScript 语句通常以分号 ; 结尾，用于告诉解释器一个语句的结束。

以下是一些常见的 JavaScript 语句：

赋值语句：用于将值赋给变量。

let x = 10; let name = 'Alice';

条件语句：根据条件执行不同的代码块。

if (x > 5) { 
    console.log('x 大于 5'); } else { 
    console.log('x 小于等于 5'); }

循环语句：重复执行一段代码块。

for (let i = 0; i < 5; i++) { 
    console.log(i); }

函数调用语句：调用一个函数并执行其中的代码。

function greet() { 
    console.log('Hello, World!'); } greet();

返回语句：从函数中返回一个值。

function add(a, b) { 
    return a + b; }

异常处理语句：捕获和处理异常。

try { 
    // 可能会抛出异常的代码 } catch (error) { 
    // 处理异常的代码 }

输出语句：在控制台输出信息。

console.log('Hello, World!');

JavaScript 语句的组合和顺序决定了程序的执行流程和逻辑。通过合理组合不同类型的语句，可以实现复杂的功能和交互。

JavaScript 关键字

JavaScript 关键字是一些具有特殊含义的保留字，它们在语言中具有特定的功能或用途，不能被用作变量名或函数名。以下是一些常见的 JavaScript 关键字：

break：用于跳出循环。
case：在 switch 语句中指定不同的情况。
catch：捕获异常的关键字。
class：定义一个类。
const：声明一个常量。
continue：继续循环的下一次迭代。
debugger：在代码中设置断点以进行调试。
default：在 switch 语句中指定默认情况。
delete：删除对象的属性。
do：执行一个语句块，并在条件表达式为 true 时继续执行。
else：在 if 语句中指定条件为 false 时执行的代码块。
export：导出模块、变量或函数。
extends：继承一个类。
finally：在 try/catch 块中指定无论是否发生异常都会执行的代码块。
for：循环语句，用于迭代一个代码块。
function：定义一个函数。
if：条件语句，根据条件执行不同的代码块。
import：导入模块、变量或函数。
in：用于检查对象是否具有指定属性。
instanceof：检查对象是否是特定类的实例。
let：声明一个块级作用域的变量。
new：创建一个对象实例。
return：从函数中返回一个值。
super：调用父类的构造函数或方法。
switch：多路分支语句。
this：引用当前对象。
throw：抛出一个异常。
try：定义一个包含可能会抛出异常的代码块。
typeof：返回一个值的数据类型。
var：声明一个变量。
void：指定表达式不返回值。
while：循环语句，当条件为 true 时执行代码块。

这些关键字在 JavaScript 中具有特殊的作用，编写代码时需要避免将它们用作变量名或函数名。希望这些常见的 JavaScript 关键字能帮助您更好地理解和使用 JavaScript 语言。

JavaScript 注释

JavaScript 注释是用来向代码中添加说明性文字，这些文字不会被解释器执行，而是用于帮助程序员理解和维护代码。在 JavaScript 中，有两种常见的注释方式：单行注释和多行注释。

单行注释：使用 // 符号表示，从 // 开始到行尾都是注释内容。

// 这是一个单行注释 let x = 10; // 可以在代码行后添加注释

多行注释：使用 /* 开始注释块，使用 */ 结束注释块，之间的内容都是注释。

/* 这是一个多行注释 可以跨越多行 */ let y = 20;

注释可以用来解释代码的功能、目的、实现细节等，帮助他人或自己更容易理解代码。在开发过程中，良好的注释习惯可以提高代码的可读性和可维护性。

在编写 JavaScript 代码时，建议在以下情况下添加注释：

解释代码的目的和功能。
提供代码的用法和示例。
指出代码中的重要逻辑。
标记临时代码或待办事项。
解释复杂或不明显的代码段。

良好的注释可以使代码更易于理解和维护，提高团队协作效率。

JavaScript 数据类型

在 JavaScript 中，数据类型用于定义变量或表达式的类型，以及确定可以对这些值执行的操作。JavaScript 中有多种数据类型，包括原始数据类型和复杂数据类型。以下是 JavaScript 中常见的数据类型：

原始数据类型：
- 字符串（String）：表示文本数据，用单引号或双引号包裹起来。
```
let str = 'Hello'; 
```
- 数字（Number）：表示数值，可以是整数或浮点数。
```
let num = 42; 
```
- 布尔值（Boolean）：表示逻辑值，可以是 true 或 false。
```
let isTrue = true; 
```
- 空值（Null）：表示一个空值。
```
let emptyValue = null; 
```
- 未定义（Undefined）：表示一个未定义的值。
```
let undefinedValue; 
```
复杂数据类型：
- 对象（Object）：表示复杂的数据结构，可以包含多个键值对。
```
let person = { 
      name: 'Alice', age: 30 }; 
```
- 数组（Array）：表示一组值的有序集合。
```
let numbers = [1, 2, 3, 4]; 
```
- 函数（Function）：表示可重复使用的代码块。
```
function greet(name) { 
      return 'Hello, ' + name; } 
```
特殊数据类型：
- Symbol：表示唯一的标识符。
```
let uniqueId = Symbol('id'); 
```

JavaScript 是一种动态类型语言，变量的数据类型是根据赋给它们的值来确定的。您可以使用 typeof 操作符来检查变量的数据类型：

console.log(typeof str); // 输出 "string" console.log(typeof num); // 输出 "number" console.log(typeof isTrue); // 输出 "boolean"

了解 JavaScript 中的数据类型对于编写和理解代码非常重要。希望这些常见的 JavaScript 数据类型能帮助您更好地理解 JavaScript 编程。

JavaScript 函数

JavaScript 函数是一段可重复使用的代码块，用于执行特定的任务或计算，并可以接收输入参数并返回输出结果。函数在 JavaScript 中是一种对象，可以被赋值给变量，作为参数传递给其他函数，或者作为函数的返回值。

以下是定义 JavaScript 函数的一般语法：

function functionName(parameter1, parameter2, ...) { 
    // 函数体，包含执行的代码块 return result; // 可选，返回值 }

其中：

functionName 是函数的名称。
parameter1, parameter2, ... 是函数的参数，用于接收输入值。
return result 是可选的返回语句，用于返回函数的输出值。

下面是一个简单的 JavaScript 函数示例：

function greet(name) { 
    return 'Hello, ' + name + '!'; } let message = greet('Alice'); console.log(message); // 输出 "Hello, Alice!"

JavaScript 函数可以具有以下特性：

参数传递：函数可以接收多个参数，这些参数可以在调用函数时传递给函数。
返回值：函数可以返回一个值，该值可以被调用函数使用。
作用域：函数内部的变量只在函数内部可见，外部无法访问。
匿名函数：可以创建没有名称的函数，称为匿名函数。
箭头函数：ES6 引入的箭头函数语法，简化了函数的定义。
回调函数：函数可以作为参数传递给其他函数，用于回调执行。
闭包：函数可以访问其外部作用域的变量，形成闭包。

除了简单的函数定义，JavaScript 还支持高阶函数、递归函数、立即调用函数表达式（IIFE）等功能，这些功能使得 JavaScript 函数非常灵活和强大。

函数是 JavaScript 编程中的重要概念，通过合理使用函数可以提高代码的重用性和可维护性。

JavaScript 大小写

在 JavaScript 中，大小写是敏感的，这意味着变量名、函数名、关键字等的大小写必须严格匹配才能正确识别。换句话说，JavaScript 区分大小写，所以 myVariable 和 MyVariable 是两个不同的变量名。

下面是一些在 JavaScript 中大小写敏感的情况：

变量名和函数名：

let myVariable = 10; function myFunction() { 
    // 函数体 }

在上面的示例中，myVariable 和 myFunction 是不同的变量和函数名，大小写不同会被认为是不同的标识符。

对象属性名：

let person = { 
    name: 'Alice', age: 30 }; console.log(person.name); // 输出 'Alice' console.log(person.Name); // 输出 undefined，因为属性名区分大小写

在对象属性访问时，属性名也是大小写敏感的，name 和 Name 是不同的属性。

关键字和保留字：
JavaScript 中的关键字和保留字也是大小写敏感的，必须按照正确的大小写使用。

if (condition) { 
    // 代码块 } else { 
    // 代码块 }

在上面的示例中，if 和 else 是 JavaScript 的关键字，必须按照正确的大小写使用。

总的来说，在编写 JavaScript 代码时，务必注意大小写的一致性，以避免由于大小写不匹配而导致的错误。良好的命名规范和代码风格可以提高代码的可读性和可维护性。

希望这些关于 JavaScript 大小写敏感性的解释对您有帮助。如果您有任何其他问题或需要进一步的解释，请随时告诉我。

JavaScript 字符集

JavaScript 使用 Unicode 字符集来表示文本数据。Unicode 是一种标准，用于定义字符集和字符编码，它包含了世界上几乎所有的字符，包括各种语言的字母、符号、表情符号等。

在 JavaScript 中，字符串可以包含任何 Unicode 字符，包括 ASCII 字符、扩展的 Unicode 字符、特殊字符等。您可以直接在 JavaScript 代码中使用 Unicode 转义序列来表示特定的字符，格式为 \uXXXX，其中 XXXX 是 Unicode 字符的十六进制编码。

以下是一些常见的 Unicode 转义序列示例：

\u0020 表示空格字符。
\u2708 表示飞机 ✈。
\u1F600 表示笑脸 😀。

您可以在 JavaScript 字符串中直接使用这些 Unicode 转义序列，例如：

let smiley = '\u1F600'; console.log(smiley); // 输出 😀

JavaScript 还提供了一些字符串处理方法，可以帮助您操作 Unicode 字符，比如 charCodeAt() 方法用于获取指定位置字符的 Unicode 编码，String.fromCharCode() 方法用于根据 Unicode 编码创建字符等。

由于 JavaScript 使用 Unicode 字符集，因此您可以在 JavaScript 中处理各种语言的文本数据，包括中文、日文、阿拉伯文等。Unicode 的广泛支持使得 JavaScript 在处理多语言文本方面非常强大和灵活。

希望这些关于 JavaScript 字符集和 Unicode 的说明对您有帮助。如果您有任何其他问题或需要进一步的解释，请随时告诉我。

关注我，不迷路，共学习，同进步