JavaScript指南,第1部分:第一个程序,语言功能,标准

最近,我们对翻译 JavaScript指南的可行性进行了调查 。 事实证明,大约90%的投票者对此想法做出了积极反应。 因此,今天我们发布翻译的第一部分。



由作者构想的本指南是为那些已经对JavaScript有点熟悉并且想要整理其知识并学到有关该语言的新知识的读者而设计的。 我们决定扩大此材料的受众范围,包括完全不了解JS的人员,并通过编写“ Hello,world!”的多个版本开始。

第1部分:第一个程序,语言功能,标准
第2部分:代码样式和程序结构
第3部分:变量,数据类型,表达式,对象
第4部分:功能
第5部分:数组和循环
第6部分:异常,分号,通配符文字
第7部分:严格模式,此关键字,事件,模块,数学计算
第8部分:ES6功能概述
第9部分:ES7,ES8和ES9标准概述


世界,您好!


该程序通常称为“ 您好,世界! “很简单。 它通过某种语言在某处显示短语“ Hello,world!”或其他类似词组。

JavaScript是一种可以在不同环境中运行程序的语言。 在我们的案例中,我们谈论的是浏览器和服务器平台Node.js。 如果到目前为止,您还没有用JS编写任何代码,而是在台式计算机上的浏览器中阅读此文本,则意味着您距离第一个JavaScript程序只有几秒钟的路程。

要编写它,如果您使用的是Google Chrome浏览器,请打开浏览器菜单,然后在其中选择“ > 命令。 浏览器窗口将分为两部分。 在其中一个页面中将看到一个页面,在另一个页面中将打开带有开发人员工具的面板,其中包含几个书签。 我们对“ Console选项卡感兴趣。 点击它。 不要注意控制台中可能已经存在的内容(可以使用组合键Ctrl + L清除它)。 现在,我们有兴趣邀请控制台。 您可以在此处输入通过按Enter键执行的JavaScript代码。 让我们在控制台中输入以下内容:

 console.log("Hello, world!") 

可以从键盘输入此文本,您可以将其复制并粘贴到控制台中。 结果将是相同的,但是如果您正在学习编程,建议您自己输入程序文本,而不要复制它们。

程序文本在控制台中后,按Enter

如果一切操作正确,则此行下方将显示文本Hello, world! 。 不要注意其他所有内容。


浏览器控制台中的第一个程序是在控制台中显示一条消息

另一个浏览器选项“世界,您好!” 包括显示一个消息框。 这样做是这样的:

 alert("Hello, world!") 

这是运行该程序的结果。


在窗口中显示消息

请注意,开发人员工具栏现在位于屏幕底部。 您可以通过使用菜单中带有三个点的菜单并选择适当的图标来更改其位置。 在这里您还可以找到一个按钮来关闭此面板。

开发人员工具(包括控制台)在其他浏览器中也可用。 控制台的优点在于,当您使用浏览器时,它始终可用。

还有其他方法可以在浏览器中运行JS代码。 因此,如果我们谈论JavaScript程序的正常使用,则会将它们加载到浏览器中以确保网页的运行。 通常,代码将作为带有.js扩展名的单独文件执行,这些文件连接到Web页面,但是程序代码也可以直接包含在页面代码中。 所有这些都是使用<script> 。 当浏览器检测到此类代码时,它将执行该代码。 脚本标签的详细信息可以在w3school.com上查看。 特别是,考虑一个示例,该示例演示如何使用JavaScript通过此资源使用网页。 也可以使用此资源的资源来启动此示例(查找“ Try it Yourself按钮),但是我们会做一些不同的事情。 也就是说,我们将在某些文本编辑器中创建一个新文件(例如,在VS CodeNotepad ++中 ),我们将其称为hello.html ,并向其中添加以下代码:

 <!DOCTYPE html> <html> <body>   <p id="hello"></p>   <script>     document.getElementById("hello").innerHTML = "Hello, world!";   </script> </body> </html> 

这里,我们最感兴趣的行是document.getElementById("hello").innerHTML = "Hello, world!"; ,这是一个JS代码。 此代码包含在打开和关闭<script>标记中。 它在文档中找到一个带有hello标识符的HTML元素,并将其innerHTML属性(即此元素中包含的HTML代码)更改为Hello, world! 。 如果在浏览器中打开hello.html文件,则将在其上显示指定的文本。


JavaScript输出到HTML元素

如前所述,可以在w3school.com上尝试提供的示例。 有专门的在线环境用于Web开发,尤其是用于执行JS代码。 其中包括例如codepen.iojsfiddle.netjsbin.com

例如,在这里看起来像我们的示例,是通过CodePen重新创建的。


HTML字段包含描述HTML元素的代码,JS字段包含JavaScript代码,结果显示在页面底部。

上面我们说过,JavaScript程序可以在各种平台上运行,其中之一就是Node.js服务器环境。 如果要学习JavaScript,特别是专注于服务器端开发,则可能应该使用Node.js运行示例。 请注意,以简化的方式,并且没有考虑到Node.js版本和浏览器所使用的特定语言功能的特定支持,相同的代码将在Node.js和使用该语言基本机制的浏览器中工作。 也就是说,例如, console.log("Hello, world!")命令console.log("Hello, world!")将在那里和那里都可以工作。 使用浏览器特定机制的程序无法在Node.js中运行(尝试在浏览器中运行为Node.js设计的程序也是如此)。

