JavaScript basics

 

JavaScript是一种编程语言,可增加网站的交互性(例如,游戏,按下按钮或以表格形式输入数据时的响应,动态样式和动画). 本文可帮助您开始使用这种令人兴奋的语言,并使您对可能的想法有所了解.

What is JavaScript, really?

JavaScript (简称" JS")是一种成熟的动态编程语言 ,当将其应用于HTML文档时,可以在网站上提供动态交互性. 它是由Mozilla项目,Mozilla基金会和Mozilla公司的联合创始人Brendan Eich发明的.

JavaScript用途广泛且对初学者友好. 有了更多的经验,您将能够创建游戏,动画2D和3D图形,全面的数据库驱动的应用程序等等!

JavaScript本身相当紧凑,但非常灵活. 开发人员已经在核心JavaScript语言之上编写了各种工具,从而以最少的努力解锁了许多额外的功能. 这些包括:

  • 浏览器应用程序编程接口( API )-Web浏览器中内置的API,提供了诸如动态创建HTML和设置CSS样式,从用户的网络摄像头收集和处理视频流,或生成3D图形和音频样本之类的功能.
  • 第三方API-允许开发人员将其他内容提供商(例如Twitter或Facebook)中的功能合并到他们的站点中.
  • 第三方框架和库-您可以将它们应用于HTML,以快速构建站点和应用程序.

因为本文仅是对JavaScript的简要介绍,所以在现阶段,我们不会通过详细讨论核心JavaScript语言和上面列出的不同工具之间的区别来使您感到困惑. 您可以稍后在我们的JavaScript学习专区和MDN的其余部分中详细了解所有这些内容.

下面,我们将向您介绍核心语言的某些方面,并且还将使用一些浏览器API功能. 玩得开心!

A "Hello world!" example

上一节听起来可能真的很令人兴奋,所以应该如此-JavaScript是当今最活跃的Web技术之一,随着您开始善于使用它,您的网站将进入一种新的力量和创造力.

但是,适应JavaScript比适应HTML和CSS难一些. 您可能必须从小处着手,并保持一致的小步骤. 首先,我们将展示如何向您的页面添加一些基本的JavaScript,从而创建一个" Hello world!" 示例( 基本编程示例中的标准 ).

重要提示 :如果您还没有按照本教程的其余部分进行操作,请下载此示例代码并将其用作起点.

  1. 首先,转到测试站点并创建一个名为scripts的新文件夹. 然后,在刚刚创建的新脚本文件夹中,创建一个名为main.js的新文件. 将其保存在您的scripts文件夹中.
  2. 接下来,在您的index.html文件中,在</body>标记之前的新行中输入以下元素:
      <script src =" scripts / main.js"> </ script> 
  3. 这基本上与CSS的<link>元素执行相同的工作-将JavaScript应用于页面,因此可以对HTML产生影响(以及CSS以及页面上的其他任何内容).
  4. 现在将以下代码添加到main.js文件中:
      const myHeading = document.querySelector('h1');
     myHeading.textContent ='世界你好!'; 
  5. 最后,确保已保存HTML和JavaScript文件,然后在浏览器中加载index.html . 您应该看到类似以下的内容:

注意 :我们将<script>元素放在HTML文件底部附近的原因是,浏览器按其在文件中出现的顺序加载了HTML. 如果首先加载JavaScript并且应该影响它下面的HTML,则它可能无法工作,因为JavaScript应该在应该使用HTML之前加载. 解决此问题的一种方法是将JavaScript加载置于HTML页面底部附近. 其他信息,请参见脚本加载策略 .

What happened?

您的标题文本现已更改为" Hello world!". 使用JavaScript. 为此,您首先使用了一个名为querySelector()的函数来获取对标题的引用,并将其存储在名为myHeading的变量中. 这与我们使用CSS选择器所做的非常相似. 当您想对元素做某事时,您需要首先选择它.

之后,将myHeading变量的textContent属性(代表标题的内容)的值设置为" Hello world!".

注意 :上面使用的两个功能都是文档对象模型(DOM)API的一部分 ,该API允许您处理文档.

