Cách chạy JavaScript trong trình duyệt
JavaScript là một ngôn ngữ lập trình chạy trên trình duyệt giúp tạo ra các hiệu ứng và tương tác trên website. Trong bài này, chúng ta sẽ tìm hiểu ba cách chính để chạy JavaScript trong trình duyệt:
- Viết trực tiếp JavaScript trong file HTML
- Chạy JavaScript từ file
.jsbên ngoài - Sử dụng Developer Console để chạy và kiểm tra mã JavaScript
Cách chạy JavaScript trong trình duyệt
1. Viết JavaScript trực tiếp trong file HTML
JavaScript có thể được viết trực tiếp trong file HTML bằng cách sử dụng thẻ <script>. Đây là cách đơn giản nhất để chạy JavaScript.
Ví dụ 1: Viết JavaScript trong thẻ <script>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chạy JavaScript trong HTML</title>
</head>
<body>
<h1>Chào mừng bạn đến với JavaScript</h1>
<script>
alert("Xin chào! Đây là JavaScript chạy trong HTML.");
console.log("Dòng này sẽ hiển thị trên Console.");
</script>
</body>
</html>
Giải thích
- Khi tải trang, trình duyệt sẽ chạy đoạn mã JavaScript trong thẻ
<script>. -
alert()sẽ hiển thị hộp thoại thông báo. -
console.log()in thông tin ra Console để kiểm tra.
Nhược điểm:
- Nếu JavaScript quá dài, trang HTML sẽ khó bảo trì.
- Khi cần dùng chung JavaScript cho nhiều trang, cách này không tối ưu.
2. Chạy JavaScript từ file .js bên ngoài
Để giúp mã nguồn gọn gàng và có thể tái sử dụng, chúng ta có thể lưu JavaScript vào một file .js riêng biệt và nhúng vào HTML.
Ví dụ 2: Tạo file script.js và nhúng vào HTML
Tạo file script.js
console.log("JavaScript từ file script.js!");
document.write("<h2>JavaScript đang hoạt động từ file bên ngoài!</h2>");
Nhúng file script.js vào HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nhúng JavaScript từ File</title>
<script src="script.js"></script>
</head>
<body>
<h1>Chạy JavaScript từ file ngoài</h1>
</body>
</html>
Giải thích
- Thẻ
<script src="script.js"></script>giúp tải JavaScript từ file bên ngoài vào HTML. -
Ưu điểm:
- Mã nguồn gọn gàng hơn, dễ quản lý.
- Có thể sử dụng cùng một file
.jscho nhiều trang web. - Giúp tăng tốc độ tải trang vì JavaScript có thể được lưu trữ trong bộ nhớ cache trình duyệt.
Lưu ý quan trọng:
- Để đảm bảo JavaScript chạy đúng sau khi HTML tải xong, có thể đặt thẻ
<script>ở cuối<body>hoặc sử dụngdefer.
<script src="script.js" defer></script>
3. Chạy JavaScript bằng Developer Console
Developer Console là công cụ giúp lập trình viên kiểm tra và thử nghiệm JavaScript trực tiếp mà không cần chỉnh sửa file HTML.
Mở Developer Console
-
Google Chrome: Nhấn
F12hoặcCtrl + Shift + I, chọn tab Console. -
Firefox: Nhấn
F12, vào tab Console. -
Edge: Nhấn
F12và chọn Console.
Chạy JavaScript trên Console
Nhập trực tiếp JavaScript vào Console và nhấn Enter.
Ví dụ 3: Thử nghiệm JavaScript trên Console
console.log("Xin chào từ Console!");
alert("Hộp thoại này được gọi từ Console!");
document.body.style.backgroundColor = "lightblue";
Giải thích
-
console.log("Xin chào từ Console!")in thông báo vào Console. -
alert("Hộp thoại này được gọi từ Console!")hiển thị hộp thoại cảnh báo. -
document.body.style.backgroundColor = "lightblue"thay đổi màu nền trang web.
Ứng dụng của Console:
- Kiểm tra mã JavaScript nhanh chóng.
- Debug lỗi trong quá trình lập trình.
- Chỉnh sửa giao diện trang web tạm thời.
Kết luận
- Chúng ta có 3 cách chính để chạy JavaScript trong trình duyệt:
- Viết trực tiếp trong thẻ
<script>của HTML. - Nhúng JavaScript từ file
.jsbên ngoài để dễ quản lý. - Chạy JavaScript trực tiếp trên Developer Console để thử nghiệm và debug.
- Viết trực tiếp trong thẻ
- Trong các bài học tiếp theo, chúng ta sẽ tìm hiểu cách sử dụng biến, kiểu dữ liệu và các thao tác cơ bản với JavaScript.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com