Cách liên kết js với HTML trong vscode

Trong hướng dẫn ngắn này, bạn sẽ học cách chạy JavaScript trong Visual Studio Code. Có ba cách để bạn có thể chạy JavaScript trong trình soạn thảo văn bản và để làm được điều đó, vui lòng chọn cách phù hợp nhất với bạn

Nội dung chính Show

Phương pháp 1. Sử dụng thẻ tập lệnh HTML
Phương pháp 2. Sử dụng nút. js
Phương pháp 3. Sử dụng phần mở rộng Code Runner
Liên kết với tệp JavaScript bên ngoài
Vị trí của các thẻ <script>
JavaScript nhúng
Thuộc tính <script src="myExternalFile.js"></script>0
Làm cách nào để kết nối js với HTML vscode?
Làm cách nào để thêm JavaScript vào HTML?
Làm cách nào để chạy JavaScript trong HTML?

Phương pháp 1. Sử dụng thẻ tập lệnh HTML

Cách đơn giản nhất để chạy JavaScript trong VS Code là tạo một tệp HTML. Phương pháp này rất đơn giản vì bạn chỉ cần Mã VS và trình duyệt bạn chọn để xem kết quả đầu ra JavaScript. Đây là cách bạn sẽ làm điều đó

Tạo tệp HTML trong Mã VS và bên trong tệp, thêm các thẻ script. Bạn có thể viết mã JavaScript bên trong các thẻ script
Lưu các thay đổi và sau đó mở tệp HTML trong trình duyệt
Trong trình duyệt, mở cửa sổ kiểm tra bằng cách nhấp chuột phải và chọn tùy chọn Kiểm tra. Bạn cũng có thể mở nó bằng cách nhấp vào phím Ctrl + Shift + I cho Windows hoặc Cmd + Option + I cho Mac
Trong Cửa sổ kiểm tra, hãy nhấp vào tab Bảng điều khiển và đây là nơi bạn có thể xem kết quả đầu ra của JavaScript

Nhược điểm duy nhất của việc sử dụng phương pháp này là bạn sẽ liên tục chuyển đổi giữa trình duyệt và cửa sổ Mã VS. Trừ khi bạn đang làm việc trên các cửa sổ nhỏ hơn hoặc có hai màn hình điều khiển, điều này sẽ gây bất tiện cho bạn một chút

Phương pháp 2. Sử dụng nút. js

Một cách khác để chạy JavaScript trong VS Code là sử dụng Node. js. Phương pháp này sẽ cho phép bạn chạy các tệp JavaScript trực tiếp trên thiết bị đầu cuối của trình soạn thảo văn bản và không cần phải chuyển đổi các cửa sổ như trong phương pháp 1. Dưới đây là các bước để chạy JavaScript với Node. js

Tải xuống và cài đặt Nút. js trên máy tính của bạn
Mở tệp JavaScript mà bạn muốn chạy nó
Mở thiết bị đầu cuối của VS Code bằng cách nhấp vào Terminal > New Terminal hoặc nhấp vào phím Ctrl + Shift + ` (Cmd + Shift + P cho Mac)
Trong thiết bị đầu cuối, nhập node file_name.js trong đó file_name.js là tên tệp JavaScript của bạn. Ví dụ: nếu tên tệp của bạn là ứng dụng. js, hãy viết node app.js, nhấp vào phím enter để xem đầu ra JavaScript

Phương pháp 3. Sử dụng phần mở rộng Code Runner

Nếu bạn không thích chạy JavaScript thủ công, bạn có thể sử dụng Tiện ích mở rộng Code Runner. Tuy không cần cấu hình gì nhưng vẫn phải cài đặt Node. js trên máy tính của bạn. Để chạy JavaScript trên Tiện ích mở rộng Code Runner

Để liên kết tệp JavaScript với tài liệu HTML, hãy sử dụng thẻ <script>. Bạn cũng có thể sử dụng thẻ này để nhúng mã JavaScript vào tài liệu HTML

Liên kết với tệp JavaScript bên ngoài

Để liên kết đến một tệp JavaScript bên ngoài, hãy sử dụng <script src="myExternalFile.js"></script> trong đó myExternalFile. js là vị trí của tệp bên ngoài

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Ví dụ trên liên kết đến một tệp JavaScript bên ngoài. Vị trí của tệp JavaScript được cung cấp dưới dạng giá trị cho thuộc tính src. Khi tệp HTML tải, tệp JavaScript cũng được tải

Vị trí của các thẻ <script>

Các tệp JavaScript bên ngoài thường được liên kết từ tài liệu <head> nhưng đây không phải là yêu cầu. Bạn cũng có thể đặt liên kết trong phần tử script0 của tài liệu. Trên thực tế, ngày càng có nhiều nhà phát triển liên kết đến các tệp JavaScript của họ từ cuối tài liệu HTML (ngay trước thẻ đóng script1) vì lý do hiệu suất. Làm điều này cho phép tải phần còn lại của trang HTML mà không cần phải đợi tài nguyên JavaScript bên ngoài được tải xuống trước

Tuy nhiên, có thể đôi khi việc đặt nó trong <head> sẽ phù hợp hơn (ví dụ: nếu JavaScript cần có sẵn cho trang khi nó đang tải)

JavaScript nhúng

Bạn cũng có thể sử dụng phần tử <script> để nhúng mã JavaScript vào trang HTML

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Ví dụ thứ hai này sử dụng chính xác JavaScript giống như ví dụ đầu tiên (chỉ văn bản đã thay đổi). Sự khác biệt duy nhất là JavaScript hiện được nhúng vào tài liệu HTML, thay vì được đặt trong một tệp bên ngoài

Một lần nữa, điều này không nhất thiết phải có trong phần tử <head> — nó có thể nằm ở bất kỳ đâu trong tài liệu HTML

Thuộc tính <script src="myExternalFile.js"></script>0

Bạn có thể sử dụng thuộc tính ________ 60 để nêu rõ loại tập lệnh. Nếu bạn bỏ qua thuộc tính này, tập lệnh sẽ được coi là JavaScript. Vì vậy, không cần sử dụng thuộc tính này nếu tập lệnh bằng JavaScript

Nếu tập lệnh không được viết bằng JavaScript, bạn nên sử dụng thuộc tính <script src="myExternalFile.js"></script>0 để nêu rõ loại tập lệnh