JavaScript không cần giới thiệu. Đây là một trong những ngôn ngữ lập trình phổ biến nhất để phát triển web. Nó hoạt động tương tự như HTML và CSS. Tất cả các ngôn ngữ này giúp thiết kế và phát triển các ứng dụng và chương trình dựa trên web

Vậy cụ thể JavaScript hữu ích như thế nào? . Không có chỗ cho sự tự mãn trong lĩnh vực hiện đại. Bạn cần thu hút sự chú ý của người xem trong vài giây đầu tiên và khiến họ tương tác. Không còn nghi ngờ gì nữa, một thiết kế web thú vị và đáp ứng là một trong những cách tốt nhất để làm điều này. Rất may, hầu hết các trình duyệt đều hỗ trợ JavaScript. Nó có thể chạy trên trình duyệt của bạn với sự trợ giúp của một số công cụ tích hợp

Thêm JavaScript vào HTML

Nếu bạn muốn sử dụng các tệp JavaScript cho ứng dụng web của mình, bạn cần chạy chúng song song với đánh dấu HTML. Có hai cách bạn có thể thêm JavaScript vào HTML. Một cách tiếp cận là thực hiện nội tuyến trong tài liệu HTML. Một cách khác là thêm nó dưới dạng một tệp riêng biệt. Tệp này sẽ tải xuống cùng với tài liệu HTML

Trong hướng dẫn này, chúng ta sẽ khám phá chi tiết cách bạn có thể thêm JavaScript vào HTML bằng hai phương pháp này

Cách thêm JavaScript vào tài liệu HTML nội tuyến

First, we will see how you can add JavaScript to an HTML document inline. To do this, you have to use the dedicated HTML tag. It is . This tag wraps around the JavaScript code. You can place the tag anywhere in the entirety of your HTML markup. Where you place it depends on when you want the JavaScript to load.

For instance, you can place it in the section, the section, or even after the close tag. If you want to keep the JavaScript away from the main content of the HTML code, you are better off putting the tag in the section. This will contain the JavaScript code. On the other hand, you may want your JavaScript code to run inside the layout of your webpage. If such is the case, you should place the tag in the section. You will do this if, let’s say, you are using document.write to generate content.

Một cách tốt hơn để hiểu điều này là thông qua một ví dụ với mã. Hãy xem xét tài liệu HTML trống sau đây. Tiêu đề trình duyệt của tài liệu này là Today’s Date

1

2

3

4

5

6

7

8

9

10

11

12

13

Ngày hôm nay

Như bạn có thể thấy, không có dấu hiệu của JavaScript ở đây. Tài liệu chỉ chứa đánh dấu HTML cho đến nay. Bây giờ, chúng tôi muốn thêm một số mã JavaScript nội tuyến để tải và chạy đồng thời. Hãy xem xét đoạn mã JavaScript sau

1

2

hãy d = mới Ngày[];

alert["Hôm nay là " + d];

Theo đoạn mã trên, chúng tôi đang cho phép trang web của mình hiển thị cảnh báo với ngày hôm nay. Vì vậy, bất kể khi nào khách truy cập khởi chạy trang web, trang sẽ hiển thị ngày hiện tại

Now to add this bit of JavaScript code to the HTML document, we will use the tag. First of all, you need to add the JavaScript code between the tags. This tells the webpage that this particular code has to load before the other content of the page. You can add the code below the tags. Here is how you would go about doing this:

Ngày hôm nay

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:

Ngày hôm nay

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 /

Ngày hôm nay

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 tag. The tag is indicating the script.js file which is in the js/ directory of the project. Here is how the code will appear in the HTML document:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Ngày hôm nay

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

Ngày hôm nay