Vị trí chính xác để chèn thẻ javascript là gì?

Trong trình duyệt, JavaScript có thể được sử dụng để làm nhiều việc, nhưng thông thường nhiệm vụ chính của JavaScript là tạo nội dung tương tác hay nói cách khác là xây dựng động DOM. Xem xét điều đó, vị trí nào trong tệp HTML phù hợp nhất cho thẻ script?

Có một sự linh hoạt được đưa ra để bao gồm mã JavaScript ở bất cứ đâu trong tài liệu HTML. Có thể nhúng mã Javascript vào

  1. Tiêu đề của trang ở giữa các thẻ 'head'
  2. Nội dung của trang ở giữa các thẻ 'body'
  3. Trong một tập tin bên ngoài với. tiện ích mở rộng js

Đặt Javascript giữa các thẻ 'đầu'

Mọi thứ trong phần đầu html phải được hoàn thành trước khi phần thân được tải, do đó, nói chung là một ý tưởng tồi khi đưa javascript vào đó. Nếu bạn cần một cái gì đó trong khi nội dung đang tải hoặc muốn giải quyết một số ajax, thì bạn nên đặt nó vào đầu

Đặt Javascript giữa các thẻ 'body'

JavaScript programs can be inserted inside the html body with the help of the < script > < /script > tag.

JavaScript từ Tệp tập lệnh bên ngoài

JavaScript code can either be embedded in your HTML files (above examples) or placed in an external script file with a .js extension. An external JavaScript file must be saved by .js extension . It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage. When you place your JavaScript in an external file, put the name of the script file (.js) in the source (src) attribute of the < script > element.

thí dụ

Nội dung của scriptfile. js

Nội dung của tệp html

Ưu điểm lớn nhất của các tệp Javascript bên ngoài là sử dụng lại mã. Nếu Javascript của bạn được nhiều trang sử dụng, bạn không cần lặp lại tập lệnh trong mỗi trang sử dụng nó. Hơn nữa, nếu bạn muốn cập nhật tập lệnh của mình, bạn chỉ cần thay đổi tập lệnh ở một nơi

Các đề xuất hiện tại là đặt javascript ở dưới cùng không phải vì nó "có vẻ như tải nhanh hơn", mà bởi vì bằng cách đặt chúng ở đó, việc phân tích cú pháp và thực thi javascript không ngăn trình duyệt thực hiện những việc khác (chẳng hạn như tải phần còn lại của trang

JavaScript trong phần thân hoặc phần đầu. Các 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

ví dụ




<____5>

   <head>

|
1<<0>

<2<3

<4<5

<2<7

|
1<9<0>

   <9____9>

   <html8>

|
1<>2>3>2>

|
1<>8 >9   0   1    2   0   4   5>8>

|
1<<0 <1   0<3 <4   0<66<03<0>

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

Ư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. 😄