Không gì bằng thực hành. Chúng ta sẽ cùng nhau tạo một chương trình Javascript đơn giản.
Chương trình đầu tiên của chúng ta sẽ phác họa sự tương tác, "hỏi" và "trả lời" của Javascript như phần trước chúng ta đã thảo luận.Chúng ta sẽ tạo một trang web có hình ảnh một bóng đèn. Khi chúng ta bấm chuột vào bóng đèn, nó sẽ sáng lên. Nếu chúng ta bấm chuột vào bóng đèn lần nữa, nó sẽ tắt.
Để có "nguyên vật vật liệu", chúng ta download hình ảnh bóng đèn miễn phí từ trang pixabay, lưu lại với tên light-on.png. Chúng ta sẽ coi hình ảnh vừa download là bóng đèn đang sáng. Để có bóng đèn đang tắt, chúng ta copy thêm một hình và đặt tên là light-off.png. Mở file light-off.png bằng chương trình Microsoft Paint.
Sau đó, chọn màu White => Chọn Fill
Di chuyển trỏ chuột vào vùng màu vàng của bóng đèn và bấm chuột, màu vàng sẽ chuyển thành màu trắng. Lưu lại thay đổi.
Chúng ta đã có đủ "nguyên vật liệu" là hình bóng đèn sáng (màu vàng) và bóng đèn tắt (màu trắng).
Để tiện, chúng tôi upload mọi hình ảnh lên Flickr. Chúng tôi sẽ upload light-on.png và light-off.png lên flickr. Bạn hoàn toàn có thể sử dụng bất cứ cách nào bạn thích, ví dụ upload lên 000webhost như chúng ta đã thảo luận trong phần HTML, CSS và Bootstrap.
Cấu trúc trang web đại khái thế này:
- Thẻ <script> cho mã JavaScript, thẻ <img> cho hình ảnh bóng đèn và thẻ <p> cho thông báo mô tả.
- Có một hàm JavaScript tên là TurnOnOff() được xác định trong thẻ <script>. Chức năng này chuyển đổi hình ảnh bóng đèn giữa trạng thái BẬT và TẮT.
- Thẻ <img> có thuộc tính id được đặt thành "image" và thuộc tính src của nó ban đầu được đặt thành URL hình ảnh trạng thái TẮT. Với hình trên Flickr của chúng tôi nó sẽ là: https://live.staticflickr.com/65535/53833689329_eb9eebf96c_c.jpg ;
- Hàm TurnOnOff() được gọi khi nhấp vào hình ảnh bóng đèn (onclick="turnOnOff()").
- Bên trong hàm TurnOnOff(), nguồn hiện tại của hình ảnh sẽ được kiểm tra. Nếu nó khớp với nguồn ở trạng thái BẬT, hình ảnh sẽ được chuyển sang trạng thái TẮT và ngược lại.
Đây là code HTML với Javascript nhúng bên trong.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đất Việt Lập Trình</title>
</head>
<body>
<script>
function turnOnOff() {
let image = document.getElementById('Image');
if (image.src.match("53832436677_3be85bc968_c"))
image.src = "https://live.staticflickr.com/65535/53833689329_eb9eebf96c_c.jpg";
else
image.src = "https://live.staticflickr.com/65535/53832436677_3be85bc968_c.jpg";
}
</script>
<img id="Image" onclick="turnOnOff()" src= "https://live.staticflickr.com/65535/53833689329_eb9eebf96c_c.jpg">
<p>
Bấm chuột vào hình bóng đèn để BẬT hoặc TẮT
</p>
</body>
</html>
Chúng ta sẽ sử dụng JSFiddle để thực thi. Truy cập vào JSFiddle, nhập code phía trên vào phần HTML. Bấm Run để thực thi. Sau đó bấm vào bóng đèn để Bật hoặc Tắt.
Vậy là chúng ta đã cùng nhau viết một chương trình Javascript đầu tiên.
Không có nhận xét nào:
Đăng nhận xét