Javaweb学习之JavaScript（一）

不要数手指啦

已于 2024-08-19 15:02:36 修改

阅读量615

点赞数 13

文章标签：学习 javascript 开发语言

于 2024-08-19 12:54:24 首次发布

本文链接：https://blog.csdn.net/2301_80841939/article/details/141321183

版权

5. 使用defer或async属性（可选）

初步认识

JavaScript 是一种高级的、解释执行的编程语言，它最初是为了在网页浏览器中实现交互性而设计的。然而，随着其不断发展和完善，JavaScript 已经远远超出了这一范畴，成为了一种全能的编程语言，能够用于开发各种类型的应用程序，包括但不限于网页应用、服务器应用、桌面应用以及移动应用等。

JavaScript 的特点

解释型语言：JavaScript 是一种解释型语言，这意味着它不需要在执行之前进行编译。JavaScript 代码在执行时，会由 JavaScript 引擎一行一行地解释执行。
面向对象：虽然 JavaScript 是一种基于原型的语言，但它支持面向对象的编程范式，包括封装、继承和多态等特性。
动态类型：JavaScript 是一种动态类型语言，变量在声明时不需要指定类型，其类型会在运行时根据赋值自动确定。
事件驱动：JavaScript 最初是为处理网页上的用户交互而设计的，因此它天生就支持事件驱动编程。用户的行为（如点击、滚动等）可以触发 JavaScript 代码的执行。
跨平台：由于几乎所有的现代浏览器都支持 JavaScript，因此它可以在不同的操作系统和浏览器上运行，实现了跨平台的能力。
丰富的库和框架：JavaScript 社区非常活跃，拥有大量的库和框架，如 jQuery、React、Vue.js、Angular 等，这些工具极大地简化了 Web 开发工作，提高了开发效率。

JavaScript 的应用场景

网页开发：JavaScript 是 Web 开发的核心技术之一，用于实现网页的动态效果和交互性。
服务器端开发：随着 Node.js 的出现，JavaScript 也可以用于服务器端开发，实现高性能的 Web 服务器和实时应用。
桌面应用开发：通过 Electron、NW.js 等框架，JavaScript 可以用来开发跨平台的桌面应用程序。
移动应用开发：React Native、Flutter（虽然不是纯 JavaScript，但支持 Dart 和 JavaScript）等框架允许开发者使用 JavaScript 来开发移动应用。
游戏开发：虽然 JavaScript 不是专门的游戏开发语言，但通过 Phaser、Three.js 等库，开发者也可以用它来创建 2D 和 3D 游戏。
物联网（IoT）：JavaScript 也可以用于物联网设备的编程和控制，尤其是在与 Node.js 结合使用时。

优点

广泛的浏览器支持：几乎所有现代浏览器都内置了对 JavaScript 的支持，这意味着你可以使用 JavaScript 开发的网站或应用能够在大多数用户的设备上无缝运行。
丰富的生态系统：JavaScript 拥有一个庞大且活跃的社区，提供了大量的库、框架和工具，如 React、Vue、Angular、jQuery、Node.js 等，这些工具极大地简化了开发过程，提高了开发效率。
全栈开发能力：JavaScript 不仅可以用于前端开发，还可以通过 Node.js 等技术栈用于服务器端开发，实现全栈开发能力，这有助于开发者更全面地掌握项目，并减少不同技术栈之间的切换成本。
动态类型：JavaScript 的动态类型特性使得它非常灵活，可以在运行时改变变量的类型，这在某些情况下可以提高开发效率。
异步处理能力：JavaScript 支持异步编程，这对于处理 I/O 密集型任务（如网络请求、文件读写等）非常有用，可以提高应用的性能和响应能力。
易于学习：JavaScript 的语法相对简单，且其面向对象的概念也易于理解，这使得它成为许多初学者的首选编程语言。

缺点

性能问题：虽然 JavaScript 的性能在不断提升，但在处理复杂计算或大规模数据处理时，其性能可能不如编译型语言（如 C++、Java）。此外，由于 JavaScript 是单线程的，长时间运行的脚本可能会阻塞 UI 更新，影响用户体验。
安全性问题：JavaScript 运行在客户端，这意味着它可以被用户直接查看和修改。如果开发者没有采取适当的安全措施，JavaScript 代码可能会受到 XSS（跨站脚本攻击）等安全威胁。
全局变量污染：JavaScript 允许在全局作用域中声明变量，这可能导致全局变量污染的问题，特别是在大型项目中，这可能会使代码难以维护和理解。
错误处理复杂：JavaScript 的错误处理机制相对复杂，特别是当涉及到异步代码时。虽然 ES6 引入了 Promise 和 async/await 等新的异步处理机制，但错误处理仍然是 JavaScript 开发中的一个挑战。
回调地狱（Callback Hell）：在 ES6 之前的 JavaScript 中，处理异步操作通常需要使用回调函数。当这些回调嵌套过多时，代码会变得难以阅读和维护，这被称为“回调地狱”。虽然 Promise 和 async/await 提供了更好的解决方案，但回调地狱仍然是 JavaScript 历史上的一个痛点。
浏览器兼容性：虽然现代浏览器对 JavaScript 的支持已经非常好，但仍然存在一些旧的浏览器或特定的浏览器环境可能不支持某些新特性或存在兼容性问题。这要求开发者在开发过程中注意测试不同浏览器环境下的表现，并可能需要使用 polyfills 或 Babel 等工具来确保兼容性。

