JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay. Vậy ngôn ngữ JavaScript có đặc điểm gì khác biệt, được ứng dụng như thế nào? Hãy tham khảo trong bài viết dưới đây.

JavaScript được ứng dụng rộng rãi trong phát triển web, ứng dụng di động và trò chơi, khiến nó trở thành một trong những ngôn ngữ lập trình có giá trị và phổ biến nhất hiện nay.

Ngôn ngữ lập trình JavaScript là gì?

JavaScript là ngôn ngữ lập trình hoặc tập lệnh cho phép nhà phát triển triển khai tính năng phức tạp trên các trang web. Nhờ vậy, một trang web thực hiện nhiều việc hơn là chỉ hiển thị thông tin tĩnh cho người dùng, tăng khả năng tương tác.

Hỗ trợ trang web cập nhật nội dung kịp thời, hoạt hình 2D/đồ họa 3D, tự động cuộn video, quảng cáo sinh động, màu sắc phần tử thay đổi,... chính là hiệu ứng của ngôn ngữ JavaScript. Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của World Wide Web (www).

Bên cạnh JavaScript, Ngôn ngữ đánh dấu siêu văn bản (HTML) và Ngôn ngữ định kiểu theo tầng (CSS) cũng là hai ngôn ngữ cùng tạo ra trải nghiệm người dùng tích cực trên trang web. Trong đó:

• HTML sử dụng để cấu trúc và tạo ý nghĩa cho nội dung web, chẳng hạn như xác định đoạn văn, tiêu đề, bảng dữ liệu hoặc nhúng hình ảnh và video vào trang.

• CSS sử dụng để định kiểu dáng cho nội dung HTML, ví dụ: Đặt màu nền và phông chữ, cũng như bố trí nội dung thành nhiều cột, hàng.

• JavaScript cho phép cập nhật nội dung động một cách linh hoạt, điều khiển đa phương tiện,...

Ngôn ngữ JavaScript dùng để làm gì?

Ngôn ngữ JavaScript cốt lõi phía máy khách bao gồm một số tính năng lập trình phổ biến, cho phép nhà phát triển thực hiện những việc như:

• Lưu trữ giá trị hữu ích bên trong các biến. Ví dụ, yêu cầu nhập một tên mới và lưu tên đó vào một biến gọi là “name”.

• Thao tác trên đoạn văn bản (được gọi là "chuỗi" (strings) trong lập trình). Ví dụ, lấy chuỗi "Người chơi 1: " và nối nó với biến name để tạo nhãn văn bản hoàn chỉnh: "Người chơi 1: Chris".

• Chạy mã để phản hồi sự kiện nhất định xảy ra trên một trang web.

Điều thú vị là chức năng được xây dựng dựa trên ngôn ngữ JavaScript phía máy khách. Giao diện lập trình ứng dụng (API - Application programming interface) sẽ cung cấp cho nhà phát triển khả năng bổ sung, sử dụng trong mã JavaScript.

API là tập hợp khối xây dựng mã (code) được tạo sẵn, cho phép nhà phát triển triển khai các chương trình mà nếu không có nó sẽ khó hoặc không thể thực hiện được.

Đối với lập trình, sử dụng API giống như làm đồ nội thất khi xây nhà. Việc lấy các tấm vật liệu đã cắt và nối chúng lại với nhau để tạo thành một chiếc giá sách sẽ dễ dàng hơn nhiều so với việc thiết kế mới từ đầu, tìm chất liệu gỗ, cắt dán,... để tạo ra thành phẩm hoàn chỉnh.

API thường được phân chia thành hai loại chính:

API trình duyệt (Browser APIs) được tích hợp vào trình duyệt web và có thể hiển thị dữ liệu từ môi trường máy tính xung quanh hoặc thực hiện những việc phức tạp hữu ích. Ví dụ:

• DOM (Document Object Model) - Mô hình đối tượng tài liệu API cho phép thao tác HTML và CSS, tạo, xóa và thay đổi HTML, tự động áp dụng các kiểu mới cho trang,... Mỗi khi người dùng nhìn thấy một cửa sổ bật lên xuất hiện trên một trang hoặc một số nội dung mới, đó là DOM đang hoạt động.

Tạo mô hình đối tượng tài liệu DOM - Ảnh: Internet

• Geolocation API lấy thông tin địa lý. Đây là cách Google Maps có thể tìm thấy vị trí theo yêu cầu và thể hiện vị trí đó trên bản đồ.

• API Canvas Và WebGL cho phép tạo đồ họa hoạt hình 2D và 3D.

• API Âm thanh và Video như HTMLMediaElement và WebRTC cho phép thực hiện những điều thực sự thú vị với đa phương tiện, chẳng hạn như phát âm thanh và video ngay trong trang web hoặc lấy video từ webcam của người dùng và hiển thị trên máy tính của người khác.

API của bên thứ ba không được tích hợp vào trình duyệt theo mặc định, thường phải lấy code và thông tin người dùng từ trên Web. Ví dụ:

• API Twitter cho phép thực hiện những việc như hiển thị các bài đăng mới nhất trên bảng tin cá nhân.

• API Google Maps và API OpenStreetMap cho phép nhúng bản đồ tùy chỉnh vào trang web và các chức năng khác tương tự.

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

Khi tải một trang web trong trình duyệt, bạn đang chạy mã của mình (HTML, CSS và JavaScript) bên trong môi trường thực thi (tab trình duyệt). Đây giống như một nhà máy lấy nguyên liệu thô (mã) và đưa ra sản phẩm (trang web).

Một cách sử dụng JavaScript rất phổ biến là sửa đổi động HTML và CSS để cập nhật giao diện người dùng, thông qua DOM API (như đã đề cập ở trên).

Lưu ý rằng mã trong tài liệu web thường được tải và thực thi theo thứ tự xuất hiện trên trang. Lỗi có thể xảy ra nếu JavaScript được tải và chạy trước HTML và CSS mà nó dự định sửa đổi.

Bảo mật trình duyệt

Mỗi tab trình duyệt có một nhóm riêng để chạy mã trong đó. Các nhóm này được gọi là "môi trường thực thi" - execution environments theo thuật ngữ kỹ thuật. 

Điều này có nghĩa là trong hầu hết các trường hợp, mã trong mỗi tab được chạy hoàn toàn riêng biệt và không thể trực tiếp ảnh hưởng đến mã trong tab khác hoặc trên trang web khác. Đây là một biện pháp bảo mật tốt.

Thứ tự chạy JavaScript

Khi trình duyệt gặp một khối JavaScript, nó thường chạy theo thứ tự từ trên xuống dưới. Điều này có nghĩa là nhà phát triển cần phải cẩn thận về thứ tự sắp xếp mọi thứ. Đây là một trong những lỗi phổ biến, cần lưu ý khi lập trình để đảm bảo các đối tượng được tham chiếu trong mã tồn tại trước khi cố gắng thực hiện các thao tác với chúng.

Mã được giải thích và biên dịch

Trong các ngôn ngữ thông dịch, mã được chạy từ trên xuống dưới và kết quả chạy mã được trả về ngay lập tức. Nhà lập trình không cần phải chuyển mã sang dạng khác trước khi trình duyệt chạy mã đó. Mã được nhận ở dạng văn bản thân thiện với người lập trình và được xử lý trực tiếp.

Mặt khác, các ngôn ngữ được biên dịch sang dạng khác trước khi chúng được máy tính chạy. Trình duyệt web nhận mã JavaScript ở dạng văn bản gốc và chạy tập lệnh từ đó.

Hầu hết các trình thông dịch JavaScript hiện đại sử dụng kỹ thuật biên dịch đúng lúc để cải thiện hiệu suất. Mã nguồn JavaScript được biên dịch sang định dạng nhị phân, trong khi tập lệnh đang được sử dụng để chạy nhanh nhất có thể. Tuy nhiên, JavaScript vẫn được coi là ngôn ngữ thông dịch vì quá trình biên dịch được xử lý trong thời gian chạy chứ không phải trước.

Mã phía máy chủ và phía máy khách

Mã phía máy khách là mã được chạy trên máy tính của người dùng. Khi một trang web được xem, mã phía máy khách của trang đó sẽ được tải xuống, sau đó chạy và hiển thị bởi trình duyệt.

Mặt khác, mã phía máy chủ được chạy trên máy chủ, sau đó kết quả của nó được tải xuống và hiển thị trên trình duyệt. Ví dụ về các ngôn ngữ web phía máy chủ phổ biến bao gồm PHP, Python, Ruby, ASP.NET và thậm chí cả JavaScript. JavaScript cũng có thể được sử dụng làm ngôn ngữ phía máy chủ, chẳng hạn như trong môi trường Node.js phổ biến.

Mã động (Dynamic) và mã tĩnh (Static)

Từ động (dynamic) được sử dụng để mô tả cả ngôn ngữ JavaScript phía máy khách và phía máy chủ. Nó đề cập đến khả năng cập nhật của trang web/ứng dụng để hiển thị những thứ khác nhau trong nhiều trường hợp khác nhau, tạo ra nội dung mới theo yêu cầu.

Mã phía máy chủ tự động tạo nội dung mới trên máy chủ, trong khi JavaScript phía máy khách tự động tạo nội dung mới bên trong trình duyệt trên máy khách.

Một trang web không có nội dung cập nhật động được gọi là trang tĩnh - nó chỉ hiển thị cùng một nội dung mọi lúc.

Ngôn ngữ JavaScript tăng tính tương tác giữa website với người dùng - Ảnh: Internet

Làm thế nào để thêm ngôn ngữ lập trình JavaScript vào trang web?

JavaScript được áp dụng cho trang HTML theo cách tương tự như CSS. Trong khi CSS sử dụng các phần tử <link> để áp dụng bảng định kiểu bên ngoài và phần tử <style> để áp dụng bảng định kiểu bên trong cho HTML, thì JavaScript chỉ cần một “người bạn” trong thế giới HTML - phần tử <script>.

1/ Trước hết, cần tạo một bản sao cục bộ của tệp, ví dụ: apply-javascript.html. Lưu nó vào một thư mục hợp lý.

2/ Mở tệp trong trình duyệt web và trình soạn thảo văn bản. HTML sẽ tạo một trang web đơn giản chứa một nút (button) bấm được.

3/ Tiếp theo, chuyển đến trình soạn thảo văn bản và thêm phần sau vào đầu - ngay trước thẻ đóng </head>:

4/ Thêm một số JavaScript vào bên trong phần tử <script> để làm cho trang hoạt động thú vị hơn: Thêm đoạn mã sau ngay bên dưới dòng "//JavaScript go here":

5/ Lưu tệp và làm mới trình duyệt. Khi nhấp vào nút, một đoạn mới sẽ được tạo và đặt bên dưới.

JavaScript bên ngoài

1/ Đầu tiên, tạo một tệp mới trong cùng thư mục với tệp HTML mẫu. Gọi nó script.js - đảm bảo rằng nó có phần mở rộng tên tệp .js, vì đó là cách nó được nhận dạng là JavaScript.

2/ Thay thế phần tử <script> hiện tại bằng phần tử sau:

3/ Bên trong script.js, thêm đoạn script sau:

4/ Lưu và làm mới trình duyệt, đã có JavaScript trong một tệp bên ngoài. Điều này thuận tiện trong việc tổ chức mã code và làm cho nó có thể sử dụng lại được trên nhiều tệp HTML. Ngoài ra, HTML dễ đọc hơn mà không cần chứa nhiều đoạn script trong đó.

Trình xử lý JavaScript nội tuyến

Lưu ý rằng, đôi khi nhà phát triển sẽ gặp một số đoạn mã JavaScript thực sự tồn tại bên trong HTML. Nó có thể trông giống như thế này:

Nó có chức năng giống hệt như trong hai phần trước, ngoại trừ phần tử <button> bao gồm một trình xử lý nội tuyến onclick để thực hiện chức năng khi nhấn nút.

Tuy nhiên, vui lòng không thực hiện điều này. Việc làm ô nhiễm HTML bằng JavaScript là một cách làm không tốt và không hiệu quả. Nhà phát triển phải đưa thuộc tính onclick="createParagraph()" này vào mọi nút mà họ muốn JavaScript áp dụng.

Sử dụng addEventListener

Thay vì đưa JavaScript vào HTML của bạn, hãy sử dụng cấu trúc JavaScript thuần túy. Chức năng querySelectorAll() cho phép chọn tất cả các nút trên một trang. Sau đó, có thể lặp qua các nút, gán một trình xử lý cho từng nút bằng cách sử dụng addEventListener(). Mã hiển thị như sau:

Thuộc tính này có thể dài hơn một chút so với thuộc tính onclick, nhưng sẽ hoạt động cho tất cả các nút - bất kể có bao nhiêu nút trên trang cũng như bao nhiêu nút được thêm hoặc xóa. JavaScript không cần phải thay đổi.

Chiến lược tải tập lệnh

Có một số vấn đề liên quan đến việc tải tập lệnh vào đúng thời điểm. Vấn đề phổ biến là tất cả HTML trên một trang được tải theo thứ tự xuất hiện. Nếu nhà phát triển sử dụng JavaScript để thao tác thành phần trên trang (hay chính xác hơn là DOM), mã của họ sẽ không hoạt động nếu JavaScript được tải và phân tích cú pháp trước HTML mà họ đang muốn tác động.

Trong các ví dụ về mã ở trên, JavaScript được tải và chạy trong phần đầu của tài liệu, trước khi phần nội dung HTML được phân tích cú pháp. Điều này có thể gây ra lỗi.

Thuộc tính async và defer

Trên thực tế, có hai tính năng hiện đại có thể sử dụng để vượt qua vấn đề về tập lệnh chặn - async và defer. Hãy nhìn vào sự khác biệt giữa hai điều này.

Thuộc tính async sẽ tải xuống tập lệnh mà không chặn trang trong khi tập lệnh đang được tìm nạp. Tuy nhiên, sau khi quá trình tải xuống hoàn tất, tập lệnh sẽ thực thi và chặn trang hiển thị.

Điều này có nghĩa là phần nội dung còn lại trên trang web sẽ không được xử lý và hiển thị với người dùng cho đến khi tập lệnh thực thi xong. Không có gì đảm bảo rằng các tập lệnh sẽ chạy theo bất kỳ thứ tự cụ thể nào. Tốt nhất nên sử dụng async khi tập lệnh trong trang chạy độc lập với nhau và không phụ thuộc vào tập lệnh nào khác trên trang.

Các tập lệnh được tải với thuộc tính defer sẽ tải theo thứ tự chúng xuất hiện trên trang. Chúng sẽ không chạy cho đến khi nội dung trang được tải xong. Điều này rất hữu ích nếu tập lệnh của bạn phụ thuộc vào DOM hiện có.

Trên đây là một số thông tin cơ bản về ngôn ngữ lập trình JavaScript. Ngày nay, ngôn ngữ JavaScript ngày càng được sử dụng khá phổ biến và rộng rãi, phục vụ cho nhiều mục đích phát triển web và ứng dụng trên cả máy chủ và máy khách.

Nguồn tham khảo:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/