Bài 2: Viết code JavaScript ở đâu

Thẻ <script>

Trong HTML, code JavaScript phải được chèn giữa thẻ <script> và </script>.

Ví dụ


<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Ví dụ JavaScript trước đây sử dụng thuộc tính type: <script type=”text/javascript”> để chỉ định ngôn ngữ cho script.

Thuộc tính type là không cần thiết. JavaScript là ngôn ngữ kịch bản trong HTML.

Hàm và sự kiện JavaScript

Một hàm JavaScript là một khối code JavaScript, nó được thực hiện khi được gọi đến.

Ví dụ, một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng kích chuột vào một nút.

Bạn sẽ học được nhiều hơn về hàm và sự kiện ở các bài sau.

Nhúng JavaScript trong <head> hoặc <body>

Bạn có thể đặt script ở bất kỳ đâu trong tài liệu HTML.

Scripts có thể được đặt trong phần <body>, hoặc  phần <head> của trang HTML hoặc cả hai.


JavaScript trong <head>

Trong ví dụ này, một hàm JavaScript được đặt ở phần <head> của trang HTML.

Các hàm được gọi khi button được kích chọn:

Ví dụ:


<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

 


JavaScript trong <body>

Trong ví dụ, một hàm JavaScript được đặt trong phần <body>của trang HTML .

Các hàm được gọi khi button được kích chọn:

Ví dụ:


<!DOCTYPE html>
<html>
<body><h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button><script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script></body>
</html>

Đặt các script ở cuối của phần tử <body> sẽ cải thiện tốc độ hiển thị vì đặt ở đầu thì việc biên dịch script sẽ làm chậm tốc độ hiển thị trang.


Đặt JavaScript bên ngoài

Scripts có thể được đặt ở tập tin bên ngoài.

Tập tin ngoài: myScript.js


function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Scripts ở bên ngoài sẽ được gọi ở nhiều trang web khác nhau.

Tập tin JavaScript có phần mở rộng  .js.

Để sử dụng script bên ngoài, đặt tên của tập tin script trong thuộc tính src (source) của thẻ <script>:

Ví dụ


<!DOCTYPE html>
<html>
<body><script src="myScript.js"></script></body>
</html>

Bạn có thể đặt tham chiếu đến tập tin script trong thẻ <head> hoặc <body>.

Script sẽ xử lý như nó đã được đặt chính xác nơi thẻ <script> được trỏ tới.

File scripts không được chứa thẻ <script>.


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

Vị trí scripts trong tập tin ngoài có các ưu điểm:

  • Nó tách phần HTML và phần code script
  • Nó làm HTML và JavaScript dễ dang hơn khi đọc và bảo trì
  • Lưu trữ các tập tin JavaScript files có thể tăng tốc độ tải trang

Để thêm nhiều tập tin script tới một trang  – sử dụng nhiều thẻ script:

Ví dụ:


<script src="myScript1.js"></script>
<script src="myScript2.js"></script>


Tham chiếu đến tập tin ngoài

Scripts bên ngoài có thể được tham chiếu với một URL đầy đủ hoặc đường dẫn tương đối đến thư mục chứa file js của trang web hiện tại.

Ví dụ này sử dụng một URL đầy đủ liên kết đến một kịch bản

Ví dụ:


<script src="http://www.timoday.edu.vn/js/myScript1.js"></script>

Ví dụ này sử dụng 1 script trong thư mục được chỉ định trong trang web hiện tại:

Ví dụ:


<script src="/js/myScript1.js"></script>

Ví dụ này liên kết với một script nằm trong cùng thư mục của trang web hiện tại :

Ví dụ:


<script src="myScript1.js"></script>

Có thể bạn sẽ thích…

Bình luận

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *