Đây là phương pháp được sử dụng nhiều nhất và ưa thích trong số ba phương pháp. Trong phương pháp này, chúng tôi xác định các tập lệnh trong một tệp riêng biệt và liên kết chúng bằng thuộc tính src của thẻ tập lệnh trong phần đầu của tài liệu HTML. Loại phải được đặt thành text\javascript. Tệp javascript bên ngoài sẽ có một. tiện ích mở rộng js Tôi thường cấu trúc các dự án của mình như thế này Show
sử dụng điều này để kiểm tra trước khi tôi bắt đầu bất kỳ phát triển nào, theo cách đó tôi biết mọi thứ được kết nối HTML
CSS
JavaScript
cung cấp cho cái này Để bao gồm tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script có thuộc tính
Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn Tệp JavaScriptTệp JavaScript không phải là tệp HTML hoặc tệp CSS
Theo thông lệ, đặt tất cả các tệp JavaScript vào một thư mục có tên là js trên các trang web, như vậy Bản demo đơn giản bao gồm JavaScriptDưới đây là minh họa rất đơn giản về cách đưa tệp JavaScript bên ngoài vào trang HTML JavaScript của người khácĐối với lớp này, bạn không cần phải viết bất kỳ mã JavaScript thực tế nào. Thật may mắn cho bạn, nhiều người đã viết rất nhiều JavaScript và thậm chí còn cho phép bạn sử dụng nó miễn phí Khung JavaScriptFramework về cơ bản là một thư viện mã cho một ngôn ngữ nhất định. Nói chung, khung trừu tượng hóa các tác vụ phổ biến và giúp các nhà thiết kế và nhà phát triển viết mã cụ thể của họ dễ dàng và nhanh hơn. Các khung không thực sự tự làm bất cứ điều gì, chúng chỉ cung cấp một nền tảng dễ dàng hơn để mọi người xây dựng trên đó Khung JavaScript phổ biến Trong số các khung này, JQuery hiện là khung phổ biến nhất. Đó cũng là từ mà bạn muốn gặp nhất khi được sử dụng như một từ thông dụng Kích thước tệp JavaScriptNhiều tệp JavaScript có xu hướng khá lớn, điều này có thể làm chậm thời gian tải trang của bạn. Các khung phổ biến thường cung cấp phiên bản mã "rút gọn" của chúng. Bạn phải luôn sử dụng phiên bản này trong các trang của mình vì phiên bản này sẽ có kích thước tệp nhỏ hơn Có nhiều cách để gọi một hàm JavaScript trong tài liệu HTML và đây cũng không phải là một nhiệm vụ khó khăn. Đầu tiên, chúng tôi đã sử dụng một trong những cách dễ nhất để gọi hàm JavaScript trong tài liệu HTML Trong phương pháp này, chúng ta sẽ tạo và định nghĩa một hàm trong phần đầu của tài liệu HTML. Để gọi hàm này trong tài liệu html, chúng ta phải tạo một nút đơn giản và sử dụng thuộc tính sự kiện onclick (là trình xử lý sự kiện) cùng với nó, chúng ta có thể gọi hàm bằng cách nhấp vào nút Để hiểu rõ hơn ta xem chương trình đã cho Chương trình Thuyết minh chương trình Trong chương trình đã cho ở trên, chúng tôi đã tạo một tài liệu HTML đơn giản. Bên trong phần đầu của tài liệu HTML, chúng ta đã định nghĩa một hàm (e. g myfunction();) bên trong các thẻ script Mặt khác, bên trong phần nội dung, chúng tôi đã hiển thị một số văn bản và tạo một nút. Để gọi chức năng của chúng tôi, chúng tôi đã sử dụng thuộc tính onclick cùng với nút và khi người dùng nhấp vào nút đó, chức năng của chúng tôi sẽ được thực thi và hiển thị thông báo cảnh báo, như bạn có thể thấy trong đầu ra đầu ra Gọi một hàm bằng tệp JavaScript bên ngoàiChúng tôi cũng có thể gọi các hàm JavaScript bằng tệp JavaScript bên ngoài được đính kèm với tài liệu HTML của chúng tôi. Để làm điều này, trước tiên chúng ta phải tạo một tệp JavaScript và xác định chức năng của chúng ta trong đó và lưu nó với (. Js) tiện ích mở rộng Khi tệp JavaScript được tạo, chúng ta cần tạo một tài liệu HTML đơn giản. Để đưa tệp JavaScript của chúng tôi vào tài liệu HTML, chúng tôi phải sử dụng thẻ script. Vì chúng tôi đã lưu trữ tài liệu HTML và tệp JavaScript trong cùng một thư mục nên chúng tôi chỉ đặt tên tệp JavaScript của mình trong thuộc tính "scr" thay vì cung cấp đường dẫn đầy đủ trong phần đầu Bên trong phần nội dung, chúng tôi đã hiển thị một số văn bản và tạo một nút. Để gọi chức năng của chúng tôi, chúng tôi đã sử dụng thuộc tính onclick cùng với nút và khi người dùng nhấp vào nút đó, chức năng của chúng tôi sẽ được thực thi và hiển thị thông báo cảnh báo, như bạn có thể thấy trong đầu ra Tại sao tệp js của tôi không hoạt động trong HTML?Nếu mã JavaScript của bạn không hoạt động, điều đầu tiên bạn nên làm là kiểm tra thẻ . Khi bạn đưa JavaScript vào tài liệu HTML của mình bằng thẻ
Làm cách nào để gọi tệp JavaScript trong HTML?Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với thuộc tính src . Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ
Tại sao tập lệnh bên ngoài của tôi không hoạt động trong HTML?Rất có thể, vấn đề là do bạn đang đưa tệp js của mình vào thẻ đầu hoặc ở đâu đó phía trên nội dung chính của bạn . Bằng cách này, bạn đang thực thi mã js của mình trước khi nội dung html đầy đủ được đính kèm. Kết quả là khi mã js của bạn thực thi, nó không nhận ra bất kỳ phần tử html nào vì không có bất kỳ phần tử nào.
Tại sao JavaScript của tôi không hiển thị?Trong phần "Cài đặt", nhấp vào "Hiển thị cài đặt nâng cao. " Trong phần "Quyền riêng tư", nhấp vào "Cài đặt nội dung. ". Khi cửa sổ hộp thoại mở ra, hãy tìm phần "JavaScript" và chọn "Cho phép tất cả các trang web chạy JavaScript (được khuyến nghị)". Nhấp vào nút "OK" để đóng nó |