Vị trí đặt JavaScript trong tệp HTML

Vi Tri Dat Javascript Trong Tep Html



Trong khi thiết kế một trang web hoặc trang web, các nhà phát triển thường thấy thuận tiện khi tích hợp mã HTML và JavaScript theo các chức năng đi kèm. Ví dụ: đặt mã liên quan đến chức năng cụ thể liên quan đến mã hoặc nối thêm chức năng tương tự vào nhiều trang web trong trang web. Trong những tình huống như vậy, việc đặt JavaScript trong tệp HTML là một sự trợ giúp tuyệt vời.

Hướng dẫn này sẽ minh họa các cách tiếp cận để đặt JavaScript trong tệp HTML.

Đặt JavaScript ở đâu trong tệp HTML?

Vị trí của JavaScript trong tệp HTML có thể ở:







Cách tiếp cận 1: Vị trí của JavaScript trong thẻ trong tệp HTML

Theo cách tiếp cận này, vị trí của phần JavaScript của mã trong “ <đầu> ” thẻ sẽ được minh họa.



Ví dụ

Chúng ta hãy có một cái nhìn tổng quan về cuộc biểu tình dưới đây:



< cái đầu >

< loại kịch bản = 'văn bản/javascript' >

vị trí chức năngJs ( ) {

báo động ( 'Vị trí của JavaScript nằm trong thẻ ' )

}

kịch bản >

cái đầu >

< thân thể >

< trung tâm >< nút onclick = 'placementJs()' > Nhấp vào đây cái nút > trung tâm >

thân thể >

Trong đoạn mã trên:





  • Bao gồm phần JavaScript của mã trong phần “ <đầu> ” gắn thẻ với sự trợ giúp của “ ' nhãn.
  • Trong mã JS, định nghĩa một hàm có tên “ vị tríJs() ”. Theo định nghĩa của nó, hiển thị thông báo đã nêu qua hộp thoại cảnh báo.
  • Cuối cùng, trong mã HTML, hãy tạo một nút có “ trong một cái nhấp chuột ” sự kiện sẽ chuyển hướng đến chức năng đã xác định ở bước trước khi nhấp vào nút.

đầu ra



Trong đầu ra ở trên, có thể thấy rằng mã JS đang hoạt động bình thường bằng cách đặt nó trong “ <đầu> ' nhãn.

Cách tiếp cận 2: Vị trí của JavaScript trong thẻ trong tệp HTML

Theo cách tiếp cận này, vị trí của mã JavaScript trong “ ” thẻ trong tệp HTML sẽ được thảo luận.

Ví dụ

Ví dụ dưới đây minh họa khái niệm đã nêu:

< thân thể >

< trung tâm >< nút onclick = 'placementJs()' > Nhấp vào đây cái nút > trung tâm >

< loại kịch bản = 'văn bản/javascript' >

vị trí chức năngJs ( ) {

báo động ( 'Vị trí của JavaScript nằm trong thẻ ' )

}

kịch bản >

thân thể >

Trong các dòng mã trên:

  • Trong ' Tương tự như vậy, hãy tạo một nút gọi chức năng placeJs() với sự trợ giúp của “ trong một cái nhấp chuột ' Sự kiện.
  • Trong khối mã JavaScript, hãy khai báo một hàm có tên “ vị tríJs() ”.
  • Chức năng này sẽ được gọi khi nhấp vào nút và hiển thị thông báo đã nêu thông qua một cảnh báo.

đầu ra

Cách tiếp cận 3: Đặt JavaScript dưới dạng tệp bên ngoài

Cách tiếp cận cụ thể này liên quan đến việc đặt khối mã JavaScript dưới dạng tệp JS bên ngoài có tên tệp cụ thể với phần mở rộng “ .js ' bên trong ' src ' thuộc tính.

Ví dụ

Hãy xem qua ví dụ sau:

< thân thể >

< trung tâm >< nút onclick = 'placementJs()' > Nhấp vào đây cái nút > trung tâm >

thân thể >

< loại kịch bản = 'văn bản/javascript' src = tệp bên ngoài. js > kịch bản >

Trong mã HTML trên:

  • Nhớ lại cách tiếp cận đã thảo luận để tạo nút chuyển hướng đến chức năng JavaScript “ vị tríJs() ”.
  • Sau đó, tích hợp các chức năng JavaScript với sự trợ giúp của tệp JS bên ngoài được liên kết với tên tệp đã nêu trong phần “ src ' thuộc tính.

Hãy chuyển sang mã JS dưới đây:

vị trí chức năngJs ( ) {

báo động ( 'Đây là tệp JavaScript bên ngoài' )

}

Trong khối mã trên:

  • Định nghĩa một chức năng có tên là “ vị tríJS() ”.
  • Theo định nghĩa của nó, hiển thị thông báo đã nêu qua cảnh báo khi nhấp vào nút.
  • Cách tiếp cận này cuối cùng sẽ trả về cùng một kết quả bằng cách nhúng cả tệp HTML và JavaScript.

đầu ra

Chúng tôi đã cung cấp thông tin xác thực liên quan đến việc đặt JavaScript trong tệp HTML.

Phần kết luận

Vị trí của JavaScript trong tệp HTML có thể nằm trong phần “ <đầu> ” thẻ, “ ” thẻ hoặc dưới dạng thẻ “ bên ngoài tập tin js ” bằng cách xác định “ src ”. Mã JavaScript hoạt động giống nhau khi được đặt trong một trong các thẻ đã nêu. Tuy nhiên, việc đặt JavaScript dưới dạng tệp js bên ngoài sẽ hỗ trợ khả năng sử dụng lại mã. Blog này hướng dẫn liên quan đến vị trí của JavaScript trong tệp HTML.