JavaScript là gì? Học JavaScript cơ bản với lộ trình dễ hiểu nhất

JavaScript là gì? JavaScript là ngôn ngữ lập trình được dùng nhiều nhất trong hơn 10 năm qua, theo khảo sát của Stackoverflow. Đọc bài viết sau để biết nên học JavaScript thế nào, phát triển sự nghiệp IT với ngôn ngữ này ra sao để thăng tiến và có mức thu nhập hấp dẫn.

Bài viết này cung cấp:

• Lộ trình kiến thức cơ bản về JavaScript cho người mới: cách hoạt động, ứng dụng, các thuật ngữ.
• Các thư viện và framework JavaScript phổ biến và đáng học nhất 

JavaScript là gì?

JavaScript là gì?

JavaScript, còn được viết tắt là JS, là một ngôn ngữ lập trình, chạy dưới dạng ngôn ngữ kịch bản phía máy khách trong môi trường hosting. Môi trường hosting phổ biến nhất là trình duyệt web, dùng ngôn ngữ này để tạo tính tương tác cho trang web. 

JavaScript được phát triển vào những năm 1990 bởi Brendan Eich – người cũng là co-founder của Mozilla & Firefox. Kể từ đó, ngôn ngữ này đã trở thành một trong những công nghệ cốt lõi duy trì World Wide Web.

Các đặc điểm của ngôn ngữ lập trình JavaScript là gì?

• Là ngôn ngữ kịch bản (scripting language) hướng đối tượng.
• Là ngôn ngữ nhập động (dynamic typing) dựa trên prototype.
• Là ngôn ngữ lightweight (dễ học và viết code nhanh)
• Là ngôn ngữ đa mô hình (multi-paradigm) và đơn luồng (single threaded). 

Theo Radixweb, gần như các thiết bị hiện nay (Windows, Linux, macOS, Android, iOS, smart TV,…) đều đang sử dụng các framework JavaScript phổ biến. Tính đến năm 2022, 98% trong số 1,8 tỷ trang web trên thế giới sử dụng ngôn ngữ này làm ngôn ngữ lập trình phía máy khách, điều này cho thấy mức độ phổ biến ngày càng tăng của nó.

Tìm hiểu ngay: Việc làm Web Developer hấp dẫn trên ITviec

JavaScript hoạt động thế nào?

Mã JavaScript được thông dịch trực tiếp sang mã ngôn ngữ máy cơ bản bằng công cụ JavaScript. 

Đối với JavaScript phía máy khách (client-side)

Công cụ JavaScript được tích hợp sẵn bên trong hầu hết các trình duyệt web phổ biến. 

• Trình duyệt thực hiện tải trang web khi có người truy cập.
• Trình duyệt chuyển đổi trang web đó và tất cả các phần tử của nó (button, nhãn dán, hộp thả xuống,…) thành dạng cấu trúc dữ liệu gọi là DOM (tạm dịch: Mô hình Đối tượng Tài liệu).
• Công cụ JavaScript của trình duyệt thực hiện chuyển mã JavaScript thành mã byte.
• Khi có sự kiện xảy ra, ví dụ như nhấp vào button, việc thực thi code block JavaScript liên kết sẽ được kích hoạt.
• Công cụ JavaScript diễn giải mã byte và tạo thay đổi đối với DOM.
• Trình duyệt hiển thị DOM mới.

Đối với JavaScript phía máy chủ (server-side)

Công cụ JavaScript nằm trực tiếp trên server. JavaScript phía máy chủ có thể thực hiện:

• Truy cập cơ sở dữ liệu
• Thực hiện các tính toán logic khác nhau
• Phản hồi các sự kiện khác nhau do hệ điều hành của máy chủ kích hoạt. 

JavaScript được dùng để làm gì?

Trang web sẽ thế nào nếu không có JavaScript?

Nếu không có JavaScript, trang web sẽ chỉ có HTML và CSS. Khi đó, 90% website sẽ ở dạng tĩnh như một cuốn sách.

Ngôn ngữ lập trình này được tạo ra để web developer có thể nhúng mã thực thi vào trang web, cho phép trình duyệt web phản hồi tương tác của người dùng và thay đổi bố cục, nội dung trên trang web như:

• Nút có thể nhấp vào, menu thả xuống 
• Nội dung bổ sung khi làm mới trang
• Màu sắc của các phần tử thay đổi linh hoạt trên trang.

Vai trò của HTML-CSS-JavaScript

Tóm lại, vai trò của HTML-CSS-JavaScript được phân định như sau:

• HTML xác định cấu trúc và nội dung của trang web.
• CSS đặt cách trình bày và thiết kế giao diện trang web.
• JavaScript bổ sung tính tương tác cho trang web, tạo ra các ứng dụng web phong phú hơn.

Minh hoạ dễ hiểu về vai trò của HTML-CSS-JavaScript (nếu ví trang web là một chiếc xe hơi). Nguồn @Scrimba

9 ứng dụng nổi bật của JavaScript

1. Phát triển ứng dụng web

Các framework JavaScript giúp phát triển các ứng dụng web như React Native, React, Angular, Vue… 

Một ví dụ ứng dụng web mạnh mẽ được hỗ trợ bởi ngôn ngữ này là Google Maps, người dùng chỉ cần nhấp và kéo chuột để xem chi tiết bản đồ, mà không cần giao tiếp với máy chủ. 

2. Tạo tương tác cho trang web

JavaScript cho phép tạo các thao tác động giúp người dùng tương tác với các trang web như: 

• Hiển thị hoặc ẩn thông tin bằng cách nhấp vào nút
• Thay đổi màu của một nút khi di chuột qua nó
• Phóng to hoặc thu nhỏ hình ảnh
• Phát âm thanh và video trên một trang web
• Hiển thị hình ảnh động
• Sử dụng menu hamburger 
• Tải nội dung trong tài liệu mà không cần tải lại trang web.

3. Phát triển ứng dụng di động

Sử dụng framework React Native, bạn có thể xây dựng các ứng dụng di động cho các hệ điều hành khác nhau. Bạn không cần viết các mã khác nhau cho hệ điều hành iOS và Android mà chỉ cần viết nó một lần và chạy nó trên các nền tảng khác nhau.

4. Phát triển game

JavaScript có nhiều thư viện và framework khác nhau để tạo trò chơi 2D hoặc 3D. Bạn cũng có thể dùng game engine như PhysicsJS, Pixi.js để tạo game, dùng thư viện đồ họa WebGL, EaselJS để hiển thị hình ảnh 2D và 3D trên trình duyệt.

5. Tạo bản trình bày

JavaScript giúp tạo các trang trình bày tương tác và đẹp mắt dưới dạng trang web, với sự trợ giúp của HTML và các thư viện như RevealJs và BespokeJs.

6. Xây dựng web server và phát triển ứng dụng máy chủ

Developer cũng có thể sử dụng ngôn ngữ lập trình này để xây dựng các server web đơn giản và phát triển cơ sở hạ tầng back-end bằng Node.js.

7. Nghệ thuật

Một tính năng gần đây của HTML5 trong JavaScript là phần tử canvas, cho phép dễ dàng vẽ đồ họa 2D và 3D trên trang web. Điều này đã giúp mở ra cánh cửa cho các dự án nghệ thuật kỹ thuật số trên trình duyệt. 

8. Ứng dụng đồng hồ thông minh

Pebble.js là một framework cho phép developer tạo ứng dụng cho đồng hồ thông minh Pebble thông qua mã JavaScript đơn giản.

9. Robot bay

Với hệ sinh thái Node.js, giờ đây có thể sử dụng JavaScript trong lập trình robot bay, máy bay không hay thiết bị IoT.

Các ưu điểm & hạn chế đáng lưu ý của JavaScript là gì?

7 ưu điểm nổi bật nhất của JavaScript

1. Không cần bất kỳ thiết lập môi trường nào.
2. Chạy trên cả máy khách và máy chủ.
3. Chạy trên hầu hết các thiết bị.
4. Cho phép phát triển cả front-end và back-end
5. Có các phiên bản cập nhật thường xuyên.
6. Có mã nguồn mở.
7. Có nhiều framework & thư viện.

