Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm JavaScript vào HTML. Phần đầu sẽ bao gồm phần giới thiệu ngắn về JavaScript, trong khi phần còn lại của hướng dẫn sẽ tập trung vào các cách khác nhau để thêm JavaScript vào HTML Show
Tải xuống bảng cheat HTML hoàn chỉnh  Nếu bạn muốn hiển thị nội dung tĩnh, chẳng hạn như một bộ ảnh, thì HTML có thể thực hiện công việc đó cho bạn. Tuy nhiên, các trang tĩnh đang dần trở thành quá khứ. Hầu hết nội dung ngày nay đều mang tính tương tác và bao gồm các trình chiếu, biểu mẫu và menu hào nhoáng. Chúng nâng cao trải nghiệm người dùng và thêm tính năng động cho trang web Điều này đạt được bằng các ngôn ngữ kịch bản và JavaScript là một trong những ngôn ngữ nổi tiếng nhất về vấn đề này. Nó cho phép các nhà phát triển tạo các trang web tương tác với người dùng và ngược lại. Mặc dù có nhiều ngôn ngữ khác, nhưng không có ngôn ngữ nào phổ biến như JavaScript. Để sử dụng nó với tiềm năng lớn nhất, nó được sử dụng song song với HTML
Cách thêm JavaScript vào HTMLCó hai cách để thêm JavaScript vào HTML và làm cho chúng hoạt động cùng nhau. Bây giờ chúng ta đã nói về JavaScript và đã thấy một số ưu điểm của nó, hãy xem một số cách chúng ta có thể liên kết JavaScript với HTML Cách thêm JavaScript trực tiếp vào tệp HTMLThe first way to add JavaScript to HTML is a direct one. You can do so by using the tag that should encompass all the JS code you write. JS code can be added:
Depending on where you add the code the JavaScript in your HTML file, the loading will differ. The recommended practice is to add it in the section so that it stays separated from the actual content of your HTML file. But placing it in the can improve loading speed, as the actual website content will be loaded quicker, and only then the JavaScript will be parsed. For this example, let’s take a look at the following HTML file that is supposed to show the current time:<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script>JAVASCRIPT IS USUALLY PLACED HERE</script> <title>Time right now is: </title> </head> <body> <script>JAVASCRIPT CAN ALSO GO HERE</script> </body> </html> Ngay bây giờ, đoạn mã trên không liên quan đến JavaScript và do đó không thể hiển thị thời gian thực tế. Chúng ta có thể thêm đoạn mã sau để đảm bảo nó hiển thị thời gian chính xác var time = new Date(); console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()); We will surround this code by tags and put it in the head of the HTML code to ensure that whenever the page loads, an alert is generated that shows the current time to the user. Here’s how the HTML file will look after we add the code: <!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 is: </title> <script> var time = new Date(); console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()); </script> </head> <body> </body> </html> If you want to display the time within the body of the page, you will have to include the script within the tags of the HTML page. Here’s how the code will look when you do so:<!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 is: </title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() "</h1>" </script> </body> </html> Đây là kết quả cuối cùng sẽ như thế nào. Cách thêm mã JavaScript vào một tệp riêng biệtĐôi khi, việc thêm trực tiếp JavaScript vào HTML không phải là cách tốt nhất để thực hiện. Chủ yếu là do một số tập lệnh JS cần được sử dụng trên nhiều trang, do đó, tốt nhất là giữ mã JavaScript trong các tệp riêng biệt. Đây là lý do tại sao cách dễ chấp nhận hơn để thêm JavaScript vào HTML là thông qua nhập tệp bên ngoài. Các tệp này có thể được tham chiếu từ bên trong tài liệu HTML, giống như chúng tôi tham chiếu tài liệu CSS. Một số lợi ích của việc thêm mã JS vào các tệp riêng biệt là
Chúng tôi có thể tham chiếu tệp JavaScript trong HTML như thế này <!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 myscript. tệp js sẽ là let d = new Date(); document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>" Quan trọng. Ở đây giả định rằng myscript. js nằm trong cùng thư mục với tệp HTML Ví dụ JavaScript để xác thực địa chỉ emailJavaScript cung cấp năng lượng cho ứng dụng của bạn bằng cách giúp bạn xác thực đầu vào của người dùng ở phía máy khách. Một trong những thông tin đầu vào quan trọng nhất của người dùng thường cần xác thực là địa chỉ email. Hàm JavaScript này có thể giúp bạn xác thực địa chỉ email đã nhập trước khi gửi đến máy chủ 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);Để đính kèm chức năng này vào đầu vào biểu mẫu, bạn có thể sử dụng đoạn mã sau <form> <p>Enter an email address:</p> <input id='email'> <button type='submit' id='validate'>Validate!</button> </form> <h2 id='result'></h2> Đây là kết quả mà bạn sẽ nhận được sau khi kết hợp tất cả các thành phần lại với nhau trong một tệp HTML Và nếu xác thực không chính xác, kết quả sẽ khác Xin chúc mừng. Bạn đã học cách thêm JavaScript vào HTML với một vài ví dụ cơ bản Ưu điểm của JavascriptJavaScript lần đầu tiên được gọi là LiveScript. Nhưng vì Java là chủ đề bàn tán của thị trấn (thực sự là cả thế giới), Netscape cho rằng việc đổi tên nó thành JavaScript là đúng đắn. Lần xuất hiện đầu tiên của nó bắt đầu từ năm 1995 trong Netscape 2. 0. Dưới đây là một số lợi thế tốt nhất của việc sử dụng JavaScript Tương tác máy chủ tối thiểu hóaCó một thực tế ai cũng biết là nếu muốn tối ưu hóa hiệu suất của một trang web thì cách tốt nhất là giảm giao tiếp với máy chủ. JavaScript giúp về vấn đề này bằng cách xác thực đầu vào của người dùng ở phía máy khách. Nó chỉ gửi yêu cầu đến máy chủ sau khi chạy kiểm tra xác thực ban đầu. Do đó, việc sử dụng tài nguyên và lượng yêu cầu đến máy chủ giảm đáng kể Giao diện phong phú hơn, thân thiện với người dùngBằng cách sử dụng JavaScript, bạn có thể tạo các giao diện tương tác phía máy khách. Ví dụ: thêm thanh trượt, trình chiếu, hiệu ứng cuộn chuột, tính năng kéo và thả, v.v. Phản hồi ngay lập tức cho người dùngBằng cách sử dụng JavaScript, bạn có thể đảm bảo rằng người dùng nhận được phản hồi ngay lập tức. Ví dụ: hãy tưởng tượng một người dùng đã điền vào một biểu mẫu và để trống một trường. Nếu không có xác thực JavaScript, họ sẽ phải đợi trang tải lại chỉ để nhận ra rằng họ đã để lại một trường trống. Tuy nhiên, với JavaScript, chúng sẽ được cảnh báo ngay lập tức Gỡ lỗi dễ dàngJavaScript là một ngôn ngữ được giải thích, có nghĩa là mã viết được giải mã từng dòng. Trong trường hợp có bất kỳ lỗi nào xuất hiện, bạn sẽ nhận được số dòng chính xác nơi xảy ra sự cố Sự kết luậnTrong bài viết này, chúng ta đã nói về hai cách khác nhau để thêm JavaScript vào mã HTML và khi bạn đã hiểu rõ mọi thứ, khả năng làm những điều tuyệt vời bằng cách sử dụng hai ngôn ngữ lập trình là vô tận. JavaScript có thể được sử dụng kết hợp với HTML để hỗ trợ các ứng dụng web hiện đại trực quan, tương tác và thân thiện với người dùng. Bằng cách sử dụng xác thực phía máy khách đơn giản, nó làm giảm lưu lượng máy chủ và cải thiện hiệu quả tổng thể của trang web Tác giả Domantas G Domantas dẫn dắt các nhóm nội dung và SEO về phía trước với những ý tưởng mới và phương pháp tiếp cận vượt trội. Được trang bị kiến thức sâu rộng về SEO và tiếp thị, anh đặt mục tiêu quảng bá Hostinger đến mọi nơi trên thế giới. Trong thời gian rảnh rỗi, Domantas thích trau dồi kỹ năng phát triển web của mình và đi du lịch đến những nơi xa lạ Làm cách nào chúng ta có thể chèn JavaScript vào HTML?HTML có JavaScript không?Thẻ HTML . Phần tử
Cách gọi JavaScript từ HTML?Để đưa tệp JavaScript của chúng ta vào tài liệu HTML, chúng ta phải sử dụng thẻ script js"> và trong thuộc tính "src", chúng tôi phải cung cấp đường dẫn đến tệp JavaScript nơi tệp được lưu trữ.
JavaScript hoạt động như thế nào với HTML?javascript được nhúng vào html bằng các thẻ script. nếu bạn mở tệp javascript thô, trình duyệt sẽ không thực thi nó, nó sẽ chỉ hiển thị mã. . HTML cung cấp cấu trúc và ngữ nghĩa như XML, CSS cung cấp cách trình bày, màu sắc, phông chữ, v.v. |
