Bắt đầu với JavaScript
Trong hướng dẫn này, bạn sẽ học cách tạo một trang web hỗ trợ JavaScript.
Bắt đầu với JavaScript
Tại đây, bạn sẽ tìm hiểu việc thêm tính tương tác vào một trang web bằng JavaScript dễ dàng như thế nào. Tuy nhiên, trước khi bắt đầu, hãy đảm bảo rằng bạn có một số kiến thức về HTML và CSS.
Nếu bạn mới bắt đầu trong thế giới phát triển web, hãy bắt đầu học từ đây »
Chà, hãy bắt đầu với ngôn ngữ kịch bản phía máy khách phổ biến nhất.
Thêm JavaScript vào các trang web của bạn
Thông thường có ba cách để thêm JavaScript vào một trang web:
- Nhúng mã JavaScript giữa một cặp thẻ
<script>và</script>. - Tạo một tệp JavaScript bên ngoài với phần mở rộng
.jsvà sau đó tải nó trong trang thông qua thuộc tínhsrccủa thẻ<script>. - Đặt mã JavaScript trực tiếp bên trong thẻ HTML bằng cách sử dụng các thuộc tính thẻ đặc biệt như
onclick,onmouseover,onkeypress,onloadv.v.
Các phần sau đây sẽ mô tả chi tiết từng quy trình này:
Nhúng mã JavaScript
Bạn có thể nhúng mã JavaScript trực tiếp vào các trang web của mình bằng cách đặt mã đó giữa các thẻ <script>và </script>. Thẻ <script>cho trình duyệt biết rằng các câu lệnh chứa trong đó sẽ được hiểu là tập lệnh thực thi chứ không phải HTML. Đây là một ví dụ:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedding JavaScript</title>
</head>
<body>
<script>
var greet = "Hello World!";
document.write(greet); // Prints: Hello World!
</script>
</body>
</html>Mã JavaScript trong ví dụ trên sẽ chỉ in một tin nhắn văn bản trên trang web. Bạn sẽ tìm hiểu ý nghĩa của từng câu lệnh JavaScript này trong các chương sắp tới.
Lưu ý: Thuộc tính type cho thẻ <script> (nghĩa là <script type="text/javascript">) không còn cần thiết kể từ HTML5. JavaScript là ngôn ngữ kịch bản mặc định cho HTML5.
Gọi một tệp JavaScript bên ngoài
Bạn cũng có thể đặt mã JavaScript của mình vào một tệp riêng có phần mở rộng .js, sau đó gọi tệp đó trong tài liệu của bạn thông qua thuộc tính src của thẻ <script>, như sau:
<script src="js/hello.js"></script> Điều này hữu ích nếu bạn muốn có cùng một tập lệnh cho nhiều tài liệu. Nó giúp bạn không phải lặp đi lặp lại cùng một nhiệm vụ và giúp trang web của bạn dễ bảo trì hơn nhiều.
Chà, hãy tạo một tệp JavaScript có tên "hello.js" và đặt đoạn mã sau vào đó:
Ví dụ
// A function to display a message
function sayHello() {
alert("Hello World!");
}
// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;Bây giờ, bạn có thể gọi tệp JavaScript bên ngoài này trong trang web bằng cách sử dụng thẻ <script>, như sau:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Including External JavaScript File</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script src="js/hello.js"></script>
</body>
</html>Lưu ý: Thông thường, khi tệp JavaScript bên ngoài được tải xuống lần đầu tiên, tệp này sẽ được lưu trong bộ đệm của trình duyệt (giống như hình ảnh và biểu định kiểu - style), do đó, bạn sẽ không cần phải tải xuống nhiều lần từ máy chủ web tạo trang web tải nhanh hơn.
Đặt mã JavaScript nội tuyến
Bạn cũng có thể đặt mã JavaScript nội tuyến bằng cách chèn trực tiếp vào bên trong thẻ HTML bằng cách sử dụng các thuộc tính thẻ đặc biệt như onclick, onmouseover, onkeypress, onloadv.v.
Tuy nhiên, bạn nên tránh đặt một lượng lớn mã JavaScript nội tuyến vì nó làm lộn xộn HTML của bạn bằng JavaScript và khiến mã JavaScript của bạn khó bảo trì. Đây là một ví dụ:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inlining JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>Ví dụ trên sẽ hiển thị cho bạn một thông báo cảnh báo khi nhấp vào phần tử nút.
Mẹo: Bạn phải luôn tách biệt nội dung và cấu trúc của trang web (tức là HTML) khỏi phần trình bày (CSS) và hành vi (JavaScript).
Định vị Tập lệnh bên trong Tài liệu HTML
Phần tử <script> có thể được đặt trong phần <head>hoặc phần <body> của tài liệu HTML. Nhưng lý tưởng nhất là các đoạn script nên được đặt ở cuối phần nội dung, ngay trước thẻ đóng </body>, nó sẽ làm cho các trang web của bạn tải nhanh hơn, vì nó ngăn cản việc hiển thị trang ban đầu.
Mỗi thẻ <script> chặn quá trình hiển thị trang cho đến khi nó tải xuống đầy đủ và thực thi mã JavaScript, do đó, việc đặt chúng trong phần đầu (tức là phần tử<head>) của tài liệu mà không có bất kỳ lý do hợp lệ nào sẽ ảnh hưởng đáng kể đến hiệu suất trang web của bạn.
Mẹo: Bạn có thể đặt bất kỳ số lượng thành phần <script> nào trong một tài liệu. Tuy nhiên, chúng được xử lý theo thứ tự xuất hiện trong tài liệu, từ trên xuống dưới.
Sự khác biệt giữa Kịch bản phía máy khách và phía máy chủ
Các ngôn ngữ kịch bản phía máy khách như JavaScript, VBScript, v.v. được trình duyệt web diễn giải và thực thi, trong khi các ngôn ngữ kịch bản phía máy chủ như PHP, ASP, Java, Python, Ruby, v.v. chạy trên máy chủ web và đầu ra được gửi trở lại trình duyệt web ở định dạng HTML.
Kịch bản phía máy khách có nhiều ưu điểm so với cách tiếp cận kịch bản phía máy chủ truyền thống. Ví dụ: bạn có thể sử dụng JavaScript để kiểm tra xem người dùng có nhập dữ liệu không hợp lệ vào các trường biểu mẫu hay không và hiển thị thông báo về lỗi nhập tương ứng trong thời gian thực trước khi gửi biểu mẫu tới máy chủ web để xác thực dữ liệu cuối cùng và xử lý thêm nhằm ngăn chặn sử dụng băng thông mạng không cần thiết và khai thác tài nguyên hệ thống máy chủ.
Ngoài ra, phản hồi từ tập lệnh phía máy chủ chậm hơn so với tập lệnh phía máy khách, vì tập lệnh phía máy chủ được xử lý trên máy tính từ xa chứ không phải trên máy tính cục bộ của người dùng.
Bạn có thể tìm hiểu thêm về kịch bản phía máy chủ trong phần hướng dẫn PHP .