JavaScript 基础知识

avaScript 基础知识

JavaScript 是一种为您的网站添加交互性的编程语言。这种情况发生在游戏中、按下按钮或在表单上输入数据时的响应行为中；具有动感的造型；动画等。本文帮助您开始使用 JavaScript 并加深您对可能性的理解。

什么是 JavaScript？

JavaScript是一种功能强大的编程语言，可以为网站添加交互性。它是由布伦丹·艾希发明的。

JavaScript 用途广泛且适合初学者。有了更多的经验，您将能够创建游戏、动画 2D 和 3D 图形、全面的数据库驱动应用程序等等！

JavaScript 本身相对紧凑，但非常灵活。开发人员在核心 JavaScript 语言之上编写了各种工具，以最小的努力解锁了大量的功能。这些包括：

  • 浏览器应用程序编程接口 ( API ) 内置于 Web 浏览器中，提供动态创建 HTML 和设置 CSS 样式等功能；收集和操作来自用户网络摄像头的视频流，或生成 3D 图形和音频样本。
  • 第三方 API 允许开发人员将功能合并到其他内容提供商（例如 Twitter 或 Facebook）的网站中。
  • 可应用于 HTML 的第三方框架和库，以加速构建网站和应用程序的工作。

介绍核心 JavaScript 语言与上面列出的工具有何不同的详细信息超出了本文的范围（作为 JavaScript 的简要介绍）。您可以在 MDN 的JavaScript 学习区以及 MDN 的其他部分了解更多信息。

下面的部分介绍了核心语言的一些方面，并提供了使用一些浏览器 API 功能的机会。玩得开心！

一句“世界你好！” 例子

JavaScript 是最流行的现代网络技术之一！随着您的 JavaScript 技能的增长，您的网站将进入一个新的力量和创造力维度。

然而，熟悉 JavaScript 比熟悉 HTML 和 CSS 更具挑战性。您可能必须从小处开始，逐步进步。首先，我们来看看如何将 JavaScript 添加到页面以创建Hello world！例子。（Hello world！是入门编程示例的标准。）

警告：如果您尚未学习我们课程的其余部分，请下载此示例代码并将其用作起点。

  1. 转到您的测试站点并创建一个名为 的新文件夹scripts。在脚本文件夹中，创建一个名为 的新文本文档main.js，然后保存。
  2. 在您的index.html文件中，在结束标记之前的新行中输入以下代码</body>：

    HTML

    <script src="scripts/main.js"></script>
  3. <link>这与CSS 元素执行相同的工作。它将 JavaScript 应用到页面，因此它可以对 HTML（以及 CSS 以及页面上的其他任何内容）产生影响。
  4. 将此代码添加到main.js文件中：

    JS

    const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";
  5. 确保 HTML 和 JavaScript 文件已保存。index.html然后在浏览器中加载。你应该看到这样的东西：

Firefox 徽标上方的标题“hello world”

注意：（上面）说明将<script>元素放置在 HTML 文件底部附近的原因是浏览器按照代码在文件中出现的顺序读取代码。

如果 JavaScript 首先加载并且它应该影响尚未加载的 HTML，则可能会出现问题。将 JavaScript 放置在 HTML 页面底部附近是适应这种依赖性的一种方法。要了解有关替代方法的更多信息，请参阅脚本加载策略。

发生了什么？

标题文本更改为Hello world！使用 JavaScript。您通过使用一个名为 的函数querySelector()来获取对标题的引用，然后将其存储在名为 的变量中来完成此操作myHeading。这与我们使用 CSS 选择器所做的类似。当您想对某个元素执行某些操作时，需要先选择它。

myHeading接下来，代码将变量属性的值textContent（代表标题的内容）设置为Hello world！。

注意：本练习中使用的两个功能都是文档对象模型 (DOM) API的一部分，该 API 具有操作文档的功能。

语言基础速成课程

为了让您更好地理解 JavaScript 的工作原理，我们来解释一下该语言的一些核心功能。值得注意的是，这些功能对于所有编程语言都是通用的。如果您掌握了这些基础知识，那么您在使用其他语言进行编码时也将处于领先地位！

