Những hướng dẫn này sẽ giúp bạn tạo một tệp JavaScript, thêm nó vào trang web của bạn và kiểm tra xem nó có hoạt động không

1. Tạo một tệp JavaScript

Trong dự án của bạn, trong cùng thư mục với trang index.html của bạn, hãy tạo một tệp mới có tên là my-project.js. Tất cả mã JavaScript của dự án của bạn phải được viết bằng tệp .js

2. Thêm một số mã kiểm tra vào tệp

Trong tệp mới của bạn my-project.js, hãy thêm mã bên dưới

console.log['It works!'];

Mã này sẽ hiển thị thông báo “Nó hoạt động. ” trong cửa sổ đầu ra dành cho nhà phát triển của trình duyệt mà chúng tôi sẽ sớm xem xét

3. Thêm tệp vào trang web của bạn

Trong tệp index.html của bạn, hãy thêm thẻ script để tải JavaScript mới của bạn. Thẻ script phải là dòng mã cuối cùng trước thẻ đóng

Đây là dòng bạn cần thêm

Và đây là một tệp HTML ví dụ bao gồm dòng mới

    
        Example Page
                
Welcome to my Example Page        
This is some page content.            

4. Lưu tệp của bạn

Đảm bảo rằng bạn đã lưu tất cả các tệp của mình, đặc biệt là my-project.js mới và các thay đổi của bạn đối với index.html

5. Mở trang web trong Google Chrome

Trong trình duyệt thư mục của hệ điều hành bình thường, hãy tìm tệp index.html của bạn. Nhấp chuột phải vào tệp và chọn “Mở bằng Google Chrome”

6. Mở Bảng điều khiển dành cho nhà phát triển

Trong Chrome, nhấp vào menu tùy chọn ở trên cùng bên phải, trông giống như ba dấu chấm nhỏ. Chuyển đến Công cụ khác rồi nhấp vào Công cụ dành cho nhà phát triển

Trong công cụ dành cho nhà phát triển, hãy nhấp vào tab có tên Bảng điều khiển và bạn sẽ thấy thông báo của mình “Nó hoạt động. ”

Nếu không thấy thông báo, bạn cần kiểm tra lại xem mình đã làm đúng các bước chưa

Tóm tắt nhanh

Đây là tất cả các bước ở dạng đơn giản hóa

• Tạo một tệp JavaScript mới với một số mã kiểm tra
  3
• Tải tệp JavaScript bằng thẻ script trong HTML của bạn
• Sử dụng Công cụ dành cho nhà phát triển để kiểm tra xem thông báo có hiển thị không

Khi thông báo kiểm tra hiển thị thành công, bạn có thể thêm bất kỳ mã JavaScript nào khác mà bạn muốn vào tệp

Nhiều trang web sử dụng JavaScript để thêm các yếu tố động và nhập vai cho người xem. Một số nhà phát triển web có thể muốn tìm hiểu cách tạo các yếu tố và hiệu ứng tương tự cho các trang web của họ. Xem mã JavaScript cho một trang web giúp các nhà phát triển tìm hiểu và triển khai các yếu tố tương tự

Có hai cách chính để xem mã JavaScript được sử dụng trên trang web. Chọn từ danh sách bên dưới để tìm hiểu về từng phương pháp

Xem mã nguồn trang web

Một số trang web có JavaScript nội tuyến với phần còn lại của mã nguồn HTML. Các nhà phát triển web đôi khi thêm JavaScript trực tiếp vào HTML khi JavaScript đó chỉ được sử dụng trên một trang web

Đối với hầu hết các trình duyệt, để xem JavaScript nội tuyến trong mã nguồn HTML, hãy thực hiện một trong các thao tác sau

• Nhấn phím tắt Ctrl + U
• Nhấp chuột phải vào vùng trống trên trang web và chọn tùy chọn Xem nguồn trang hoặc tùy chọn tương tự trong menu bật lên

Using either method above, the HTML source code is displayed. To find inline JavaScript code, look for a tag, denoting the start of the JavaScript.

Mẹo

Nếu JavaScript được chứa trong một. js, tất cả các trình duyệt hiện đại đều tạo URL cho. js gửi một siêu liên kết. nhấp vào. siêu liên kết URL js mở JavaScript trong cửa sổ nguồn

Mẹo

Để biết thêm thông tin về cách xem mã nguồn trang web, hãy xem. Cách xem mã nguồn HTML của trang web

Kiểm tra các thành phần trang web

Nếu JavaScript được sử dụng trên nhiều trang web, nó thường được tham chiếu trong mã HTML thông qua một liên kết đến một. js chứa JavaScript. Sử dụng một. js cho phép nhà phát triển web thay đổi mã JavaScript một lần và áp dụng nó cho tất cả các trang web của họ

Đặt tập lệnh ở dưới cùng của phần tử sẽ cải thiện tốc độ hiển thị, vì việc giải thích tập lệnh làm chậm màn hình

JavaScript bên ngoài

Tập lệnh cũng có thể được đặt trong các tệp bên ngoài

tệp bên ngoài. myScript. js

function myFunction[] {
  tài liệu. getElementById["bản trình diễn"]. innerHTML = "Đoạn đã thay đổi. ";
}

Tập lệnh bên ngoài là thực tế khi cùng một mã được sử dụng trong nhiều trang web khác nhau

Các tệp JavaScript có phần mở rộng tệp. js

Để sử dụng tập lệnh bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính [nguồn]

Làm cách nào để chèn JavaScript vào một trang?

Tại sao chúng tôi sử dụng JavaScript trong các trang đã sử dụng?

Làm cách nào để chạy JavaScript trên Mac?

JavaScript có được sử dụng để tạo kiểu cho các trang HTML không?