JavaScript - Đặt mã trong Tệp HTML
Xin chào các pháp sư JavaScript tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình vào thế giới kỳ diệu của việc đặt mã JavaScript. Như một người đã dạy lập trình trong nhiều năm, tôi không thể chờ đợi để chia sẻ kiến thức và kinh nghiệm của mình với các bạn. Vậy, hãy lấy键盘 (keyboards) ảo của mình và cùng nhau lặn vào!
Đặt mã JavaScript trong Tệp HTML
Trước khi chúng ta bắt đầu viết mã (casting spells), điều rất quan trọng là phải hiểu nơi chúng ta có thể đặt các lời nguyền JavaScript trong một tài liệu HTML. Đúng như một phù thủy cần biết đúng vị trí để kéo một con thỏ ra từ mũ của họ, chúng ta cần biết những vị trí hoàn hảo để đặt mã JavaScript của mình để nó có thể phát huy phép thuật một cách hiệu quả.
Có ba vị trí chính mà chúng ta có thể thêm mã JavaScript vào tệp HTML của mình:
- Trong phần
<head> - Trong phần
<body> - Trong một tệp ngoài
Hãy cùng khám phá chi tiết từng lựa chọn này, nhé?
JavaScript trong phần <head>...</head>
Đặt mã JavaScript trong phần <head> giống như chuẩn bị lời nguyền của bạn trước khi buổi biểu diễn bắt đầu. Đây là vị trí tuyệt vời cho các script cần được tải trước khi nội dung trang xuất hiện.
Dưới đây là một ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Trang Web Kỳ Diệu Của Tôi</title>
<script>
function greet() {
alert("Chào mừng bạn đến với thế giới魔法 của JavaScript!");
}
</script>
</head>
<body>
<h1>Phép Lời Nguyền JavaScript Đầu Tiên Của Tôi</h1>
<button onclick="greet()">Đọc Lời Nguyền Chào Mừng</button>
</body>
</html>Trong ví dụ này, chúng ta đã định nghĩa một hàm叫做 greet() trong phần <head>. Hàm này tạo một hộp thông báo với tin nhắn chào mừng. Sau đó, chúng ta sử dụng hàm này trong phần <body> khi một nút được nhấp.
Tại sao lại đặt nó trong <head>? Đó là để đảm bảo rằng lời nguyền (hàm) của chúng ta sẵn sàng để được đọc ngay khi trang tải. Tuy nhiên, hãy cẩn thận! Quá nhiều lời nguyền trong <head> có thể làm chậm tốc độ tải ban đầu của trang.
JavaScript trong phần <body>...</body>
Đặt mã JavaScript trong phần <body> giống như thực hiện các trick魔法 trong buổi biểu diễn. Đây là lựa chọn hoàn hảo cho các script tương tác với các phần tử HTML hoặc cần được thực thi sau khi trang đã tải.
Hãy xem một ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Trang Web Kỳ Diệu Của Tôi</title>
</head>
<body>
<h1>Phép Lời Nguyền JavaScript Thứ Hai Của Tôi</h1>
<p id="demo">Hãy xem văn bản này biến đổi!</p>
<script>
document.getElementById("demo").innerHTML = "Abracadabra! Văn bản đã thay đổi!";
</script>
</body>
</html>Trong ví dụ này, chúng ta đã đặt mã JavaScript ngay trước thẻ </body> đóng. Script này tìm một phần tử có id là "demo" và thay đổi nội dung của nó. Bằng cách đặt script ở cuối phần <body>, chúng ta đảm bảo rằng tất cả các phần tử HTML đã tải trước khi script thử manipulates chúng.
JavaScript trong phần <body> và <head>
Đôi khi, một phù thủy cần chuẩn bị một số trick trước và thực hiện một số trick trong buổi biểu diễn. Tương tự, chúng ta có thể sử dụng cả phần <head> và <body> cho mã JavaScript của mình.
Dưới đây là cách nó có thể trông như thế nào:
<!DOCTYPE html>
<html>
<head>
<title>Trang Web Kỳ Diệu Của Tôi</title>
<script>
function changeColor(newColor) {
document.body.style.backgroundColor = newColor;
}
</script>
</head>
<body>
<h1>Phép Lời Nguyền JavaScript Thứ Ba Của Tôi</h1>
<button onclick="changeColor('red')">Phép Lời Nguyền Đỏ</button>
<button onclick="changeColor('blue')">Phép Lời Nguyền Xanh</button>
<script>
document.write("<p>Văn bản này được tạo ra bởi JavaScript!</p>");
</script>
</body>
</html>Trong ví dụ này, chúng ta định nghĩa một hàm trong phần <head> để thay đổi màu nền. Sau đó, trong phần <body>, chúng ta có các nút gọi hàm này và một script khác viết trực tiếp văn bản lên trang.
JavaScript trong tệp ngoài
Bây giờ, hãy đến với phần kết thúc ấn tượng - các tệp JavaScript ngoài! Điều này giống như có một cuốn sách phép thuật mà bạn có thể sử dụng trong nhiều buổi biểu diễn. Nó giữ cho HTML của bạn sạch sẽ và mã JavaScript có thể tái sử dụng.
Đầu tiên, tạo một tệp có tên magic.js với nội dung sau:
function revealSecret() {
document.getElementById("secret").innerHTML = "Bí mật là... JavaScript rất tuyệt vời!";
}Sau đó, trong tệp HTML của bạn:
<!DOCTYPE html>
<html>
<head>
<title>Trang Web Kỳ Diệu Của Tôi</title>
<script src="magic.js"></script>
</head>
<body>
<h1>Phép Lời Nguyền JavaScript Thứ Tư Của Tôi</h1>
<p id="secret">Bí mật bị giấu kín...</p>
<button onclick="revealSecret()">Mở Bí Mật</button>
</body>
</html>Bằng cách sử dụng thuộc tính src trong thẻ <script>, chúng ta đã liên kết tệp JavaScript ngoài. Điều này cho phép chúng ta sử dụng cùng một lời nguyền (hàm) trên nhiều trang!
Lợi ích của việc sử dụng thẻ <script>
Bây giờ chúng ta đã khám phá các cách khác nhau để đặt mã JavaScript, hãy tóm tắt các lợi ích của việc sử dụng thẻ <script>:
| Lợi ích | Mô tả |
|---|---|
| Đ灵活性 | Có thể đặt trong <head> hoặc <body>
|
| Tệp Ngoài | Cho phép liên kết đến các tệp .js ngoài |
| Nhiều Script | Có thể có nhiều thẻ <script> trong một tài liệu |
| Thuộc tính | Hỗ trợ các thuộc tính hữu ích như src, async, và defer
|
| Mã In-line | Có thể chứa mã JavaScript trực tiếp |
Nhớ nhé, các phù thủy trẻ, vị trí của mã JavaScript có thể ảnh hưởng lớn đến hiệu suất và hành vi của trang web của bạn. Chọn một cách khôn ngoan, và trang web của bạn sẽ đầy ắp phép thuật mê hoặc và làm hài lòng người dùng của bạn!
Khi chúng ta kết thúc bài học kỳ diệu này, tôi hy vọng bạn đã có được một hiểu biết vững chắc về việc đặt mã JavaScript. Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy hãy tiếp tục thử nghiệm các kỹ thuật này. Trước khi bạn biết điều đó, bạn sẽ tạo ra những trải nghiệm web mê hoặc như bất kỳ buổi biểu diễn魔术 nào!
Bây giờ, hãy tiến lên và viết mã, các học trò của tôi! Thế giới phát triển web đang chờ đợi phép thuật của bạn!
Credits: Image by storyset