科普贴：深入了解最最流行的脚本语言JavaScript

谁在尝试访问某些网站时没有遇到过更新Java的请求？

虽然许多人通过交互式网站功能熟悉Java，但用户可能不太熟悉JavaScript——或者，实际上，他们可能错误地认为两者是相同的。

在本文中，我们将讨论JavaScript 是什么以及Java和JavaScript之间的区别。然后我们将概述一些更重要的JavaScript函数。

什么是JavaScript？

简而言之，JavaScript是一种流行的脚本语言，用于向网页添加交互功能和其他动态Web内容。众所周知的JavaScript内容示例包括可填写的表单、图片库幻灯片和动画图形。

JavaScript也相对直观且易于学习。对于那些希望了解有关网站开发的更多信息的人来说，这是一个很好的起点。

JavaScript是高度交互性网站上的最后一层功能。HTML提供页面的基本结构。CSS是您网站的时尚功能——它设置了您网站的风格。然后JavaScript充当“兴奋剂”。

学习JavaScript时，必须了解HTML、CSS和JavaScript之间的关系，以及它们如何结合在一起显示网站。

JavaScript用于什么

JavaScript有各种应用程序，任何访问过交互式网页或移动应用程序的人都可能体验过。虽然网站开发（包括添加交互表单和动画等元素）是 JavaScript 最传统的用途，但它也可用于：

• 基于网络浏览器的游戏——包括2D和3D游戏
• 移动应用程序开发——有益，因为它与手机平台无关
• 演示文稿——创建基于网络的动画幻灯片

尽管大多数JavaScript应用程序都是客户端，但JavaScript在服务器端应用程序中也很有帮助，例如创建Web服务器。

The Dinosaur Game，一个使用JavaScript创建的内置网页浏览器游戏的例子

Java和JavaScript之间的差异

首先，重要的是要注意Java和JavaScript并不相关，尽管共享术语“Java”。Java和JavaScript都是用于开发网页和Web应用程序的语言。但是，它们有明显的区别，包括：

• 面向对象编程： Java是一种面向对象的编程语言。JavaScript是一种基于对象的脚本语言。
• 语法： JavaScript语法不像Java那样正式或结构化。因此，对于大多数用户来说，它更简单。
• 编译： Java是编译型语言，而JavaScript是解释型语言，在运行时逐行解释；编译型语言往往更快，但解释型语言往往更灵活。
• 环境：通过在虚拟机或浏览器中运行，您基本上可以在任何环境中使用Java应用程序；JavaScript仅适用于浏览器。
• 内存使用： Java比JavaScript更需要内存；这使得JavaScript更适合网页和Web应用程序。

JavaScript安全吗？

尽管JavaScript被广泛接受并用于Web开发，但它确实存在众所周知的漏洞。通过JavaScript漏洞引入的最常见的网络攻击之一是跨站点脚本 (XSS) 攻击。网络犯罪分子使用XSS攻击来访问和窃取身份信息。为了最大限度地减少漏洞利用，在开发过程中测试和审查您的代码至关重要。静态和动态应用程序安全测试（SAST和DAST）等测试方法有助于识别软件开发生命周期各个阶段的漏洞。根据Cloud Defense的安全分析师的说法, SAST检查您的代码是否违反安全规则，并比较源分支和目标分支之间发现的漏洞。如果您的项目的依赖项受到新披露的漏洞的影响，您会收到通知。

原生JavaScript

Vanilla JavaScript是纯JavaScript语言的轻量级实现，没有添加库。这里，术语“vanilla”指的是未定制的JavaScript。许多大公司都使用Vanilla JS，包括谷歌、微软、苹果、亚马逊等。在添加与库中提供的更高级功能的联系之前，Vanilla JavaScript是学习JavaScript编程基础知识的绝佳方式。

JavaScript库

