javascript教程_最好JavaScript教程

左丘楷

2023-12-01

javascript教程

JavaScript is the most widely used scripting language on Earth. And it has the largest library ecosystem of any programming language.

JavaScript是地球上使用最广泛的脚本语言。它具有所有编程语言中最大的图书馆生态系统。

JavaScript is the core language of the web, and the only programming language that can run in all major web browsers.

JavaScript是Web的核心语言，并且是唯一可以在所有主要Web浏览器中运行的编程语言。

Notably, JavaScript has no relation to Java. Check out JavaScript: The World’s Most Misunderstood Programming Language.

值得注意的是，JavaScript与Java没有关系。查看JavaScript：世界上最容易被误解的编程语言。

The official name of JavaScript is ECMAScript defined under Standard ECMA-262.

JavaScript的正式名称是Standard ECMA-262下定义的ECMAScript。

If you want to learn more about the JavaScript language, and why it’s so widely used, read Quincy Larson’s article - Which programming language should I learn first? - or watch this inspiring video from Preethi Kasireddy.

如果您想了解有关JavaScript语言的更多信息，以及为什么它如此广泛地被使用，请阅读Quincy Larson的文章- 我应该首先学习哪种编程语言？ -或观看Preethi Kasireddy的启发性视频。

freeCodeCamp has an in-depth JavaScript tutorial on YouTube that will teach you all the fundamentals in just 3 hours.

freeCodeCamp在YouTube上提供了深入JavaScript教程，该教程将在3小时内教您所有基本知识。

其他一些不错JavaScript教程： (Some other good JavaScript tutorials:)

参考文献 (References)

快速JavaScript (Quick JavaScript)

挑战性 (Challenges)

讲解 (Tutorials)

练习题 (Exercises)

编者 (Editors)

网志 (Blogs)

播客 (Podcasts)

JS Jabber
贾伯(JS Jabber)

影片教学 (Video Tutorials)

图书 (Books)

6 books on JavaScript by Kyle Simpson, from beginner to advanced.

Kyle Simpson撰写了6本关于JavaScript的书籍，从入门到高级。

Eloquent Javascript
雄辩的Javascript

Fantastic, thorough introduction to the basics and features of JavaScript, complete with in-browser interactive code.

对JavaScript的基础知识和功能进行了详尽而详尽的介绍，并带有浏览器内的交互式代码。

Professor Frisby’s Mostly Adequate Guide to Functional Programming
Frisby教授的最充分的函数式编程指南

Quite in-depth guide to Functional Programming in JavaScript

关于JavaScript函数式编程的深入指南

独立JavaScript引擎 (Standalone JavaScript engines)

Mozilla’s SpiderMonkey, the first JavaScript engine ever written, currently used in Mozilla Firefox.

Mozilla的SpiderMonkey，第一个编写JavaScript引擎，当前在Mozilla Firefox中使用。

V8, Google’s JavaScript engine, used in Google Chrome.

V8是Google Chrome浏览器中使用的GoogleJavaScript引擎。

Google Apps Script, a cloud-based/server-side interpreter that provides programmatic “macro-like” control of Google Apps services and documents.

Google Apps脚本，一种基于云/服务器端的解释器，提供对Google Apps服务和文档的程序化“类宏”控制。

Node.js, built on top of V8, a platform which enables server-side applications to be written in JavaScript.

在V8之上构建的Node.js，该平台使服务器端应用程序可以用JavaScript编写。

Windows includes JScript, a JavaScript variant in Windows Script Host.

Windows包含JScript，这是Windows Script Host中JavaScript变体。

Chakra, a fork of Jscript, is developed by Microsoft and used in their Edge browser.

Chakra是Jscript的分支，由Microsoft开发并在其Edge浏览器中使用。

Mozilla also offers Rhino, an implementation of JavaScript built in Java, typically embedded into Java applications to provide scripting to end users.

Mozilla还提供Rhino，Rhino是Java内置JavaScript的实现，通常嵌入到Java应用程序中以向最终用户提供脚本。

WebKit (except for the Chromium project) implements the JavaScriptCore engine.

WebKit(Chromium项目除外)实现了JavaScriptCore引擎。

JavaScript框架 (JavaScript Frameworks)

The most frequently used JavaScript Frameworks are React JS, Angular JS, jQuery, and NodeJS. For more details follow this link.

最常用JavaScript框架是React JS，Angular JS，jQuery和NodeJS。有关更多详细信息，请单击此链接。

JavaScript的优缺点 (Advantages and Disadvantages of JavaScript)

