初识JavaScript

JavaScript 是一种功能强大的编程语言，它在网页和网站开发中发挥着重要作用。不过需要区分一下就是关于css和html其实都不是编程语言而是标记语言和样式表语言，分别用于描述网页的结构和外观。JavaScript 是一种真正的编程语言，它具有变量、数据类型、运算符、控制结构（如条件语句和循环）、函数等编程概念。JavaScript 的语法和某些概念确实与其他编程语言有共同的地方。

以下是关于JavaScript的各种作用的介绍:

1.1网页的动态效果：

JavaScript 能够为网页添加各种动态效果和交互性。例如，您可以使用 JavaScript 来改变页面元素的内容、样式或位置，创建动画，实现轮播图效果，制作响应式设计等。

通过 DOM（文档对象模型）操作，JavaScript 可以读取、修改和删除 HTML 元素及其属性，从而实现网页的动态更新。

1.2 前后端交互 -- 数据提交(弹窗/输入/事件监听)：

JavaScript 负责处理用户在前端（即浏览器端）的操作，如点击按钮、提交表单等。这些操作可以通过事件监听器（Event Listeners）来捕获并处理。

使用 JavaScript，您可以创建弹窗（如警告框、确认框、输入框等）来收集用户输入或显示信息。

JavaScript 还能通过 AJAX（Asynchronous JavaScript and XML）技术或现代的 Fetch API 与后端服务器进行异步通信，实现数据的提交和接收，而无需重新加载整个页面。

1.3进阶 -- 前端高级框架：

当涉及到更复杂的前端应用开发时，通常会使用前端框架来简化开发过程并提高代码的可维护性。JavaScript 有多个流行的前端框架可供选择，包括但不限于：

1.3.1Vue.js：

一个渐进式的 JavaScript 框架，旨在通过简洁的 API 实现响应式数据绑定和组合的视图组件。

1.3.2React.js：

一个用于构建用户界面的 JavaScript 库，特别是用于创建单页面应用（SPA）。React 通过虚拟 DOM 和组件化开发提高了性能和开发效率。

1.3.3Node.js：

虽然 Node.js 主要用于后端开发，但它允许开发者使用 JavaScript 在服务器端运行代码。这意味着可以使用相同的编程语言进行全栈开发（即前端和后端）。Node.js 提供了丰富的模块和工具生态系统，用于构建网络应用、API、命令行工具等。

1.3.4Three.js：

这是一个基于 WebGL 的 JavaScript 3D 库，用于在浏览器中创建和显示动画的 3D 计算机图形。Three.js 简化了 WebGL 的复杂性，使开发者能够更容易地构建 3D 应用和游戏。

2.JavaScript的基本输入输出:

2.1注释:

在编程中，注释是用来解释代码或标注某些特定信息的文本。它们不会被程序执行，但对于阅读和维护代码的人来说非常重要所有接下来我们将介绍一下关于JavaScript的基本注释:

2.1.1单行注释：

在JavaScript中，单行注释以//开始。这意味着从//开始到该行结束的所有内容都不会被执行，只是作为说明或备注。

// 这是一个单行注释，解释接下来的代码是做什么的

2.1.1多行注释：

多行注释以/*开始，以*/结束。它们允许你在多行中添加注释，这在需要对一大块代码或逻辑进行说明时非常有用。

/*  
这是一个多行注释的示例，  
可以用来解释一系列复杂的操作  
或者说明某个功能块的实现细节  
*/

2.2输出语句:

在JavaScript中，有几种方式可以输出信息。

2.2.1document.write：

这个方法将内容直接写入到HTML文档中。它通常用于在网页加载时在页面中插入内容。但需要注意的是，如果在页面完全加载后使用document.write，它可能会覆盖页面的内容。

document.write('<p>这段文本将被写入到HTML文档中。</p>');

2.2.2alert：

alert函数会在浏览器中弹出一个包含指定消息的警告框。用户必须点击“确定”按钮才能关闭这个警告框。这种方法常用于向用户显示重要信息或错误消息。

alert('这是一个警告框，用于显示重要信息！');

2.2.3console.log：

console.log方法将信息输出到浏览器的控制台（Console）。它主要用于调试目的，开发者可以在控制台中查看输出的信息，而用户则通常看不到这些信息。

console.log('这条信息将只出现在浏览器的控制台中。');

2.3输入语句:

JavaScript也提供了一种从用户那里获取输入的方法。

2.3.1prompt：

