Tổng quan về JavaScript

14.03.2025 — Javascript — 9 min read

Rất nhiều người mới bắt đầu học lập trình có thể cảm thấy đôi chút hoài nghi khi nghe đâu đó rằng JavaScript là ngôn ngữ lập trình dành cho trẻ con. Thực tế thì hoàn toàn ngược lại! Hãy cùng tôi khám phá những điều thú vị về ngôn ngữ mạnh mẽ này.

JavaScript là gì và tại sao bạn nên quan tâm?

JavaScript là một ngôn ngữ lập trình dựa trên script, ra đời năm 1995 bởi Brendan Eich tại Netscape với mục tiêu biến các trang web tĩnh thành động và tương tác. Từ đó, nó phát triển mạnh mẽ, đặc biệt với sự ra đời của Node.js (2009) cho server-side và các framework như React, Angular cho front-end. Ngày nay, JavaScript không chỉ giới hạn ở trình duyệt mà còn xuất hiện trên mobile (React Native) và hơn thế nữa.

Với tính dễ học, linh hoạt, và nhu cầu tuyển dụng cao từ startup đến các tập đoàn lớn như Google hay Facebook, JavaScript là kỹ năng không thể thiếu nếu bạn muốn theo đuổi sự nghiệp phát triển phần mềm.

Ưu điểm nổi bật của JavaScript

Để hiểu rõ hơn về sức mạnh của JavaScript, hãy cùng điểm qua một số đặc điểm nổi bật khiến nó được cộng đồng đón nhận rộng rãi:

1. Tích hợp sẵn trong hầu hết các trình duyệt

Không giống Java, vốn yêu cầu cài đặt JDK và JVM, JavaScript được tích hợp sẵn trong hầu hết các trình duyệt hiện đại, giúp việc phát triển web trở nên dễ dàng hơn.

2. Ngôn ngữ lập trình cực kỳ linh hoạt

JavaScript rất linh hoạt và hỗ trợ tốt lập trình hàm, với khả năng gán hàm cho biến hoặc truyền hàm làm tham số.

3. Khả năng phát hiện môi trường chạy

JavaScript cung cấp các API để lập trình viên kiểm tra thông tin về trình duyệt, hệ điều hành hoặc thiết bị mà mã đang chạy. Ví dụ, bạn có thể sử dụng navigator.userAgent hoặc window.navigator.platform để xác định loại trình duyệt và hệ điều hành. Điều này giúp bạn điều chỉnh mã nguồn để ứng dụng tương thích tốt hơn với nhiều nền tảng khác nhau.

4. Hỗ trợ lập trình hướng đối tượng (OOP)

JavaScript hỗ trợ lập trình hướng đối tượng (OOP) theo cách riêng, với các khái niệm như đối tượng và kế thừa. Dù không giống hoàn toàn Java hay C++, nó vẫn rất mạnh mẽ và dễ học. Chúng ta sẽ khám phá sâu hơn về OOP trong JavaScript ở các phần sau.

5. Học một ngôn ngữ, dùng mọi nơi

Trước đây, một full stack developer có thể phải học rất nhiều ngôn ngữ lập trình khác nhau cho front-end (JavaScript), back-end (PHP, Java, Ruby...), và ứng dụng di động (Java, Kotlin, Swift...).

Nhưng ngày nay, chỉ cần JavaScript là đủ. Với JavaScript, bạn có thể xây dựng ứng dụng web (front-end), ứng dụng phía back-end (nhờ Node.JS), và ứng dụng di động (với React Native, Ionic...).

Giới hạn cần biết của JavaScript

"Không có gì là hoàn hảo," và JavaScript cũng vậy. Dưới đây là một số nhược điểm cần lưu ý:

Vấn đề bảo mật: JavaScript client-side không thể đọc/ghi file trên máy người dùng vì lý do bảo mật.
Xử lý đơn luồng: JavaScript xử lý trên một luồng duy nhất, nghĩa là nó thực hiện từng tác vụ một theo thứ tự.
Hạn chế về đa nhân CPU: Nó không tận dụng trực tiếp nhiều nhân CPU như các ngôn ngữ biên dịch (C++, Java).

Công cụ phát triển JavaScript

Có lẽ JavaScript là ngôn ngữ "dễ chịu" nhất về mặt công cụ phát triển. Bạn không cần đầu tư nhiều vào IDE (Integrated Development Environment) hay phần mềm phức tạp.

Để viết code JavaScript, bạn chỉ cần một trình soạn thảo văn bản đơn giản như Notepad (Windows), TextEdit (macOS), hoặc các lựa chọn nâng cao hơn như Notepad++, Visual Studio Code, WebStorm. Và tất nhiên, một trình duyệt web (Firefox, Chrome, Edge...) để hiển thị trang web bạn phát triển là không thể thiếu. Tất cả đều miễn phí!

Ngoài ra, bạn hoàn toàn có thể code trực tiếp trên các Text Editor Online. Một số gợi ý bao gồm:

Codesandbox.io
Playcode.io
Jsfiddle.net

Ưu điểm của các Text Editor Online này là dễ sử dụng, tích hợp sẵn mọi thứ, và không cần cài đặt. Bạn chỉ cần gõ code và chạy. Trong tài liệu này, chúng ta sẽ thường xuyên sử dụng codesandbox.io cho các ví dụ minh họa vì giao diện của nó tương tự Visual Studio Code và có thể kết nối với Github.

Bạn có thể tham khảo ví dụ trên codesandbox:

Thực thi chương trình JavaScript

Các ngôn ngữ lập trình thường thuộc một trong hai trường phái thực thi chương trình: biên dịch (compiled) hoặc thông dịch (interpreted).

Các ngôn ngữ biên dịch (ví dụ: C++, Java) cần một chương trình đặc biệt gọi là compiler để dịch toàn bộ mã nguồn thành mã máy trước khi thực thi.
JavaScript thuộc nhóm ngôn ngữ thông dịch (cùng với PHP, Ruby...). Mã nguồn JavaScript không cần trải qua bước biên dịch. Thay vào đó, trình duyệt sẽ chịu trách nhiệm dịch trực tiếp mã nguồn sang mã máy và thực thi từng dòng lệnh.

Ưu điểm của cách chạy thông dịch là quá trình chạy nhanh hơn, không cần bước biên dịch trung gian. Lập trình viên cũng có thể cập nhật và thay đổi code bất kỳ lúc nào mà không cần chờ đợi biên dịch lại toàn bộ chương trình.

Khi người dùng yêu cầu một trang HTML có JavaScript, các tập lệnh JS sẽ được gửi đến trình duyệt và trình duyệt sẽ thực thi chúng.

Bắt đầu với chương trình JavaScript đầu tiên

JavaScript có thể chạy ở phía client-side (trên trình duyệt, để tạo giao diện tương tác) hoặc server-side (trên máy chủ, nhờ Node.js). Trong bài này, chúng ta sẽ bắt đầu với client-side. Việc sử dụng JavaScript cho ứng dụng server-side (với NodeJS) sẽ được đề cập trong một bài viết khác. Dù cú pháp cơ bản là giống nhau, môi trường chạy JS sẽ có một vài khác biệt.

Để chạy một chương trình JavaScript, bạn cần đưa mã JS vào trong trang HTML. Có ba cách chính để làm điều này:

Sử dụng thẻ <script>.
Sử dụng file JavaScript (.js) riêng biệt.
Viết mã JavaScript ngay trong các thẻ HTML.

Cách 1: Sử dụng thẻ `<script>`

Bạn có thể đặt toàn bộ mã JavaScript vào bên trong thẻ <script></script>.

<!DOCTYPE html>
<html lang="vi">
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <script>
      alert('Xin chào thế giới!');
    </script>
  </body>
</html>

Lưu lại tệp này và mở bằng trình duyệt, bạn sẽ thấy một hộp thoại thông báo "Xin chào thế giới!".

Cách 2: Sử dụng file JavaScript (.js) riêng biệt

Đối với các ứng dụng web thực tế, việc tách mã JS ra khỏi HTML là một Practices tốt để giữ cho mã nguồn gọn gàng và dễ quản lý, đặc biệt khi dự án trở nên phức tạp. Điều này cũng giúp chúng ta xây dựng các plugin/module JavaScript độc lập với HTML.

Bạn sẽ tạo một tệp tin với phần mở rộng .js (ví dụ: index.js) và viết mã JavaScript vào đó. Sau đó, bạn sẽ nhúng đường dẫn đến tệp .js này vào trang HTML bằng thẻ <script>.

Ví dụ, tệp index.html:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <title>Học Javascript</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="index.js"></script>
  </body>
</html>

Và tệp index.js:

document.getElementById('content').innerHTML =
  'Tài liệu học Javascript toàn tập';

Khi mở index.html bằng trình duyệt, nội dung của phần tử có id="content" sẽ được thay đổi.

Cách 3: Viết mã JavaScript ngay trong các thẻ HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Học Javascript</title>
  </head>
  <body>
    <button onclick="document.body.style.backgroundColor = 'lightblue'">
      Đổi màu nền
    </button>
  </body>
</html>

Đây chính là phương pháp nhúng mã JavaScript trực tiếp vào các thuộc tính sự kiện của thẻ HTML như onclick. Lưu ý rằng phương pháp này không được khuyến khích.

Cú pháp JavaScript cơ bản

Cú pháp JavaScript là tập hợp các quy tắc để viết mã JavaScript. Một số thành phần cơ bản bao gồm:

Câu lệnh (Statement): Thường được phân tách bằng dấu chấm phẩy ;.
Giá trị (Value): Bao gồm giá trị cố định (literal) và giá trị có thể thay đổi (biến).
Biến (Variable): Được khai báo bằng từ khóa let hoặc var.
Toán tử (Operator): Sử dụng để thực hiện các phép tính hoặc so sánh.
Biểu thức (Expression): Sự kết hợp của giá trị, biến và toán tử.
Từ khóa (Keyword): Các từ được định nghĩa sẵn trong JavaScript, ví dụ: let, const, if, return.
Chú thích (Comment): Sử dụng // cho chú thích một dòng và /* ... */ cho chú thích nhiều dòng.
Quy tắc đặt tên: Tên phải bắt đầu bằng chữ cái, dấu gạch dưới _ hoặc dấu $, và phân biệt chữ hoa và chữ thường.

Khi đặt tên file, hãy tuân thủ các quy tắc sau:

Sử dụng ký tự hợp lệ: Chỉ sử dụng chữ cái thường (a-z), chữ số (0-9), dấu gạch dưới _ hoặc dấu gạch ngang -. Tránh ký tự đặc biệt.
Không sử dụng dấu cách: Thay bằng dấu gạch ngang - hoặc dấu gạch dưới _ (ví dụ: my-script.js hoặc my_script.js, không dùng my script.js).

Lời Kết

Hy vọng rằng qua bài viết này, bạn đã có cái nhìn tổng quan về JavaScript và hiểu được tầm quan trọng của nó trong phát triển phần mềm hiện đại. Nếu muốn học sâu hơn, hãy khám phá các tài nguyên miễn phí như MDN Web Docs (developer.mozilla.org) hoặc cộng đồng lập trình viên trên freeCodeCamp. Trong các phần tiếp theo, chúng ta sẽ đi sâu vào cú pháp và các khái niệm nâng cao. Hãy cùng đón chờ nhé!