18/12/2019 01:53:15 PM

Lập trình

Bài 01: GIỚI THIỆU TỔNG QUAN VỀ LẬP TRÌNH JAVASCRIPT (tt)

Xây dựng trang Web mẫu

Giờ ta đã trải qua JavaScript cơ bản, hãy thêm vài tính năng ngầu bá cháy vào trang web mẫu của chúng ta nào.

Thêm bộ chuyển ảnh

Trong phần này, ta sẽ thêm thêm ảnh vào trang của mình bằng cách sử dụng vài tính năng của DOM API, dùng JavaScript để chuyển đổi giữa hai ảnh khi được click.

Trước tiên, tìm một ảnh khác mà bạn muốn đặt trên trang của mình. Đảm bảo nó bằng hoặc gần với kích cỡ với ảnh ban đầu.
Lưu hình ảnh này trong thư mục images.
Thay tên cho ảnh thành 'firefox2.png' (không có nháy).
Đi tới tệp main.js, và nhập vào đoạn JavaScript sau. (Nếu đống "hello world" vẫn còn đấy, xoá nó đi.)

var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}

}

Lưu tất cả các tệp tin và mở index.html trên trình duyệt. Giờ khi bạn click hình ảnh, nó sẽ lật qua lại giữa hai hình!

Bạn lưu tham chiếu tới hình ảnh của mình trong biến myImage. Kế đến, bạn tạo hàm không tên cho thuộc tính xử lý sự kiện onclick của biến này. Giờ thì bất cứ khi nào hình ảnh được click:

Bạn lấy ra giá trị của thuộc tính src trên ảnh của mình.
Bạn dùng điều kiện để kiểm tra xem giá trị của src có bằng giá đường dẫn tới hình ảnh ban đầu không:
1. Nếu có, bạn thay đổi giá trị src thành đường dẫn của hình ảnh thứ hai, ép hình ảnh tải lại trong phần tử .
2. Nếu không (tức là nó đã bị thay đổi), giá trị src vòng lại đường dẫn ban đầu, trở về trạng thái ban đầu.

Thêm lời chào cá nhân hoá

Kế đến ta sẽ viết thêm vài dòng code, thay đổi tiêu đề trang thành lời chào cá nhân hoá khi người dùng lần đầu chuyển hướng tới trang. Lời chào này sẽ tồn tại mãi, kể cả khi người dùng ra khỏi trang và quay lại — ta sẽ lưu lại nó bằng cách sử dụng Web Storage API. Ta cũng sẽ thêm lựa chọn thay đổi người dùng, và vì thế, lời chào sẽ ở đó bất cứ khi nào cần tới.

Trong index.html, thêm dòng sau ngay trước phần tử

Lập trình

video