prompt函数会弹出一个对话框，要求用户输入一些文本。这个函数可以接收一个可选的参数，作为提示用户应该输入什么的文本。用户输入的内容将作为prompt函数的返回值

let userName = prompt('请输入您的名字：');  
alert('您好，' + userName + '！欢迎来到网站！');

解释:

在上面的代码中，prompt函数弹出一个对话框，提示用户输入名字。用户输入的名字将被存储在userName变量中。然后，alert函数使用这个名字来向用户打招呼。

3.js变量基本概念:

3.1变量声明的重要性:

在编程中，变量声明是一个至关重要的步骤。它告诉编译器或解释器，我们将要使用一个特定的标识符（即变量名）来存储数据，并且这个标识符在程序中的某个作用域内是有效的。

3.2变量声明的目的：

3.2.1明确作用域：

通过声明变量，我们定义了变量的作用域。作用域决定了变量在代码的哪些部分可以被访问。例如，在函数内部声明的局部变量只能在该函数内部被访问。

3.2.2类型安全：

在某些强类型的编程语言中，声明变量时还需要指定变量的类型（如整数、浮点数、字符串等）。这有助于编译器在编译时检查类型错误，从而提高程序的健壮性。

3.2.3内存管理：

声明变量时，系统通常会为变量分配内存空间。了解变量的生命周期和内存分配对于编写高效、无内存泄漏的代码至关重要。

3.2.4可读性：

明确的变量声明可以增强代码的可读性。通过查看变量的声明，其他开发者可以更容易地理解代码的逻辑和意图。

3.2.5初始化：

声明变量时，通常也会对其进行初始化，即赋予一个初始值。这是一个好习惯，因为它可以防止程序在后续代码中使用未初始化的变量，从而避免潜在的错误。

3.3变量声明的方式：

在JavaScript中，你可以使用var、let或const来声明变量。它们之间的主要区别在于作用域和可变性：

`3.3.1var`：

具有函数作用域，可以在整个函数内部被访问，并且可以被重新赋值。

`3.3.2let`：

具有块级作用域，只在其被声明的代码块内有效，并且可以被重新赋值。

`3.3.3const`：

也是块级作用域，但其值在声明后不能被修改（尽管它引用的对象内部的属性可能可以改变）。

3.4变量命名的最佳实践：

3.4.1清晰性：

变量名应清晰、简洁地表达其用途。例如，使用age而不是a或x来表示年龄。

3.4.2避免使用关键字：

不要使用JavaScript的保留关键字作为变量名，以免引发语法错误。

3.4.3驼峰命名法：

在命名多个单词组成的变量时，使用驼峰命名法（camelCase），即第一个单词首字母小写，后续单词首字母大写，如userAge。

3.4.4常量使用大写：

对于不会改变的值（常量），通常使用全大写字母表示，如MAX_VALUE。

4.JavaScript 基本数据类型:

4.1Number（数值）:

4.1.1用途：

用于数学计算和表示数值，包括整数、小数、正负数。

4.1.2示例：

let age = 27;, let height = 148.5;

4.1.3注意点：

JavaScript中的Number类型不区分整数和浮点数，统一使用Number表示。

4.2String（字符串）:

4.2.1用途：

用于表示文本数据。

4.2.2示例：

let name = '谢霆锋';, let greeting = "Hello, World!";

4.2.2拓展：

字符串可以用单引号、双引号或反引号（模板字符串）包裹。模板字符串支持嵌入变量和表达式，如：console.log(Hello, ${name}!);

4.3Boolean（布尔）:

4.3.1用途：

用于逻辑判断，只有两个值：true 和 false。

4.3.2示例：

let isVIP = true;, let isFinished = false;

4.4Undefined（未定义）:

4.4.1用途：

表示变量已声明但未赋值。

4.4.2示例：

let test;（此时test的值为undefined）

4.4.3注意点：

当访问一个未定义的变量时，也会返回undefined。

4.5.Null（空）:

4.5.1用途：

表示一个空值或不存在的对象。

4.5.2示例：

let wife = null;

4.5.3注意点：

尽管null在JavaScript中被认为是一个对象类型，但这实际上是一个历史遗留的错误，null并不指向任何对象。在现代JavaScript编程中，通常建议使用null来表示一个预期为空的对象引用。

4.6Symbol（符号）

4.6.1用途：

表示一个唯一的、不可变的数据类型，常用于对象属性的键。

4.6.2示例：

let sym = Symbol('mySymbol');

