Làm cách nào để bạn liên kết javascript với html?

Question

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

4

Nội dung chính Show

Xác địnhKhông phải lúc nào cũng nên sử dụng thuộc tính Example Web Page with JavaScript 1. Chẳng hạn, nếu tập lệnh của bạn phụ thuộc vào một số phần tử chưa được hiển thị hoặc nếu bản thân các phần tử phụ thuộc vào tập lệnh tạo các phần tử nhất định, thì Example Web Page with JavaScript 1 có thể là một lựa chọn có vấn đề. Khi những trường hợp như vậy không đáng lo ngại, Example Web Page with JavaScript 1 có thể trợ giúp về tốc độ tải trang và trải nghiệm người dùng của bạn
Sự kết luận
Thêm JavaScript vào một trang
Thêm một tệp JavaScript vào một trang
Thêm JavaScript bằng CDN
Tóm tắt, Cách liên kết JavaScript với HTML
Liên kết JavaScript ở đâu trong HTML?
Làm cách nào để chạy JavaScript trong HTML?
Làm cách nào để liên kết JavaScript với HTML và CSS?
Tôi có thể thêm JavaScript vào tệp HTML khô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

4

Trong ví dụ,

4

Thuộc tính

7 sử dụng đường dẫn tương đối đến tệp

8 chứa mã JavaScript mà bạn muốn thực thi

Truy cập trang HTML trong trình duyệt bằng cách nhập địa chỉ sau.

9. Nhấp vào nút và quan sát rằng nó tạo ra một hộp thoại cảnh báo

Bạn cũng có thể xem kết quả bằng cách xem tệp



  
    Example Web Page with JavaScript

0 đi kèm của chúng tôi

Xác địnhKhông phải lúc nào cũng nên sử dụng thuộc tính Example Web Page with JavaScript 1. Chẳng hạn, nếu tập lệnh của bạn phụ thuộc vào một số phần tử chưa được hiển thị hoặc nếu bản thân các phần tử phụ thuộc vào tập lệnh tạo các phần tử nhất định, thì Example Web Page with JavaScript 1 có thể là một lựa chọn có vấn đề. Khi những trường hợp như vậy không đáng lo ngại, Example Web Page with JavaScript 1 có thể trợ giúp về tốc độ tải trang và trải nghiệm người dùng của bạn

Hoãn lại

Giống như



  
    Example Web Page with JavaScript

1, việc sử dụng



  
    Example Web Page with JavaScript

3 sẽ 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ư



  
    Example Web Page with JavaScript

1,



  
    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 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 phần tử bắt buộc có trên trang

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



  
    Example Web Page with JavaScript

Sự kết luận

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. Ví dụ: hãy xem hướng dẫn Di chuyển 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.

Khi tạo các trang web, sẽ có lúc bạn cần làm nhiều hơn một chút ngoài nội dung hiển thị. Bạn cần tải JavaScript

Một trong những tệp JavaScript đầu tiên được thêm vào là Google Analytics để theo dõi tải trang và khách truy cập

Nhưng làm thế nào để bạn liên kết JavaScript với HTML?

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cách liên kết JavaScript với HTML. chúng tôi sẽ xem xét

Thêm JavaScript vào một trang
Thêm một tệp JavaScript vào một trang
Thêm JavaScript từ CDN

Bắt đầu nào

Thêm JavaScript vào một trang
Thêm một tệp JavaScript vào một trang
Thêm JavaScript bằng CDN
Tóm tắt, Cách liên kết JavaScript với HTML

Thêm JavaScript vào một trang

Khi bạn thêm JavaScript vào một trang, bạn sử dụng thẻ

<script type="text/javascript">
  alert("hello")
script>

0. Nghe có vẻ đơn giản. Hãy xem một ví dụ

Chúng ta sẽ bắt đầu đơn giản. Nói rằng ngay khi tải trang web, chúng tôi muốn nói “xin chào”. Để làm điều này, chúng ta có thể sử dụng hàm JavaScript

<script type="text/javascript">
  alert("hello")
script>

1

Chúng tôi sẽ cần một trang HTML rất cơ bản và sau đó tải

<script type="text/javascript">
  alert("hello")
script>

2 như thế này


<html lang="en">
  <head>
    <title>Hello!title>
  head>  
  <body>
    <script>
      alert("hello")
    script>
  body>
html>

Trên đây là tất cả những gì bạn cần để chào khi tải trang. Trình duyệt đọc trang và xử lý từng dòng HTML. Khi đọc thẻ script, nó biết rằng đây là JavaScript và nó sẽ chạy mã

Khi nó đọc dòng

<script type="text/javascript">
  alert("hello")
script>

3 nó có thể thấy chúng ta muốn hiển thị từ “hello” trong một cảnh báo

Đây là một ví dụ đơn giản nhưng nó cho thấy cách bạn có thể viết JavaScript trong một trang HTML. Đây là JavaScript "nội tuyến"

Thẻ script có một số thuộc tính mà chúng ta có thể sử dụng. đó là

không đồng bộ
bộ ký tự
hoãn lại
src
loại hình