警告：在本文中，尝试将示例代码行输入 JavaScript 控制台，看看会发生什么。有关 JavaScript 控制台的更多详细信息，请参阅发现浏览器开发人员工具。

变量

变量是存储值的容器。首先使用关键字声明一个变量let，后跟您为该变量指定的名称：

JS

let myVariable;

行尾的分号表示语句的结束位置。仅当您需要将语句分隔在一行上时才需要它。然而，有些人认为在每个语句末尾添加分号是一种很好的做法。对于何时应该和不应该使用分号还有其他规则。有关更多详细信息，请参阅JavaScript 分号指南。

您几乎可以为变量命名任何名称，但有一些限制。（请参阅本节有关命名规则的内容。）如果您不确定，您可以检查变量名称以查看其是否有效。

JavaScript 区分大小写。这意味着myVariable不一样myvariable。如果您的代码有问题，请检查案例！

声明变量后，您可以给它赋值：

JS

myVariable = "Bob";

此外，您可以在同一行执行这两个操作：

JS

let myVariable = "Bob";

您可以通过调用变量名称来检索值：

JS

myVariable;

为变量赋值后，您可以稍后在代码中更改它：

JS

let myVariable = "Bob";
myVariable = "Steve";

请注意，变量可能保存具有不同数据类型的值：

多变的解释例子
细绳 这是称为字符串的文本序列。要表示该值是字符串，请将其括在单引号或双引号中。 let myVariable = 'Bob';或者
let myVariable = "Bob";
数字 这是一个数字。数字周围没有引号。 let myVariable = 10;
布尔值 这是一个 True/False 值。单词trueand false是不需要引号的特殊关键字。 let myVariable = true;
大批 这是一个允许您在单个引用中存储多个值的结构。 let myVariable = [1,'Bob','Steve',10];
像这样引用数组的每个成员：
myVariable[0]、 myVariable[1]等。
目的 这可以是任何东西。JavaScript 中的一切都是对象，并且可以存储在变量中。学习时请记住这一点。 let myVariable = document.querySelector('h1');
上面所有的例子也是如此。

那么为什么我们需要变量呢？在编程中做任何有趣的事情都需要变量。如果值无法更改，那么您就无法执行任何动态操作，例如个性化问候消息或更改图像库中显示的图像。

评论

注释是可以与代码一起添加的文本片段。浏览器会忽略标记为注释的文本。您可以像在 CSS 中一样在 JavaScript 中编写注释：

JS

/*
Everything in between is a comment.
*/

如果您的注释不包含换行符，可以选择将其放在两个斜杠后面，如下所示：

JS

// This is a comment

运营商

Anoperator是一个数学符号，它根据两个值（或变量）生成结果。在下表中，您可以看到一些最简单的运算符，以及在 JavaScript 控制台中尝试的一些示例。

操作员解释符号例子
添加 将两个数字相加或组合两个字符串。 + 6 + 9;
'Hello ' + 'world!';
减法、乘法、除法 这些功能符合您在基础数学中所期望的功能。 -, *,/ 9 - 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
任务 正如您已经看到的：这会为变量分配一个值。 = let myVariable = 'Bob';
严格平等 这将执行测试以查看两个值是否相等且数据类型相同。它返回 true/ false（布尔）结果。 === let myVariable = 3;
myVariable === 4;
不、不等于 这将返回与其前面的逻辑相反的值。它将 a 变成trueafalse等。当它与相等运算符一起使用时，否定运算符会测试两个值是否不相等。 !,!==

对于“Not”，基本表达式是true，但比较会返回false，因为我们对它求反：

let myVariable = 3;
!(myVariable === 3);

“不等于”使用不同的语法给出基本相同的结果。这里我们正在测试“不myVariable等于3”。返回此结果是 false因为myVariableIS 等于 3：

let myVariable = 3;
myVariable !== 3;

还有很多操作符需要探索，但目前就足够了。有关完整列表，请参阅表达式和运算符。

注意：执行计算时混合数据类型可能会导致一些奇怪的结果。请注意正确引用变量并获得预期的结果。例如，进入'35' + '25'您的控制台。为什么没有得到你期望的结果？因为引号将数字转换为字符串，所以您最终是连接字符串而不是添加数字。如果您输入，35 + 25您将得到两个数字的总和。