Language basics crash course

让我们解释一下JavaScript语言的一些核心功能,以使您更好地了解它们的工作方式. 值得注意的是,这些功能是所有编程语言所共有的,因此,如果您掌握了这些基础知识,那么您就可以对几乎任何东西进行编程了!

重要提示 :在本文中,请尝试将示例代码行输入到JavaScript控制台中,以查看会发生什么. 有关JavaScript控制台的更多详细信息,请参阅发现浏览器开发人员工具 .

Variables

变量是可以在其中存储值的容器.首先使用var (不建议使用,请更深入地进行说明)或let关键字声明变量,后跟要调用的任何名称:

let myVariable;

注意 :行尾的分号表示语句结束的位置; 仅当您需要在一行上分开语句时才绝对需要它. 但是,有些人认为在每个声明的末尾放置它们是一个好习惯. 还有其他关于何时应该使用和不应该使用它们的规则-有关更多详细信息,请参见《 JavaScript分号指南》 .

注意 :您几乎可以为变量命名,但是有一些名称限制(请参阅本节中的命名规则 ). 如果不确定,可以检查变量名是否有效.

注意 :JavaScript区分大小写myVariable是与myvariable不同的变量. 如果您的代码有问题,请检查外壳!

注意 :有关varlet之间的区别的更多详细信息,请参阅var和let之间的区别 .

声明变量后,可以给它一个值:

myVariable = 'Bob';

您可以根据需要在同一行上执行以下两项操作:

let myVariable = 'Bob';

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

myVariable;

给变量赋值后,您以后可以选择对其进行更改:

let myVariable = 'Bob';
myVariable = 'Steve';

请注意,变量可能包含具有不同数据类型的值:

Variable Explanation Example
String 称为字符串的文本序列. 要表示该值是一个字符串,必须将其用引号引起来. let myVariable = 'Bob';
Number 一个号码. 数字周围没有引号. let myVariable = 10;
Boolean 正确/错误值. 单词truefalse是JS中的特殊关键字,不需要引号. let myVariable = true;
Array 一种结构,使您可以在一个引用中存储多个值. let myVariable = [1,'Bob','Steve',10];
像这样引用数组的每个成员:
myVariable[0]myVariable[1]
Object 基本上什么都可以. JavaScript中的所有内容都是一个对象,可以存储在变量中. 学习时请记住这一点. let myVariable = document.querySelector('h1');
以上所有示例也是如此.

那么为什么我们需要变量呢? 好了,变量需要做一些有趣的编程工作. 如果值不能更改,那么您将无法进行动态处理,例如个性化问候消息或更改图库中显示的图像.

Comments

本质上,注释是可以在浏览器忽略的代码之间添加的简短文本片段. 您可以将注释放入JavaScript代码中,就像在CSS中一样:

/*
Everything in between is a comment.
*/

如果您的注释不包含换行符,则将其放在两个斜杠之间通常会更容易,如下所示:

// This is a comment

Operators

operator是一种数学符号,可以根据两个值(或变量)产生结果. 在下表中,您可以看到一些最简单的运算符,以及一些可以在JavaScript控制台中试用的示例.

Operator Explanation Symbol(s) Example
Addition Used to add two numbers together or glue two strings together. + 6 + 9;
'Hello ' + 'world!';
减法,乘法,除法 这些可以满足您在基本数学中的期望. -, *, / 9 - 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
Assignment 您已经看到了这一点:它为变量分配了一个值. = let myVariable = 'Bob';
Equality 进行测试以查看两个值是否相等,并返回一个true / false (布尔)结果. === let myVariable = 3;
myVariable === 4;
不,不等于 返回其逻辑上相反的值; 它变成一个true变成一个false ,等当使用旁边的平等经营者,否定运算符测试两个值是否相等. !, !==

对于" Not",基本表达式为true ,但是比较返回false因为我们将其取反:

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

"不等于"使用不同的语法给出基本相同的结果. 在这里,我们正在测试" myVariable不等于3". 由于myVariable IS等于3,因此返回false

