Cách thêm JavaScript vào HTML
JavaScript, còn được viết tắt là JS, là một ngôn ngữ lập trình được sử dụng trong phát triển web. Là một trong những công nghệ cốt lõi của web cùng với HTML và CSS, JavaScript được sử dụng để làm cho các trang web trở nên tương tác và để xây dựng các ứng dụng web. Các trình duyệt web hiện đại, tuân theo các tiêu chuẩn hiển thị chung, hỗ trợ JavaScript thông qua các công cụ tích hợp sẵn mà không cần bổ sung thêm plugin.Khi làm việc với các file cho web, JavaScript cần được tải và chạy cùng với đánh dấu HTML. Điều này có thể được thực hiện nội tuyến trong trang HTML hoặc trong một file riêng biệt mà trình duyệt sẽ download cùng với trang HTML .
Hướng dẫn này sẽ trình bày cách kết hợp JavaScript vào các file web của bạn, cả nội tuyến vào trang HTML và dưới dạng file riêng biệt.
Thêm JavaScript vào trang HTML
Bạn có thể thêm mã JavaScript vào trang HTML bằng cách sử dụng thẻ HTML chuyên dụng <script> bao bọc xung quanh mã JavaScript.
Thẻ <script> có thể được đặt trong phần <head> của HTML của bạn, trong phần <body> hoặc sau thẻ đóng </body> , tùy thuộc vào thời điểm bạn muốn JavaScript tải.
Nói chung, mã JavaScript có thể đi vào bên trong phần <head> của tài liệu để giữ cho chúng nằm trong và ngoài nội dung chính của trang HTML của bạn.
Tuy nhiên, nếu tập lệnh của bạn cần chạy tại một điểm nhất định trong bố cục của trang - như khi sử dụng document.write để tạo nội dung - thì bạn nên đặt nó ở điểm mà nó nên được gọi, thường là trong phần <body> .
Hãy xem xét trang HTML trống sau với tiêu đề trình duyệt là Today's Date :
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> Hiện tại, file này chỉ chứa đánh dấu HTML. Giả sử ta muốn thêm mã JavaScript sau vào tài liệu:
let d = new Date(); alert("Today's date is " + d); Điều này sẽ cho phép trang web hiển thị cảnh báo với ngày hiện tại dù khi nào user tải trang web.
Để làm điều này, ta sẽ thêm <script> cùng với một số mã JavaScript vào file HTML.
Để bắt đầu, ta sẽ thêm mã JavaScript vào giữa các <head> , báo hiệu trình duyệt chạy tập lệnh JavaScript trước khi tải trong phần còn lại của trang. Ví dụ, ta có thể thêm JavaScript bên dưới <title> , như được hiển thị bên dưới:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> <script> let d = new Date(); alert("Today's date is " + d); </script> </head> <body> </body> </html> Sau khi tải trang, bạn sẽ nhận được một cảnh báo trông giống như sau:
Bạn cũng có thể thử nghiệm với việc đặt tập lệnh bên trong hoặc bên ngoài các <body> và reload trang. Vì đây không phải là một trang HTML mạnh mẽ, bạn có thể sẽ không nhận thấy bất kỳ sự khác biệt nào trong việc tải trang.
Nếu ta đang sửa đổi những gì được hiển thị trong phần nội dung của HTML, ta cần triển khai điều đó sau phần <head> để nó hiển thị trên trang, như trong ví dụ dưới đây:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Today's date is " + d + "</h1>" </script> </body> </html> Kết quả kết quả cho trang HTML ở trên được tải qua trình duyệt web sẽ trông giống như sau:
Các tập lệnh nhỏ hoặc chỉ chạy trên một trang có thể hoạt động tốt trong file HTML, nhưng đối với các tập lệnh lớn hơn hoặc tập lệnh sẽ được sử dụng trên nhiều trang, đó không phải là giải pháp hiệu quả vì bao gồm cả nó có thể trở nên khó sử dụng hoặc khó đọc va hieu. Trong phần tiếp theo, ta sẽ xem xét cách xử lý một file JavaScript riêng biệt trong trang HTML của bạn.
Làm việc với một file JavaScript riêng biệt
Để chứa các tập lệnh lớn hơn hoặc tập lệnh sẽ được sử dụng trên một số trang, mã JavaScript thường nằm trong một hoặc nhiều file js được tham chiếu trong trang HTML , tương tự như cách các nội dung bên ngoài như CSS được tham chiếu.
Các lợi ích của việc sử dụng một file JavaScript riêng bao gồm:
- Tách mã đánh dấu HTML và mã JavaScript để làm cho cả hai đơn giản hơn
- Các file riêng biệt giúp bảo trì dễ dàng hơn
- Khi các file JavaScript được lưu vào bộ nhớ đệm, các trang tải nhanh hơn
Để trình bày cách kết nối tài liệu JavaScript với trang HTML , hãy tạo một dự án web nhỏ. Nó sẽ bao gồm script.js trong folder js/ , style.css trong folder css/ và một index.html chính trong folder root của dự án.
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html Ta có thể bắt đầu với mẫu HTML trước của bạn từ phần trên:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> Bây giờ, hãy di chuyển mã JavaScript của ta sẽ hiển thị ngày dưới dạng tiêu đề <h1> vào file script.js :
let d = new Date(); document.body.innerHTML = "<h1>Today's date is " + d + "</h1>" Ta có thể thêm tham chiếu đến tập lệnh này vào hoặc bên dưới phần <body> , với dòng mã sau:
<script src="js/script.js"></script> Thẻ <script> đang trỏ đến file script.js trong folder js/ của dự án web của ta .
Hãy xem dòng này trong ngữ cảnh của file HTML của ta , trong trường hợp này, bên dưới phần <body> :
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> <script src="js/script.js"></script> </html> Cuối cùng, hãy cũng chỉnh sửa style.css bằng cách thêm màu nền và kiểu vào tiêu đề <h1> :
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } Ta có thể tham chiếu file CSS đó trong phần <head> của trang HTML của ta :
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> Bây giờ, với JavaScript và CSS tại chỗ, ta có thể tải trang index.html vào trình duyệt web mà ta chọn. Ta sẽ thấy một trang trông giống như sau:
Bây giờ ta đã đặt JavaScript trong một file , ta có thể gọi nó theo cách tương tự từ các trang web bổ sung và cập nhật tất cả chúng ở một vị trí duy nhất
Kết luận
Hướng dẫn này đề cập đến cách kết hợp JavaScript vào các file web của bạn, cả nội tuyến vào trang HTML và dưới dạng file .js riêng biệt.
Từ đây, bạn có thể tìm hiểu cách làm việc với Control panel dành cho nhà phát triển JavaScript và cách viết comment bằng JavaScript .
Các tin liên quan
Cách sử dụng control panel dành cho nhà phát triển JavaScript2017-06-29
Cách viết comment bằng JavaScript
2017-06-20
Hiểu các loại dữ liệu trong JavaScript
2017-06-01
Phương thức chuỗi padStart và padEnd trong JavaScript
2017-02-17
Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)
2017-02-07
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Cách làm việc với JSON trong JavaScript
2016-12-09
Cấu trúc đối tượng và mảng trong JavaScript với ES6
2016-12-09
Một trang đơn giản mờ dần với JavaScript
2016-11-29
