Gọi hàm javascript trong html là một trong những keyword được search nhiều nhất trên Google về chủ đề gọi hàm javascript trong html. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Hướng dẫn gọi hàm javascript trong html mới nhất 2020.
Hướng dẫn gọi hàm javascript trong html mới nhất 2020
Trong bài hướng dẫn này, chúng tôi sẽ chỉ bạn phương pháp thêm JavaScript trong HTML. Ban đầu chúng tôi sẽ mô tả về JavaScript, kế tiếp sẽ tập hợp chỉ dẫn làm sao để thêm JavaScript vào HTML.
Nếu bạn mong muốn hiển thị nội dụng tĩnh, gợi ý như một bộ hình chụp, HTML làm được. Tuy nhiện, các trang tĩnh giống như vậy thường chậm, trong khi các trang cho đến nay thì mau và có tính tương tác với người dùng, thậm chí là có slideshow, form và thực đơn. Chúng gia tăng trải nghiệm cho người dùng và gia tăng tính linh động của web. Việc này phù hợp là nhờ ngôn ngữ scripting và JavaScript. Chúng giúp web tương tác với người dùng và trái lại. Kể cả khi có nhiều ngôn ngữ khác hiện tại, không có ngôn ngữ nào đa dạng như là JavaScript. Để tận dụng all ư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 vừa mới 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 thế 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ăng cao hiệu năng của website, cách tốt nhất là giảm tương tác với server. JavaScript đủ nội lực giải quyết vấn đề này bằng phương pháp 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ỉ send 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 gần gũi hơn, nhiều tính năng hơn.
Bằng hướng dẫn dùng JavaScript, bạn đủ nội lực 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, chức năng dẫn thả và hơn thế nữa.
góp ý ngay lập tức cho khách truy cập
Bằng cách sử dụng JavaScript, bạn đủ sức chắc rằng người dùng sẽ nhận phản hồi ngay lập tức. gợi ý, hãy thử tưởng tượng khi user đ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 đăng lại hoặc giao tiếp với máy chủ rồi đăng 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 đủ sức decipher từng thể loại. Trong trường hợp có bất kỳ lỗi nào hiện lên, bạn đủ sức thấy chuẩn xác định dạng nào gây lỗi.
Chèn JavaScript trong HTML
Sau khi đã biết ưu điểm JavaScript, chúng tôi sẽ mô tả đến bạn 2 cách để thêm JavaScript trong HTML và khiến chúng hoạt động chung với nhau.
Thêm JavaScript và HTML trực tiếp
hướng dẫn trước hết để thêm JavaScript trong HTML là cách thêm trực tiếp. Bạn đủ nội lực làm vậy bằng mẹo sử dụng tag để đặt chung tất cả mã JS bạn viết. JS code có thể được thêm vào:
- giữa tag <head>
- <body>
Tùy thuộc vào ngành bạn thêm code JavaScript trong HTML file, hướng dẫn tải có thể không giống nhau. thực tiễn 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 đủ nội lực gia tăng tốc độ đăng, vì nội dung website sẽ được đăng mau hơn, và chỉ khi đó JavaScript sẽ được parsed. gợi ý, hãy xem qua file HTML sau, vốn để hiển thị thời gian hiện tại:
<!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>
như bạn thấy, code trên chưa chứa JavaScript và do đó nó k 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 chuẩn 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 đăng 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:
<!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>
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:
<!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>
Chèn JavaScript trong HTML bằng một file độc lập
thỉnh thoảng việc thêm JavaScript vào HTML một mẹo trực tiếp không phải là phương pháp hay nhất.Vì có thể có trường một một vài JS scripts cần được sử dụng ở nhiều trang không giống nhau. Vậy hướng dẫn 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 hướng dẫn gọi CSS documents. quyền lợi 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 dùng lại code
- Việc đọc code sẽ dễ dàng hơn, cho nên bảo trì cũng đơn giản hơn
- Files Cached JavaScript sẽ gia tăng tốc web bằng hướng dẫn bớt đi thời gian trang phải tải.
Chúng tôi có một file JavaScript trong HTML giống 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>
content 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>"
Ghi chú: Chúng tôi cho là file myscript.js được đặt trong cùng thư mục của file HTML.
gợi ý JavaScript để xác thực email address
JavaScript tăng sức mạnh cho áp dụng bằng cách xác thực trước content 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 đủ nội lực giúp bạn xác thực địa chỉ email trước khi send 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ể dùng code 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ả bạn đủ nội lực thấy sau khi phối hợp cả 2 nguyên nhân vào trong file HTML:
Nếu kết quả k đúng, bạn sẽ thấy màn ảnh sau:
Chúc mừng! Bạn đã học cách thêm JavaScript vào HTML với một số gợi ý cơ bản.
Lời kết
Trong bài tut này, chúng tôi vừa mới chỉ bạn 2 phương pháp để chèn JavaScript trong HTML code. Khi bạn đã biết mẹo 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 đủ nội lực phối hợp với HTML để xây dựng vận dụng website mạnh mẽ, mượt mà, tương tác tốt với user và cực kỳ thân thiện. Bằng hướng dẫn dùng xác thực từ phía khách truy cập, server sẽ được giảm tải và do đó tăng hiệu năng website và tốc độc website lên đáng kể.
nguồn: www.hostinger.vn