条件句

条件是用于测试表达式是否返回 true 的代码结构。条件语句的一种非常常见的形式是if...else语句。例如：

JS

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

里面的表达式if ()就是测试。这使用严格相等运算符（如上所述）将变量iceCream与字符串进行比较chocolate，看看两者是否相等。如果此比较返回true，则运行第一个代码块。如果比较不正确，else则运行该语句之后的第二个代码块。

功能

函数是一种打包您希望重用的功能的方式。可以将代码体定义为函数，当您在代码中调用函数名称时执行该函数。这是重复编写相同代码的一个很好的替代方法。您已经了解了函数的一些用法。例如：

JS

let myVariable = document.querySelector("h1");

JS

alert("hello!");

这些功能document.querySelector和alert是内置于浏览器中的。

如果您看到一些看起来像变量名的东西，但后面有括号——()它很可能是一个函数。函数通常接受参数：完成其工作所需的数据位。参数放在括号内，如果有多个参数，则用逗号分隔。

例如，该alert()函数使浏览器窗口中出现一个弹出框，但我们需要给它一个字符串作为参数来告诉函数要显示什么消息。

您还可以定义自己的函数。在下一个示例中，我们创建一个简单的函数，它将两个数字作为参数并将它们相乘：

JS

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

尝试在控制台中运行它；然后用几个参数进行测试。例如：

JS

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

注意：该return语句告诉浏览器从函数中返回result变量，以便可以使用它。这是必要的，因为在函数内部定义的变量仅在这些函数内部可用。这称为变量范围。（阅读有关变量作用域的更多信息。）

活动

网站上的真正交互需要事件处理程序。这些是侦听浏览器中的活动并运行代码作为响应的代码结构。最明显的例子是处理click 事件，当您用鼠标单击某些内容时，浏览器会触发该事件。要演示这一点，请在控制台中输入以下内容，然后单击当前网页：

JS

document.querySelector("html").addEventListener("click", function () {
  alert("Ouch! Stop poking me!");
});

有多种方法可以将事件处理程序附加到元素。这里我们选择<html>元素。然后我们调用它的addEventListener()函数，传入要侦听的事件的名称 ( 'click') 以及事件发生时要运行的函数。

我们刚刚传递到这里的函数addEventListener()称为匿名函数，因为它没有名称。还有另一种编写匿名函数的方法，我们称之为箭头函数。箭头函数使用() =>而不是function ()：

JS

document.querySelector("html").addEventListener("click", () => {
  alert("Ouch! Stop poking me!");
});

增强我们的示例网站

完成对 JavaScript 基础知识的回顾（见上文）后，让我们向示例站点添加一些新功能。

在继续之前，请删除main.js文件的当前内容 - 之前在“Hello world!”期间添加的内容。示例 - 并保存空文件。如果不这样做，现有代码将与您要添加的新代码发生冲突。

添加图像转换器

在本节中，您将学习如何使用 JavaScript 和 DOM API 功能来交替显示两个图像之一。当用户单击显示的图像时，就会发生此更改。

  1. 选择您想要在示例网站上展示的图像。理想情况下，图像的大小与您之前添加的图像的大小相同或尽可能接近。
  2. 将此图像保存在您的images文件夹中。
  3. 将图像重命名为firefox2.png。
  4. 将以下 JavaScript 代码添加到您的main.js文件中。

    JS

    const myImage = document.querySelector("img");

myImage.onclick = () => {
  const mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};
  5. 保存所有文件并index.html在浏览器中加载。现在，当您单击该图像时，它应该更改为另一张图像。

这就是发生的事情。<img>您在 中存储了对元素的引用myImage。接下来，将其onclick事件处理程序属性设置为等于没有名称的函数（“匿名”函数）。所以每次点击这个元素时：

  1. 该代码检索图像src属性的值。
  2. 该代码使用条件来检查该src值是否等于原始图像的路径：
    1. 如果是，代码会将src值更改为第二个图像的路径，强制将另一个图像加载到元素内<img>。
    2. 如果不是（意味着它必须已经更改），则该src值将交换回原始图像路径，即原始状态。

