JavaScript基础

  JavaScript

介绍

JavaScript 是一种广泛使用的编程语言，它允许在浏览器中实现复杂的功能。它是一种解释型脚本语言，可以直接嵌入到 HTML 页面中。JavaScript 使得网页具有交互性，可以实现动态效果、表单验证、数据处理等功能。

• JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。

• 脚本语言：不需要编译，就可以被浏览器直接解析执行了。

• 核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

在HTML中引入JavaScript方式：

内部方式：

直接在html文件中使用<script>标签镶嵌JavaScript代码

外部方式：

将JavaScript代码放在一个单独的.js文件中，然后在HTML文件中通过<script>标签的src属性引入。

• 创建js文件

  

• 在 html 中引用外部 js 文件

 JavaScript基本语法

注释

• 单行注释

  // 注释的内容

• 多行注释

  /*
  注释的内容
  */

 输入输出语句

• 输入框 prompt(“提示内容”);
• 弹出警告框 alert(“提示内容”);
• 控制台输出 console.log(“显示内容”);
• 页面内容输出 document.write(“显示内容”);

输入框prompt

prompt() 函数用于显示一个对话框，提示用户输入文本。用户输入的内容将作为函数的返回值。

var userInput = prompt("请输入您的名字：");
console.log(userInput);

弹出警告框alert

alert() 函数用于显示一个包含指定文本的警告框。

alert("这是一个警告框！");

控制台输出console.log

console.log() 函数用于在浏览器的控制台输出信息。这对于调试代码非常有用。

console.log("这是一条日志信息。");

页面内容输出document.write

document.write() 函数用于将指定内容写入HTML文档。需要注意的是，在文档加载完成后使用document.write()可能会覆盖整个文档内容。

document.write("这是一段写入文档的内容。");

变量与常量

变量

• 变量是程序中用于存储数据的标识符。
• 它的值可以在程序执行过程中被改变。

特点：

• 具有名称（或称为标识符），用于唯一标识该存储空间。
• 有数据类型，决定了可以存储的数据种类（如整数、浮点数、字符串等）。
• 可以反复赋值，每次赋新值都会覆盖旧值。

用途：

• 用于存储临时结果或用户输入的数据。
• 在算法中作为计算过程中的中间存储。
• 使程序更加灵活，能够处理多种不同的情况。

声明与初始化：

• 在大多数编程语言中，使用变量前需要先声明其类型和名称。
• 可以选择在声明时初始化变量（即赋予初始值），也可以稍后再赋值。

定义局部变量：let 变量名=值；

定义全局变量：变量名=值；

常量

• 常量是在程序执行过程中始终保持不变的量。
• 一旦被赋值后，其值就不能再被修改。

特点：

• 同样具有名称和数据类型。
• 其值在程序的整个生命周期内都是固定的。
• 通常用于表示不会改变的值，如数学常数（π）、配置参数等。

用途：

• 提供程序中的固定参考点，增加代码的可读性和可维护性。
• 避免硬编码（直接在代码中写入具体数值），使得修改和维护更加方便。
• 在某些情况下，使用常量可以提高程序的执行效率。

声明与初始化:

• 常量通常在声明时就必须被赋予一个确定的值。
• 在一些语言中，常量可以使用特殊的关键字（如 const 或 final）来声明。

定义常量：const 常量名=值；

原始数据类型

原始数据类型是编程语言中用于表示简单值的基本数据类型，它们是构建更复杂数据结构的基础。

typeof

typeof 是一种在 JavaScript 中用来检测变量类型的运算符。它可以返回变量的数据类型，对于原始数据类型，它会返回对应的类型名称，对于引用数据类型（如对象、数组、函数等）

typeof是用于判断变量的数据类型

运算符

运算符是编程语言中用于执行特定操作的符号。它们可以对变量、常量或表达式进行操作，并产生新的值。

算术运算符：用于执行基本的数学运算

其中“+”有时会用作字符串的拼接符号，“++”符号看是放变量前面还是后面，例如：

a++：就是先把值赋给a，然后在进行运算

++a:先是执行运算，把运算结果再赋值给a

赋值运算符

用于将值赋给变量

比较运算符

用于比较两个值，然后返回布尔值结果

逻辑运算符

用于执行逻辑运算

三元运算符

三元运算符（也称为条件运算符或三目运算符）是一种简洁的条件表达式，用于根据一个条件表达式的值来决定另一个表达式的值。

三元运算符格式

（比较表达式）？表达式1：表达式2；

执行流程：

如果比较表达式为true，则取表达式1；

如果比较表达式为flase，则取表达式2；

循环语句

if语句

if 语句是编程中最基本的条件控制结构之一，用于根据某个条件的真假来执行不同的代码块。

switch语句

switch 语句是一种多路选择结构，用于根据变量的值执行不同的代码块。

if语句可以做区间判断以及等值判断，switch语句只能进行等值判断

for循环

for循环是编程中一种常见的循环结构，用于重复执行一段代码多次。

for in

用于遍历对象

for of

用于遍历数组的

while循环

while循环是编程中一种基本的循环结构，用于在满足特定条件时重复执行一段代码。与for循环不同，while循环通常用于在循环次数未知或依赖于某些条件的情况下执行操作。

数组

 数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

定义格式

• let 数组名 = [元素1,元素2,…];

• let arr = [10, 20, 30];

索引范围

• 从 0 开始，最大到数组长度-1

数组长度

• 数组名.length

合并数组

合并数组是将两个或多个数组的元素组合成一个新的数组。

对象

对象（Object）是面向对象编程（OOP）中的一个核心概念。在OOP中，对象是类的实例，它包含了数据（属性）和可以对这些数据进行操作的方法（函数）。

对象的构成：属性 + 方法（函数）

this

 this是 JavaScript 中的一个关键字，它表示当前执行上下文中的对象。

1. 全局上下文中的 `this`：在全局上下文中，`this` 指向全局对象。在浏览器环境中，全局对象是 `window`；在 Node.js 环境中，全局对象是 `global`。

2. 函数调用中的 `this`：在普通函数中，`this` 指向全局对象。在严格模式下，`this` 是 `undefined`。

3. 对象方法调用中的 `this`：在对象方法中，`this` 指向调用该方法的对象。

4. 构造函数调用中的 `this`：在构造函数中，`this` 指向新创建的对象。

5. 事件处理函数中的 `this`：在事件处理函数中，`this` 指向触发事件的元素。

6. 箭头函数中的 `this`：箭头函数没有自己的 `this`，它会捕获上一层非箭头函数的 `this` 值。

 

小结

1. 变量声明语句：用于声明变量并为其分配内存空间。
2. 赋值语句：用于给变量赋值。
3. 条件语句：根据条件的不同，执行不同的代码块：if语句、switch句。
4. 循环语句：重复执行代码，直到满足某个条件：for循环、while循环。
5. 函数声明语句：定义一个函数。
6. 函数调用语句：调用一个一定义的函数。
7. return语句：从函数中返回一个值，并结束函数的执行。