定义和使用 JavaScript 变量

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,参与者将探索 JavaScript 中定义和使用变量的基本概念,这是 Web 开发中的一项关键技能。实验将引导学习者理解 JavaScript 在创建交互式 Web 体验中的作用,设置 HTML 环境,并掌握变量声明和操作技巧。

参与者将学习如何使用 var 关键字声明变量,为这些变量赋值,并在网页上动态显示它们。通过遵循逐步的指导,学生将获得 JavaScript 核心编程原则的实践经验,包括变量命名约定和构成现代 Web 开发基础的基本脚本技术。

理解 JavaScript 及其在 Web 开发中的作用

在这一步中,你将学习 JavaScript 及其在 Web 开发中的关键作用。JavaScript 是一种强大且多功能的编程语言,它为网站带来了交互性和动态功能。

JavaScript 是一种客户端脚本语言,主要用于 Web 浏览器。它允许开发者通过操作 HTML 和 CSS、处理用户事件以及实时执行复杂计算来创建交互式和动态的网页。

JavaScript 的主要特点包括:

  • 直接在 Web 浏览器中运行
  • 实现交互式 Web 体验
  • 可以动态修改 HTML 和 CSS
  • 支持事件驱动编程
  • 用于前端和后端开发(通过 Node.js)

以下是一个简单的示例,展示了 JavaScript 的基本功能:

<!doctype html>
<html>
  <head>
    <title>JavaScript Introduction</title>
  </head>
  <body>
    <h1 id="greeting">Hello, Web Development!</h1>
    <script>
      // JavaScript 可以动态更改页面内容
      document.getElementById("greeting").innerHTML = "Welcome to JavaScript!";
    </script>
  </body>
</html>

浏览器中的示例输出:

Welcome to JavaScript!

这个示例展示了 JavaScript 如何即时修改网页内容,展示了它在创建动态 Web 体验中的强大能力。

设置用于 JavaScript 的 HTML 文件

在这一步中,你将学习如何创建一个可以包含并执行 JavaScript 代码的 HTML 文件。HTML 为网页提供了结构,而 JavaScript 则为其添加了交互性和动态功能。

首先,导航到项目目录:

cd ~/project

使用 WebIDE 创建一个名为 variables.html 的新 HTML 文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Variables</title>
  </head>
  <body>
    <h1>Learning JavaScript Variables</h1>

    <!-- 我们将在接下来的步骤中在此处添加 JavaScript -->
    <script>
      // JavaScript 代码将写在这里
    </script>
  </body>
</html>

关于 HTML 结构的关键点:

  • <!DOCTYPE html> 声明这是一个 HTML5 文档
  • <script> 标签是编写 JavaScript 代码的地方
  • 你可以将 <script> 标签放在 <head><body> 部分

在浏览器中打开时的示例输出:

Learning JavaScript Variables

<script> 标签允许你直接在 HTML 文件中编写 JavaScript 代码,或者链接到外部的 JavaScript 文件。在接下来的步骤中,我们将向此文件添加 JavaScript 代码以处理变量。

使用 var 关键字声明变量

在这一步中,你将学习如何使用 var 关键字在 JavaScript 中声明变量。变量是用于存储数据值的容器,这些值可以在代码中使用和操作。

在 WebIDE 中打开 variables.html 文件,并修改 <script> 部分以添加变量声明:

<!doctype html>
<html lang="en">
  <body>
    <script>
      // 使用 var 关键字声明变量
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // 你也可以声明一个没有初始值的变量
      var lastName;
    </script>
  </body>
</html>

关于变量声明的关键点:

  • var 用于在 JavaScript 中声明变量
  • 变量可以存储不同类型的数据:
    • 字符串(文本):"John"
    • 数字:25
    • 布尔值:truefalse
  • 你可以声明一个没有初始值的变量

要查看变量的实际效果,可以使用 console.log() 来显示它们的值:

<script>
  var firstName = "John";
  console.log(firstName); // 输出:John
</script>

浏览器开发者控制台中的示例输出:

John

赋值并显示变量值

在这一步中,你将学习如何为变量赋值并使用 JavaScript 中的不同方法显示它们。基于上一步的内容,我们将探索如何处理变量值。

打开 variables.html 文件,并使用以下代码更新 <script> 部分:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // 声明并赋值变量
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // 重新赋值变量
      age = 26;
      firstName = "Jane";

      // 使用 console.log() 显示值
      console.log("Name: " + firstName);
      console.log("Age: " + age);
      console.log("Is Student: " + isStudent);

      // 在网页上显示值
      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Name: " +
        firstName +
        "<br>Age: " +
        age +
        "<br>Is Student: " +
        isStudent;
    </script>
  </body>
</html>

关于赋值和显示变量的关键点:

  • 使用 = 为变量赋值或重新赋值
  • console.log() 在浏览器的开发者控制台中显示值
  • document.getElementById().innerHTML 可以直接在网页上显示值
  • 你可以使用 + 连接字符串和变量

浏览器开发者控制台中的示例输出:

Name: Jane
Age: 26
Is Student: true

网页上的示例输出:

Name: Jane
Age: 26
Is Student: true

练习变量命名规范

在这一步中,你将学习 JavaScript 中变量命名的最佳实践。良好的变量命名对于编写干净、可读且可维护的代码至关重要。

打开 variables.html 文件,并使用以下示例更新 <script> 部分:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // 良好的变量命名规范

      // 使用 camelCase 命名变量
      var firstName = "John";
      var lastName = "Doe";
      var age = 25;
      var isStudent = true;

      // 使用描述性和有意义的名称
      var totalPrice = 99.99;
      var discountPercentage = 10;
      var calculatedDiscount = totalPrice * (discountPercentage / 100);

      // 避免使用单字母变量(除非在特定情况下,如循环)
      var x = 10; // 不好
      var width = 10; // 好

      // 显示结果
      console.log("Full Name: " + firstName + " " + lastName);
      console.log("Discounted Price: $" + calculatedDiscount);

      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Full Name: " +
        firstName +
        " " +
        lastName +
        "<br>Age: " +
        age +
        "<br>Discounted Price: $" +
        calculatedDiscount;
    </script>
  </body>
</html>

变量命名的关键规范:

  • 使用 camelCase(例如 firstNamelastName
  • 选择描述性和有意义的名称
  • 避免使用单字母变量名
  • 保持命名风格一致
  • 使用名词命名变量
  • 对于布尔变量,使用有意义的前缀,如 is

浏览器开发者控制台中的示例输出:

Full Name: John Doe
Discounted Price: $9.999

网页上的示例输出:

Full Name: John Doe
Age: 25
Discounted Price: $9.999

总结

在本实验中,参与者探索了 JavaScript 变量的基本概念及其在 Web 开发中的作用。实验首先介绍了 JavaScript 作为一种强大的客户端脚本语言,它能够实现交互式和动态的 Web 体验,强调了其操作 HTML 和 CSS、处理用户事件以及执行实时计算的能力。

通过逐步的方法,学习者设置了一个 HTML 文件,并开始练习使用 var 关键字声明变量,理解了正确变量命名规范的重要性以及如何赋值和显示变量值。动手练习提供了创建动态 Web 内容的实用见解,展示了 JavaScript 在将静态网页转变为交互式和引人入胜的用户体验方面的多功能性。

您可能感兴趣的其他 HTML 教程