3 hạn chế nổi bật nhất của JavaScript

• Rủi ro bảo mật: 

JavaScript có thể được sử dụng để tải dữ liệu bằng AJAX hoặc bằng cách thao tác với các thẻ tải dữ liệu như <img>, <object>, <script>. Các cuộc tấn công này được gọi là tấn công tập lệnh chéo trang.

• Hiệu suất: 

JavaScript có hiệu suất hạn chế hơn các ngôn ngữ truyền thống. Một chương trình phức tạp nếu viết bằng ngôn ngữ này sẽ chạy tương đối chậm. Dù vậy, nó thường được dùng để thực hiện các tác vụ đơn giản trong trình duyệt, do đó hiệu suất không được coi là một hạn chế quá lớn.

• Độ phức tạp: 

Để có thể viết các tập lệnh nâng cao bằng JavaScript, developer cần có kiến ​​thức sâu về tất cả các khái niệm lập trình, các đối tượng ngôn ngữ cốt lõi, các đối tượng phía máy khách và máy chủ.

Phần dưới đây sẽ cung cấp lộ trình kiến thức cơ bản về JavaScript để bạn bắt đầu làm quen ngôn ngữ lập trình này.

Các kiểu dữ liệu trong Javascript là gì? 

JavaScript có 2 nhóm kiểu dữ liệu là: 

• Kiểu nguyên thuỷ (Primitive types): là kiểu dữ liệu “level thấp”, giá trị không thể sửa đổi trong biến.
• Kiểu Object: Các kiểu dữ liệu khác không thuộc kiểu nguyên thuỷ.

Các kiểu dữ liệu trong Javascript. Nguồn tham khảo: StackOverflow

​​7 kiểu dữ liệu nguyên thủy:

Kiểu dữ liệu	Giải thích	Ví dụ
Number/ Số	Tất cả các giá trị số nguyên và số thực, ngoại trừ các số nguyên rất lớn.	6, 7, 8,9
BigInt	Dùng cho số nguyên rất lớn, độ dài tuỳ ý.
String/ Chuỗi	– Dùng để lưu trữ dữ liệu dạng văn bản. – Là bất cứ dữ liệu gì nằm giữa dấu nháy đơn (‘…’), hoặc dấu nháy kép (“…”), hoặc dấu gạch ngược (`…`).	“lập trình” ‘câu dài’ `câu ngắn`
Boolean	– Chỉ có hai giá trị: true hoặc false – Thường được sử dụng cho logic có điều kiện.
Symbol/ Biểu tượng	Được sử dụng để tạo các giá trị duy nhất, không thể sửa đổi.
Undefined	Được gán cho biến đã được khai báo nhưng chưa được gán giá trị, một cách trực tiếp hoặc ngầm định.	Chỉ có một giá trị duy nhất là undefined.
Null	Được gán cho biến không biết giá trị (rỗng). Null giữ một giá trị, nhưng không phải là một giá trị thực.	Chỉ có một giá trị duy nhất là null

Kiểu Object:

Object (đối tượng) là kiểu dữ liệu tham chiếu, có tính phức hợp, cho phép lưu các tập hợp dữ liệu dưới dạng 1 cặp key:value, gọi là thuộc tính.

Trong đó: 

– key là một chuỗi (string) hoặc symbol

– value là giá trị thuộc bất kỳ loại dữ liệu nào, kể cả một object khác.

Ví dụ: {name: ‘lap trinh’, age: 5}

Không giống như đối tượng trong các ngôn ngữ nhập tĩnh, các đối tượng trong JavaScript không cố định — các thuộc tính có thể được thêm, xóa, sắp xếp lại, thay đổi hoặc truy vấn động bất kỳ lúc nào. 

Các kiểu Object phổ biến:

Array/ Mảng	Array là một nhóm dữ liệu thuộc bất kỳ kiểu nào, lưu trữ trong một biến duy nhất, được phân tách bằng dấu phẩy.	[1, 2, “hello”, false]
Function/ Hàm	Hàm là một kiểu dữ liệu gọi một code block khi được gọi. Phần thân của hàm có thể chứa bao nhiêu câu lệnh tùy thích và có thể khai báo các biến riêng của nó là cục bộ của hàm đó.	function(){ console.log(“function”) }