JavaScript引入方式

1. 行内引入（内联脚本）

方式：直接在HTML标签的事件属性（如onclick、onmouseover等）中编写JavaScript代码。这种方式通常用于简单的交互效果，但不建议在生产环境中大量使用，因为它会导致HTML和JavaScript代码紧密耦合，不利于代码的维护和管理。

示例：

<button onclick="alert('按钮被点击了！')">点击我</button>

2. 内部引入（内嵌脚本）

方式：在HTML文档的<head>或<body>部分，通过<script>标签直接编写JavaScript代码。这种方式适合页面特有的、不需要复用的JavaScript代码。通常，为了提高页面加载速度，会将<script>标签放在<body>标签的底部。

示例：

<script> 
alert('这是内部引入的JavaScript代码！'); 
</script>

3. 外部引入

方式：将JavaScript代码编写在独立的.js文件中，然后在HTML文档中使用<script>标签的src属性引入该.js文件。这种方式有利于代码的复用和维护，特别是当JavaScript代码量较大时，可以将其拆分成多个文件进行管理。
示例：
- 首先，创建一个名为example.js的JavaScript文件，并编写代码：
```
// example.js 文件内容  
alert('这是外部引入的JavaScript代码！');
```
- 然后，在HTML文件中引入该JavaScript文件：
```
<script src="example.js"></script>
```

4. 动态加载（可选）

方式：使用JavaScript的createElement和appendChild方法动态地在HTML文档中创建并插入<script>标签，然后指定其src属性为要加载的JavaScript文件的路径。这种方式可以在页面加载完成后，根据用户的交互或其他条件动态地加载JavaScript代码。

示例：

var script = document.createElement('script');  
script.src = 'dynamic.js';  
document.body.appendChild(script);

5. 使用defer或async属性（可选）

方式：在<script>标签中使用defer或async属性来控制JavaScript文件的加载和执行时机。defer属性表示脚本将在文档完全解析和显示后执行，而async属性表示脚本将异步加载并执行，不会阻塞页面的解析和渲染。

示例：

使用defer属性：
```
<script src="defer.js" defer></script>
```
使用async属性：
```
<script src="async.js" async></script>
```

注意：<script> 标签在 HTML 中通常不被视为自闭合标签（也称为空元素或自结束标签）。自闭合标签通常用于那些不需要结束标签的 HTML 元素，比如 <img />、<br /> 或 <hr />（尽管在 HTML5 中，<br> 和 <hr> 可以省略斜杠 /，但理论上它们仍然被视为自闭合标签）。

<script> 标签用于包含或引用 JavaScript 代码，它需要有一个明确的开始标签 <script> 和一个结束标签 </script>。这是因为 <script> 标签内部可能会包含大量的 JavaScript 代码，这些代码需要被正确地包含在标签内部，以便浏览器能够解析和执行它们。

如果你尝试使用自闭合的形式来编写 <script> 标签，比如 <script src="script.js" />，大多数浏览器会忽略结束标签中的斜杠 /，并尝试解析紧随其后的内容作为 JavaScript 代码，直到遇到真正的 </script> 结束标签为止。然而，这种写法并不是标准的 HTML 写法，可能会导致跨浏览器兼容性问题或解析错误。

书写语法

区分大小写

JavaScript是区分大小写的语言。这意味着变量名、函数名、关键字（如if、for、var等）以及其他标识符在JavaScript中都是大小写敏感的。例如，变量name和Name会被视为两个不同的变量。

let name = "John";  
let Name = "Jane";  
console.log(name); // 输出: John  
console.log(Name); // 输出: Jane

每行结尾的分号

在JavaScript中，分号（;）用于语句的结束。虽然大多数时候JavaScript引擎能够自动推断语句的结束（这称为自动分号插入，ASI），但在某些情况下，省略分号可能会导致意外的行为或错误。因此，为了代码的清晰和避免潜在的错误，建议在每个语句的末尾显式地添加分号。

let x = 5;  
let y = 10;  
// 虽然下面这行没有分号，但通常JavaScript引擎能正确处理  
let z = 15