Like with all programming languages, JavaScript has certain advantages and disadvantages to consider. Many of these are related to the way JavaScript is often executed directly in a client's browser. But there are other ways to use JavaScript now that allow it to have the same benefits of server-side languages.

与所有编程语言一样，JavaScript也要考虑某些优点和缺点。其中许多与通常直接在客户端浏览器中执行JavaScript的方式有关。但是，现在还有其他使用JavaScript的方法可以使它具有服务器端语言的相同优点。

JavaScript的优势 (Advantages of JavaScript)

Speed - JavaScript tends to be very fast because it is often run immediately within the client's browser. So long as it doesn't require outside resources, JavaScript isn't slowed down by calls to a backend server. Also, major browsers all support JIT (just in time) compilation for JavaScript, meaning that there's no need to compile the code before running it.
速度 -JavaScript往往非常快，因为它通常在客户端的浏览器中立即运行。只要不需要外部资源，对后端服务器的调用就不会降低JavaScript的速度。同样，主要的浏览器都支持JavaScript的JIT(即时)编译，这意味着在运行代码之前无需编译代码。
Simplicity - JavaScript's syntax was inspired by Java's and is relatively easy to learn compared to other popular languages like C++.
简单性 -JavaScript的语法受Java启发，与其他流行语言(如C ++)相比，相对易于学习。
Popularity - JavaScript is everywhere on the web, and with the advent of Node.js, is increasingly used on the backend. There are countless resources to learn JavaScript. Both StackOverflow and GitHub show an increasing amount of projects that use JavaScript, and the traction it's gained in recent years is only expected to increase.
流行 -JavaScript在网络上无处不在，并且随着Node.js的出现，后端越来越多地使用它。有无数学习JavaScript的资源。 StackOverflow和GitHub都显示出使用JavaScript的项目数量在增加，并且近年来它的吸引力预计只会增加。
Interoperability - Unlike PHP or other scripting languages, JavaScript can be inserted into any web page. JavaScript can be used in many different kinds of applications because of support in other languages like Pearl and PHP.
互操作性 -与PHP或其他脚本语言不同，可以将JavaScript插入任何网页。由于对Pearl和PHP等其他语言的支持，JavaScript可用于许多不同类型的应用程序中。
Server Load - JavaScript is client-side, so it reduces the demand on servers overall, and simple applications may not need a server at all.
服务器负载 -JavaScript是客户端的，因此它减少了对服务器的总体需求，简单的应用程序可能根本不需要服务器。
Rich interfaces - JavaScript can be used to create features like drag and drop and components such as sliders, all of which greatly enhance the user interface and experience of a site.
丰富的界面 -JavaScript可用于创建诸如拖放之类的功能以及诸如滑块之类的组件，所有这些都极大地增强了用户界面和网站体验。
Extended Functionality - Developers can extend the functionality of web pages by writing snippets of JavaScript for third party add-ons like Greasemonkey.
扩展功能 -开发人员可以通过为第三方插件(如Greasemonkey)编写JavaScript片段来扩展网页的功能。
Versatility - There are many ways to use JavaScript through Node.js servers. If you were to bootstrap Node.js with Express, use a document database like MongoDB, and use JavaScript on the frontend for clients, it is possible to develop an entire JavaScript app from front to back using only JavaScript.
多功能性 -通过Node.js服务器使用JavaScript的方式有很多种。如果要使用Express引导Node.js，使用MongoDB之类的文档数据库，并在客户端的前端使用JavaScript，则可以仅使用JavaScript从头到尾开发整个JavaScript应用。
Updates - Since the advent of ECMAScript 5 (the scripting specification that JavaScript relies on), ECMA International has been dedicated to updating JavaScript annually. So far, we have received browser support for ES6 in 2017 and look forward to ES7 being supported in the future.
更新 -自ECMAScript 5(JavaScript所依赖的脚本规范)问世以来，ECMA International一直致力于每年更新JavaScript。到目前为止，我们已经在2017年获得了对ES6的浏览器支持，并希望将来能够支持ES7。

JavaScript的缺点 (Disadvantages of JavaScript)

Client-Side Security - Since JavaScript code is executed on the client-side, bugs and oversights can sometimes be exploited for malicious purposes. Because of this, some people choose to disable JavaScript entirely.
客户端安全性 -由于JavaScript代码是在客户端执行的，因此有时会出于恶意目的利用漏洞和疏忽。因此，有些人选择完全禁用JavaScript。
Browser Support - While server-side scripts always produce the same output, different browsers sometimes interpret JavaScript code differently. These days the differences are minimal, and you shouldn't have to worry about it as long as you test your script in all major browsers.
浏览器支持 -尽管服务器端脚本始终会产生相同的输出，但不同的浏览器有时会以不同的方式解释JavaScript代码。如今，差异很小，只要您在所有主要浏览器中测试脚本，就不必担心。

