hãy d = mới Ngày();

alert("Hôm nay là " + d);

Mã JavaScript của bạn hiện đã được thêm vào. Trang web của bạn sẽ chạy và tải tập lệnh này trước phần còn lại của trang. Khi bạn khởi chạy trang web của mình, bạn sẽ nhận được thông báo về ngày hiện tại, đại loại như thế này

That is how you would add the code to the section of the HTML document. The alternative would be to add the script either inside or outside the tags. As you will see in the below example, we will add the bit of code after the section:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<. LOẠI TÀI LIỆU html>

lang="en-US" lang="en-US">

<đầu>

bộ ký tự="UTF-8" charset="UTF-8">

tên="khung nhìn"nội dung< name="viewport" content="width=device-width, initial-scale=1">

hãy d = mới Ngày();

tài liệu. cơ thể. innerHTML = " + d + ""

Do sửa đổi này, bạn sẽ thấy một cái gì đó như thế này khi tải lại trang

Cách thêm JavaScript vào HTML bằng tệp JavaScript riêng

Các tập lệnh Javascript nhỏ hoạt động tốt với các tệp HTML. Điều này là do chúng chạy toàn bộ trên một trang hoặc ít hơn. Nếu bạn đang làm việc với các tập lệnh lớn hơn chiếm nhiều trang, tệp có thể trở nên rất khó hiểu. Đó là lý do tại sao bạn có thể cần thêm nó dưới dạng tệp JavaScript riêng. Tệp sẽ tải đồng thời với tài liệu HTML

Trong phần này, chúng tôi sẽ thảo luận về cách bạn có thể thêm JavaScript vào HTML bằng một tệp riêng biệt. Mã thường được đặt trong một hoặc nhiều. tập tin js. Tài liệu HTML sẽ tham chiếu các tệp này giống như bất kỳ nội dung bên ngoài nào khác. Có rất nhiều lý do tại sao bạn có thể muốn sử dụng một tệp JavaScript riêng biệt. Về cơ bản, nó làm cho mã dễ đọc và dễ hiểu hơn nhiều. Chưa kể, các tệp riêng biệt cho phép các trang được lưu trong bộ nhớ cache tải nhanh và cũng tương đối dễ bảo trì hơn

Để tận dụng những lợi ích này, bạn cần biết cách kết nối cả hai với nhau - tệp JavaScript và tài liệu HTML. Để giúp bạn dễ hiểu, chúng tôi sẽ lấy ví dụ về một dự án web nhỏ. Dự án được cho là này chứa một chỉ mục chính. html ở thư mục gốc, kiểu. css trong thư mục css/ và tập lệnh. js trong thư mục js/. Đây là dự án nhỏ của chúng tôi

1

2

3

4

5

6

7

8

9

10

11

dự án /

├── css /

|   └── phong cách. css

├── js /

|   └── tập lệnh. js

└── chỉ mục. html

Đối với đánh dấu HTML của chúng tôi, chúng tôi sẽ sử dụng tài liệu mà chúng tôi đã sử dụng trước đó

lang="en-US" lang="en-US">

<đầu>

bộ ký tự="UTF-8" charset="UTF-8">

tên="khung nhìn"nội dung< name="viewport" content="width=device-width, initial-scale=1">

Now that we have our two documents, we can start connecting them. We have to add the JavaScript code regarding the date to the script.js file. You will add it as an

header as follows:

1

2

hãy d = mới Ngày();

tài liệu. cơ thể. innerHTML = " + d + "

src="js/script.js">

As you can see, we are using the

12

13

14

<. LOẠI TÀI LIỆU html>

lang="en-US" lang="en-US">

<đầu>

bộ ký tự="UTF-8" charset="UTF-8">

tên="khung nhìn"nội dung< name="viewport" content="width=device-width, initial-scale=1">

src="js/script.js">

If you want, you can make some stylistic modifications to spruce up your page. For example, let’s add some background color to the

header. We will make this edit in the style.css file:

1

2

3

4

5

6

7

8

cơ thể {

     nền - màu. #0080ff;

}

 

h1 {

     màu. #fff;

     phông chữ - gia đình. Arial, Helvetica, sans-serif;

}

Since the edit is to be shown in the header, we will reference it in the section of the HTML document. Here is how you will make the reference to this CSS file:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<. LOẠI TÀI LIỆU html>

lang="en-US" lang="en-US">

<đầu>

bộ ký tự="UTF-8" charset="UTF-8">

tên="khung nhìn"nội dung< name="viewport" content="width=device-width, initial-scale=1">

rel="stylesheet"href< . css">rel="stylesheet" href="css/style.css">

 

 

src="js/script.js">

 

Bây giờ chúng tôi đã thực hiện các tham chiếu bắt buộc, bạn có thể hình dung những thay đổi. Tải chỉ mục. html trong trình duyệt của bạn và bạn sẽ thấy một trang như thế này

Nếu bạn muốn cập nhật mã, bạn có thể chỉnh sửa tất cả các trang của mình từ một vị trí duy nhất. Điều này làm cho việc bảo trì các trang web rất dễ dàng. Đó là lợi ích của việc sử dụng một tệp riêng biệt cho tập lệnh JavaScript của bạn

Sự kết luận

Hy vọng, hướng dẫn này đã giúp bạn tìm hiểu thêm về quy trình thêm JavaScript vào HTML. Chúng tôi đã giới thiệu cách thực hiện việc này trong nội tuyến tài liệu HTML cũng như cách thêm tài liệu đó dưới dạng. tập tin js. Bây giờ bạn đã biết những kiến ​​thức cơ bản, bạn có thể làm được nhiều hơn thế với JavaScript trong HTML

Bạn nên đặt JavaScript của mình ở đâu?

Đâu là nơi tốt nhất để đặt các thẻ script?

Tôi nên đặt tập lệnh vào phần đầu hay phần thân?