Trong bài hướng dẫn này, chúng tôi sẽ chỉ bạn cách thêm JavaScript trong HTML. Ban đầu chúng tôi sẽ giới thiệu về JavaScript, tiếp theo sẽ tập trung hướng dẫn làm thế nào thêm JavaScript vào HTML.
Nếu bạn muốn hiển thị nội dụng tĩnh, ví dụ như một bộ hình chụp, HTML làm được. Tuy nhiện, các trang tĩnh như vậy thường chậm, trong khi các trang bây giờ thì nhanh và có tính tương tác với người dùng, thậm chí là có slideshow, form và menu. Chúng tăng trải nghiệm cho người dùng và tăng tính linh hoạt của website. Việc này khả thi là nhờ ngôn ngữ scripting và JavaScript. Chúng giúp website tương tác với người dùng và ngược lại. Kể cả khi có nhiều ngôn ngữ khác hiện nay, không có ngôn ngữ nào phổ biến như là JavaScript. Để tận dụng toàn bộ ưu thế của nó, nó được dùng song với HTML.
Ưu điểm của JavaScript
JavaScript ban đầu được gọi là LiveScript. Nhưng vì tên Java đang rất phổ biến trên thế giới, Netscape đặt lại tên nó thành JavaScript. Lần đầu tiên xuất hiện vào năm 1995 trong Netscape 2.0. Đây là một vài trong số những ưu điểm nổi bật của JavaScript:
Tối giản tương tác với server
Thông thường trên thực tế nếu bạn muốn tối ưu hiệu năng của website, cách tốt nhất là giảm tương tác với server. JavaScript có thể xử lý vấn đề này bằng cách xác thực dữ liệu nhập vào của người dùng tại chính phía người dùng. Nó chỉ gửi yêu cầu tới server sau khi chạy kiểm tra xác thực trước. Kết quả là, tài nguyên sử dụng cho số lượng request sẽ được giảm đáng kể.
Giao diện người dùng thân thiện hơn, nhiều tính năng hơn.
Bằng cách sử dụng JavaScript, bạn có thể tạo giao diện có tính tương tác với người xem. Ví dụ như thêm slider, slideshow, hiệu ứng cuộn trang khi di chuột tới, tính năng kéo thả và hơn thế nữa.
Phản hồi ngay lập tức cho khách truy cập
Bằng cách sử dụng JavaScript, bạn có thể chắc rằng người dùng sẽ nhận phản hồi ngay lập tức. Ví dụ, hãy thử tưởng tượng khi người dùng điền thông tin và vô tình chừa trống thông tin cần điền. Nếu không có xác thực với JavaScript, họ sẽ phải chờ trang tải lại hoặc giao tiếp với máy chủ rồi tải lại, người dùng mới nhận ra họ điền thiếu. Với JavaScript (add JavaScript to HTML), người dùng sẽ được thông báo ngay lập tức.
Dễ debug
JavaScript là một ngôn ngữ được biên dịch, có nghĩa là code có thể decipher từng dòng. Trong trường hợp có bất kỳ lỗi nào hiện lên, bạn có thể thấy chính xác dòng nào gây lỗi.
Chèn JavaScript trong HTML bằng một file độc lập
Đôi khi việc thêm JavaScript vào HTML một cách trực tiếp không phải là cách hay nhất.Vì có thể có trường một một vài JS scripts cần được dùng ở nhiều trang khác nhau. Vậy cách tốt nhất là tạo một file JavaScript riêng biệt để có thể thêm JavaScript vào HTML thông qua file đó. Những files này được gọi trong HTML documents giống với cách gọi CSS documents. Lợi ích khác của thêm JS code vào file độc lập là:
- Khi HTML code và JavaScript code bị tách riêng ra, mục đích chính là tái sử dụng lại code
- Việc đọc code sẽ dễ dàng hơn, vì vậy bảo trì cũng đơn giản hơn
- Files Cached JavaScript sẽ tăng tốc website bằng cách giảm thiểu thời gian trang phải tải.
Chúng tôi có một file JavaScript trong HTML như sau:
<!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Time right now:</title> </head> <body> </body> <script src=”js/myscript.js”></script> </html>
Nội dung của file myscript.js là:
let d = new Date(); document.body.innerHTML = “<h1>Time right now is: ” + d.getHours() + “:” + d.getMinutes() + “:” + d.getSeconds()</h1>”