Bắt đầu với JavaScript
Tại đây, bạn sẽ học cách dễ dàng thêm tương tác vào một trang web bằng JavaScript. 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 làm việ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 »
Vâng, 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 tệp JavaScript bên ngoài với phần mở rộng .js và sau đó tải tệp đó trong trang thông qua thuộc tính src củ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, onload, v.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 nó 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 được hiểu là tập lệnh thực thi chứ không phải HTML. Đây là một 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 mỗi câu lệnh JavaScript này trong các chương sắp tới.
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 biệt có phần mở rộng .js, rồi 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 tập lệnh giống nhau có sẵn 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 tác vụ và giúp trang web của bạn dễ bảo trì hơn nhiều.
Vâng, hãy tạo một tệp JavaScript có tên "hello.js" và đặt mã sau vào đó:
// 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 một trang web bằng thẻ <script>, như sau:
<!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>
Đặt nội tuyến mã JavaScript
Bạn cũng có thể đặt nội dòng mã JavaScript bằng cách chèn 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, onload, v.v.
Tuy nhiên, bạn nên tránh đặt một lượng lớn mã JavaScript nội dòng vì nó làm lộn xộn HTML của bạn với JavaScript và làm cho mã JavaScript của bạn khó duy trì. Đây là một 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>
Đị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 <body> của tài liệu HTML. Nhưng lý tưởng nhất, tập lệnh 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, vì vậy 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.
Sự khác biệt giữa Client-side và Server-side
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 thông dịch 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.
Tập lệnh phía máy khách có nhiều lợi thế 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 đã nhập dữ liệu không hợp lệ vào các trường biểu mẫu hay chưa và hiển thị thông báo cho các lỗi nhập tương ứng trong thời gian thực trước khi gửi biểu mẫu đến 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ì các 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ề tập lệnh phía máy chủ trong phần hướng dẫn PHP.
No comments:
Post a Comment