4.6.3拓展：

Symbol类型的数据是唯一的，每次调用Symbol()都会返回一个不同的符号。它们常用于确保对象属性的唯一性，避免命名冲突。

4.7BigInt（大整数）:

4.7.1用途：

用于表示任意精度的整数。

4.7.2示例：

let bigNumber = BigInt('9007199254740993'); // 超过Number类型能表示的最大安全整数范围时，可使用BigInt类型来表示。

4.7.3注意点：

BigInt类型不能与Number类型直接进行数学运算，需要显式转换。

4.8为什么要区分数据类型？

区分数据类型有助于更好地管理、区分和使用数据。不同的数据类型在内存中的存储方式和操作方式都不同，因此明确数据类型可以提高代码的可读性和可维护性，同时也有助于减少错误和提高程序性能。

4.9如何查看数据类型？

在JavaScript中，可以使用typeof操作符来查看一个变量的数据类型。例如：console.log(typeof age); 这将输出变量age的数据类型。

5.js转义字符:

在JavaScript中，转义字符用于在字符串中插入特殊字符，这些特殊字符通常具有特定的控制功能或者代表那些无法直接输入的字符。有特殊意义的字符.js遇到它会特别处理 --> 在控制台用\n :

换行\t : 制表符,缩进

\\ : 正常输出斜杠

\' : 正常输出引号

由于js没有原始字符串.不能像py那样在字符串前加r取消转义

当你在JavaScript字符串中使用这些转义字符时，它们会被解析成对应的特殊字符。

例子:

console.log("Hello\nWorld"); // 输出两行：Hello 和 World  
console.log("Hello\tWorld"); // Hello后面跟一个制表符，然后是World  
console.log("C:\\path\\to\\file"); // 输出：C:\path\to\file

如果需要在字符串中包含引号，你可以使用转义字符来避免字符串的提前结束：

console.log("He said, \"Hello!\""); // 输出：He said, "Hello!"

对于单引号，你也可以在包含单引号的字符串中使用转义字符：

console.log('It\'s a beautiful day.'); // 输出：It's a beautiful day.

虽然JavaScript没有像Python那样的原始字符串字面量（在字符串前加r来取消转义），但你可以通过使用双反斜杠（\\）来避免转义，或者将字符串拼接起来以避免特殊字符的影响。

例如，如果你需要打印一个文件路径，并且不想对反斜杠进行转义，你可以这样做：

let path = "C:\\\\path\\\\to\\\\file"; // 或者使用正斜杠，这在大多数环境中也是可以接受的 console.log(path); // 输出：C:\\path\\to\\file

或者使用正斜杠（/），这在大多数操作系统和环境中都是可接受的路径分隔符：

let path = "C:/path/to/file"; console.log(path); // 输出：C:/path/to/file

另外，ES6引入了模板字符串，它们使用反引号（```）而不是普通的单引号或双引号，并且支持嵌入表达式。模板字符串中的所有内容都会按原样输出，除非使用了${expression}来嵌入JavaScript表达式：

let name = "Alice";  
console.log(`Hello, ${name}!`); // 输出：Hello, Alice!

在模板字符串中，你不需要对换行符或特殊字符进行转义，它们会按原样输出：

console.log(`This is a  
multi-line  
string.`);

6.js类型转换:

在写代码过程中.经常会遇到把一个数据转为其他数据类型使用的情况. 此时需要类型转换

6.1隐式类型转换（Coercion）:

隐式类型转换是JavaScript引擎在需要时自动进行的类型转换。例如，在进行算术运算时，如果其中一个操作数是字符串，而另一个是数字，JavaScript会尝试将字符串转换为数字，以便进行数学计算。但在使用+运算符时，如果任一操作数是字符串，则+会被当作字符串连接符来使用。

console.log(1 + '1'); // 输出 '11'，因为+被识别为字符串连接  
console.log(1 - '1'); // 输出 0，因为-被识别为减法，'1'被隐式转换为数字1

6.2显式类型转换（强制类型转换）:

显式类型转换是开发者明确指示将数据从一种类型转换为另一种类型。在JavaScript中，可以使用内置的函数如Number(), String(), Boolean()等来进行显式类型转换。

6.2.1Number()

Number()函数尝试将其参数转换为一个数字。

console.log(Number('123')); // 输出 123  
console.log(Number('abc')); // 输出 NaN (Not a Number)

6.2.1parseInt() 和 parseFloat():

parseInt()函数将一个字符串转换为整数，而parseFloat()则尝试将一个字符串转换为浮点数。

console.log(parseInt('123abc')); // 输出 123，解析到非数字字符停止  
console.log(parseFloat('123.45abc')); // 输出 123.45，解析到非数字字符停止

6.2.3String():

String()函数将其参数转换为一个字符串。

console.log(String(123)); // 输出 '123'

6.2.4Boolean():

Boolean()函数将其参数转换为一个布尔值。在JavaScript中，以下值被转换为false：

false
0 和 -0
""（空字符串）
null
undefined
NaN

所有其他值都被转换为true。

console.log(Boolean(0)); // 输出 false  
console.log(Boolean('Hello')); // 输出 true

7. 运算符:

7.1算术运算符:

算术运算符用于执行数学运算，如加法、减法、乘法、除法和取模（求余数）。

+：加法
-：减法
*：乘法
/：除法
%：取模（求余数）

let a = 10;  
let b = 3;  
  
console.log(a + b); // 输出 13  
console.log(a - b); // 输出 7  
console.log(a * b); // 输出 30  
console.log(a / b); // 输出 3.3333333333333335  
console.log(a % b); // 输出 1 (10除以3的余数是1)

7.2逻辑运算符:

逻辑运算符用于连接布尔值或返回布尔值的结果。

&&：逻辑与，当且仅当两个操作数都为真时，结果才为真。
||：逻辑或，当至少一个操作数为真时，结果为真。
!：逻辑非，对一个布尔值取反。

let x = true;  
let y = false;  
  
console.log(x && y); // 输出 false，因为y为false  
console.log(x || y); // 输出 true，因为x为true  
console.log(!x);     // 输出 false，因为x为true，取反后为false

7.3 关系运算符:

关系运算符用于比较两个值的大小关系，返回布尔值。

==：等于
>：大于
<：小于
>=：大于或等于
<=：小于或等于

示例：

let p = 5;  
let q = 3;  
  
console.log(p == q); // 输出 false  
console.log(p > q);  // 输出 true  
console.log(p < q);  // 输出 false  
console.log(p >= q); // 输出 true  
console.log(p <= q); // 输出 false

7.4赋值运算符:

赋值运算符用于将右侧操作数赋值给左侧操作数。

=：赋值
+=：加法赋值（a += b 等同于 a = a + b）
-=：减法赋值
*=：乘法赋值
/=：除法赋值
%=：取模赋值

let r = 10;  
r += 5; // 等同于 r = r + 5; 此时r为15  
r -= 3; // 等同于 r = r - 3; 此时r为12  
r *= 2; // 等同于 r = r * 2; 此时r为24  
r /= 4; // 等同于 r = r / 4; 此时r为6  
r %= 5; // 等同于 r = r % 5; 此时r为1

7.5单目运算符:

单目运算符只需要一个操作数。

++：自增，将变量的值加1。
--：自减，将变量的值减1。

前缀形式（++i 或 --i）会先修改值再返回新值，后缀形式（i++ 或 i--）会先返回当前值再修改。

示例：

let s = 5;  
console.log(++s); // 输出 6，先自增再返回新值  
  
let t = 5;  
console.log(t++); // 输出 5，先返回当前值再自增  
console.log(t);   // 输出 6，此时t的值已经是6了

7.6短路运算符:

在逻辑运算中，"短路"是指当逻辑表达式的结果已经能够确定时，不再计算后续的表达式部分。这在编程中常用于条件判断和优化。

对于 &&，如果第一个操作数为false，则整个表达式必定为false，不会计算后面的操作数。
对于 ||，如果第一个操作数为true，则整个表达式必定为true，不会计算后面的操作数。

示例：

function test() {  
    console.log('Function test is called.');  
    return true;  
}  
  
// 使用 && 短路  
console.log(false && test()); // 输出 false，且不会调用test函数，因为第一个操作数已经是false  
  
// 使用 || 短路  
console.log(true || test());  // 输出 true，且不会调用test函数，因为第一个操作数已经是true

结语:

好了,今天关于JavaScript的认识我们先介绍到这里了,今天的内容非常多同时也是干货满满,希望各位看到这里的读者可以给我一点小小的鼓励和支持,以上的全部内容都是我个人的学习的一些小小的收获,可能会有所遗漏欢迎大家的指正,也希望大家可以在评论区和谐交流如果可以的话可以给我一点小小的鼓励。给我点点关注和留下你的赞,小编在这里感激不尽!!!