Hướng dẫn JavaScript tốt nhất

JavaScript là ngôn ngữ kịch bản được sử dụng rộng rãi nhất trên Trái đất. Và nó có hệ sinh thái thư viện lớn nhất so với bất kỳ ngôn ngữ lập trình nào.

JavaScript là ngôn ngữ cốt lõi của web và là ngôn ngữ lập trình duy nhất có thể chạy trong tất cả các trình duyệt web chính.

Đáng chú ý, JavaScript không liên quan đến Java. Kiểm tra JavaScript: Ngôn ngữ lập trình bị hiểu lầm nhiều nhất trên thế giới.

Tên chính thức của JavaScript là ECMAScript được định nghĩa theo Tiêu chuẩn ECMA-262.

Nếu bạn muốn tìm hiểu thêm về ngôn ngữ JavaScript, và tại sao nó được sử dụng rộng rãi, hãy đọc bài viết của Quincy Larson - Tôi nên học ngôn ngữ lập trình nào trước? - hoặc xem video đầy cảm hứng này từ Preethi Kasosystemdy.

freeCodeCamp có một hướng dẫn JavaScript chuyên sâu trên YouTube sẽ dạy cho bạn tất cả các nguyên tắc cơ bản chỉ trong 3 giờ.

Một số hướng dẫn JavaScript hay khác:

  • JavaScript cho Mèo
  • Hướng dẫn JavaScript hiện đại
  • Hướng dẫn đầy đủ nhất về lập trình chức năng của Giáo sư Frisby
  • Javascript hùng hồn ( chú thích )
  • Nói Javascript
  • Khám phá ES6
  • Udemy - Javascript Hiểu các phần kỳ lạ ( 3,5 giờ đầu tiên )
  • Lập trình hàm trong JavaScript
  • Giới thiệu về JavaScript: Các bước đầu tiên
  • Douglas Crockford's Videos
  • Bảng gian lận JS hiện đại
  • 50 trang web tốt nhất để học JavaScript
  • Hướng dẫn JavaScript Codementor
  • Bạn có thể không cần jQuery

Người giới thiệu

  • DevDocs
  • OverAPI JavaScript Cheat Sheet
  • ECMA-262
  • Mạng nhà phát triển Mozilla (MDN)

JavaScript nhanh

  • REPL ( nút )
  • JSBin
  • JSFiddle
  • CodePen
  • CoderPad ( lập trình cặp )
  • C9 ( IDE , lập trình cặp )
  • Sân chơi đối tượng ( trực quan hóa các đối tượng )
  • Plunker

Thách thức

  • Code Wars
  • Xếp hạng tin tặc
  • Trò chơi mã hóa
  • CodeFights
  • ES6 Katas

Hướng dẫn

  • Codecademy
  • RithmSchool

Bài tập

  • Sự khéo léo
  • Coderbyte
  • Tập thể dục
  • JavaScript30
  • Javascript.com (Pluralsight)

Người biên tập

  • Mã Visual Studio
  • Atom
  • Văn bản tuyệt vời
  • Webstorm
  • Dấu ngoặc

Blog

  • Sự hoàn hảo giết chết
  • 2 thực tế
  • Bộ sưu tập JS trên Phương tiện
  • David Walsh
  • siêu anh hùngJS

Podcast

  • JS Jabber

Video hướng dẫn

  • Derek Banas 'Learn JS In One Video
  • JavaScript hướng đối tượng của Derek Banas

Sách

  • Bí mật về JavaScript Ninja
  • Lập trình ứng dụng JavaScript
  • JavaScript có thể bảo trì
  • Học các mẫu thiết kế JavaScript
  • Hướng dẫn kiểu JavaScript trên Airbnb
  • JSDoc
  • Javascript Allonge Six
  • Bạn không biết JS

6 cuốn sách về JavaScript của Kyle Simpson, từ sơ cấp đến nâng cao.

  • Javascript hùng hồn

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

  • Professor Frisby’s Mostly Adequate Guide to Functional Programming

Quite in-depth guide to Functional Programming in JavaScript

  • The JavaScript Way
  • Functional Light JS

Standalone JavaScript engines

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

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

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

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

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

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

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

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

JavaScript Frameworks

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

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.

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.
  • Simplicity - JavaScript's syntax was inspired by Java's and is relatively easy to learn compared to other popular languages like 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.
  • 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.
  • Server Load - JavaScript is client-side, so it reduces the demand on servers overall, and simple applications may not need a server at all.
  • 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.
  • Extended Functionality - Developers can extend the functionality of web pages by writing snippets of JavaScript for third party add-ons like Greasemonkey.
  • 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.
  • 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.

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.
  • 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.

ES6

The 6th edition of ECMAScript is called ES6.

It is also know as ES2015.

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

ES5 example:

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

ES6 example:

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
  • 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.

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.

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.

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

Điều này tạo ra một đối tượng trống bên trong biến myObject của chúng tôi:

let myObject = new Object();

Khi bạn muốn thêm thuộc tính vào đối tượng của mình, bạn chỉ cần sử dụng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc với tên thuộc tính mà bạn chọn:

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

Sử dụng một hàm tạo

Bạn có thể xác định một hàm khởi tạo mà bạn có thể sử dụng để tạo các đối tượng của mình:

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

Bạn có thể xác định một biến có chứa một khởi tạo của đối tượng này bằng cách gọi hàm khởi tạo:

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

Object.create ()

Phương thức Object.create () (được định nghĩa lần đầu trong ECMAScript 5.1) cho phép bạn tạo các đối tượng. nó cho phép bạn chọn đối tượng nguyên mẫu cho đối tượng mới của mình mà không cần xác định trước hàm khởi tạo.

// 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"