Ví dụ: chúng tôi có thể chỉ định rằng tập lệnh là JavaScript bằng cách thêm một loại như thế này

<script type="text/javascript">
  alert("hello")
script>

Trước đây, việc sử dụng nhiều loại tập lệnh là phổ biến nhưng JavaScript đã chiến thắng trong trận chiến đó. Vì vậy, bây giờ các trình duyệt mặc định loại Javascript. Vì vậy, đoạn mã trên giống như



  
    Example Web Page with JavaScript

2

Vì vậy, không có lý do gì để sử dụng thuộc tính type nữa

Còn các thuộc tính khác, chúng làm gì?

Các thuộc tính khác chỉ hoạt động khi tải tệp JavaScript bên ngoài. Hãy nhìn vào điều này tiếp theo

Thêm một tệp JavaScript vào một trang

Để tải tệp JavaScript bên ngoài, chúng tôi cần sử dụng thuộc tính

<script type="text/javascript">
  alert("hello")
script>

4.

<script type="text/javascript">
  alert("hello")
script>

4 là viết tắt của nguồn và nó là đường dẫn đến tập lệnh mà bạn muốn tải. Thuộc tính này tải một tệp JavaScript bên ngoài

Ví dụ: giả sử chúng tôi có một tệp JavaScript tên là

<script type="text/javascript">
  alert("hello")
script>

6 trong thư mục nội dung trên máy chủ web của bạn. Nội dung của tập tin này giống như trước đây



  
    Example Web Page with JavaScript

6

Khi tải file sẽ cảnh báo bằng từ “hello”

Bạn sẽ tải tệp bên ngoài bằng HTML này



  
    Example Web Page with JavaScript

7

Hãy nhớ rằng, chúng tôi không cần bao gồm loại vì tệp là JavaScript. Tất cả những gì chúng ta cần là thuộc tính

<script type="text/javascript">
  alert("hello")
script>

4 là đường dẫn đến tệp

HTML sẽ tải tập lệnh khi nó tải trang như trước đây. Khi trình duyệt đọc dòng đó, nó sẽ tìm nạp tệp JavaScript và chạy nó

Bây giờ chúng ta có một tập lệnh bên ngoài, chúng ta có thể xem xét một số thuộc tính

<script type="text/javascript">
  alert("hello")
script>

2 khác. Hãy bắt đầu với

<script type="text/javascript">
  alert("hello")
script>

9 và



  
    Example Web Page with JavaScript

20

Khi trình duyệt tìm thấy thẻ tập lệnh trong HTML, quá trình tải trang sẽ dừng lại trong khi trình duyệt tìm nạp tập lệnh. Khi tệp đã sẵn sàng, trình duyệt sẽ chạy mã. Khi mã chạy xong, trang sẽ tiếp tục tải

<script type="text/javascript">
  alert("hello")
script>

9 và



  
    Example Web Page with JavaScript

20 sẽ cải thiện hiệu suất web bằng cách cho phép trang tiếp tục tải. Nhưng họ làm điều đó theo những cách khác nhau

Hãy xem

<script type="text/javascript">
  alert("hello")
script>

9 trước

Thuộc tính

<script type="text/javascript">
  alert("hello")
script>

9 yêu cầu trình duyệt tải xuống tệp ở chế độ nền. Điều này cho phép trang tiếp tục tải. Ngay sau khi tệp được tải xuống, trình duyệt sẽ chạy mã

Đây là cách bạn thêm thuộc tính

<script type="text/javascript">
  alert("hello")
script>

9



  
    Example Web Page with JavaScript

7

Làm thế nào để



  
    Example Web Page with JavaScript

20 khác nhau? . Tuy nhiên, nó sẽ chỉ chạy mã sau khi trình duyệt xử lý xong việc tải trang

Điều này có nghĩa là



  
    Example Web Page with JavaScript

20 sẽ không chặn trang nào cả. Trong khi đó,

<script type="text/javascript">
  alert("hello")
script>

9 sẽ chỉ chặn trang khi nó chạy mã. Cả hai thuộc tính đều có nghĩa là chúng sẽ không chặn trang khi tập lệnh đang tải xuống

Đây là cách bạn sẽ sử dụng



  
    Example Web Page with JavaScript

20



  
    Example Web Page with JavaScript

3

Vậy bạn chọn cái nào và khi nào?

Nguyên tắc chung là bạn nên sử dụng



  
    Example Web Page with JavaScript

20 vì nó sẽ không bao giờ ngừng tải trang. Ngoài ra, nếu bạn có nhiều tập lệnh trên trang thì



  
    Example Web Page with JavaScript

20 sẽ chạy chúng theo thứ tự. Với

<script type="text/javascript">
  alert("hello")
script>

9, mã sẽ chạy ngay khi chúng tải xuống và bạn không thể đảm bảo đơn đặt hàng

Còn một thuộc tính nữa mà chúng ta chưa nói đến. Đó là thuộc tính



  
    Example Web Page with JavaScript

64

