JavaScript从入门到实践

JavaScript从入门到实践

  • 软件版本(VSCode)：

版本: 1.95.3 (user setup)
提交: f1a4fb101478ce6ec82fe9627c43efbf9e98c813
日期: 2024-11-13T14:50:04.152Z
Electron: 32.2.1
ElectronBuildId: 10427718
Chromium: 128.0.6613.186
Node.js: 20.18.0
V8: 12.8.374.38-electron.0

JavaScript是什么❓

JavaScript 是一种广泛使用的编程语言，主要用于网页开发。它是一种 脚本语言，最初用于为网页添加交互性和动态内容。JavaScript 可以在网页中执行，使得页面不需要重新加载就能更新内容。它通常与 HTML 和 CSS 一起使用，来构建和设计网站。

JavaScript 的核心特点包括：

  1. 客户端脚本语言：JavaScript 通常在用户的浏览器中运行，而不是在服务器上运行。这意味着它可以快速响应用户输入，无需与服务器频繁交互。
  2. 事件驱动：JavaScript 允许网页响应用户的各种操作，如点击、键盘输入、鼠标移动等。
  3. 动态类型语言：变量的类型在运行时可以改变，不需要声明变量类型。
  4. 支持面向对象编程（OOP）和函数式编程（FP）：JavaScript 支持这两种编程范式，允许开发者使用不同的编程风格。
  5. 跨平台性：JavaScript 可以在所有现代浏览器中运行，并且也可以在服务器端通过 Node.js 来执行，使其适用于全栈开发。

主要用途：

  • 网页前端开发：通过 DOM（文档对象模型）和 AJAX（异步 JavaScript 和 XML）技术，JavaScript 可以使网页响应用户行为，实现如表单验证、动态更新内容等功能。
  • 服务器端开发：通过 Node.js，JavaScript 也可以用于后端开发，构建 API 和服务器应用。
  • Web应用和移动应用开发：框架如 React、Vue 和 Angular 等使得 JavaScript 成为构建现代单页应用（SPA）的重要工具。

总结来说，JavaScript 是一门强大且灵活的编程语言，推动了现代网页和应用开发的快速发展。

JavaScript上手

  • 首先，我们在写网页前端时，如果单单使用Html语法会显得太单调，那么这个时候，我们就可以选择在Html页面中添加一些JavaScript来进行优化，以及配合Css样式（还没学）来进行美化。

  • 在开始编写JavaScript文件时（在下面我们统称为Js），请注意将文件名称修改为【***.js】后缀格式

  • 开始编写第一个Js：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
  <script>
    alert('我是一个弹窗')
  </script>
    
</body>
    

</html>
  • 在上面这段代码中，我们 <script></script>标签之内就是Js语法，一般地，我们Js的框架要跟在 <body></body>标签的下方，因为我们html文件加载如同大多数编程语言一样，加载从上到下。

  • 在上面，我们学会了如何在html文件内编写Js代码，但是在平常的使用中，我们会更喜欢将Js语法单独写在一个文件内，而不是写在一个html文件中（影响美观）

  • 那么我们应该怎么样从外部调用Js文件呢？

    • 请看示例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>

    <body>
      <script src="JS/Task2.js"></script>
    </body>

    </html>
    • 相比于上一个示例，这个示例显得更简洁，我们将Js文件单独存放在一个文件夹中，在