ES6 (ES6)

The 6th edition of ECMAScript is called ES6.

ECMAScript的第六版称为ES6。

It is also know as ES2015.

也称为ES2015。

The changes add a lot of syntactic sugar that allow developers to create applications in an object oriented style.

这些更改增加了很多语法糖，使开发人员可以以面向对象的方式创建应用程序。

ES5 example:

ES5示例：

var User = function () {
  function User(name) {
    this._name = name;
  }

  User.prototype.getName = function getName(x) {
    return 'Mr./Mrs. ' + this._name;
  };

  return User;
}();

ES6 example:

ES6示例：

class User {
  constructor(name) {
    this._name = name
  }

  getName() {
    return `Mr./Mrs. ${this._name}`
  }
}

A lot of new syntax features were introduced including:

引入了许多新的语法功能，包括：

classes
类
modules
模组
templating
模板化
for/of loops
for / of循环
generator expressions
生成器表达式
arrow functions
箭头功能
collections
馆藏
promises
诺言

Nowadays most of the features are available in all popular browsers. The compatibility table contains all information about feature availability of all modern browsers.

如今，大多数功能都可以在所有流行的浏览器中使用。兼容性表包含有关所有现代浏览器功能可用性的所有信息。

Frequently, new features arrive that are part of the successor ES7. A common way is to translate modern JavaScript (ES6, ES7 and other experimental proposals) to ES5. This makes sure that also old browsers can execute the code. There are tools like Babel that transforms new JavaScript to ES5.

通常，新功能会成为后续ES7的一部分。一种常见的方法是将现代JavaScript(ES6，ES7和其他实验性建议)转换为ES5。这样可以确保旧的浏览器也可以执行代码。像Babel这样的工具可以将新JavaScript转换为ES5。

Besides syntactic sugar coming from ECMAScript standards there are features that require a Polyfill. Usually they are necessary because whole class/method implementations were added to the standard.

除了来自ECMAScript标准的语法糖外，还有一些功能需要使用Polyfill 。通常，它们是必需的，因为整个类/方法的实现已添加到标准中。

对象实例化 (Object Instantiation)

In JavaScript and most other languages, an object contains a series of properties, which are a key, value pair. There are multiple options available to you when you need to construct an object.

在JavaScript和大多数其他语言中，对象包含一系列属性，这些属性是键，值对。当您需要构造一个对象时，有多个可用选项。

初始化对象变量 (Initialize an object variable)

You can create an object with pre-defined properties like so:

您可以创建具有预定义属性的对象，如下所示：

let myObject = {
  name: "Dave",
  age: 33
}

创建一个空对象 (Creating an empty object)

This creates an empty object inside our myObject variable:

这将在我们的myObject变量中创建一个空对象：

let myObject = new Object();

When you wish to add properties to your object, you simply use either dot notation or bracket notation with the property name of your choice:

当您希望向对象添加属性时，只需使用点符号或方括号符号以及所选的属性名称即可：

myObject.name = "Johnny Mnemonic"
myObject["age"] = 55

使用构造函数 (Using a constructor function)

You can define a constructor function that you can use to create your objects:

您可以定义可用于创建对象的构造函数：

function Kitten(name, cute, color) {
  this.name = name,
  this.cute = cute,
  this.color = color
}

You can define a variable containing an instantiation of this object by calling the constructor function:

您可以通过调用构造函数来定义一个包含该对象实例化的变量：

let myKitten = new Kitten("Nibbles", true, "white")

Object.create() (Object.create())

The Object.create() method (first defined in ECMAScript 5.1) allows you to create objects. it allows you to choose the prototype object for your new object without needing to define a constructor function beforehand.

Object.create()方法(在ECMAScript 5.1中首次定义)允许您创建对象。它允许您为新对象选择原型对象，而无需事先定义构造函数。

// Our pre-defined object
let kitten = {
  name: "Fluff",
  cute: true,
  color: "gray"
}
// Create a new object using Object.create(). kitten is used as the prototype
let newKitten = Object.create(kitten)

console.log(newKitten.name) // Will output "Fluff"

翻译自: https://www.freecodecamp.org/news/best-javascript-tutorial/