Cách thêm JavaScript trong HTML

Sau khi đã biết ưu điểm JavaScript, chúng tôi sẽ trình làng đến bạn 2 cách để thêm JavaScript trong HTML và khiến chúng hoạt động giải trí chung với nhau .

Thêm JavaScript và HTML trực tiếp

Cách đầu tiên để thêm JavaScript trong HTML là cách thêm trực tiếp. Bạn có thể làm vậy bằng cách 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  

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:

1. html

3. “ en-US ”>

7. “ UTF-8 ”>

9. “ viewport ”content =“ width = device-width, initial-scale = 1 ”>

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

1. var time = newDate();
3. 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:

1. html

3. “ en-US ”>

7. “ UTF-8 ”>

9. “ viewport ”content =“ width = device-width, initial-scale = 1 ”>

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:

1. html

2. “ en-US ”>

4. “ UTF-8 ”>

5. “ viewport ”content =“ width = device-width, initial-scale = 1 ”>

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ì hoàn toàn 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 không liên quan gì đến nhau để hoàn toàn có thể thêm JavaScript vào HTML trải 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à :QUẢNG CÁO TỰ ĐỘNGQUẢNG CÁO TỰ ĐỘNG

• 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 :

1. html

2. “ en-US ”>

4. “ UTF-8 ”>

5. “ viewport ”content =“ width = device-width, initial-scale = 1 ”>

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

1. let d = newDate();
2. 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.

JavaScript tăng sức mạnh cho ứng dụng bằng cách xác nhận trước nội dung của khách truy vấn 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 nhận là địa chỉ email. Hàm JavaScript hoàn toàn có thể giúp bạn xác thực địa chỉ email trước khi gửi nó tới server :

1. functionvalidateEmailAddress(email) {
2. var re = / ^(([^ < >()[\]\ \., ; : \ s @ \ ”]+(\ .[^ < >()[\]\ \., ; : \ s @ \ ”]+)*)|(\ ”. + \ ”))@(

   (

   Xem thêm: Abstract class và Interface trong Java

   \[[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,}))USD / ;

3. return re .test(email);
4. }
5. functionvalidate() {
6. USD(“ # result ”).text(“ ”);
7. var emailaddress = $(“ # email ”).val();
8. if (validateEmailAddress(emailaddress)) {
9. USD(“ # result ”).text(emailaddress +” is valid 🙂 ”);
10. USD(“ # result ”).css(“ color ”,“ green ”);
11. }else{
12. USD(“ # result ”).text(emailaddress +” is not correct, please retry : ( “);
13. USD(“ # result ”).css(“ color ”,“ red ”);
14. }
15. return false ;
16. }
17. USD(“ # validate ”).bind(“ click ”, validate);

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

2. Enter an email address :

3. ‘ email ‘>

4. ‘ submit ‘id =‘ validate ‘> Validate !

‘ result ‘>

Đây là tác dụng bạn hoàn toàn có thể thấy sau khi phối hợp cả 2 thành phần vào trong file HTML :

Nếu tác dụng không đúng, bạn sẽ thấy màn hình hiển thị sau :

Chúc mừng ! Bạn đã học cách thêm JavaScript vào HTML với 1 số ít ví dụ cơ bản .
QUẢNG CÁO TỰ ĐỘNG