Thêm JS vào HTML
|
bắt đầu với nền tảng vững chắc về lập trình máy tính và thông thạo các ngôn ngữ lập trình chính. Một trong những ngôn ngữ lập trình này là JavaScript JavaScript đã được sử dụng để xây dựng một số trang web và ứng dụng phổ biến nhất trên thế giới, đó là lý do tại sao các nhà phát triển web có thể viết mã bằng ngôn ngữ này lại có nhu cầu cao như vậy Show
Bài viết này sẽ chỉ cho bạn cách thêm JavaScript vào HTML theo hai bước đơn giản . Chúng tôi cũng sẽ đề cập đến các nguyên tắc cơ bản của JavaScript và kiểm tra nhiều ứng dụng của nó trong thế giới công nghệ. JavaScript là gì?JavaScript (hoặc JS) là ngôn ngữ lập trình hoặc kịch bản lệnh cho phép bạn triển khai các yếu tố động và tương tác trên các trang web. JS cũng được sử dụng để xây dựng ứng dụng web và trò chơi trên trình duyệt . Nó đủ linh hoạt cho các ứng dụng khác nhau, bao gồm máy chủ, điều khiển phần cứng và phần mềm. JavaScript tạo điều kiện tương tác giữa trình duyệt web của người dùng và trang web mà người dùng đang truy cập. Tất cả các trình duyệt web chính đều có một công cụ JavaScript chuyên dụng để thực thi mã JS trên thiết bị của người dùng. Về cơ bản, JavaScript ngăn các trang web ở trạng thái tĩnh và cho phép các nhà phát triển thêm các yếu tố động và tương tác vào các trang web. Một số ví dụ bao gồm chèn hoạt ảnh, âm thanh và video vào các trang web (với các nút dừng, tạm dừng và phát) và tự động đặt con trỏ văn bản vào hộp tìm kiếm khi tải Tìm kiếm của Google Cùng với HTML và CSS, JavaScript là một phần của ba công nghệ cốt lõi cần thiết để xây dựng trang web. HTML (viết tắt của HyperText Markup Language) cung cấp cấu trúc cho nội dung trang web. Các ví dụ bao gồm xác định tiêu đề, bảng dữ liệu và danh sách các dấu đầu dòng. CSS (Cascading Style Sheets) áp dụng kiểu dáng và bố cục cho nội dung HTML. Các ví dụ bao gồm cài đặt màu nền và phông chữ, chuẩn hóa khoảng cách giữa các thành phần và thêm hình nền. Mặc dù Java và JavaScript có cú pháp tương tự và các thư viện chuẩn, hai ngôn ngữ lập trình này khá khác nhau—với Java là ngôn ngữ lập trình OOP . e. , chạy trong máy ảo hoặc trình duyệt). Mặt khác, JavaScript là ngôn ngữ OOP scripting (i. e. , nó chỉ chạy trong trình duyệt). Hãy xem bài đăng blog sâu sắc của chúng tôi nếu bạn muốn tìm hiểu thêm về JavaScript. JavaScript được sử dụng để làm gì?Bạn có thể sử dụng JavaScript để xây dựng các trang web, trò chơi trình duyệt và ứng dụng phức tạp. Bạn cũng có thể sử dụng nó để kết nối máy chủ với các trang web và ứng dụng web. Nhiều trang web và ứng dụng được sử dụng rộng rãi nhất trên internet sử dụng JavaScript—bao gồm Facebook, Netflix, Google và YouTube. Nhiều công nghệ đã xuất hiện trong những năm gần đây để tận dụng sức mạnh của JavaScript. JS hiện có một bộ khung phong phú mà bạn có thể sử dụng để xây dựng các ứng dụng web và di động. Các khung là các thư viện mã JS được viết sẵn. Chúng hoạt động tương tự như bản thiết kế và giúp nhà phát triển xây dựng ứng dụng và trang web với nhiều chức năng hơn. Đây là 3 framework ứng dụng JS phổ biến nhất.
JavaScript là cần thiết để làm cho các trang web năng động và tương tác. Với việc đưa JS vào mã hóa của họ, các nhà phát triển có thể triển khai các tính năng sau.
JS cũng được sử dụng để tạo các trò chơi phức tạp trên trình duyệt. Một số trò chơi dựa trên trình duyệt phổ biến nhất trên thế giới sử dụng JS, bao gồm Angry Birds, Bejeweled và Tetris. Do tính linh hoạt và phổ biến của nó như một công cụ phát triển web, JavaScript vẫn là ngôn ngữ lập trình được sử dụng rộng rãi nhất trong số các nhà phát triển, theo Statista. Vào năm 2021, gần 65% nhà phát triển đã sử dụng JavaScript. Hơn nữa, một 98% trang web áp đảo sử dụng JS ở phía máy khách để xử lý hành vi của trang web, theo W3Techs. Cách thêm JavaScript vào HTMLChúng tôi đã khám phá cách HTML, CSS và JavaScript cần thiết để xây dựng các trang web động và chức năng. Một phép ẩn dụ thú vị là coi trang web của bạn giống như một chiếc bánh ba lớp—với HTML là nền tảng, CSS là lớp giữa và JavaScript là lớp trên cùng. Trước tiên, bạn cấu trúc nội dung của mình trên trang web bằng HTML, sau đó thêm các yếu tố phong cách và bố cục phù hợp bằng CSS. Tiếp theo, bạn cần thêm các chức năng động và tương tác với HTML Có hai cách để thêm JavaScript vào HTML . đầu tiên là nhúng mã JS nội tuyến vào HTML , trong khi thứ hai yêu cầu bạn phải tạo tệp JS bên ngoài< . . 1. Nhúng mã JavaScript nội tuyến vào HTMLKhi làm việc với các tệp cho internet, JS cần được tải và chạy cùng với mã đánh dấu HTML. Bạn có thể làm điều này nội tuyến trong một tài liệu HTML. để làm điều đó. 2. Tạo một tệp JavaScript bên ngoàiMột cách khác để tải JS và chạy nó cùng với đánh dấu HTML là tạo một tệp JS bên ngoài. Trình duyệt sẽ tải xuống tệp JS này cùng với tài liệu HTML khi người dùng truy cập trang web. để bao gồm JavaScript bên ngoài. Cách nhúng mã JavaScript nội tuyếnMã JavaScript có thể được nhúng nội tuyến vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng </html> Hãy thử và chạy nó trên trình soạn thảo HTML miễn phí của W3Schools. Bạn sẽ nhận thấy rằng nó gọi chức năng khi nhấp vào nút “Dùng thử”. Add Javascript in the TagsNếu tập lệnh của bạn cần chạy tại một điểm cụ thể trong bố cục trang web của bạn, bạn sẽ cần chèn tập lệnh đó tại điểm mà tập lệnh sẽ gọi hàm. Vị trí thường nằm trong phần . Trong mã mẫu này từ W3School, hàm JS được đặt trong section of the HTML document:
Khi bạn chạy mã trên trình chỉnh sửa HTML miễn phí của W3Schools, bạn sẽ thấy hàm được gọi khi nhấp vào nút “Dùng thử”. Cách bao gồm JavaScript bên ngoài trong HTMLNếu tập lệnh của bạn lớn hoặc bạn cần trải rộng tập lệnh đó trên nhiều trang web, thông thường bạn sẽ thêm mã JS vào một hoặc nhiều tệp JavaScript được tham chiếu trong tài liệu HTML. Sử dụng các tệp JS riêng biệt cho phép các nhà phát triển tách phần đánh dấu HTML khỏi mã JS, tránh mọi nhầm lẫn. Nó cũng làm cho việc bảo trì liên tục trở nên dễ dàng hơn và cho phép các trang web tải nhanh hơn khi lưu các tệp JS vào bộ đệm. Đây là tập lệnh JS bên ngoài mẫu do W3School cung cấp.
Để sử dụng tập lệnh bên ngoài này, bạn cần thêm tên của tệp tập lệnh vào thuộc tính src (nguồn) của .
|
