Làm cách nào để liên kết ví dụ JavaScript với HTML?

JavaScript là ngôn ngữ kịch bản được sử dụng rộng rãi để thêm chức năng động vào trang web, bên cạnh HTML và CSS. Các sự kiện, hoạt ảnh và cập nhật nội dung do người dùng kích hoạt nằm trong số một số tính năng trên trang web được cung cấp bởi JavaScript. Để sử dụng JavaScript trên trang web HTML, bạn phải sử dụng

Ví dụ này thêm mã JavaScript trực tiếp vào phần đánh dấu HTML

Ví dụ tiếp theo chứng minh

Trong ví dụ,

Thuộc tính src sử dụng đường dẫn tương đối đến tệp example.js chứa mã JavaScript mà bạn muốn thực thi

Giống như async, sử dụng

  
    Example Web Page with JavaScript
  
  
    
  

3 yêu cầu trình duyệt tải xuống tệp JavaScript được liên kết ở chế độ nền trong khi trang tiếp tục tải. Tuy nhiên, không giống như async,

  
    Example Web Page with JavaScript
  
  
    
  

3 ngăn không cho tập lệnh đã tải được thực thi cho đến khi trang được hiển thị đầy đủ. Điều này làm cho

  
    Example Web Page with JavaScript
  
  
    
  

3 đặc biệt hữu ích khi mã JavaScript của bạn dựa trên một hoặc nhiều phần tử được hiển thị và có sẵn. Bởi vì

  
    Example Web Page with JavaScript
  
  
    
  

3 đảm bảo rằng tập lệnh chỉ chạy sau khi trang đã được tải hoàn toàn, bạn có thể yên tâm rằng tập lệnh sẽ không chạy cho đến khi tất cả các thành phần bắt buộc có trên trang

Tập tin. mục lục. html

1
2
3
4
5
6
7
8
9

  
    Example Web Page with JavaScript
  
  
    
  

Hướng dẫn này trình bày thông tin cơ bản mà bạn cần để bắt đầu sử dụng JavaScript trên các trang HTML của mình. Cho dù bạn định nhúng tập lệnh hay liên kết tệp JavaScript vào HTML của mình, thì hướng dẫn này cũng phác thảo các bước cần thiết để thực hiện việc đó

Bước tiếp theo, bạn có thể quan tâm đến việc xem một số hướng dẫn JavaScript khác của chúng tôi. Chẳng hạn, hãy xem hướng dẫn Duyệt qua mô hình đối tượng tài liệu bằng JavaScript, hướng dẫn Cách sửa đổi DOM bằng JavaScript và hướng dẫn Đối tượng JavaScript của chúng tôi

JavaScript [JS], một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới, cho phép các nhà phát triển web tạo ra trải nghiệm trang web động. Về bản chất, JavaScript cung cấp năng lượng cho web. Các trình duyệt hiện đại hỗ trợ JavaScript thông qua các “công cụ” đi kèm, liên tục cập nhật và điều chỉnh để hỗ trợ các đặc tả ngôn ngữ JS [ECMAScript] khi ngôn ngữ này phát triển theo thời gian

Với JS, HTML và CSS - web đã trở thành một trong những cơ hội rộng mở và thú vị nhất dành cho người sáng tạo. Sử dụng Javascript trong HTML khi phát triển trải nghiệm ứng dụng web động là kỹ năng chính của nhà phát triển web. Và may mắn thay, nó không phức tạp nhờ có HTML — giúp việc liên kết JavaScript với HTML trở nên đơn giản

Phần tử tập lệnh HTML

Thông qua thẻ tập lệnh HTML, nhà phát triển có thể nhúng mã vào trang web hoặc thậm chí liên kết với các tệp bên ngoài để thực thi mã. Nói chung, các nhà phát triển web chọn JS làm mã được nhúng

Nơi đặt thẻ tập lệnh

HTML cho phép các thẻ trong các phần tử hoặc body, vậy bạn nên đặt các thẻ này vào phần tử nào?

Bạn nên đặt các thẻ script ngay trước thẻ đóng của phần nội dung và được coi là phương pháp hay nhất []. Có một vài lý do cho việc này

1. JavaScript của bạn có thể phụ thuộc vào các phần tử HTML hiện diện trên trang, đặc biệt là để thiết lập trình xử lý sự kiện hoặc lớp cho các phần tử nhất định. Nếu JavaScript được đặt trong thẻ đầu, nó sẽ được tải và thực thi trước khi tất cả HTML có trên trang

2. Vì Trình duyệt dừng tải, phân tích cú pháp và chạy mã JavaScript của bạn trước khi tải phần còn lại của trang, nên bạn có thể thấy việc đặt mã đó vào thẻ head trước khi HTML của bạn tải hoàn toàn có thể gây chậm cho người dùng như thế nào.  

Như đã nói, có thể thêm nó vào phần tử đầu mà không gây ra bất kỳ sự cố nào. Giống như nhiều thứ trong Phát triển Web, nó thực sự phụ thuộc vào những gì bạn đang làm. ]

Học thông qua hành động

Hãy sử dụng một ví dụ đơn giản, bộ đếm nút cổ điển. Chúng tôi tạo nội dung, nút và văn bản bằng HTML và sử dụng JavaScript để tăng hoặc giảm số lượng tương ứng và đếm theo thời gian bằng cách phản hồi các lần nhấp vào nút

Ví dụ về nhúng [nội tuyến] JavaScript

Mục lục. html. ```html

Up

0

Liên kết tệp JavaScript bên ngoài

Mục lục. html. ```html

Up

0

chủ yếu. js ```javascript

let count = 0; function countUp[] { document.getElementById["count"].textContent = ++count; } function countDown[] { document.getElementById["count"].textContent = --count; }

kết thúc

Khả năng liên kết JavaScript với HTML đã làm cho web trở thành một nơi thực sự năng động, nơi mọi thứ đều có thể. Từ việc chia sẻ tài liệu văn bản nội bộ đến giờ là đọc email, mua sắm quần áo hoặc liên lạc với tất cả những người bạn thân nhất của mình, bạn có thể dễ dàng nhận thấy nó đã tác động sâu sắc như thế nào đến cuộc sống của chúng ta

Bây giờ bạn đã biết cách liên kết JavaScript với tài liệu HTML của mình, hành trình sáng tạo của bạn chính thức bắt đầu

JavaScript kết nối với HTML như thế nào?

Làm cách nào để chạy JavaScript trong HTML?

Làm cách nào để liên kết một trang với JavaScript?