Tổng Quan
JavaScript là một ngôn ngữ lập trình phía client mạnh mẽ, được sử dụng rộng rãi trong phát triển web. Trong bài viết này, chúng ta sẽ khám phá vị trị đặt JavaScript trong HTML.
Cách sử dụng <script>.
Thẻ <script> được sử dụng để chèn code JavaScript vào HTML.
Đây là ví dụ về cách sử dụng <script> để thay đổi nội dung của một phần tử trên trang web bằng JavaScript.
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>Trong ví dụ này, nội dung của phần tử có id là demo sẽ được thay đổi thành My First JavaScript bằng cách sử dụng JavaScript được đặt trong <script>.
My First JavaScriptTrước đó người ta thường sử dụng thuộc tính type với thẻ <script> như sau:
<script type="text/javascript">
// Code JavaScript ở đây
</script>Nhưng từ khi HTML5 được ra đời, không cần phải sử dụng thuộc tính type nữa. JavaScript đã trở thành ngôn ngữ mặc định cho việc lập trình trên trang web, vì vậy bạn có thể viết như sau:
<script>
// Code JavaScript ở đây
</script>Thay vì phải ghi rõ type="text/javascript", điều này giúp làm đơn giản hóa code HTML và làm cho nó thống nhất hơn. Bạn chỉ cần sử dụng type khi bạn đang sử dụng một ngôn ngữ khác ngoài JavaScript.
JavaScript trong phần <head> hoặc <body>.
Trong HTML, bạn có thể đặt bất kỳ số lượng code JavaScript nào mà bạn muốn.
Code JavaScript có thể được đặt trong phần <body> của HTML, nơi nó thường được sử dụng để thay đổi nội dung hoặc hành động của trang web khi người dùng tương tác với nó.
Bạn cũng có thể đặt code JavaScript trong phần <head> của HTML. Code ở đây thường được sử dụng để cài đặt và tải các tài nguyên trước khi trang web hiển thị.
Bạn cũng có thể đặt code JavaScript cả ở phần <head> và <body>. Việc này phụ thuộc vào mục đích cụ thể của code JavaScript và yêu cầu của trang web của bạn.
Ví dụ một hàm JavaScript được đặt trong phần <head> của trang HTML. Hàm này được gọi khi người dùng nhấp vào nút Try it:
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<div class="dotted-border">
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</div>
</body>
</html>- Một hàm JavaScript có tên là
myFunctionđược định nghĩa bên trong thẻ<script>trong phần<head>. Hàm này chứa code JavaScript để thay đổi nội dung của phần tử có id là “demo”. - Trong phần
<body>, chúng ta có một tiêu đề<h2>, một đoạn văn bản<p>với id “demo” và một nút<button>có chức năng gọi hàmmyFunctionkhi người dùng nhấp vào nó. - Khi người dùng nhấp vào nút “Try it”, hàm
myFunctionđược gọi và thay đổi nội dung của phần tử có id “demo” thành đoạn văn bản trong hàmmyFunction.
A Paragraph. -> Paragraph changed.Ví dụ một hàm JavaScript được đặt trong phần <body> của trang HTML. Hàm này được gọi khi người dùng nhấp vào nút Try it:
<html>
<body>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>- Một hàm JavaScript có tên là
myFunctionđược định nghĩa bên trong thẻ<script>trong phần<body>. Hàm này chứa JavaScript để thay đổi nội dung của phần tử có id là “demo”. - Trong phần
<body>, chúng ta có một tiêu đề<h2>, một đoạn văn bản<p>với id “demo” và một nút<button>có chức năng gọi hàmmyFunctionkhi người dùng nhấp vào nó. - Khi người dùng nhấp vào nút “Try it”, hàm
myFunctionđược gọi và thay đổi nội dung của phần tử có id “demo” thành đoạn văn bản trong hàmmyFunction.
A Paragraph. -> Paragraph changed.Như bạn có thể thấy trong trường hợp này, code JavaScript được đặt trong phần <body> và có thể thực thi sau khi trang web đã tải phần nội dung ban đầu.
Việc đặt script ở cuối phần tử <body> sẽ cải thiện tốc độ hiển thị trang web vì quá trình phiên dịch code script có thể làm chậm quá trình hiển thị.
Khi trình duyệt tải một trang web, nó thực hiện các công việc theo thứ tự từ trên xuống dưới. Khi trình duyệt gặp một đoạn code JavaScript trong phần <head> hoặc trước phần chính của trang web, nó phải dừng việc hiển thị trang web, tải và thực thi code JavaScript trước khi tiếp tục hiển thị phần còn lại của trang. Điều này có thể làm cho trang web có vẻ chậm trong quá trình tải, đặc biệt là khi có nhiều code JavaScript phức tạp.
Khi bạn đặt code JavaScript ở cuối phần tử <body>, trình duyệt sẽ tải và hiển thị nội dung trang web trước, sau đó mới thực hiện tải và thực thi code JavaScript. Điều này giúp trang web hiển thị nhanh hơn, vì người dùng sẽ thấy nội dung trang code không cần chờ đợi code JavaScript chạy xong.
Tuy nhiên, cần lưu ý rằng việc đặt code JavaScript ở cuối phần tử <body> thường phụ thuộc vào loại trang web và yêu cầu cụ thể của bạn. Trong một số trường hợp, bạn có thể cần đặt code JavaScript ở đầu trang (trong phần <head>) nếu có sự phụ thuộc vào code JavaScript cho phần nội dung trang.
Gọi JavaScript từ bên ngoài.
Các script cũng có thể được đặt trong các file được gọi từ bên ngoài:
Ví dụ file js từ bên ngoài: myScript.js
function myFunction() {
document.getElementById("demo3").innerHTML = "Paragraph changed.";
}Các script bên ngoài rất hữu ích khi cùng một đoạn code nhưng được sử dụng trong nhiều trang web khác nhau.
Các file JavaScript thường có phần mở rộng là .js.
<html>
<body>
<div class="dotted-border">
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
</div>
</body>
</html>Để sử dụng một script bên ngoài, bạn đặt tên của file script trong thuộc tính src của thẻ <script>. Bạn có thể đặt một tham chiếu tới script bên ngoài trong phần <head> hoặc <body> theo ý bạn. Script sẽ hoạt động giống như nó được đặt chính xác ở vị trí thẻ <script>.
Code JavaScript bên ngoài được thiết kế chỉ để chứa JavaScript và không chứa các thẻ <script>.
Khi bạn đặt code JavaScript trong một file bên ngoài (ví dụ: myScript.js), bạn đang tạo ra một file riêng biệt chứa code JavaScript của mình. Code JavaScript này có thể được tái sử dụng trong nhiều trang web khác nhau.
File JavaScript bên ngoài chỉ chứa code JavaScript và không chứa các thẻ <script>. Code JavaScript bên trong file này phải chỉ đơn giản là các dòng code JavaScript, ví dụ:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}Lý do là bạn đã đặt thẻ <script> để liên kết với file JavaScript này khi bạn sử dụng nó trong trang HTML của mình.
Khi bạn sử dụng thuộc tính src của thẻ <script> như sau:
<script src="myScript.js"></script>Thì trình duyệt biết rằng nó sẽ tải và thực thi file myScript.js và bạn không cần đặt thẻ <script> bên trong file myScript.js nữa.
Việc đặt JavaScript bên ngoài có một số ưu điểm như sau.
- Tách biệt giữa HTML và code: Việc đặt JavaScript trong các file riêng biệt giúp tách rời HTML và code. Điều này có ý nghĩa là bạn có thể duy trì và quản lý JavaScript một cách độc lập với HTML. Điều này trở nên quan trọng khi trang web của bạn có nhiều đoạn code JavaScript phức tạp.
- Làm cho HTML và JavaScript dễ đọc và bảo trì hơn: Khi JavaScript được đặt trong các file bên ngoài, code HTML trong trang web của bạn trở nên dễ đọc hơn và dễ bảo trì hơn. Điều này giúp bạn dễ dàng xác định nơi mà các file JavaScript được liên kết và áp dụng.
- File JavaScript được lưu trữ trong bộ nhớ cache có thể tăng tốc tải trang: Khi bạn sử dụng các file JavaScript bên ngoài và trình duyệt đã tải chúng ít nhất một lần, chúng có thể được lưu trữ trong bộ nhớ cache của trình duyệt. Điều này có nghĩa là khi người dùng truy cập các trang web khác trên cùng một trang web hoặc trang web của bạn, các file JavaScript này đã được lưu trữ trong bộ nhớ cache và có thể giúp tăng tốc quá trình tải trang.
- Thêm nhiều script vào một trang: Bạn có thể thêm nhiều file script vào một trang HTML bằng cách sử dụng nhiều thẻ
<script>khác nhau. Điều này cho phép bạn tách rời và quản lý từng phần code JavaScript trong các file riêng biệt.
Một script bên ngoài có thể được tham chiếu bằng 3 cách khác nhau.
Cách bạn tham chiếu file JavaScript bên ngoài phụ thuộc vào cách bạn tổ chức và lưu trữ file của mình trên máy chủ web và cách bạn muốn sử dụng nó trong trang web của mình.
Sử dụng URL đầy đủ (địa chỉ web đầy đủ).
Bạn có thể tham chiếu tới một file JavaScript bên ngoài bằng cách sử dụng địa chỉ web đầy đủ của nó.
Ví dụ:
<html>
<body>
<div class="dotted-border">
<p id="demo4">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click Me</button>
<script src="https://wiki.hoanghd.com/wp-content/uploads/codes/js/myScript.js"></script>
</div>
</body>
</html>Trong trường hợp này, JavaScript sẽ được tải từ địa chỉ web cụ thể đã được chỉ định.
Sử dụng đường dẫn file (file path).
Bạn cũng có thể sử dụng đường dẫn để tham chiếu tới file JavaScript bên ngoài. Điều này thường được sử dụng khi file JavaScript nằm trong cùng thư mục hoặc thư mục con của trang web của bạn.
Ví dụ:
<html>
<body>
<div class="dotted-border">
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="/js/myScript.js"></script>
</div>
</body>
</html>Trong trường hợp này, trình duyệt sẽ tìm file JavaScript trong thư mục gốc hoặc thư mục con của trang web của bạn.
Không sử dụng đường dẫn.
Nếu bạn không cung cấp đường dẫn hoặc URL cụ thể, trình duyệt sẽ tìm kiếm file JavaScript trong cùng thư mục với trang HTML hiện tại.
Ví dụ:
<html>
<body>
<div class="dotted-border">
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
</div>
</body>
</html>Trong trường hợp này, file JavaScript được tìm kiếm trong cùng thư mục với trang HTML đang sử dụng nó.
Kết Luận
JavaScript là một công cụ quan trọng trong phát triển web, cho phép bạn tạo ra các ứng dụng web động, tương tác và thời gian thực. Sử dụng JavaScript, bạn có thể thêm tính năng tương tác vào trang web của mình và cung cấp trải nghiệm người dùng tốt hơn. Hãy khám phá và sử dụng JavaScript trong các dự án web của bạn để tận dụng tối đa tiềm năng của nó.