为了启动我们的“你好,世界!” 在Node.js环境中,通过从此处下载相应的分发软件包安装Node.js。 现在创建hello.js文件,并将以下代码放入其中:

 console.log('Hello, World!'); 

使用命令行,我们将转到存储该文件的文件夹,并执行以下命令:

 node hello.js 

这是其实现的结果:


Node.js打印的消息

顺便说一句,您可能已经注意到(如果您自己键入代码,很可能会注意到)上面的一些示例在行尾使用分号,而有些则没有。 在某些情况下,我们要在控制台中显示或作为消息显示的文本用双引号括起来,在某些情况下用单引号括起来。 也许现在您想知道为什么会这样,以及如果不同版本的代码正常工作时如何正确编写此代码。 如果您在不讨论细节而又不考虑一些小细节的情况下回答此问题,那么我们可以说使用引号和分号的两个选项都是可以接受的,并且它们的工作方式相同。 特定选项的选择取决于程序员所遵循的代码的编写风格,以及程序中特定部分的需求。 此外,通过这些简单的示例,您可能会感觉到JavaScript的特征之一,即该语言为程序员提供了一定的自由度。

现在,在您第一次熟悉JavaScript之后,我们为您提供了更多有关该语言的信息。

JavaScript概述


JavaScript是世界上最受欢迎的编程语言之一。 它创建于20多年前,在发展过程中已经走了很长一段路。 JavaScript被认为是浏览器的脚本语言。 刚开始时,他的能力比现在小得多。 它主要用于创建简单的动画,例如下拉菜单,他们知道它是动态HTML技术(DHTML,动态HTML)的一部分。

随着时间的流逝,Web环境的需求不断增长,特别是出现了新的API和JavaScript,为了支持Web开发,有必要跟上其他技术。

如今,JS不仅在传统的浏览器中使用,而且还在更多的领域中使用。 特别是,我们在谈论服务器平台Node.js,在嵌入式和移动应用程序开发中使用JavaScript的可能性,解决以前没有使用JavaScript的各种任务。

JavaScript的主要功能


JavaScript是一种具有以下功能的语言:

  • 高水平。 它为程序员提供了抽象概念,使您无需关注运行JavaScript程序的硬件功能。 该语言使用垃圾回收器自动管理内存。 结果,开发人员可以专注于解决他面临的任务,而不会被低级机制分散注意力(尽管应注意,这并不能消除对合理使用内存的需求)。 该语言提供了强大而便捷的工具来处理各种类型的数据。
  • 动态的。 与静态编程语言不同,动态语言能够在程序执行期间执行静态语言在程序编译期间执行的操作。 这种方法有其优点和缺点,但是它为开发人员提供了强大的功能,例如动态类型输入,后期绑定,反射,功能编程,在程序执行期间更改对象,关闭等等。
  • 动态输入。 JS开发变量类型是可选的。 例如,在同一变量中,您可以先编写一个字符串,然后编写一个整数。
  • 弱打字。 与具有强类型的语言不同,具有弱类型的语言不会强迫程序员,例如,在某些情况下使用某些类型的对象,必要时执行隐式类型转换。 这提供了更大的灵活性,但是JS程序不是类型安全的,这使类型检查任务更加复杂(TypeScript和Flow旨在解决此问题)。
  • 解释。 人们普遍认为JavaScript是一种解释型编程语言,这意味着用它编写的程序在执行之前不需要进行编译。 JS在这方面与诸如C,Java和Go之类的语言相对。 在实践中,为了提高程序性能,浏览器在执行之前先编译JS代码。 但是,此步骤对程序员是透明的;不需要他额外的努力。
  • 多范式。 JavaScript不像Java(面向对象的程序设计)或C(命令式程序设计)那样,不强制开发人员使用任何特定的编程范例。 您可以使用面向对象的范例(特别是使用ES6标准中出现的原型和类)编写JS程序。 由于这里的函数是一流的对象,因此JS中的程序也可以以函数形式编写。 JavaScript允许在C中使用命令式样式。

是的,顺便说一句,应该指出的是,JavaScript和Java没有共同点。 这些是完全不同的语言。

JavaScript和标准


ECMAScript或ES是指导JavaScript引擎(即运行JS程序的环境)的开发人员的标准名称。 各种标准在语言中引入了新功能,其中经常提到缩写形式的标准名称,例如-ES6。 ES6与ES2015相同,仅在第一种情况下,数字表示标准的版本号(6),在第二种情况下-表示标准的采用年份(2015)。

碰巧的是,在很长一段时间内,Web编程世界都与1999年采用的ES3标准相关。 该标准的第四个版本不存在(他们试图向它添加太多的新功能,但从未接受过)。 在2009年,采用了ES5标准,这是对该语言的巨大更新,是10年来的第一次。 之后,在2011年采用了ES5.1标准,它也带来了许多新变化。 就创新而言,2015年采用的ES6标准也变得非常重要。 从2015年开始,每年都会采用该标准的新版本。

在发布本材料时,该标准的最新版本是ES9 ,于2018年6月采用。

总结


今天我们写了“你好,世界!” 在JavaScript上,研究了该语言的主要功能并讨论了其标准化。 下次,我们将讨论JavaScript文本的样式和程序的词汇结构。

亲爱的读者们! 如果您在阅读本资料之前不熟悉JavaScript,请告诉我们您是否成功运行了“ Hello,world!”。

Source: https://habr.com/ru/post/zh-CN429552/


All Articles