【JavaScript 教程】第一章入门01—认识JavaScript

我就是我 2022-09-14 08:54 194阅读 0赞

![5e8928d8030b1f2cfd0f3e7753017d0e.png][]

英文教程 | https://www.javascripttutorial.net/

翻译 | web前端开发（ID：web\_qdkf）

本系列JavaScript 教程可帮助你快速有效地从头开始学习 JavaScript 编程语言。如果你…

*  不确定从哪里开始学习 JavaScript。
 *  对其他人的复制粘贴 JavaScript 代码感到沮丧，而没有真正理解它。
 *  无法使用 JavaScript 向你的网站和 Web 应用程序添加更丰富、更引人注目的功能，因为您不知道如何从该语言中获得更多收益。

此系列教程会是一个很好的起点。

现在，我们就开始今天的学习吧。

**1、什么是JavaScript**

JavaScript 是一种编程语言，最初设计用于与网页元素进行交互。在 Web 浏览器中，JavaScript 由三个主要部分组成：

*  ECMAScript 提供了核心功能。
 *  文档对象模型（DOM）接口，用于与网页上的元素进行交互。
 *  该浏览器对象模型（BOM）提供了与网络浏览器交互的浏览器webAPI。

JavaScript 允许你向网页添加交互性。JavaScript 通常与 HTML 和 CSS 一起使用来增强网页的功能，例如验证表单、创建交互式地图和显示动画图表。

当加载网页时，即在下载 HTML 和 CSS 之后，Web 浏览器中的 JavaScript 引擎执行 JavaScript 代码。JavaScript 代码然后修改 HTML 和 CSS 以动态更新用户界面。

JavaScript 引擎是一个执行 JavaScript 代码的程序。一开始，JavaScript 引擎被实现为解释器。然而，现代 JavaScript 引擎通常被实现为即时编译器，将 JavaScript 代码编译为字节码以提高性能。

## **2、客户端与服务器端 JavaScript** ##

当在网页上使用 JavaScript 时，它会在用户的网络浏览器中执行。在这种情况下，JavaScript 作为客户端语言工作。

JavaScript 可以在 Web 浏览器和服务器上运行。现在比较流行的 JavaScript 服务器端环境是 Node.js。与客户端 JavaScript 不同，在服务器端 JavaScript 允许你访问数据库、文件系统等的服务器上执行。

## **3、JavaScript 历史** ##

1995 年，JavaScript 由名为Brendan Eich的 Netscape 开发人员创建。首先，它被称为摩卡。后来，它更名为 LiveScript。

Netscape 决定将 LiveScript 更改为 JavaScript，以利用当时流行的 Java 的名气。该决定是在 Netscape 发布其名为 Netscape Navigator 2 的 Web 浏览器产品之前做出的。因此，JavaScript 进入了 1.0 版。

Netscape 在 Netscape Navigator 3 中发布了 JavaScript 1.1。与此同时，Microsoft 推出了一款名为Internet Explorer 3 (IE 3)的 Web 浏览器产品，与 Netscape 竞争。

但是，IE 附带了称为JScript 的JavaScript 实现。Microsoft 使用名称 JScript 来避免 Netscape 可能出现的许可问题。

结果，市场上出现了两种不同的 JavaScript 版本：Netscape Navigator 中的 JavaScript 和 Internet Explorer 中的 JScript。JavaScript 没有管理其语法和功能的标准。社区决定是时候对语言进行标准化了。

1997 年，JavaScript 1.1 作为提案提交给欧洲计算机制造商协会(ECMA)。技术委员会 \#39 (TC39) 被指派对该语言进行标准化，使其成为通用、跨平台和供应商中立的脚本语言。TC39 提出了 ECMA-262，这是一种定义名为 ECMAScript（通常发音为 Ek-ma-script）的新脚本语言的标准。

之后，国际标准化组织和国际电工委员会（ISO/IEC）采用了 ECMAScript（ISO/IEC-16262）。

## **4、JavaScript 概述** ##

要在 JavaScript 中定义变量，请使用var关键字。例如：

var x = 10;
    var y = 20;

ES6 添加了一种使用let关键字声明变量的新方法：

let x = 10;
    let y = 20;

var和let之间存在差异。使用let关键字来声明变量是一个很好的做法。

要声明函数，请使用function关键字。以下示例定义了一个计算两个参数之和的函数：

function add( a, b ) {
       return a + b;
    }

要调用该add()函数，请使用以下语法：

let result = add(x, y);

要将结果记录到 Web 浏览器的控制台窗口中，请使用console.log()：

console.log(result);

现在，你应该在控制台窗口中看到30。

JavaScript 为你提供条件语句，例如if-else和 switch语句。例如：

let a = 20, 
        b = 30;
    
    
    function divide(a, b) {
        if(b == 0) {
           throw 'Division by zero';
        }
        return a / b;
    }

在divide()函数中，我们检查分数 (b) 是否为零。如果是，我们抛出异常。否则，我们返回 a / b 的结果。

要声明数组，请使用以下语法：

let items = [];

要声明具有一些初始元素的数组，请在方括号中指定元素：

let items = [1, 2, 3];

你可以items通过其length属性访问数组中的元素数：

console.log(items.length); // 3

要遍历items数组的元素，请使用for如下循环语句：

for(let i = 0; i < items.length; i++) {
        console.log(items[i]);
    }

或者for...of在ES6 中使用循环：

for(let item of items) {
        console.log(item);
    }

JavaScript 是一种不断发展的语言。它还有许多其他功能，你将在接下来的教程中学习。

在本教程中，你了解了 JavaScript 是什么以及 JavaScript 语言的概述。

#  #

**学习更多技能**

**请点击下方公众号**

![df5457200758e5759f2ca88a128b4916.gif][]

![04f4a82f987ab50e1bd0af24755aea42.png][]

![fb1d3bcffba47a98f089b726decf1666.png][]

[5e8928d8030b1f2cfd0f3e7753017d0e.png]: /images/20220828/a384f32f989d48b4889275fb4e92d733.png
[df5457200758e5759f2ca88a128b4916.gif]: /images/20220828/b56514de57864dd7b13cb124d76e93d2.png
[04f4a82f987ab50e1bd0af24755aea42.png]: /images/20220828/0bde0a7af224410ba66a7e750af08f54.png
[fb1d3bcffba47a98f089b726decf1666.png]: /images/20220828/ee221c3cc3874e55b08f1b5ba36d341a.png