Javascript trong html để làm gì

• giữa tag  

Tùy thuộc vào nơi bạn thêm code JavaScript trong HTML file, cách tải có thể khác nhau. Thực tế tốt nhất là thêm nó vào trong để nó tách hẵn khỏi nội dung chính của file HTML. Nhưng đặt nó vào trong tag có thể tăng tốc độ tải, vì nội dung website sẽ được tải nhanh hơn, và chỉ khi đó JavaScript sẽ được parsed. Ví dụ, hãy xem qua file HTML sau, vốn để hiển thị thời gian hiện tại:

Như bạn thấy, code trên chưa chứa JavaScript và vì vậy nó không hiển thị thời gian thực được. Chúng ta sẽ thêm code này vào để hiển thị thời gian chính xác hơn:

var time = new Date();

console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

Chúng ta sẽ đóng code này bằng tag rồi đặt nó vào trong phần head của HTML code để mỗi khi site được tải lên, một thông báo sẽ hiện ra thời gian hiện tại cho người dùng. Đây là file HTML cuối cùng:

Nếu bạn muốn hiể thị thời gian trong body của trang, bạn sẽ cần thêm script và trong tag của trang HTML. Đây là code sau khi chèn JavaScript trong HTML:

Kết quả:

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:

Nội dung của file myscript.js là:

let d = new Date();
document.body.innerHTML = "
Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"

Ghi chú: Chúng tôi cho là file myscript.js được đặt trong cùng thư mục của file HTML.

Ví dụ JavaScript để xác thực email address

JavaScript tăng sức mạnh cho ứng dụng bằng cách xác thực trước nội dung của khách truy cập tại chính phía của họ. Một trong số những nội dung quan trọng nhất cần xác thực là địa chỉ email. Hàm JavaScript có thể giúp bạn xác thực địa chỉ email trước khi gửi nó tới server:

function validateEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var emailaddress = $("#email").val();
if (validateEmailAddress(emailaddress)) {
$("#result").text(emailaddress + " is valid :)");
$("#result").css("color", "green");
} else {
$("#result").text(emailaddress + " is not correct, please retry:(");
$("#result").css("color", "red");
}
return false;
}
$("#validate").bind("click", validate);

Để thêm function này vào form nhập liệu, bạn có thể sử dụng code sau:

Enter an email address:

Validate!

Đây là kết quả bạn có thể thấy sau khi kết hợp cả 2 thành phần vào trong file HTML:

Nếu kết quả không đúng, bạn sẽ thấy màn hình sau:

Chúc mừng! Bạn đã học cách thêm JavaScript vào HTML với một số ví dụ cơ bản.

Lời kết

Trong bài hướng dẫn này, chúng tôi đã chỉ bạn 2 cách để chèn JavaScript trong HTML code. Khi bạn đã biết cách hoạt động của chúng, việc kết hợp cả 2 ngôn ngữ lập trình này sẽ mở ra khả năng vô tận cho bạn. JavaScript có thể kết hợp với HTML để tạo ra ứng dụng web mạnh mẽ, mượt mà, tương tác tốt với người dùng và cực kỳ thân thiện. Bằng cách sử dụng xác thực từ phía khách truy cập, server sẽ được giảm tải và vì vậy tăng hiệu năng website và tốc độc website lên đáng kể.

Hải G. là chuyên gia quản lý, vận hành các dịch vụ website. Anh có nhiều năm kinh nghiệm về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu thích WordPress và đã dùng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho các bạn trẻ khởi nghiệp.