Đặ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

hàm 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) src của


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 body của bạn

Đâ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

    
        
                
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

JavaScript là một ngôn ngữ lập trình chúng ta có thể sử dụng để làm cho một trang web tương tác. Khi chúng tôi tìm kiếm thứ gì đó trên Google hoặc nhấp vào một liên kết, trang web của chúng tôi sẽ thay đổi — đó là điều mà JavaScript cho phép chúng tôi thực hiện

Đầu tiên, chúng ta sẽ sử dụng Sublime để tạo chỉ mục. html với thông tin soạn sẵn thông thường và chúng tôi cũng sẽ tạo một nút nhanh ở đây trong thẻ body của chúng tôi

Chúng tôi sẽ xem trang và có nút của chúng tôi

Sau đó, chúng ta sẽ tạo một thư mục js và đặt một tệp có tên là script. js bên trong nó - tên này là quy ước. Tiếp theo, chúng tôi sẽ liên kết tệp JS này với mã của chúng tôi giống như chúng tôi đã làm cho khung CSS và bootstrap trong các hướng dẫn trước. Nó sẽ đi vào bên trong thẻ đầu của chúng tôi

Và bây giờ chúng ta có JavaScript. Hiện tại sẽ không có gì khác biệt, nhưng chúng tôi đã thiết lập và sẵn sàng viết mã. Bây giờ, giả sử chúng ta muốn tạo bất ngờ cho bạn của mình bằng một tin nhắn ẩn. Khi họ tải màn hình lần đầu tiên, chỉ có nút Bấm vào đây sẽ xuất hiện, nhưng nếu họ bấm vào nút này, thông báo ẩn sẽ tự hiển thị. Vì vậy, trước tiên, hãy tạo thông báo ẩn này và chúng tôi sẽ thêm một chút CSS để ẩn thông báo lúc đầu…

Bây giờ làm mới trang, chúng tôi thấy rằng mặc dù chúng tôi đã viết phần tử này bằng mã nhưng nó bị ẩn vì chúng tôi đặt thuộc tính hiển thị thành không

Tất cả những gì chúng tôi cần làm là viết JavaScript để khi chúng tôi nhấp vào nút, thông báo sẽ hiển thị, vì vậy chúng tôi sẽ chuyển đến tập lệnh của bạn. js và viết hàm. Để tạo một chức năng, chúng tôi sẽ viết chức năng từ khóa và sau đó là tên của chức năng - ở đây, đó là RevealMessage. Nếu chúng ta cần thêm các tham số vào hàm, thì chúng ta sẽ đặt các tham số đó vào giữa các dấu ngoặc đơn, nhưng chúng ta không cần phải lo lắng về điều đó ngay bây giờ vì vậy chúng ta sẽ không đặt bất cứ thứ gì vào bên trong. Sau đó, chúng ta có thể thêm phần thân của hàm — nó sẽ thực sự làm gì khi được gọi là RevealMessage(). Bên trong chức năng của chúng tôi, chúng tôi sẽ truy cập tài liệu biến (còn gọi là tài liệu HTML của chúng tôi) và sau đó lấy phần tử có id hiddenMessage (đoạn văn chúng tôi đã tạo trước đó). Tiếp theo, chúng ta sẽ truy cập vào kiểu của phần tử này, hay nói cách khác là CSS và đặt thuộc tính hiển thị của nó thành giá trị 'khối'

Bây giờ, chúng tôi có chức năng này RevealMessage, nhưng nó chưa được kết nối với nút. Quay trở lại HTML của chúng tôi, chúng tôi sẽ thêm thuộc tính onclick vào nút của chúng tôi và cung cấp cho nó giá trị của RevealMessage. Về cơ bản, điều này nói rằng hãy chạy chức năng RevealMessage khi nhấp vào nút này

Đang làm mới trang, hãy kiểm tra điều này. Khi chúng tôi nhấp vào nút, thông báo được hiển thị

Chúng tôi chỉ sử dụng JavaScript để thao tác giá trị của thuộc tính hiển thị, nhưng điều này có thể hoạt động với hầu hết mọi thuộc tính trong CSS. Chúng tôi có thể sử dụng JavaScript để thay đổi hình ảnh hoặc màu nền hoặc bất kỳ thứ gì dựa trên hành động của người dùng

Mặc dù điều này có vẻ thú vị, nhưng Thao tác CSS không phải là điều duy nhất mà JavaScript có thể làm. Chúng tôi cũng có thể thêm bộ đếm ngược cho kỳ nghỉ này để mỗi lần người dùng nhấn nút đếm ngược, ngày nghỉ sẽ đến gần hơn. Quay trở lại mã, chúng tôi sẽ thêm một nút có id CountDownButton và hành động onclick CountDown()

Tiếp theo, chúng ta sẽ tạo một div và đặt các thuộc tính style và id này từ đoạn văn trên div để thông báo và bộ đếm ngược đều bị ẩn

Chuyển sang JavaScript để làm cho bộ đếm ngược hoạt động, chúng ta sẽ viết hàm từ khóa và đặt tên cho hàm là đếm ngược. Một lần nữa, chúng tôi sẽ không cung cấp cho nó tham số nào và chuyển sang triển khai phương thức của chúng tôi. Chúng ta sẽ tạo một biến với từ khóa var và đặt tên là currentVal. Giá trị của nó sẽ là văn bản của phần tử có id CountDownButton, giá trị này có thể được truy xuất bằng thuộc tính InternalHTML. Sau đó, chúng ta sẽ có một biến khác gọi là newVal và cung cấp cho nó giá trị của currentVal trừ đi 1 — đây là cách chúng ta đếm ngược. Tiếp theo, chúng ta sẽ đặt văn bản của CountDownButton thành giá trị mới bằng cách lấy nó bằng hàm getElementById và đặt thuộc tính innerHTML của nó thành newVal

Thao tác này sẽ cho chúng tôi đếm ngược và làm mới trang… Chúng tôi có nút đếm ngược

Tuy nhiên, bạn có thể nhận thấy rằng đôi khi bộ đếm ngược của chúng tôi xuống dưới 0. Để ngăn chặn điều này, chúng ta có thể thêm một thứ gọi là câu lệnh if. Về cơ bản, chúng tôi sẽ nói rằng giá trị mới mặc định cho nút bằng 0, nhưng nếu giá trị hiện tại của nút là 1 hoặc cao hơn, thì chúng tôi sẽ trừ (đếm ngược) một và để giá trị đó là giá trị mới cho nút. Nếu không, giá trị của nút sẽ bằng 0, giá trị mặc định

Làm mới trang, bây giờ chúng tôi có bộ đếm ngược hợp lý và không xuống dưới 0

Đó là phần giới thiệu về JavaScript và cách nó có thể làm cho trang web của bạn tương tác. Ở đây, chúng tôi đã viết vanilla JavaScript, nghĩa là chúng tôi không sử dụng thêm bất kỳ thư viện nào trong mã của mình. Tuần tới, chúng ta sẽ tìm hiểu về thư viện JavaScript có tên là jQuery và cách thư viện này có thể giúp chúng ta làm mọi việc dễ dàng hơn một chút. Hẹn gặp lại