然而，在编写返回语句、使用++或--运算符等情况下，省略分号可能会导致问题。

注释

JavaScript支持两种类型的注释：

单行注释：以//开始，直到行尾的所有内容都被视为注释。
```
// 这是一个单行注释  
let a = 5; // 这也是注释，位于行尾
```

多行注释（或块注释）：以/*开始，以*/结束，可以跨越多行。

/* 这是一个  
   多行注释 */  
let b = 10;  
  
/*  
这里可以写很多  
行的注释  
*/

大括号表示代码块

在JavaScript中，大括号{}用于定义代码块。代码块是一组语句，它们被视为一个单元。代码块在控制流语句（如if、for、while等）中非常有用，因为它们允许你定义一组语句，这些语句仅在特定条件下执行。

if (true) {  
    console.log("条件为真");  
    // 这里是代码块的一部分  
}  
  
for (let i = 0; i < 5; i++) {  
    console.log(i);  
    // 这也是代码块的一部分  
}

在函数定义中，大括号也用于包围函数体。

function greet(name) {  
    console.log("Hello, " + name);  
    // 函数体的一部分  
}

变量声明

JavaScript使用var、let和const来声明变量。var声明的变量作用域为函数作用域或全局作用域，而let和const（ES6+）声明的变量具有块级作用域。

var x = 5; // 函数作用域或全局作用域  
let y = 10; // 块级作用域  
const PI = 3.14; // 块级作用域，且值不可变

JavaScript是一门弱类型语言，变量可以存放不同类型的值。

变量名需要遵循如下规则：

组成字符可以是任何字母，数字，下划线或美元符号$
数字不能开头
建议使用驼峰命名

数据类型

JavaScript是动态类型语言，变量可以在运行时改变类型。JavaScript的基本数据类型包括：String、Number、BigInt、Boolean、Symbol（ES6+）、Undefined和Null。此外，还有Object类型，它是所有非基本数据类型的统称。

let name = "Alice"; // String  
let age = 30; // Number  
let isStudent = false; // Boolean  
let nothing = null; // Null  
let something = undefined; // Undefined  
let bigNumber = BigInt("123456789012345678901234567890"); // BigInt  
let symbol = Symbol("description"); // Symbol

运算符

JavaScript支持多种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符、条件（三元）运算符等。

let result = 10 + 5; // 算术运算符  
let max = a > b ? a : b; // 条件运算符

控制流语句

JavaScript提供了多种控制流语句，如if...else、switch、for、while、do...while等，用于控制代码的执行流程。

if (age >= 18) {  
  console.log("成年人");  
} else {  
  console.log("未成年人");  
}  
  
for (let i = 0; i < 5; i++) {  
  console.log(i);  
}

函数

JavaScript中的函数是一等公民，可以像变量一样被赋值、传递和返回。函数可以声明为具名函数或匿名函数（常作为回调使用）。

function greet(name) {  
  console.log("Hello, " + name);  
}  
  
const sayHello = function(name) {  
  console.log("Hi, " + name);  
};  
  
greet("Alice");  
sayHello("Bob");

数组和对象

JavaScript中的数组是特殊的对象，用于存储一系列的值。对象用于存储键值对集合。

let fruits = ["Apple", "Banana", "Cherry"];  
  
let person = {  
  name: "Alice",  
  age: 30,  
  greet: function() {  
    console.log("Hello, my name is " + this.name);  
  }  
};  
  
person.greet();

模板字符串（ES6+）

模板字符串允许你嵌入表达式，并使用多行字符串和字符串插值功能。

let name = "Alice";  
let greeting = `Hello, ${name}!`;  
console.log(greeting);

箭头函数（ES6+）

箭头函数提供了一种更简洁的方式来写函数表达式。

const add = (a, b) => a + b;  
console.log(add(5, 3));

异步编程

JavaScript是单线程的，但它提供了多种处理异步操作的方式，如回调函数、Promises、async/await等。

async function fetchData() {  
  let response = await fetch('https://api.example.com/data');  
  let data = await response.json();  
  console.log(data);  
}  
  
fetchData();

篇幅有点长了，剩下的下一篇再介绍吧。

不要数手指啦

关注

13
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Javaweb学习之JavaScript（一）

然而，随着其不断发展和完善，JavaScript 已经远远超出了这一范畴，成为了一种全能的编程语言，能够用于开发各种类型的应用程序，包括但不限于网页应用、服务器应用、桌面应用以及移动应用等。此外，由于 JavaScript 是单线程的，长时间运行的脚本可能会阻塞 UI 更新，影响用户体验。：JavaScript 拥有一个庞大且活跃的社区，提供了大量的库、框架和工具，如 React、Vue、Angular、jQuery、Node.js 等，这些工具极大地简化了开发过程，提高了开发效率。
复制链接

扫一扫