Quy tắc cú pháp trong JavaScript là gì?

Cú pháp là tập hợp các quy tắc, cách chương trình JavaScript được xây dựng. Cú pháp JavaScript xác định hai loại giá trị:

1. Giá trị hằng (Literals)
2. Giá trị biến (Variables)

Các quy tắc cú pháp trong JavaScript

1. Các số được viết có hoặc không có phần thập phân:

10.50

1001

2. Dấu bằng được dùng để gán giá trị cho biến.

let x;

x = 6;

3. JavaScript sử dụng toán tử số học ( + – * / ) để tính giá trị:

(5 + 6) * 10

4. Các từ khóa được sử dụng để xác định các hành động sẽ được thực hiện.

VD: Từ khóa let yêu cầu trình duyệt tạo các biến:

let x, y;

x = 5 + 6;

y = x * 10;

5. JavaScript phân biệt chữ hoa chữ thường:

VD: 

Các biến lastName và lastname là hai biến khác nhau

let lastname, lastName;

lastName = "Doe";

lastname = "Peterson";

Hoặc có thể hiểu, JavaScript không diễn giải LET hoặc Let là từ khóa let.

6. Dấu gạch nối không được phép trong JavaScript. Chúng được dành riêng cho các phép trừ.

Do đó, JavaScript developer có xu hướng sử dụng Camel Case (Chữ cái đầu tiên là chữ thường, chữ cái đầu tiên của mỗi từ sau đó là chữ hoa) để nối nhiều từ thành một tên biến:

VD: 

FirstName, LastName, masterCard, interCity.

7. Các tên định danh có thể chứa các ký tự Unicode, nhưng chúng không thể là một trong những từ đặt sẵn.
8. Để comment thường dùng dấu // hoặc /* */ (khác với các ngôn ngữ kịch bản lệnh như Perl, Python và Bash dùng #).

• Comment một dòng:

// câu chú thích một dòng

• Comment nhiều dòng:

/*

câu chú thích

nhiều dòng

*/

9. Dấu chấm phẩy là tùy chọn — ngôn ngữ sẽ tự động chèn chúng khi cần. Tuy nhiên, không giống như Python, dấu chấm phẩy vẫn là một phần của cú pháp.

Biến trong JavaScript là gì? Cách khai báo và gán giá trị cho biến

Biến trong JavaScript là gì?

Biến là nơi chứa các giá trị của bất kỳ kiểu dữ liệu nào. Khi biến được sử dụng, JavaScript sẽ dùng giá trị mà biến đại diện.

Các thao tác có thể làm với biến

• Khai báo biến

let name;

• Gán một giá trị cho biến 

let name;

name = "JavaScript";

• Khai báo và gán giá trị cho biến trên một dòng:

let name = “JavaScript”;

Cú pháp khai báo và gán giá trị cho biến trên một dòng. Nguồn: DEV Community

3 phương pháp khai báo biến trong JavaScript

JavaScript cho phép khai báo biến bằng một trong ba từ khóa: let, const hoặc var.

• let: cho phép bạn khai báo và gán giá trị các biến cấp độ khối. Giá trị của biến có thể thay đổi sau trong code.
• var: giống như let. Nhưng var có thể hoist (chuyển lên đầm hàm) các biến được khai báo, còn let thì không. 

var name = "JavaScript";

name = "Ngôn ngữ";

Tuy nhiên, hoisting có thể gây ra lỗi. Do đó khai báo var không được khuyến khích trong mã JavaScript hiện đại.

• const: cho phép bạn khai báo các biến có giá trị không bao giờ thay đổi. 

Ví dụ:

let name = "JavaScript"

name = "Language" // no errors

const age = 5

age = 6 // error, cannot reassign variable

Toán tử trong JavaScript là gì?

Các toán tử và chức năng của chúng bao gồm:

+,-, *, **, /, %, ++, —	Toán tử số học
=	Toán tử gán, dùng để gán giá trị
+=  -=	Đối tác gán phức hợp của toán tử nhị phân. VD:  x += 5; (x = x + 5;)
+	Thực hiện nối chuỗi VD: “hello” + ” world”; // “hello world”
==, ===, !=, !==, >, <,	Toán tử so sánh, dùng cho cả chuỗi và số
&&, II, !	Toán tử logic

