JavaScript là ngôn ngữ kịch bản được sử dụng rộng rãi để thêm chức năng động vào trang web, bên cạnh HTML và CSS. Các sự kiện, hoạt ảnh và cập nhật nội dung do người dùng kích hoạt nằm trong số một số tính năng trên trang web được cung cấp bởi JavaScript. Để sử dụng JavaScript trên trang web HTML, bạn phải sử dụng Show
Ví dụ này thêm mã JavaScript trực tiếp vào phần đánh dấu HTML Ví dụ tiếp theo chứng minh Trong ví dụ, Thuộc tính Truy cập trang HTML trong trình duyệt bằng cách nhập địa chỉ sau. Bạn cũng có thể xem kết quả bằng cách xem tệp Giống như async, sử dụng Example Web Page with JavaScript 3 yêu cầu trình duyệt tải xuống tệp JavaScript được liên kết ở chế độ nền trong khi trang tiếp tục tải. Tuy nhiên, không giống như async, Example Web Page with JavaScript 3 ngăn không cho tập lệnh đã tải được thực thi cho đến khi trang được hiển thị đầy đủ. Điều này làm cho Example Web Page with JavaScript 3 đặc biệt hữu ích khi mã JavaScript của bạn dựa trên một hoặc nhiều phần tử được hiển thị và có sẵn. Bởi vì Example Web Page with JavaScript 3 đảm bảo rằng tập lệnh chỉ chạy sau khi trang đã được tải hoàn toàn, bạn có thể yên tâm rằng tập lệnh sẽ không chạy cho đến khi tất cả các thành phần bắt buộc có trên trangTài liệu. mục lục. html1 2 3 4 5 6 7 8 9 Example Web Page with JavaScript Hướng dẫn này trình bày thông tin cơ bản mà bạn cần để bắt đầu sử dụng JavaScript trên các trang HTML của mình. Cho dù bạn định nhúng tập lệnh hay liên kết tệp JavaScript vào HTML của mình, thì hướng dẫn này cũng phác thảo các bước cần thiết để thực hiện việc đóBước tiếp theo, bạn có thể quan tâm đến việc xem một số hướng dẫn JavaScript khác của chúng tôi. Chẳng hạn, hãy xem hướng dẫn Duyệt qua mô hình đối tượng tài liệu bằng JavaScript, hướng dẫn Cách sửa đổi DOM bằng JavaScript và hướng dẫn Đối tượng JavaScript của chúng tôi 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 HTMLTải xuống Bảng cheat HTML hoàn chỉnhNế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: ________số 8_______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ố Phần 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õ về 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ạ JavaScript nên ở trên cùng hay dưới cùng?Vì trình duyệt thực thi mọi thứ một cách đồng bộ nó ảnh hưởng đến việc tải trang nếu nó được đặt ở đầu trang . Nếu nó được đặt ở cuối trang, trang sẽ tải toàn bộ đánh dấu khi trình duyệt bắt đầu tải javascript để mang lại trải nghiệm tốt hơn cho người dùng.
Đâu là vị trí chính xác để chèn JavaScript o cả phần đầu và phần nội dung đều chính xác o phần đầu o phần nội dung O không có phần nào trong số này?JavaScript trong phần thân hoặc phần đầu. Tập lệnh có thể được đặt bên trong phần thân hoặc phần đầu của trang HTML hoặc bên trong cả phần đầu và phần thân . JavaScript trong đầu. Hàm JavaScript được đặt bên trong phần đầu của trang HTML và hàm này được gọi khi nhấp vào nút. |
