Có bao nhiêu tập lệnh có thể được nhúng trong tài liệu html5?

Trong bài viết này, bạn sẽ tìm hiểu về cách chèn mã JavaScript vào tài liệu HTML, những cách có thể thực hiện, sự khác biệt giữa những cách này và hơn thế nữa

điều kiện tiên quyết

Bạn nên có chút quen thuộc với HTML/CSS. Bạn không cần kinh nghiệm lập trình trước

The Tag

Trong HTML, mã JavaScript được chèn vào giữa các thẻ

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2 và

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

3

 // Here goes your JS code

Bạn có thể đặt bất kỳ số lượng tập lệnh nào trong tài liệu HTML. Các tập lệnh có thể được đặt trong phần

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

4 hoặc trong phần

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

5 của trang HTML hoặc trong cả hai

Có một sự khác biệt?

Tôi rất vui vì bạn đã hỏi vì có sự khác biệt và điều đó khá quan trọng

Cách tốt nhất là đặt thẻ JavaScript

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2 ngay trước thẻ đóng

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

7 thay vì trong phần

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

5 trong HTML của bạn

Lý do cho điều này là HTML tải từ trên xuống dưới. Đầu tải trước, sau đó đến cơ thể và sau đó là mọi thứ bên trong cơ thể. Nếu chúng tôi đặt JavaScript của mình trong phần đầu, toàn bộ JavaScript sẽ tải trước khi tải bất kỳ HTML nào, điều này có thể gây ra một số vấn đề

1. Nếu mã JavaScript của bạn có mã thay đổi HTML ngay khi mã JavaScript tải, thì thực tế sẽ không có bất kỳ phần tử HTML nào sẵn có để mã đó tác động, vì vậy có vẻ như mã JavaScript không hoạt động và bạn
2. Nếu bạn có nhiều JavaScript, rõ ràng nó có thể làm chậm quá trình tải trang của bạn vì nó tải tất cả JavaScript trước khi tải bất kỳ HTML nào

Khi bạn đặt JavaScript ở dưới cùng của nội dung HTML, nó sẽ cho HTML thời gian tải trước bất kỳ tải JavaScript nào, điều này có thể ngăn ngừa lỗi và tăng tốc thời gian phản hồi của trang web

Hãy hiểu thêm bằng một ví dụ [và đừng lo lắng về cú pháp tôi đang sử dụng, bạn chỉ cần hiểu chúng tôi đang cố gắng làm gì]

JavaScript trong đầu

Trong đoạn mã trên, tôi đã cố gắng thay đổi màu của đoạn văn thành màu xanh lá cây bằng cách viết JavaScript của mình trong thẻ

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

5. Kết quả cho điều đó là

Vì vậy, mã không ảnh hưởng đến màu sắc của đoạn văn, bởi vì như chúng tôi đã đề cập trước đó, tập lệnh được tải trước chính đoạn văn đó, vì vậy tại thời điểm cụ thể đó, không có đoạn văn nào mà chúng tôi có thể thay đổi màu sắc

Bây giờ chúng ta hãy thử theo cách khác, ở dưới cùng của cơ thể

JavaScript trong cơ thể

Và chắc chắn, chúng ta có được thứ mình muốn, vì bây giờ mã JS đã biết đoạn

Một điều nữa. Mặc dù cách tốt nhất là đưa JavaScript của bạn vào cuối

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

4 HTML của bạn, nhưng việc đặt JavaScript của bạn vào

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

5 HTML của bạn không LUÔN gây ra lỗi

JavaScript bên ngoài

JavaScript cũng có thể được sử dụng trong các tệp bên ngoài. Các tệp JavaScript có phần mở rộng tệp ‘. js'. Để sử dụng tập lệnh bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính src của thẻ tập lệnh

|

Ưu điểm của JavaScript bên ngoài

Đặt mã JavaScript vào tệp js bên ngoài có một số lợi thế so với tập lệnh nội tuyến

• Việc tách mã HTML và JavaScript sẽ giúp quản lý cơ sở mã dễ dàng hơn
• Các nhà thiết kế có thể làm việc song song với các lập trình viên mà không bị xung đột mã
• Hoạt động tốt với các hệ thống kiểm soát phiên bản mã nguồn hiện đại như GIT. Điều đó có nghĩa là mỗi tệp này sẽ duy trì một lịch sử và nó có thể được kiểm tra, kiểm tra bởi nhiều lập trình viên
• Mã cũng như HTML có thể đọc được dễ dàng
• Các tệp JavaScript bên ngoài được trình duyệt lưu vào bộ đệm và có thể tăng tốc thời gian tải trang
• Nhiều gói JavaScript phổ biến có sẵn dưới dạng được lưu trữ trên mạng phân phối nội dung [cdn] và bạn có thể chỉ cần trỏ tới chúng bằng cách sử dụng URL trong src, do đó tránh sao chép tệp js vào thư mục cục bộ

Điều đáng nói là có một số ưu điểm khác, nhưng vì bài viết này dành cho các nhà phát triển không chuyên sâu nên tôi đã chọn không nói về nó

không đồng bộ và trì hoãn

Có nhiều cách để bạn tải JavaScript bên ngoài của mình mà không phải lo lắng về nơi bạn nên đưa nó vào. Hình ảnh này giải thích cách hai thuộc tính này hoạt động và sự khác biệt là gì