let myVariable = 3;
myVariable !== 3;

有更多的运营商可供探索,但是现在就足够了. 有关完整列表,请参见表达式和运算符 .

注意 :在执行计算时,混合使用数据类型可能会导致一些奇怪的结果,因此请注意正确引用变量并获取期望的结果. 例如,在控制台中输入'35' + '25' . 为什么没有得到您期望的结果? 由于引号将数字转换为字符串,因此您最终将字符串串联起来,而不是添加数字. 如果输入35 + 25您将获得正确的结果.

Conditionals

条件是代码结构,可让您测试表达式是否返回true,并运行由结果显示的替代代码. 条件语句的一种非常常见的形式是if ... else语句. 例如:

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语句之后的第二个代码块.

Functions

函数是您希望重用的打包功能的一种方式. 当您需要该过程时,可以使用函数名称调用函数,而不必每次都重写整个代码. 您已经在上面看到了一些函数的用法,例如:

  1. let myVariable = document.querySelector('h1');
  2. alert('hello!');

这些功能document.querySelectoralert内置于浏览器中,供您在需要时使用.

如果看到的内容看起来像变量名,但后面带有括号() ,则可能是函数. 函数通常带有参数 -完成工作所需的数据位. 这些放在括号内,如果有多个参数,则用逗号分隔.

例如, alert()函数使一个弹出框出现在浏览器窗口内,但是我们需要给它一个字符串作为参数,以告诉该函数在弹出框中写什么.

好消息是您可以定义自己的函数-在下一个示例中,我们编写了一个简单的函数,该函数将两个数字作为参数并将它们相乘:

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

尝试在控制台中运行上述功能,然后使用几个参数进行测试. 例如:

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

注意return语句告诉浏览器将result变量从函数中返回,以便可以使用. 这是必需的,因为在函数内部定义的变量仅在这些函数内部可用. 这称为变量作用域 . (了解有关变量作用域的更多信息 .)

Events

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

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

将事件附加到元素的方法有很多. 在这里,我们选择<html>元素,将其onclick处理程序属性设置为等于匿名(即,无名)功能,该功能包含我们希望click事件运行的代码.

注意

document.querySelector('html').onclick = function() {};

相当于

let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

它只是更短.

Supercharging our example website

现在,我们已经介绍了一些JavaScript基础知识,让我们在示例站点中添加一些很酷的功能,以了解可能的方法.

Adding an image changer

In this section, we'll add an additional image to our site using some more DOM API features, using some JavaScript to switch between the two when the image is clicked.

  1. 首先,找到您要在网站上展示的其他图片. 确保它与第一个图像大小相同或尽可能接近.
  2. 将此图像保存在您的images文件夹中.
  3. 将此图像重命名为" firefox2.png"(不带引号).
  4. 转到您的main.js文件,然后输入以下JavaScript. (如果您的" Hello world!" JavaScript仍然存在,请删除它.)
      let myImage = document.querySelector('img');
    
     myImage.onclick = function(){
         let mySrc = myImage.getAttribute('src');
         if(mySrc ==='images / firefox-icon.png'){
           myImage.setAttribute('src','images / firefox2.png');
         }其他{
           myImage.setAttribute('src','images / firefox-icon.png');
         }
     } 
  5. 保存所有文件,然后在浏览器中加载index.html . 现在,当您单击图像时,它应该变为另一张!

您将对<img>元素的引用存储在myImage变量中. 接下来,使此变量的onclick事件处理程序属性等于没有名称的函数("匿名"函数). 现在,每次单击此元素:

  1. 您检索图像的src属性的值.
  2. 您使用条件检查src值是否等于原始图像的路径:
    1. 如果是,则将src值更改为第二张图像的路径,从而强制将另一张图像加载到<img>元素内.
    2. 如果不是(表示它必须已经更改),则src值将交换回原始图像路径,并恢复为原始状态.

Adding a personalized welcome message