Hàm trong JavaScript là gì?

Hàm là nơi bạn có thể lưu trữ một đoạn code để sử dụng ở những nơi khác trong code của mình. 

• Ví dụ 1 về hàm:

Giả sử bạn muốn in “JavaScript” và “Ngôn ngữ” ở các vị trí khác nhau trong code. Thay vì làm điều này:

console.log("JavaScript")

console.log("Ngôn ngữ")

// một đoạn code nào đó

console.log("JavaScript")

console.log("Ngôn ngữ")


// một đoạn code khác

console.log("JavaScript")

console.log("Ngôn ngữ")

Bạn có thể dùng hàm print():

function print() {

    console.log("JavaScript")

    console.log("Ngôn ngữ")

}

print()

// thêm đoạn code khác

print()

// thêm đoạn code khác

print()

Bằng cách này, bạn có thể lưu trữ đoạn code cần lặp lại trong một hàm để sử dụng nó ở bất cứ nơi nào khác trong code. 

• Ví dụ 2:

Nếu muốn tìm trung bình cộng của ba số, thay vì viết như này:

let num1 = 5

let num2 = 6

let num3 = 8

let average = (num1 + num2 + num3) / 3

Sẽ dễ dàng hơn nếu dùng hàm findAverage ():

function findAverage(n1, n2, n3) {

    let aver = (n1 + n2 + n3) / 3

    return aver

}

let num1 = 5

let num2 = 6

let num3 = 8

let average = findAverage(num1, num2, num3)


// sau các đoạn code khác

let average2 = findAverage(...)


// sau các đoạn code khác

let average3 = findAverage(...)

Trong khai báo của findAverage, n1, n2, n3 trong ngoặc đơn là các tham số đóng vai trò “giữ chỗ” (placeholder) cho các giá trị sẽ được cung cấp khi hàm được gọi. Đoạn code sử dụng các placeholder đó để tìm giá trị trung bình và từ khóa return trả về giá trị trung bình từ hàm.

Placeholder giúp các hàm của bạn có thể tái sử dụng, sao cho các giá trị khác nhau tại các thời điểm khác nhau có thể được truyền vào các hàm để sử dụng cùng một logic.

Thư viện JavaScript cơ bản

Thư viện JavaScript là tập hợp các đoạn code viết sẵn mà developer có thể dùng lại để thực hiện các hàm JavaScript tiêu chuẩn. 

Các nhóm thư viện JavaScript cơ bản:

Thư viện để Trực quan hóa dữ liệu

• Ví dụ phổ biến: Chart.js, ApexCharts, Algolia Places 
• Dùng để: Tạo web hiển thị dữ liệu trong biểu đồ, bản đồ. 

Thư viện thao tác DOM

• Ví dụ phổ biến: jQuery, Umbrella JS 
• Dùng để: Tạo các chức năng web như nút, menu động, thư viện ảnh, hộp đèn, v.v.

Thư viện biểu mẫu

• Ví dụ phổ biến: wForms, LiveValidation, Validanguage, qForms
• Dùng để: Tạo các chức năng biểu mẫu như xác thực biểu mẫu, bố cục, điều kiện và chuyển đổi.

Thư viện Hàm toán học và văn bản

• Ví dụ phổ biến: Date.js, Sylvester, URL JavaScript
• Dùng để: xử lý một số yêu cầu toán học, ngày, giờ và văn bản ở phía máy khách, thay vì gửi tất cả yêu cầu đến máy chủ.

12 framework Javascript phổ biến nhất 2023

Framework JavaScript cũng là một tập hợp các đoạn code viết sẵn, có thể tái sử dụng. Tuy nhiên, nếu thư viện được dùng để thực hiện các yêu cầu nhất định, thì framework là một bộ khung hoàn chỉnh để xây dựng bất kỳ ứng dụng web nào. 

Dưới đây là những framework JavaScript phổ biến nhất 2023:

4 front-end JavaScript framework phổ biến nhất 2023

1. React.js
2. Angular
3. Vue.js
4. Next.js

4 back-end JavaScript framework phổ biến nhất 2023

1. Node.js
2. Express.js
3. Backbone.js
4. Meteor.js

4 framework JavaScript phổ biến cho Mobile development

1. Electron.js
2. React Native
3. Cordova
4. Expo

Các câu hỏi thường gặp về JavaScript là gì?

JavaScript có phải là Java không?

Douglas Crockford trả lời về hiểu lầm phổ biến này: “JavaScript có sự tương đồng về cú pháp với Java, giống như Java đối với C. Nhưng nó không phải là một tập hợp con của Java.”

JavaScript cũng tuân theo hầu hết cú pháp biểu thức Java, quy ước đặt tên và cấu trúc luồng điều khiển cơ bản, đó là lý do tại sao nó được đổi tên từ LiveScript thành JavaScript. 

Nhìn chung, lập trình Java phức tạp hơn lập trình JavaScript. So sánh JavaScript và Java:

Java	JavaScript
Là ngôn ngữ lập trình hướng đối tượng (object-oriented language)	Là ngôn ngữ kịch bản (scripting language)
Chủ yếu được sử dụng để phát triển các ứng dụng doanh nghiệp phức tạp	Chủ yếu được sử dụng để tạo các trang web động và tương tác
Dùng chủ yếu cho back-end	Dùng chủ yếu cho front-end
Chủ yếu là ngôn ngữ biên dịch	Chủ yếu là ngôn ngữ thông dịch
Là ngôn ngữ strong-typying: Các biến phải được khai báo trước	Là ngôn ngữ loose-typing: Các cú pháp và quy tắc thoải mái hơn.
Các đối tượng của Java dựa trên lớp (class)	Các đối tượng của Java dựa trên mẫu (prototype)
Có thể chạy trong bất kỳ máy ảo (JVM) hoặc trình duyệt nào.	Trước đây chỉ chạy trên trình duyệt, nhưng bây giờ có thể chạy trên máy chủ thông qua Node.js.

JavaScript là ngôn ngữ thông dịch hay biên dịch?

Hiện nay, JavaScript vừa là ngôn ngữ biên dịch và thông dịch. 

Trong các phiên bản trước của JavaScript, nó chỉ sử dụng trình thông dịch thực thi từng dòng mã và hiển thị kết quả ngay lập tức. Nhưng theo thời gian, hiệu suất trở thành một vấn đề vì việc thông dịch khá chậm.  

Do đó, các công cụ JavaScript hiện đại đều tích hợp trình biên dịch tức thời (JIT – Just-In-Time), biên dịch JavaScript thành mã byte thực thi ngay khi nó chuẩn bị chạy để cải thiện hiệu suất.

TypeScript là gì?

TypeScript là một superset (tập mẫu) của JavaScript, thêm cú pháp bổ sung vào JavaScript để sớm phát hiện những lỗi viết mã. TypeScript là một ngôn ngữ nhập tĩnh (statical typed) và hướng đối tượng (object oriented), khác với JavaScript là một ngôn ngữ kịch bản (scripting language).

Trình duyệt sẽ không thể hiểu và thực thi trực tiếp mã TypeScript như đối với JavaScript. Do đó, các tệp .ts trước hết cần được biên dịch sang JavaScript thuần, thông qua trình biên dịch tsc, sau đó mới được thực thi bởi nền tảng đích.

Tham khảo: Việc làm TypeScript hấp dẫn trên ITviec

Tổng kết

Kiến thức liên quan đến JavaScript còn rất nhiều. Tuy nhiên nắm vững kiến thức trong bài viết này, bạn sẽ có nền tảng cơ bản để hiểu rõ JavaScript là gì để có thể  học ngôn ngữ này ở mức độ cao cấp hơn.

Với mức độ phổ biến và nhu cầu tuyển dụng cao, đầu tư vào JavaScript vẫn là một lựa chọn an toàn và đúng đắn cho bất cứ lập trình viên nào. Tiếp tục đón chờ các bài viết về ngôn ngữ lập trình này trên ITviec blog nhé!