- vừa được xem lúc

Vanilla JS Project: Tính tuổi

0 0 48

Người đăng: kentrung

Theo Viblo Asia

1. Yêu cầu

Yêu cầu bài toán là người dùng nhập năm sinh vào ô input, khi click vào button thì tính tuổi của họ. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học Javascript.

2. HTML - CSS

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Vanilla JS Project: tính tuổi</title> <!-- bootstrap css 4.5.0 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
</head>
<body> <div class="container"> <h1 class="mt-5 mb-3">Nhập năm sinh của bạn</h1> <div class="input-group mb-3"> <input type="text" class="form-control"> <div class="input-group-append"> <button class="btn btn-primary">Tính tuổi</button> </div> </div> <p id="result1"></p> <p id="result2"></p> <p id="result3"></p> </div> <script> // code javascript </script>
</body>
</html>

3. Hướng giải quyết chính

  • Lấy ra năm hiện tại
  • Lấy năm sinh mà người dùng nhập vào
  • Tính tuổi = năm hiện tại - năm sinh
  • In kết quả

4. Javascript

  • Step 1: Đặt biến để lưu các thẻ html mình cần, ở đây gồm có input để lấy năm sinh, button để click và các thẻ html để in kết quả
  • Step 2: Lắng nghe sự kiện click của thẻ button
  • Step 3: Lấy ra năm hiện tại (currentYear)
  • Step 4: Lấy năm sinh người dùng nhập vào (birthYear), lưu ý những giá trị này là string nên cần chuyển sang number
  • Step 5: Tính tuổi = currentYear - birthYear
  • In kết quả
  • Dưới đây là toàn bộ code JS
// step 1
const ipnElement = document.querySelector('input')
const btnElement = document.querySelector('button')
const resultElement1 = document.querySelector('#result1')
const resultElement2 = document.querySelector('#result2')
const resultElement3 = document.querySelector('#result3') // step 2
btnElement.addEventListener('click', function() { // step 3 const currentYear = new Date().getFullYear() // step 4 const birthYear = Number(ipnElement.value) // step 5 const age = currentYear - birthYear // step 6 resultElement1.innerHTML = `Năm hiện tại: ${currentYear}` resultElement2.innerHTML = `Năm sinh: ${birthYear}` resultElement3.innerHTML = `Tuổi của bạn: ${currentYear} - ${birthYear} = ${age} tuổi`
})

5. Yêu cầu nâng cao

Ở trên cơ bản chúng ta đã giải quyết xong bài toán nhưng vẫn còn nhiều thứ cần được hen đồ (handle)

Bug 1:

  • Năm hiện tại: 2020
  • Input: không nhập gì cả và click luôn vào button
  • Kết quả: 2020 - NaN = NaN tuổi
  • Nguyên nhân: người dùng không nhập giá trị gây ra lỗi
  • Mong đợi kết quả: Vui lòng nhập năm sinh của bạn.

Bug 2:

  • Năm hiện tại: 2020
  • Nhập input: 3000
  • Kết quả: 2020 - 3000 = -980 tuổi
  • Nguyên nhân: năm sinh người dùng nhập vào lớn hơn năm hiện tại gây ra lỗi
  • Mong đợi kết quả: Năm sinh không được lớn hơn năm hiện tại, vui lòng nhập lại.

Bug 3:

  • Năm hiện tại: 2020
  • Nhập input: -1000
  • Kết quả: 2020 - - 1000 = 3020 tuổi
  • Nguyên nhân: năm sinh người dùng nhập vào là số âm
  • Mong đợi kết quả: Năm sinh không được nhỏ hơn 0, vui lòng nhập lại.

Bug 4:

  • Năm hiện tại: 2020
  • Nhập input: 1020
  • Kết quả: 2020 - 1020 = 1000 tuổi
  • Nguyên nhân: theo ý kiến chủ quan của mình thì chưa thấy ai trên 150 tuổi cả nên trường hợp này cho vào lỗi
  • Mong đợi kết quả: Hệ thống chỉ ghi nhận người tối đa là 150 tuổi, vui lòng nhập lại.

Bug 5:

  • Năm hiện tại: 2020
  • Nhập input: kentrung
  • Kết quả: 2021 - NaN = NaN tuổi
  • Nguyên nhân: người dùng nhập không đúng định dạng
  • Mong đợi kết quả: Năm sinh không đúng định dạng, vui lòng nhập lại.

Bug n: ...

Nói chung ở step 4 chúng ta mới chỉ lấy dữ liệu từ input và chuyển nó thành kiểu number để tính toán, sẽ cần có step 4.5 làm nhiệm vụ kiểm tra tính hợp lệ của dữ liệu, không nên tin bất cứ cái gì người dùng nhập vào, đủ các thứ linh tinh hổ lốn, trên rắn dưới nát, thập cẩm lòng mề... Trường hợp nhập đúng năm chỉ là happy case mà thôi.


Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 495

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 134

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 117

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 93

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 228