接下来,我们将添加另一段代码,当用户首次导航到站点时,将页面标题更改为个性化的欢迎消息. 如果用户离开站点并稍后返回,则此欢迎消息将持续存在-我们将使用Web Storage API进行保存. 我们还将包括一个用于更改用户的选项,因此,可以随时更改欢迎消息.

  1. index.html ,在<script>元素之前添加以下行:
      <button>更改用户</ button> 
  2. main.js ,将以下代码完全按照书面说明放置在文件的底部,这将引用新按钮和标题,并将它们存储在变量中:
      let myButton = document.querySelector('button');
     let myHeading = document.querySelector('h1'); 
  3. 现在,添加以下功能来设置个性化问候语-暂时不会做任何事情,但是我们稍后会修复:
      函数setUserName(){
       let myName =提示("请输入您的名字.");
       localStorage.setItem('name',myName);
       myHeading.textContent ='Mozilla很酷,'+ myName;
     } 
    此函数包含一个prompt()函数,该函数会弹出一个对话框,有点像alert() . 但是, prompt()要求用户输入一些数据,并在用户按OK后将其存储在变量中. 在这种情况下,我们要求用户输入他们的姓名. 接下来,我们调用一个名为localStorage的API,该API允许我们将数据存储在浏览器中并在以后检索它. 我们使用localStorage的setItem()函数来创建和存储名为'name'的数据项,并将其值设置为myName变量,该变量包含用户输入的数据. 最后,我们将标题的textContent设置为字符串,再加上用户新存储的名称.
  4. 接下来,添加此if ... else块-我们可以将其称为初始化代码,因为它在首次加载时会构建应用程序:
      if(!localStorage.getItem('name')){
       setUserName();
     }其他{
       let storedName = localStorage.getItem('名称');
       myHeading.textContent ='Mozilla很酷,'+ storageName;
     } 
    该块首先使用否定运算符(逻辑NOT,用!表示)来检查name数据是否存在. 如果不是,则运行setUserName()函数来创建它. 如果存在(也就是说,用户在上一次访问期间进行了设置),我们将使用getItem()检索存储的名称,并将标题的textContent设置为字符串,再加上用户名,就像在setUserName()所做的那样.
  5. 最后,将下面的onclick事件处理程序放在按钮上. 单击后,将运行setUserName()函数. 这允许用户在需要时通过按下按钮来设置新名称:
      myButton.onclick = function(){
     setUserName();
     }
    

现在,当您第一次访问该站点时,它将询问您您的用户名,然后给您个性化的消息. 您可以随时按按钮更改名称. 另外,由于该名称存储在localStorage ,因此在站点关闭后该名称仍然存在,从而在您下次打开该站点时将个性化消息保留在其中!

A user name of null?

当您运行示例并获得提示您输入用户名的对话框时,请尝试按" 取消"按钮. 您应该以一个标题写为" Mozilla is cool,null"结尾. 这是因为当您取消提示时,该值设置为null ,这是JavaScript中的一个特殊值,基本上表示没有值.

另外,请尝试仅按OK而不输入任何名称-出于显而易见的原因,您应该以" Mozilla is cool"作为标题结尾.

如果要避免这些问题,可以通过将setUserName()函数更新为以下内容来检查用户是否未输入null或空白名称:

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
  }
}

使用人类语言-如果myName没有值,或者其值为null ,请setUserName()开始再次运行setUserName() . 如果确实有一个值(如果上述语句不正确),则将该值存储在localStorage并将其设置为标题的文本.

Conclusion

如果您已按照本文中的所有说明进行操作,则应该以一个类似于以下内容的页面结束(您也可以在此处查看我们的版本 ):

如果遇到困难,可以将您的工作与我们在GitHub上完成的示例代码进行比较.

We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further see the further resources below.

See also

JavaScript — Dynamic client-side scripting
我们的JavaScript学习主题-更深入地研究JavaScript.
Learn JavaScript
对于有抱负的Web开发人员而言,这是一个极好的资源-在交互式环境中学习JavaScript,并在自动评估的指导下进行短期课程和交互式测试. 前40课是免费的,整个课程只需少量的一次性付款即可获得.

In this module