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!是入门编程示例的标准。)
警告:如果您尚未学习我们课程的其余部分,请下载此示例代码并将其用作起点。
- 转到您的测试站点并创建一个名为 的新文件夹
scripts
。在脚本文件夹中,创建一个名为 的新文本文档main.js
,然后保存。 - 在您的
index.html
文件中,在结束标记之前的新行中输入以下代码</body>
:HTML
<script src="scripts/main.js"></script>
<link>
这与CSS 元素执行相同的工作。它将 JavaScript 应用到页面,因此它可以对 HTML(以及 CSS 以及页面上的其他任何内容)产生影响。- 将此代码添加到
main.js
文件中:JS
const myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!";
- 确保 HTML 和 JavaScript 文件已保存。
index.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 值。单词true and 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; |
减法、乘法、除法 | 这些功能符合您在基础数学中所期望的功能。 | - , * ,/ |
9 - 3; |
任务 | 正如您已经看到的:这会为变量分配一个值。 | = |
let myVariable = 'Bob'; |
严格平等 | 这将执行测试以查看两个值是否相等且数据类型相同。它返回 true / false (布尔)结果。 |
=== |
let myVariable = 3; |
不、不等于 | 这将返回与其前面的逻辑相反的值。它将 a 变成true afalse 等。当它与相等运算符一起使用时,否定运算符会测试两个值是否不相等。 |
! ,!== |
对于“Not”,基本表达式是
“不等于”使用不同的语法给出基本相同的结果。这里我们正在测试“不
|
还有很多操作符需要探索,但目前就足够了。有关完整列表,请参阅表达式和运算符。
注意:执行计算时混合数据类型可能会导致一些奇怪的结果。请注意正确引用变量并获得预期的结果。例如,进入'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);
活动
网站上的真正交互需要事件处理程序。这些是侦听浏览器中的活动并运行代码作为响应的代码结构。最明显的例子是处理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 功能来交替显示两个图像之一。当用户单击显示的图像时,就会发生此更改。
- 选择您想要在示例网站上展示的图像。理想情况下,图像的大小与您之前添加的图像的大小相同或尽可能接近。
- 将此图像保存在您的
images
文件夹中。 - 将图像重命名为firefox2.png。
- 将以下 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"); } };
- 保存所有文件并
index.html
在浏览器中加载。现在,当您单击该图像时,它应该更改为另一张图像。
这就是发生的事情。<img>
您在 中存储了对元素的引用myImage
。接下来,将其onclick
事件处理程序属性设置为等于没有名称的函数(“匿名”函数)。所以每次点击这个元素时:
- 该代码检索图像
src
属性的值。 - 该代码使用条件来检查该
src
值是否等于原始图像的路径:- 如果是,代码会将
src
值更改为第二个图像的路径,强制将另一个图像加载到元素内<img>
。 - 如果不是(意味着它必须已经更改),则该
src
值将交换回原始图像路径,即原始状态。
- 如果是,代码会将
添加个性化欢迎信息
接下来,让我们将页面标题更改为用户首次访问该网站时的个性化欢迎消息。此欢迎信息将持续存在。如果用户离开网站并稍后返回,我们将使用Web Storage API保存消息。我们还将包含一个更改用户的选项,以及因此的欢迎消息。
- 在 中
index.html
,在元素之前添加以下行<script>
:HTML
<button>Change user</button>
- 在 中
main.js
,将以下代码完全按照编写方式放置在文件底部。这需要引用新按钮和标题,存储每个内部变量:JS
let myButton = document.querySelector("button"); let myHeading = document.querySelector("h1");
- 添加以下函数来设置个性化问候语。这还不会起任何作用,但很快就会改变。
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()
要求用户输入数据,并在用户单击“确定”后将其存储在变量中。在本例中,我们要求用户输入名称。接下来,代码调用 APIlocalStorage
,它允许我们在浏览器中存储数据并在以后检索它。我们使用 localStorage 的setItem()
函数创建并存储一个名为 的数据项'name'
,将其值设置为myName
包含用户输入的名称的变量。最后,我们将textContent
标题设置为一个字符串,加上用户新存储的名称。 - 添加以下条件块。我们可以调用此初始化代码,因为它在首次加载时构建应用程序。
JS
if (!localStorage.getItem("name")) { setUserName(); } else { const storedName = localStorage.getItem("name"); myHeading.textContent = `Mozilla is cool, ${storedName}`; }
!
)来检查name
数据是否存在。如果没有,setUserName()
则运行该函数来创建它。如果存在(即用户在上次访问期间设置了用户名),我们将使用 检索存储的名称getItem()
并将textContent
标题设置为字符串,加上用户名,就像我们在 中所做的那样setUserName()
。 - 将此
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
并将其设置为标题的文本。
结论
如果您已按照本文中的所有说明进行操作,您最终应该会看到如下图所示的页面。您还可以查看我们的版本。
如果您遇到困难,可以将您的工作与GitHub 上已完成的示例代码进行比较。
我们刚刚触及了 JavaScript 的皮毛。如果您喜欢玩游戏并希望更进一步,请利用下面列出的资源。
也可以看看
- 使用 JavaScript 进行动态客户端脚本编写
-
更详细地深入研究 JavaScript。
- 学习 JavaScript
-
对于有抱负的 Web 开发人员来说,这是一个极好的资源!在自动化评估的指导下,通过简短的课程和交互式测试,在交互式环境中学习 JavaScript。前 40 节课免费。只需一次性支付少量费用即可获得完整的课程。