JavaScript库是一组执行特定功能的预先编写的代码。图书馆甚至允许新手用户快速构建有用的网站。它们为新手和有经验的用户节省了大量构建站点和应用程序的时间。虽然有许多JavaScript库，但一些最流行的库包括 jQuery、Anime.js、Animate on Scroll和Leaflet.js。

JavaScript与网站框架的关系

网站框架是高级网站构建器，通常具有广泛的预构建功能库和测试套件。您可能熟悉服务器端框架，例如Laravel、Ruby on Rails或Django。但也有一些基于JavaScript的流行的客户端框架，包括React.js，Vue.js，和Node.js。

React库（图片来源：Betica）

JavaScript DOM

DOM或文档对象模型充当编程语言（如JavaScript）与底层文档（具体而言，HTML和XML 文档）之间的接口。DOM是W3C（万维网联盟）标准，定义为“一种平台和语言中立的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。” 文档由单个元素和属性（文本、按钮、链接等）的集合组成。

JavaScript的基本组件

与其他编程语言一样，JavaScript使用变量来标识数据的存储位置。变量可以是全局的（可由代码中的任何函数访问）或局部的，也称为块范围（仅在声明它们的块中可访问）。变量可以包含固定值（称为文字的常量）或可变值。JavaScript有一种特殊的语法来声明（创建）常量和变量，并为它们赋值。

声明一个常量

真正的常量是使用const声明创建的。Const创建只读的、不可更改的、块范围的常量（“块范围”意味着常量不能从其声明的块外部访问）。使用const创建常量的示例是：

const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618

请注意使用大写字母命名常量；这是一个普遍接受的命名约定，尽管它不是必需的。变量名称，包括常量名称，必须以字母（小写或大写）、下划线字符 ( _) 或美元符号 ( $)开头。它们区分大小写，所以一定要记住如何命名变量。与变量不同，常量必须在创建时赋值。以下语句将返回错误：

const GOLDEN_RATIO;

声明一个变量

变量使用var关键字声明。它们不需要在声明时分配值，尽管这样做是允许的并且经常这样做。var关键字具有全局范围，而不是块范围（除非它是一个函数，那么它的功能范围内）。

var variable1; // declare a variable called variable1

var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021

variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1

console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"

请注意，JavaScript中的语句必须以分号结尾。您可以使用创建注释 // — JavaScript ignores anything between // 行尾之间的任何内容。变量可以包含多种数据类型，包括数字、字符串和对象。JavaScript中的变量赋值是动态的。因此，您可以在同一代码中将变量分配给不同的数据类型。

Hoisting

现在您了解了JavaScript中的变量声明，我们可以讨论JavaScript如何处理变量声明的位置。普遍接受的编码实践要求在定义变量之前或同时声明变量。一些编程语言实际上需要这样做。然而，JavaScript允许在定义或使用变量后声明变量。使用称为提升的功能，JavaScript将声明移动到当前脚本或函数的顶部。虽然提升可以通过允许程序员更正声明失败而无需回滚代码来简化编程，但在使用后声明变量与最佳编程实践不一致. 提升也会导致意外问题，主要是因为提升仅适用于声明。如果在同一个语句中声明并初始化了一个变量，提升将在块的顶部创建一个声明，并为该变量分配一个未定义的值。因此，在实际声明语句之前的块中使用该变量将假定该变量是未定义的，而不是具有初始化值。让我们使用上面的示例来查看提升行为：

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

console.log(variable_1 + " " + variable_2); //

var variable_2 = "2021" // declare and initialize a string variable called variable2

当提升将声明移动variable_2到块的顶部时，它不会移动分配的值。此逻辑的工作原理大致相当于以下语法：

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

var variable_2;

console.log(variable1 + " " + variable2); //

variable_2 = "2021" // assign string value to variable2

无论哪种情况，最终值“谢天谢地，现在是2021年”都不是输出的一部分。我们建议您使用声明变量的最佳实践来避免潜在问题并创建更清晰的代码。

对象

