Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo ứng dụng máy tính bỏ túi bằng Javascript

Tạo ứng dụng máy tính bỏ túi bằng Javascript


Ngày 3 Tháng 2 Năm 2020

Tạo ứng dụng máy tính bỏ túi bằng Javascript

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu cho các bạn xây dựng một ứng dụng máy tính bỏ túi bằng Javascript giúp các bạn có thể nắm rõ hơn và thực hành những thứ mình đã học về Javascript. Bây giờ hãy cùng nhau tìm hiểu nhé!

Việc đầu tiên là mình sẽ tạo file có cấu trúc thư mục như sau:

Máy Tính Bỏ Túi Javascript

Tiếp theo chúng ta sẽ tạo liên kết may_tinh.jsmay_tinh.css đến trang may_tinh.html bằng 2 dòng code sau đây:

  • Liên kết CSS: <link rel="stylesheet" type="text/css" href="may_tinh.css">
  • Liên kết Javascript: <script src="may_tinh.js"><script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Máy tính bỏ túi</title>
<link rel="stylesheet" type="text/css" href="may_tinh.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<script src="may_tinh.js"></script>
</body>
</html>

Bây giờ chúng ta thiết kế bố cục cho trang web với HTML và CSS. Để dễ hình dung các bạn xem hai đoạn code dưới đây nhé!

Thêm vào may_tinh.html:

<div id="may_tinh">
   <div id="ket_qua">
      <div id="ket_qua_cu">
         <p id="gia_tri_cu"></p>
      </div>
      <div id="xuat_ket_qua">
         <p id="gia_tri_xuat"></p>
      </div>
   </div>
   <div id="ban_phim"></div>
</div>

Thêm vào may_tinh.css:

body{
    font-family: Roboto;
     background: #373B44;
     background: -webkit-linear-gradient(to right, #4286f4, #373B44);
     background: linear-gradient(to right, #4286f4, #373B44);
}
#may_tinh{
    width:320px;
    height:520px;
    background-color: #eaedef;
    top:20px;
    margin:0 auto;
    position:relative;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#ket_qua{
    height: 120px;
}
#ket_qua_cu{
    text-align: right;
    height:20px;
    margin:0 20px;
    padding-top:20px;
    font-size:15px;
    color:#919191;
}
#xuat_ket_qua {
    text-align: right;
    height:60px;
    margin: 10px 20px;
    font-size: 30px;
}
#ban_phim{
    height: 400px;
}

Kết quả khi chúng ta chèn xong hai đoạn code trên là:

Hình Ảnh Code Máy Tính Bỏ Túi

Tiếp Theo chúng ta sẽ thêm những nút bàn phím cho máy tính bỏ túi của chúng ta bằng cách tạo những thẻ HTML trong trang may_tinh.html:

<div id="ban_phim"> 
    <button class="he_thong" id="xoa_tat_ca">C</button>
    <button class="he_thong" id="xoa_tung_so">CE</button>
    <button class="he_thong" id="%">%</button>
    <button class="he_thong" id="/">÷</button>
    <button class="con_so" id="7">7</button>
    <button class="con_so" id="8">8</button>
    <button class="con_so" id="9">9</button>
    <button class="he_thong" id="*">×</button>
    <button class="con_so" id="4">4</button>
    <button class="con_so" id="5">5</button>
    <button class="con_so" id="6">6</button>
    <button class="he_thong" id="-">-</button>
    <button class="con_so" id="1">1</button>
    <button class="con_so" id="2">2</button>
    <button class="con_so" id="3">3</button>
    <button class="he_thong" id="+">+</button>
    <button class="trong" id="trong"></button>
    <button class="con_so" id="0">0</button>
    <button class="trong" id="trong"></button>
    <button class="he_thong" id="=">=</button>
</div>

Kết quả sau khi nhập xong bàn phím là:

Hình Ảnh Thêm Code Nút Bàn Phím Máy Tính Bỏ Túi

Nhìn chưa được đẹp lắm bây giờ các bạn thêm đoạn code dưới đây vào may_tinh.css để giúp cho máy tính bỏ túi chúng ta sinh động và cuốn hút hơn nào!

.he_thong, .con_so, .trong {
    width:50px;
    height:50px;
    margin: 15px;
    float:left;
    border-radius: 50%;
    border-width: 0;
    font-weight:bold;
    font-size:16px;
}
.con_so, .trong{
    background-color: #eaedef;
}
.he_thong, .con_so{
    cursor: pointer;
}
.he_thong:active, .con_so:active {
    font-size: 13px;
}
.he_thong:focus, .con_so:focus, .trong:focus{
    outline: 0;
}
button:nth-child(4) {
    font-size: 20px;
    background-color: #20b2aa;
}
button:nth-child(8) {
    font-size: 20px;
    background-color: #ffa500;
}
button:nth-child(12) {
    font-size: 20px;
    background-color: #f08080;
}
button:nth-child(16) {
    font-size: 20px;
    background-color: #7d93e0;
}
button:nth-child(20) {
    font-size: 20px;
    background-color: #9477af;
}

