Mỗi hoạt động trong mô-đun này sẽ liên quan đến việc viết mã JavaScript. Bạn sẽ bắt đầu bằng cách viết một tập lệnh đơn giản, sau đó dần dần xây dựng tập lệnh đó, bổ sung thêm nhiều chức năng cho tập lệnh đó trong các bài học tiếp theo
Bắt đầu bằng cách mở javascript tệp danh mục đầu tư của bạn. html bằng trình soạn thảo văn bản ưa thích của bạn
Thêm mã JavaScript sau vào phần trên trang web của bạn
Đây là một chức năng rất đơn giản. Lưu ý rằng nó trông rất giống với các hàm showTop[] và showBottom[] của PHP đã được giải thích trong tài liệu Beyond HTML mà bạn đã học trong bài học trước. Hầu hết các ngôn ngữ lập trình hoặc viết kịch bản đều giống nhau, bao gồm cả PHP và JavaScript, nhưng có những khác biệt tinh tế trong cú pháp của chúng [các quy tắc về cách viết mã]. Một hàm hữu ích có nguồn gốc từ JavaScript là hàm alert[]. Chức năng này sẽ hiển thị văn bản trong hộp thoại bật lên trên màn hình
Trước khi chức năng này có thể hoạt động, trước tiên chúng ta phải gọi hàm showAlert[]. Các hàm JavaScript được gọi để phản hồi các sự kiện. Khi trang tải hoặc khi người dùng nhấp vào, di chuột qua hoặc tab đến một liên kết cụ thể, đây đều là các sự kiện. Chúng tôi có thể hướng dẫn JavaScript theo dõi các sự kiện này và nếu hoặc khi chúng xảy ra, hãy thực thi chức năng đã chỉ định
Ví dụ: giả sử chúng ta muốn thực thi hàm showAlert[] sau khi phần nội dung của trang web được tải đầy đủ. Một cách để làm điều đó là thêm thuộc tính onload vào phần tử của trang web của chúng tôi, như thế này
Hãy thử thêm phần trên vào trang web của bạn, sau đó tải trang và xem nó có hoạt động không. Nếu không, bạn có thể có một lỗi. Hãy chắc chắn rằng bạn đã nhập chính xác mọi thứ như nó xuất hiện, bao gồm cả cách viết hoa và dấu chấm câu. Các ngôn ngữ lập trình có thể rất kén chọn đối với những lỗi dường như nhỏ. [Bài sau sẽ nói kỹ hơn về debug]. Khi bạn đã làm việc, hãy chuyển sang phần tiếp theo
Biến
Như đã đề cập trong Ngoài HTML, một biến trong ngôn ngữ lập trình hoặc ngôn ngữ kịch bản là một tên tượng trưng đại diện cho một giá trị. Trong ví dụ PHP trước đây của chúng tôi, chúng tôi đã sử dụng biến $thisPage để kiểm soát các tính năng nhất định trong hàm showTop[]. Trong PHP, tên biến phải bắt đầu bằng $, nhưng đó không phải là trường hợp trong JavaScript. Hãy xem ví dụ sau, sử dụng một biến có tên myText để tùy chỉnh văn bản được hiển thị trong hộp cảnh báo
Hãy thử sửa đổi tập lệnh showAlert[] của bạn bằng thông báo cảnh báo tùy chỉnh của riêng bạn. Sau đó kiểm tra nó để chắc chắn rằng nó hoạt động
Sử dụng sự kiện title
Cho đến giờ trong bài học này, chúng ta đã gọi hàm showAlert[] khi phần nội dung của trang web được tải. Tuy nhiên, thay vào đó, chúng tôi có thể kích hoạt nó bằng các sự kiện khác. Ví dụ: chúng tôi có thể chỉ hiển thị cảnh báo nếu người dùng nhấp vào nút. Thử cái này
- Xóa thuộc tính onload="showAlert[]" khỏi phần tử
- Thêm phần tử HTML sau vào bất kỳ đâu trong nội dung trang web của bạn. Hiển thị cảnh báo
Mã mới này thêm một nút vào trang web của bạn. Nút bao gồm thuộc tính title, khiến showAlert[] được gọi khi người dùng nhấp vào nút. Sự kiện title cũng hoạt động cho người dùng bàn phím. Nếu người dùng điều hướng đến nút bằng phím tab, sau đó nhấn enter, điều đó cũng sẽ kích hoạt cảnh báo
Phương thức alert[] trong JavaScript được sử dụng để hiển thị hộp cảnh báo ảo. Nó chủ yếu được sử dụng để đưa ra một thông báo cảnh báo cho người dùng. Nó hiển thị hộp thoại cảnh báo bao gồm một số thông báo được chỉ định [không bắt buộc] và nút OK. Khi hộp thoại bật lên, chúng ta phải nhấp vào "OK" để tiếp tục
Hộp thoại cảnh báo lấy tiêu điểm và buộc người dùng đọc thông báo đã chỉ định. Vì vậy, chúng ta nên tránh lạm dụng phương pháp này vì nó ngăn người dùng truy cập vào các phần khác của trang web cho đến khi đóng hộp
Chúng ta có thể hiểu tính hữu ích của phương thức cảnh báo bằng một ví dụ. Giả sử chúng ta phải điền vào mẫu đơn xin chứng minh nhân dân. Nó hỏi về ngày tháng năm sinh để đủ điều kiện làm chứng minh nhân dân. Nếu đủ 18 tuổi trở lên thì tiếp tục quy trình. Ngược lại sẽ hiện thông báo độ tuổi dưới 18. Thông báo cảnh báo này là 'Hộp cảnh báo'
Một ví dụ khác là giả sử người dùng được yêu cầu điền vào biểu mẫu trong đó một số trường bắt buộc được yêu cầu nhập một số văn bản, nhưng người dùng quên cung cấp thông tin đầu vào. Là một phần của quá trình xác thực, chúng ta có thể sử dụng hộp thoại cảnh báo để hiển thị thông báo cảnh báo liên quan đến việc điền vào trường văn bản
Thay vì hiển thị các cảnh báo hoặc lỗi, hộp thoại cảnh báo có thể được sử dụng cho các thông báo thông thường như 'chào mừng trở lại', 'Xin chào XYZ', v.v.
cú pháp
giá trị
thông điệp. Đó là một chuỗi tùy chọn chỉ định văn bản sẽ hiển thị trong hộp cảnh báo. Nó bao gồm thông tin mà chúng tôi muốn hiển thị cho người dùng
Hãy xem một số ví dụ về phương thức cảnh báo [] của JavaScript
Ví dụ 1
Trong ví dụ này, có một hộp thoại cảnh báo đơn giản với một thông báo và một nút OK. Ở đây, có một nút HTML được sử dụng để hiển thị hộp cảnh báo. Chúng tôi đang sử dụng thuộc tính title và gọi hàm fun[] trong đó cảnh báo[] được xác định
Kiểm tra nó ngay bây giờđầu ra
Sau khi nhấp vào nút, đầu ra sẽ là -
Ví dụ2
Trong ví dụ này, có một hộp thoại cảnh báo với thông báo và nút OK. Tại đây, hộp cảnh báo hiển thị URL của trang tương ứng. URL được xác định bằng cách sử dụng cảnh báo [vị trí. tên máy chủ];