JavaScript基于对象的概念。对象是可以包含属性、方法或两者的容器。考虑一个简单的例子。您有一个名为“国家”的对象。它的属性包括它的名称、大陆、首都和人口。您可以使用JavaScript以多种方式创建此对象。首先，您可以使用对象字面量或对象初始值设定项方法：

var country = {

name:"France",

continent:"Europe",

capital:"Paris",

population:62250000;

}

您还可以实例化一个对象，然后分配其属性：

var country = new Object();

country.name = "France";

country.continent = "Europe";

country.capital = "Paris";

country.population = 62250000;

请注意，您使用语法来引用对象的属性object.property。最后，您可以使用构造函数创建对象：

function country(name, continent, capital, population) {

country.name = name;

country.continent = continent;

country.capital = capital;

country.population = population;

}

然后通过以下方式创建对象的实例：

france = new country("France","Europe","Paris",62250000)

对象属性可以是变量或函数。如下所述，当一个对象属性是一个函数时，它被称为一个方法。

对象与类

简而言之，类是对象的通用结构模板。类使用构造函数形式来描述对象。

class country {

Constructor (name,continent,capital,population) {

country.name = name;

country.continent = continent;

country.capital = capital;

country.population = population;

}

}

就像对象一样，类也可以有方法。

使用常量和变量

与其他语言一样，JavaScript有多种类型的运算符用于变量和函数，其中大部分可以立即识别：

• 赋值运算符 ( =, +=, -=, *=, /=, %=)
• 比较运算符 ( ==, ===, !=, !==, >, >=, <, <=)
• 按位和逻辑运算符（见下文）
• 算术运算符 ( +, -, *, /, %, ++, --)
• 特殊运算符

一些运算符对于新手程序员来说不太熟悉，例如相同和不相同的比较运算符。===比较两个操作数是否具有相同的值和类型（即它们相同）。!==比较两个操作数是否不相同。考虑以下示例：

var variable_1 = 5; // declare variable_1 and assign numeric value 5

var variable_2 = "5"; // declare variable_2 and assign string value "5"

console.log(variable_1 === variable_2);

console.log(variable_1 !== variable_2);

这段代码的输出将是：

FALSE

TRUE

了解=（赋值运算符）和==（比较运算符）之间的区别也很重要。while=设置变量的值，==检查两个操作数是否具有相同的值，包括变量是否具有给定值。您不应=在条件语句（如 IF 语句）中使用运算符来检查等效性。

按位和逻辑运算符

JavaScript 支持 AND ( &)、OR ( |)、NOT ( ~) 和 XOR ( ^) 运算。在 JavaScript 中，这些被称为按位运算符。位运算在运算前将操作数转换为32位二进制表示（即20变为10100）。这些操作称为按位运算，因为它们逐位比较转换后的操作数，然后返回转换为整数的32位二进制结果。例子：

var variable_1 = 20;

var variable_2 = 50;

console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2

将操作数转换为二进制：

FALSE

TRUE