Thuộc tính này cho phép bạn chỉ định mã hóa của các ký tự. Đó có thể là “UTF-8” hoặc “ISO-8859-1”. Trong 20 năm tạo trang web, tôi chưa bao giờ sử dụng thuộc tính này. Có thể nói rằng bạn có thể để mặc định là “ISO-8859-1”

Bạn nên đặt các thẻ tập lệnh của mình ở đâu? . Đây là phần cuối của trang và có nghĩa là phần lớn trang đã được tải

Đây là giao diện của HTML



  
    Example Web Page with JavaScript

9

Lần duy nhất bạn có thể phá vỡ quy tắc này là nếu bạn có một tệp JavaScript lớn. Nội dung này sẽ mất nhiều thời gian hơn để tải xuống nên bạn có thể chuyển nội dung này đến phần



  
    Example Web Page with JavaScript

66 của trang, như thế này

1

Với thuộc tính



  
    Example Web Page with JavaScript

20, bạn biết trang sẽ không bị chặn và tập lệnh sẽ tải xuống ở chế độ nền

Chúng tôi đã tải tập lệnh từ máy chủ web cục bộ nhưng nếu tệp nằm trên máy chủ khác thì sao. Một ví dụ về điều này là khi bạn cần tải một khung như JQuery

Hãy nhìn vào điều này tiếp theo

Thêm JavaScript bằng CDN

Điều cuối cùng mà tôi muốn dạy cho bạn là tải JavaScript từ CDN. Bạn có thể tải các thư viện như JQuery từ CDN nhanh và miễn phí. Điều này sẽ làm cho trang web của bạn nhanh hơn

Dưới đây là một số tùy chọn miễn phí

CDNJS là một dự án mã nguồn mở để cung cấp các tệp JavaScript
Thư viện Google Một lựa chọn nhỏ hơn nhiều nhưng có tất cả sức mạnh của Google
Mạng phân phối nội dung Microsoft Ajax Giống như Google, đây cũng chỉ là một lựa chọn nhỏ các tệp nhưng sử dụng máy chủ của Microsoft
jsdelivr Cũng là một dự án mã nguồn mở, dự án này có thể lấy các tệp từ NPM

Mỗi CDN này sẽ cho phép bạn tải JQuery mới nhất. Đây là URL từ mỗi CDN này

https. //cdnjs. đám mây. com/ajax/libs/jquery/3. 4. 1/jquery. tối thiểu. js
https. // ajax. googleapis. com/ajax/libs/jquery/3. 4. 1/jquery. tối thiểu. js
https. // ajax. aspnetcdn. com/ajax/jQuery/jquery-3. 4. 1. tối thiểu. js
https. //cdn. jsdelivr. mạng/npm/jquery@3. 4. 1/dist/jquery. tối thiểu. js

Đây là cùng một tệp từ mỗi nhà cung cấp. Bạn chỉ cần chọn một. Hãy nhớ, luôn sử dụng phiên bản rút gọn vì nó sẽ tải xuống nhanh hơn

Ví dụ, đây là giao diện nếu chúng tôi tải JQuery từ Google CDN

3

chìa khóa rút ra. Nếu bạn đang tải một thư viện hoặc khung chung thì hãy sử dụng một trong những CDN này để làm điều đó

Tóm tắt, Cách liên kết JavaScript với HTML

Chúng tôi đã xem xét cách liên kết JavaScript với HTML. Chúng tôi đã thảo luận ba cách để làm điều đó

Thêm mã JavaScript vào trang bên trong thẻ tập lệnh
Thêm JavaScript từ máy chủ web của bạn dưới dạng tập lệnh bên ngoài
Thêm JavaScript từ CDN

Nếu bạn đang tải một khung JavaScript chẳng hạn như JQuery, hãy sử dụng tùy chọn CDN vì nó sẽ tải nhanh nhất

Liên kết JavaScript ở đâu trong HTML?

Bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng bao quanh mã JavaScript. Thẻ

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

Để thực thi JavaScript trong trình duyệt, bạn có hai tùy chọn — hoặc là đặt nó bên trong phần tử tập lệnh ở bất cứ đâu bên trong tài liệu HTML hoặc đặt nó . js) và sau đó tham chiếu tệp đó bên trong tài liệu HTML bằng phần tử tập lệnh trống có thuộc tính src.

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

Để liên kết tệp CSS với tệp HTML của bạn, bạn phải viết tập lệnh tiếp theo trên tệp HTML bên trong thẻ đầu . Để liên kết tệp Js với HTML của bạn, bạn chỉ cần thêm nguồn của tập lệnh bên trong thẻ body hoặc bên ngoài; .

Tôi có thể thêm JavaScript vào tệp HTML không?

The first way to add JavaScript to HTML is a direct one. You can do so by using the tag that should encompass all the JS code you write. JS code can be added: between the tags.

programming javascript

Làm cách nào để bạn liên kết javascript với html?

Hoãn lại

Sự kết luận

Thêm JavaScript vào một trang

Thêm một tệp JavaScript vào một trang

Thêm JavaScript bằng CDN

Tóm tắt, Cách liên kết JavaScript với HTML

Liên kết JavaScript ở đâu trong HTML?

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

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

Tôi có thể thêm JavaScript vào tệp HTML không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội