Tổng Quan Về JavaScript và Các Phương Pháp Nhúng Script

JavaScript là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứng dụng web phía client, mang lại tính tương tác cho các trang web. Ban đầu, JavaScript được tạo ra với mục đích đơn giản hóa việc xác thực dữ liệu đầu vào trên trình duyệt, giảm thiểu các yêu cầu gửi lên máy chủ.

1. JavaScript là gì?

Vào năm 1995, Netscape Communications đã giới thiệu JavaScript (ban đầu có tên LiveScript) trong trình duyệt Netscape Navigator. Mục tiêu chính là cho phép các nhà phát triển tạo ra những trang web động và tương tác hơn mà không cần gửi mọi yêu cầu xác thực lên máy chủ. Sự thành công nhanh chóng của JavaScript đã thúc đẩy Microsoft phát triển JScript, phiên bản riêng của họ, cho Internet Explorer 3.

Sự xuất hiện của hai phiên bản JavaScript đã làm nổi bật nhu cầu về một tiêu chuẩn chung. Năm 1997, JavaScript 1.1 được đệ trình lên Hiệp hội các nhà sản xuất máy tính châu Âu (Ecma). Ủy ban Kỹ thuật 39 (TC39) đã được thành lập để tiêu chuẩn hóa ngôn ngữ này, kết quả là ra đời ECMA-262, hay còn gọi là ECMAScript. Sau đó, ECMAScript được Tổ chức Tiêu chuẩn hóa Quốc tế (ISO) và Ủy ban Kỹ thuật Điện Quốc tế (IEC) chấp nhận làm tiêu chuẩn (ISO/IEC-16262).

Thuật ngữ JavaScript hiện nay bao gồm ba thành phần chính:

ECMAScript: Đây là phần cốt lõi của ngôn ngữ, định nghĩa cú pháp cơ bản (biến, hàm, vòng lặp, v.v.). ECMAScript không phụ thuộc vào trình duyệt và có thể được triển khai trong nhiều môi trường khác nhau.
DOM (Document Object Model): Cung cấp một giao diện chuẩn để các chương trình có thể truy cập và thay đổi nội dung, cấu trúc và kiểu dáng của tài liệu HTML hoặc XML. DOM cho phép JavaScript tương tác với các phần tử trên trang web, như thêm, sửa đổi hoặc xóa các phần tử.
BOM (Browser Object Model): Là tập hợp các đối tượng dành riêng cho trình duyệt, cho phép JavaScript tương tác với cửa sổ trình duyệt và các thành phần của nó, ví dụ như điều hướng lịch sử, quản lý cookie, kích thước cửa sổ, v.v. Ban đầu BOM không có tiêu chuẩn chính thức, nhưng sau này một số đối tượng chung đã được định nghĩa trong HTML5.

2. Cách Nhúng JavaScript vào Trang Web

Để thêm mã JavaScript vào tài liệu HTML, phương pháp chính là sử dụng thẻ <script>. Thẻ này ban đầu được Netscape giới thiệu và sau đó trở thành một phần của đặc tả HTML.

2.1. Thẻ <script>

Thẻ <script> hỗ trợ một số thuộc tính quan trọng:

async: (Tùy chọn) Chỉ định rằng script nên được tải xuống ngay lập tức và thực thi song song với việc phân tích cú pháp HTML, không chặn quá trình hiển thị trang. Thuộc tính này chỉ có hiệu lực với các tệp script bên ngoài.
defer: (Tùy chọn) Chỉ định rằng script sẽ được thực thi sau khi tài liệu HTML đã được phân tích cú pháp và hiển thị hoàn chỉnh. Tương tự như async, nó cũng không chặn rendering và chỉ áp dụng cho tệp script bên ngoài.
src: (Tùy chọn) Chỉ định URL của một tệp JavaScript bên ngoài chứa mã cần thực thi.
type: (Tùy chọn) Xác định loại nội dung (MIME type) của script. Giá trị phổ biến là "text/javascript", mặc dù "application/javascript" cũng hợp lệ. Nếu giá trị là "module", script sẽ được xử lý như một mô-đun ES6, cho phép sử dụng các từ khóa import và export.
crossorigin: (Tùy chọn) Cấu hình cài đặt CORS (Cross-Origin Resource Sharing) cho yêu cầu script. Ví dụ: "anonymous" hoặc "use-credentials".
integrity: (Tùy chọn) Cho phép trình duyệt kiểm tra tính toàn vẹn của tài nguyên thông qua so sánh chữ ký mã hóa (Subresource Integrity - SRI). Nếu chữ ký không khớp, script sẽ không được thực thi, giúp ngăn chặn việc các CDN cung cấp nội dung độc hại.

Có hai cách chính để sử dụng thẻ <script>:

a. Nhúng mã JavaScript trực tiếp vào trang:

<script>
    function displayCurrentDateTime() {
        const now = new Date();
        console.log("Ngày giờ hiện tại: " + now.toLocaleString());
    }
    displayCurrentDateTime(); // Gọi hàm để hiển thị kết quả
</script>

b. Liên kết đến một tệp JavaScript bên ngoài:

<script src="scripts/main_app.js"></script>

Khi sử dụng thuộc tính src, trình duyệt sẽ tải và thực thi tệp JavaScript được chỉ định. Nếu bạn thêm mã JavaScript trực tiếp bên trong thẻ <script> khi đã có thuộc tính src, mã nội bộ đó sẽ bị bỏ qua. Tệp JavaScript bên ngoài chỉ nên chứa mã JavaScript thuần túy.

2.2. Vị trí đặt thẻ <script>

Theo truyền thống, tất cả các thẻ <script> thường được đặt trong phần <head> của tài liệu HTML:

<html>
<head>
    <title>Trang Thí Nghiệm HTML</title>
    <script src="scripts/module_one.js"></script>
    <script src="scripts/module_two.js"></script>
</head>
<body>
    <!-- Nội dung chính của trang -->
</body>
</html>

Tuy nhiên, cách đặt này có một nhược điểm lớn: trình duyệt phải tải, phân tích và thực thi tất cả mã JavaScript trước khi có thể bắt đầu hiển thị nội dung trang (rendering). Điều này có thể gây ra độ trễ đáng kể, khiến người dùng nhìn thấy một trang trắng trong thời gian dài, đặc biệt với các trang web có nhiều JavaScript.

Để cải thiện trải nghiệm người dùng, phương pháp tốt nhất hiện nay là đặt tất cả các thẻ <script> ngay trước thẻ đóng </body>:

<html>
<head>
    <title>Trang Thí Nghiệm HTML</title>
</head>
<body>
    <!-- Nội dung chính của trang -->
    <script src="scripts/module_one.js"></script>
    <script src="scripts/module_two.js"></script>
</body>
</html>

Với cách này, trình duyệt sẽ hiển thị nội dung trang trước, sau đó mới tải và thực thi JavaScript. Điều này giúp người dùng cảm thấy trang web tải nhanh hơn vì họ có thể thấy nội dung ngay lập tức.

2.3. Mã nhúng trực tiếp và Tệp bên ngoài: Khi nào sử dụng?

Mặc dù có thể nhúng mã JavaScript trực tiếp vào HTML, việc sử dụng các tệp JavaScript bên ngoài thường được xem là phương pháp tối ưu hơn. Lý do bao gồm:

Khả năng bảo trì: Việc tập trung tất cả mã JavaScript vào một hoặc nhiều tệp bên ngoài giúp dễ dàng quản lý và cập nhật hơn. Mã không bị phân tán trong nhiều tệp HTML, giúp các nhà phát triển chỉnh sửa code độc lập với cấu trúc HTML.
Hiệu suất (Caching): Trình duyệt có thể lưu trữ (cache) các tệp JavaScript bên ngoài. Điều này có nghĩa là nếu nhiều trang trong website của bạn sử dụng cùng một tệp script, tệp đó chỉ cần được tải xuống một lần duy nhất, giúp tăng tốc độ tải trang cho các lần truy cập tiếp theo.

2.4. Thẻ <noscript>

Thẻ <noscript> được thiết kế để cung cấp nội dung thay thế cho người dùng trong các trường hợp trình duyệt không hỗ trợ JavaScript hoặc JavaScript bị tắt. Mặc dù ngày nay hầu hết các trình duyệt đều hỗ trợ JavaScript, thẻ này vẫn hữu ích để đảm bảo khả năng tiếp cận và xử lý tình huống khi người dùng tắt JavaScript.

Thẻ <noscript> có thể chứa bất kỳ phần tử HTML nào có thể xuất hiện trong <body>, ngoại trừ thẻ <script>. Nội dung bên trong <noscript> sẽ được hiển thị nếu một trong hai điều kiện sau đúng:

Trình duyệt không hỗ trợ script.
Hỗ trợ script trong trình duyệt bị tắt.

Ví dụ sử dụng <noscript>:

<html>
<head>
    <title>Trang HTML Với <noscript></title>
    <script src="scripts/dynamic_content.js"></script>
</head>
<body>
    <noscript>
        <p>Để trải nghiệm đầy đủ trang web này, vui lòng bật JavaScript trong trình duyệt của bạn.</p>
    </noscript>
    <!-- Phần còn lại của nội dung trang, có thể được JavaScript thay đổi -->
</body>
</html>

Nếu JavaScript khả dụng và được bật, người dùng sẽ không bao giờ thấy nội dung bên trong thẻ <noscript>.

Thẻ: JavaScript ECMAScript DOM BOM HTML Scripting

Đăng vào ngày 17 tháng 7 lúc 08:54

Thành phố Cuồng loạn

Tổng Quan Về JavaScript và Các Phương Pháp Nhúng Script

Tổng Quan Về JavaScript và Các Phương Pháp Nhúng Script

1. JavaScript là gì?

2. Cách Nhúng JavaScript vào Trang Web

2.1. Thẻ <script>

2.2. Vị trí đặt thẻ <script>

2.3. Mã nhúng trực tiếp và Tệp bên ngoài: Khi nào sử dụng?

2.4. Thẻ <noscript>

Thẻ Phổ Biến