OR运算在任一位为1时返回真 (1)，因此显示的比较值是110110或53。在JavaScript中，术语逻辑运算符是指操作数只有布尔值0或1的运算。JavaScript逻辑运算符是&&(逻辑与）、||（逻辑或）和!（逻辑非）。

var variable_1;

var variable_2;

variable _1 = (6 > 5); // sets variable_1 to true or 1

variable_2 = (7 <= 6); // sets variable_2 to false or 0

Console.log(variable_1 && variable_2); // displays 0

函数和方法

将函数视为JavaScript中的主力。它们是执行特定任务的代码块。如果您熟悉其他编程语言中的过程和子例程，您会立即认出函数。函数使用以下语法定义：

function function_name(parameter list) {

// tasks to be performed

}

定义函数只是第一步；您稍后必须()在代码中使用以下方法调用函数：

$()

$()函数是getElementByID方法的简写，如上所述，该方法返回HTML DOM的特定元素的ID。它经常用于操作文档中的元素。$()允许更短、更高效的JavaScript编码。传统方法：

document.getElementByID("element_id")

$() method:

$("element_id")

函数vs方法

函数执行任务；方法是包含功能定义的对象的属性。调用方法的语法是object.function(). 函数是独立的；方法与对象相关联。在上面的示例中，方法document.getElementByID("element_id")引用了一个对象 (document) 和该对象的关联属性(getElementbyID())。JavaScript中有两种类型的方法：

• 实例方法
• 静态方法

实例方法可以访问和操作对象实例的属性。实例方法也可以调用另一个实例方法或静态方法。静态方法包含与类而不是类的实例相关的逻辑。要创建静态方法，您必须在函数定义之前使用static一词。静态方法只能访问静态字段；他们无法访问实例字段。

JavaScript中的Promise

Promise是在未来时间产生结果的对象。在JavaScript术语中，promise被称为生产和消费代码。功能可能需要未指定的大量时间去完成。消费代码在运行其功能之前等待异步生成代码的结果。Promise定义了生产代码和消费代码之间的关系。Promise具有三种可能的状态：pending、fulfiled或denied。在promise的定义中，指定了两个参数：resolve或reject。Pending是promise的初始状态，意味着promise既没有被实现也没有被拒绝。Fulfilled意味着promise已经返回了。拒绝意味着承诺已经返回。不再处于挂起状态的承诺被视为已解决。创建承诺的示例语法是：

var newPromise = new Promise(

function(resolve, reject) {

// condition to be tested

}

)

JavaScript中的闭包

闭包是一个经常让程序员感到困惑的JavaScript特性，虽然它们没有那么复杂。JavaScript闭包是处理嵌套函数操作的方法。具体来说，除了通常可以访问的全局变量之外，闭包还允许内部函数访问父函数的内容。请注意，虽然内部函数可以访问外部函数变量，但反之则不然。要理解闭包，您必须记住作用域基础知识。函数内的变量通常只能从该函数访问，并且每次调用都会创建作用域，而不是一般的函数。闭包解决了变量通常在函数完成后消失的事实。它们还允许在函数运行后仍然可以访问变量。考虑以下示例代码：

function outer_closure_function() {

var outer_variable = "we want to keep the outer variable";

var inner_closure_function = function() {

inner_variable = "use closures because"

console.log(inner_variable + " " + outer_variable);

}

return inner_closure_function;

}

var closure = outer_closure_function(); // returns a reference to inner_closure_function

closure(); // displays "use closures because we want to keep the outer variable"

要了解此闭包的工作原理，请逐行逐行执行代码。首先，定义外部函数，然后定义与之关联的变量。接下来，您定义内部函数。重要的是要注意您没有调用内部函数——只是定义了它。接下来是返回内部函数的语句。但它返回的不是内部函数的结果；相反，它是函数本身。因此，当您将闭包定义为outer_closure_function时，它不会返回内部函数的实际值。相反，它返回对inner_closure_function的引用。即使在此语句之后外部函数已经完成，并且outer_variable不再正式存在。但它仍然保留在对inner_closure_function的引用中。现在，当您在最后一条语句中调用闭包时，将显示所需的结果。为了更好地理解闭包，您应该自己编写和测试一些示例。这需要时间来让他们正确。此外，重复的更新和测试将帮助您创建敏捷开发思维。但是，在使用过程中，请始终牢记安全问题—JavaScript可能会受到严重安全问题的影响，例如SQL和LDAP注入、XSS攻击等。

小结

如果您对Web页面的兴趣比从Wix和Square等开箱即用服务中获得的更多，您应该考虑学习JavaScript。这是一个简单易学的网站和应用程序编程介绍，可以帮助您向网站添加高度交互的功能，而无需在学习过程中投入太多时间。如果您最终决定进入下一个级别，JavaScript也是开始培养您的编码技能的绝佳方式。