添加个性化欢迎信息

接下来，让我们将页面标题更改为用户首次访问该网站时的个性化欢迎消息。此欢迎信息将持续存在。如果用户离开网站并稍后返回，我们将使用Web Storage API保存消息。我们还将包含一个更改用户的选项，以及因此的欢迎消息。

  1. 在 中index.html，在元素之前添加以下行<script>：

    HTML

    <button>Change user</button>
  2. 在 中main.js，将以下代码完全按照编写方式放置在文件底部。这需要引用新按钮和标题，存储每个内部变量：

    JS

    let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");
  3. 添加以下函数来设置个性化问候语。这还不会起任何作用，但很快就会改变。

    JS

    function setUserName() {
  const myName = prompt("Please enter your name.");
  localStorage.setItem("name", myName);
  myHeading.textContent = `Mozilla is cool, ${myName}`;
}
    该setUserName()函数包含一个prompt()显示对话框的函数，类似于alert(). 该prompt()函数的作用不仅仅是alert()要求用户输入数据，并在用户单击“确定”后将其存储在变量中。在本例中，我们要求用户输入名称。接下来，代码调用 API localStorage，它允许我们在浏览器中存储数据并在以后检索它。我们使用 localStorage 的setItem()函数创建并存储一个名为 的数据项'name'，将其值设置为myName包含用户输入的名称的变量。最后，我们将textContent标题设置为一个字符串，加上用户新存储的名称。
  4. 添加以下条件块。我们可以调用此初始化代码，因为它在首次加载时构建应用程序。

    JS

    if (!localStorage.getItem("name")) {
  setUserName();
} else {
  const storedName = localStorage.getItem("name");
  myHeading.textContent = `Mozilla is cool, ${storedName}`;
}
    该块的第一行使用否定运算符（逻辑 NOT，由 表示!）来检查name数据是否存在。如果没有，setUserName()则运行该函数来创建它。如果存在（即用户在上次访问期间设置了用户名），我们将使用 检索存储的名称getItem()并将textContent标题设置为字符串，加上用户名，就像我们在 中所做的那样setUserName()。
  5. 将此onclick事件处理程序（如下）放在按钮上。单击后，setUserName()运行。这允许用户通过按按钮输入不同的名称。

    JS

    myButton.onclick = () => {
  setUserName();
};

用户名为空？

当您运行该示例并出现提示您输入用户名的对话框时，请尝试按“取消”按钮。您最终的标题应该是Mozilla is Cool, null。发生这种情况的原因是，当您取消提示时，该值设置为null。Null是 JavaScript 中的一个特殊值，表示值不存在。

另外，尝试单击“确定”而不输入名称。出于相当明显的原因，您最终应该得到一个标题，上面写着“Mozilla 很酷” 。

为了避免这些问题，您可以检查用户是否没有输入空白名称。将您的setUserName()功能更新为：

JS

function setUserName() {
  const myName = prompt("Please enter your name.");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

在人类语言中，这意味着：如果myName没有值，则setUserName()从头开始运行。如果它确实有一个值（如果上述语句不成立），则将该值存储在中localStorage并将其设置为标题的文本。

结论

如果您已按照本文中的所有说明进行操作，您最终应该会看到如下图所示的页面。您还可以查看我们的版本。

创建元素后 HTML 页面的最终外观：标题、大的居中徽标、内容和按钮

如果您遇到困难，可以将您的工作与GitHub 上已完成的示例代码进行比较。

我们刚刚触及了 JavaScript 的皮毛。如果您喜欢玩游戏并希望更进一步，请利用下面列出的资源。

也可以看看

使用 JavaScript 进行动态客户端脚本编写

更详细地深入研究 JavaScript。

学习 JavaScript

对于有抱负的 Web 开发人员来说，这是一个极好的资源！在自动化评估的指导下，通过简短的课程和交互式测试，在交互式环境中学习 JavaScript。前 40 节课免费。只需一次性支付少量费用即可获得完整的课程。

posted @ 2023-08-27 20:46  aiplus  阅读(95)  评论(0)    收藏  举报
悬浮按钮示例