Và đây là kết quả khi chúng ta chèn đoạn code trên và một số lưu ý nho nhỏ để các bạn có thể nắm được những CSS quan trọng với đoạn code mình mới thêm:

Hình Ảnh Thêm Màu Sắc Code Nút Bàn Phím Máy Tính Bỏ Túi

OK! Bây giờ chúng ta đã tạm ổn phần giao diện rồi tiếp theo thì hãy cùng mình giúp cái máy tính này có thể hoạt động bằng cách thêm các hàm vào trong may_tinh.js nhé!
Đầu tiên chúng ta cần xác định là phải lấy được giá trị cũ và giá trị xuất sau đó cứ mỗi lần tính toán xong thì sẽ cần một hàm thiết lập các giá trị mới đó vào hai id là gia_tri_cu và gia_tri_xuat thông qua bốn hàm như dưới đây:

function Lay_gia_tri_cu(){
    return document.getElementById("gia_tri_cu").innerText;
}
function In_gia_tri_cu(so) {
    document.getElementById("gia_tri_cu").innerText = so;
}
function Lay_ket_qua() {
    return document.getElementById("gia_tri_xuat").innerText;
}
function In_Ket_qua(so) {
     document.getElementById("gia_tri_xuat").innerText = so;
}

Khi các bạn chèn xong thì chúng ta có thể thử gọi hai hàm là In_Ket_qua(9999) và In_gia_tri_cu(81) để xem thử coi đoạn code của mình hoạt động không nhé!

Hình Ảnh Thiết Lập Giá Trị Nút Bàn Phím Máy Tính Bỏ Túi

Một vấn đề là khi ta viết 9999 thì nó sẽ cũng không có dấu phẩy để ngăn cách phần ngàn làm cho người dùng máy tính khó nhìn và dễ bị nhầm lẫn do vậy chúng ta cần code một hàm giúp định dạng lại số này như hình dưới đây:

function Dinh_dang_chuoi(so) {
     var n = Number(so);
     var gia_tri = n.toLocaleString("en");
     return gia_tri;
}

Lưu ý là hàm n.toLocaleString("en") là sẽ chuyển đổi số thành dạng chuỗi theo từng quốc gia mà mình muốn ở đây là thiết lập theo quốc gia US, UK. Để tìm hiểu rõ hơn các bạn có xem tham khảo thông qua trang web https://developer.mozilla.org/.Bây giờ chúng ta thử gọi lại hàm phía trên In_Ket_qua(Dinh_dang_chuoi(9999)), In_gia_tri_cu(Dinh_dang_chuoi(81)) để xem kết quả nhé!

Hình Ảnh Thiết Lập Định Dạng Số Máy Tính Bỏ Túi

Tiếp theo do kết quả hiển thị là dạng chuỗi nên khi tính toán trong hàm mà chúng ta cần xử lý với số nên ta sẽ tạo ta một hàm giúp đảo ngược lại định dạng từ chuỗi sang số:

function Xoa_Dinh_dang_chuoi(so) {
    return Number(so.replace(/,/g, ''))
}

Chúng ta dùng hàm replace để tìm kiếm dấu "," trong chuỗi và thay thế toàn bộ bằng chuỗi rỗng sau đó ta dùng hàm Number để chuyển kiểu dữ liệu từ chuỗi sang số. Để các bạn có thể nắm rõ từng bước và không bị rối thì mình sẽ cho các bạn xem những hàm mà mình đã code được cho tới giờ:

Hình Ảnh Code Máy Tính Bỏ Túi

Bây giờ thì chúng ta tiếp tục làm cho các nút hoạt động khi nhấn vào sẽ hiện thị lên màn hình máy tính. Bằng cách là lựa chọn ra những thành phần chứa class có tên là con_so bằng hàm getElementsByClassName. Sau khi đã có danh sách thì mình sẽ lặp qua tất cả các phần tử con và gán cho nó sự kiện là khi mà nhấn vào nút bàn phím trên máy tính bỏ túi thì id tương ứng với nút đó sẽ được hiện thị trên màn hình máy tính. Để nắm rõ hơn các bạn hãy nhìn đoạn code dưới đây nhé:

var con_so = document.getElementsByClassName('con_so');
for(var i=0; i<con_so.length; i++) {
    con_so[i].addEventListener('click', function() {
        var ket_qua = Xoa_Dinh_dang_chuoi(Lay_ket_qua())
        if(ket_qua != NaN) {
            ket_qua = ket_qua + this.id;
            In_Ket_qua(ket_qua)
        }
    })
}

Các bạn có thể xem kết quả của đoạn code trên ở video dưới đây:

Các bạn có để ý thấy là khi mình nhấn vào lần đầu tiên thì nó sẽ hiện thị số 0 2 còn các số còn lại là bình thường. Để khắc phục tình trạng này bạn thêm giúp mình vài dòng code dưới vào hàm In_Ket_qua nhé!

function In_Ket_qua(so) {
    if(so=="") {
        document.getElementById("gia_tri_xuat").innerText = so;
    } else {
        document.getElementById("gia_tri_xuat").innerText = Dinh_dang_chuoi(so);
    }
}

Cũng như ở trên chúng ta cũng sẽ lấy những thành phần chứa class có tên là he_thong và lặp qua các phần tử con để gán sự kiện và tạo các chức năng cho nó. Thì Việc đầu tiên ta sẽ tạo chức năng khi người dùng muốn xóa tất cả kết quả hiện có để trở về máy tính bỏ túi ban đầu bằng cách kiểm tra xem có phải nút có id=xoa_tat_ca đang được click không rồi sau đó gọi hai hàm với giá trị rỗng là In_Ket_qua(""); và In_gia_tri_cu("");. Để hiểu rõ các bạn hãy xem đoạn code dưới đây nhé!

var he_thong = document.getElementsByClassName('he_thong');
for(var i=0; i < he_thong.length; i++) {
    he_thong[i].addEventListener('click', function() {
        if(this.id == "xoa_tat_ca") {
            In_Ket_qua("");
            In_gia_tri_cu("");
        }
    })
}

Các bạn có thể xem kết quả đoạn code ở video dưới đây:

Tiếp đến là tạo ra chức năng giúp người dùng khi lỡ nhập sai một số thì họ có thể xóa nó đi và tiếp tục nhập số mà mình mong muốn. Để làm được thì ta cần chuyển đổi kết quả của người dùng từ kiểu số sang kiểu chuỗi bằng hàm toString() tiếp đến thì ta sẽ xóa phần tử cuối cùng trong kết quả bằng hàm substr(0, ket_qua.length -1). Để nắm rõ hơn các bạn xem đoạn code dưới đây nhé:

var he_thong = document.getElementsByClassName('he_thong'); 
for(var i=0; i < he_thong.length; i++) { 
    he_thong[i].addEventListener('click', function() { 
        if(this.id == "xoa_tat_ca") { 
            In_Ket_qua(""); 
            In_gia_tri_cu(""); 
        } 
        else if(this.id == "xoa_tung_so") { 
            let ket_qua = Xoa_Dinh_dang_chuoi(Lay_ket_qua()).toString(); 
            if(ket_qua) { 
                ket_qua = ket_qua.substr(0, ket_qua.length -1) 
                In_Ket_qua(ket_qua) 
            } 
        } 
    }) 

Các bạn có thể xem kết quả đoạn code ở video dưới đây:

Bây giờ chúng ta sẽ nối hai chuỗi kết quả cũ và kết quả xuất lại với nhau sau đó kiểm tra nếu mà id="=" thì dùng hàm eval() trong Javascript để chuyển đổi những biểu thức +, -, *, / từ chuỗi thành kết quả. Nghe hơi khó hiểu nhưng các bạn hãy xem đoạn code dưới đây để nắm rõ hơn nhé:

var he_thong = document.getElementsByClassName('he_thong'); 
for(var i=0; i < he_thong.length; i++) { 
    he_thong[i].addEventListener('click', function() { 
        if(this.id == "xoa_tat_ca") { 
            In_Ket_qua(""); 
            In_gia_tri_cu(""); 
        } 
        else if(this.id == "xoa_tung_so") { 
            let ket_qua = Xoa_Dinh_dang_chuoi(Lay_ket_qua()).toString(); 
            if(ket_qua) { 
                ket_qua = ket_qua.substr(0, ket_qua.length -1) 
                In_Ket_qua(ket_qua) 
            } 
        } 
        else { 
            var ket_qua = Lay_ket_qua(); 
            var ket_qua_cu = Lay_gia_tri_cu(); 
            if(ket_qua != "" ) { 
                ket_qua = Xoa_Dinh_dang_chuoi(ket_qua); 
                ket_qua_cu =ket_qua_cu + ket_qua; 
                if(this.id == "=") { 
                    var ket_qua_cuoi = eval(ket_qua_cu); 
                    In_Ket_qua(ket_qua_cuoi) 
                    In_gia_tri_cu("") 
                } else { 
                    ket_qua_cu = ket_qua_cu + this.id; 
                    In_gia_tri_cu(ket_qua_cu) 
                    In_Ket_qua("") 
                } 
            } 
        } 
    }) 

Các bạn có thể xem kết quả đoạn code ở video dưới đây:

Nào chúng ta hãy cùng nhau xem kết quả nhé!

Mình gửi các bạn đường dẫn để tải về những file trong thư mục may_tinh_bo_tui để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình mong một project nho nhỏ có thể giúp các bạn ôn lại và thực hành những gì mình đã học và nếu có thắc mắc gì cứ gủi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!