Đó là nó cho ngày hôm nay mọi người. Tôi hy vọng bạn thích điều này và tôi hy vọng nó đã giúp bạn hiểu chủ đề này. Cảm ơn bạn đã đọc nó, hẹn gặp lại bạn sớm để biết thêm nội dung. 😄

Thẻ tập lệnh HTML

The HTML script tag is used to embed data or executable client side scripting language in an HTML page. Mostly, JavaScript or JavaScript based API code inside a

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

2 tag.

Sau đây là một ví dụ về trang HTML có chứa mã JavaScript trong thẻ

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2

Example: JavaScript in a Tag

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

Thử nó

Trong ví dụ trên, thẻ

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

2 chứa mã JavaScript

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

5 hiển thị hộp thông báo

HTML v4 yêu cầu thuộc tính

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

6 để xác định ngôn ngữ của mã tập lệnh được nhúng trong thẻ tập lệnh. Điều này được chỉ định là loại MIME e. g. 'văn bản/javascript', 'văn bản/ecmascript', 'văn bản/vbscript', v.v.

Trang HTML v5 không yêu cầu thuộc tính

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

6 vì ngôn ngữ script mặc định là 'text/javascript' trong thẻ

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2

Một trang HTML có thể chứa nhiều thẻ

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2 trong thẻ

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

1 hoặc thẻ

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

2. Trình duyệt thực thi tất cả các thẻ script, bắt đầu từ thẻ script đầu tiên ngay từ đầu

Tập lệnh không có thuộc tính

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

3,

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

4 hoặc

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

5, cũng như tập lệnh nội tuyến, được tìm nạp và thực thi ngay lập tức, trước khi trình duyệt tiếp tục phân tích cú pháp trang. Hãy xem xét trang sau với nhiều thẻ script

Example: Multiple Tags

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

Thử nó

Ở trên, thẻ

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2 đầu tiên chứa

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

7 sẽ được thực thi trước, sau đó là

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

8 sẽ được thực thi và sau đó là

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

9 sẽ được thực thi

Trình duyệt tải tất cả các tập lệnh có trong thẻ

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

1 trước khi tải và hiển thị các phần tử thẻ

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

2. Vì vậy, hãy luôn bao gồm các tệp/mã JavaScript trong

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

1 sẽ được sử dụng khi hiển thị giao diện người dùng. Tất cả các tập lệnh khác phải được đặt trước thẻ

|

53 kết thúc. Bằng cách này, bạn có thể tăng tốc độ tải trang

Tham khảo tệp Script bên ngoài

Thẻ

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2 cũng có thể được sử dụng để đưa tệp script bên ngoài vào trang web HTML bằng cách sử dụng thuộc tính

|

55

If you don't want to write inline JavaScript code in the

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

2 tag, then you can also write JavaScript code in a separate file with

|

57 extension and include it in a web page using tag and reference the file via src attribute.

Example: JavaScript in a Tag

|

5

Ở trên,

|

58 trỏ đến tệp JavaScript bên ngoài bằng cách sử dụng thuộc tính

|

59 trong đó giá trị của thuộc tính

|

55 là đường dẫn hoặc url mà tệp cần được tải trong trình duyệt từ đó. Lưu ý rằng bạn có thể tải các tệp từ miền của mình cũng như các miền khác

Thuộc tính toàn cầu

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

2 có thể chứa các thuộc tính toàn cục sau

AttributeUsageasync

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

22 thực thi tập lệnh không đồng bộ cùng với phần còn lại của trang. crossorign

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

23 cho phép ghi nhật ký lỗi cho các trang web sử dụng miền riêng cho phương tiện tĩnh. Giá trị

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

24 không gửi thông tin đăng nhập, trong khi đó,

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

25 gửi thông tin đăng nhập. defer

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

26 thực thi tập lệnh sau khi tài liệu được phân tích cú pháp và trước khi kích hoạt sự kiện DOMContentLoaded. src______327 chỉ định URI/đường dẫn của tệp tập lệnh bên ngoài;type

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

28 chỉ định loại tập lệnh chứa e. g. văn bản\javascript, văn bản\html, văn bản\thuần túy, ứng dụng\json, ứng dụng\pdf, v.v. chính sách liên kết giới thiệu

DOCTYPE html>


    
        alert['Executing JavaScript 1']
    


     JavaScript Tutorials
  
    
        alert['Executing JavaScript 2']
    
    
    This page contains multiple script tags.
    
    
        alert['Executing JavaScript 3']
    

29 chỉ định thông tin liên kết giới thiệu nào sẽ gửi khi tìm nạp tập lệnh. Các giá trị có thể là không giới thiệu, không giới thiệu khi hạ cấp, nguồn gốc, cùng nguồn gốc, nguồn gốc nghiêm ngặt, v.v. tính toàn vẹn

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

20 chỉ định rằng tác nhân người dùng có thể sử dụng để xác minh rằng tài nguyên được tìm nạp đã được phân phối mà không bị thao tác ngoài ý muốn. nomodule

DOCTYPE html>




     JavaScript Tutorials
  
    
        //write JavaScript code here..
        alert['Hello, how are you?']
    

21 chỉ định rằng tập lệnh không được thực thi trong các trình duyệt hỗ trợ mô-đun ES2015

Bạn có thể có 2 tập lệnh trong HTML không?

Có bao nhiêu khối mã JavaScript có thể được nhúng trong một tài liệu HTML?

Thẻ html5 nào được sử dụng để bao gồm tập lệnh?

JavaScript được nhúng trong HTML như thế nào?