Trang chủ » Blog » [Thực hành] Sự kiện bàn phím- Codegym.vn

[Thực hành] Sự kiện bàn phím- Codegym.vn

bởi CodeGym | 26/12/2023 17:16 | Bài thực hành | Blog

Mục tiêu

Luyện tập xử lý sự kiện bàn phím – xem video tại: https://drive.google.com/file/d/1rM67hy5Q2OfuayPzp4t0_ku7srMDD5a2/view

Mô tả- sự kiện bàn phím

Di chuyển hình ảnh nhân vật Nobita lên, xuống, sang trái, sang phải sử dụng các phím tương ứng. Việc này được thực hiện bằng cách thay đổi thuộc tính tọa độ của thẻ khi xử lý event.

Sự kiện bàn phím

Để hoàn thành bài thực hành, bạn cần:

  • Đưa mã nguồn lên GitHub
  • Dán link của repository lên phần nộp bài trên CodeGymX

Các bước thực hiện

Bước 1: Chèn ảnh nobita.jpg vào

<img id="nobita" src="images/nobita.jpg" style="position:absolute;left:0; top:0;" height="100" width="80"/>

Bước 2: Xây dựng các hàm xử lý khi nhấn phím lên

function upArrowPressed() {
    let element = document.getElementById("nobita");
    element.style.top = parseInt(element.style.top) - 5 + 'px';
}

Bước 3: Xây dựng các hàm xử lý khi nhấn phím xuống

function downArrowPressed() {
    var element = document.getElementById("nobita");
    element.style.top = parseInt(element.style.top) + 5 + 'px';
}

Bước 4: Xây dựng các hàm xử lý khi nhấn phím sang trái

function leftArrowPressed() {
    var element = document.getElementById("nobita");
    element.style.left = parseInt(element.style.left) - 5 + 'px';
}

Bước 5: Xây dựng các hàm xử lý khi nhấn phím sang phải

function rightArrowPressed() {
    var element = document.getElementById("nobita");
    element.style.left = parseInt(element.style.left) + 5 + 'px';

}

Bước 6: Xây dựng các hàm nhận các phím

function moveSelection(evt) {
    switch (evt.keyCode) {
        case 37:
            leftArrowPressed();
            break;
        case 39:
            rightArrowPressed();
            break;
        case 38:
            upArrowPressed();
            break;
        case 40:
            downArrowPressed();
            break;
    }
}

Bước 7: Xây dựng hàm doReady()

function docReady() {
    window.addEventListener('keydown', moveSelection);
}

Bước 8: Gọi hàm doReady()

<body onload="docReady()">

Bước 9: Chạy chương trình. Sử dụng các phím lên-xuống-sang trái-sang phải để di chuyển ảnh và quan sát kết quả.

Trên đây CodeGym đã cùng với bạn luyện tập xử lý sự kiện bàn phím. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!

Download - Giáo trình thuật toán

11 + 6 =

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

2 + 2 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM