JS00 — Count Passenger App (part 1)

11 min readJul 15, 2023

Biến

Biến thường được sử dụng để lưu trữ các giá trị như số, chuỗi, đối tượng, mảng, boolean, v.v…

ví dụ:

let number = 1 // biến number lưu trữ dữ liệu số nguyên là 1.
let myName = "Phong" // biến myName lưu trữ dữ liệu chuỗi (string) là "Phong" - lưu ý dữ liệu string luôn được để trong ngoặc đơn '' hoặc ngoặc kép "".
let isHungry = true // biến isHungry lưu trữ dữ liệu boolean là true - dữ liệu boolean chỉ có 2 giá trị là true và false

trong JavaScript, khai báo biến thường được thực hiện theo cú pháp const hoặc let + tên biến + dấu = + giá trị biến

khi khai báo tên biến, tuân thủ quy tắc camelCase: chữ đầu viết thường, các chữ kế sau viết hoa chữ cái đầu ví dụ: let numberOfDaysInOneYear= 365

Các phép tính cơ bản:

let firstNumber = 2
let secondNumber = 3
console.log(firstNumber + secondNumber) 
// cho kết quả là số 5
console.log(firstNumber + secondNumber)
// cho kết quả là số 6

Thực hành:

Tạo 3 biến dogAge, dogActualAge và ageRatio, khai báo biến dogAge bằng tuổi 5, cho tỉ lệ chuyển đổi từ tuổi chó qua qua tuổi thực của chó là 7, tính giá trị dogActualAge và console.log(dogActualAge)

Đáp án

let dogAge = 5 
let ageRatio = 7

let dogActualAge = dogAge * ageRatio

console.log(dogActualAge)
// 5 * 7 = 35

App đếm

phần phép tính

count = 5 có thể đọc là gán giá trị số nguyên 5 cho biến count

vậy trong đoạn code sau:

giá trị cuối cùng của count là 4. Cách làm này gọi là reassign hay nôm na là gán lại giá trị cho biến.

nếu muốn app đếm làm đúng chức năng, cái chúng ta muốn là tăng giá trị của count bằng 1 mỗi lần có thêm 1 người đi vào tàu điện hay count +1. Vậy nên ta có thể gán giá trị như sau:

let count = 5
count = count + 1

console.log(count)
// 5 + 1 = 6

count = count + 2
console.log(count)
// 6 + 2 = 8

count = count - 6
console.log(count)
// 8 - 6 = 2

Thực hành:

Tạo một biến bonusPoints. Gán giá trị cho nó là 50. Tăng nó lên 100. Giảm xuống 25 và cuối cùng tăng lên 70. console.log giá trị của biến sau mỗi bước.

Đáp án

let bonusPoints = 50
console.log(bonusPoints)
// 50

bonusPoints = bonusPoints + 50
console.log(bonusPoints)
// 50 + 50 = 100

bonusPoints = bonusPoints - 75
console.log(bonusPoints)
// 100 - 75 = 25

bonusPoints = bonusPoints + 45
console.log(bonusPoints)
// 25 + 45 = 70

Phần tiếp theo sẽ tạo giao diện cho app

Nút INCREMENT (tăng số)

xoá hết code cũ và dán 2 phần code sau vào HTML và CSS của MND Playground

link: https://developer.mozilla.org/en-US/play

HTML

<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<!-- tạo nút INCREMENT với id="increment-btn" ở đây-->

CSS

body {
  font-weight: bold;
  text-align: center;
}

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h2 {
  font-size: 50px;
  margin-top: 0;
  margin-bottom: 20px;
}
button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-weight: bold;
  width: 200px;
  margin-bottom: 5px;
  border-radius: 5px;
}
#increment-btn {
  background: darkred;
}
#save-btn {
  background: darkgreen;
}

Vào phần html và tạo một nút INCREMENT ở vị trí comment trong code, cho id="increment-btn"

Phần styling đã được làm sẵn nên không cần chú ý nhiều, bài này sẽ tập trung vào JS.

Bước tiếp theo sẽ làm nút INCREMENT này hoạt động.

onClick event listener

Xoá hết phần JS sau đó làm theo thứ tự sau:

Tạo biến count và gán cho nó giá trị 0
Nghe click chuột trên nút INCREMENT
Tăng giá trị của biến count mỗi lần nút được click
Thay đổi hiển thị giá trị count trên app

bước 1

count = 0

bước 2

để gắn cho nút INCREMENT một hàm ‘lắng nghe click chuột’, vào phần html trong thẻ mở, ngay sau thuộc tính id="increment-btn" thêm onClick=increment(). Đoạn code này có thể hiểu là onClick là một keyword bắt buộc phải sử dụng để lắng nghe click chuột từ người sử dụng app. increment() là một hàm sẽ thực hiện một nhiệm vụ nhất định khi một click chuột được thực hiện. Mỗi lần người dùng click vào nút này, function increment() sẽ được gọi. Chúng ta sẽ viết hàm này trong phần JS.

vào phần JS và viết

function increment() {
// trong dấu ngoặc này là logic của hàm mỗi khi nó được 'gọi'/'called'
}

Tạm thời sẽ cho hàm console.log dòng "Nút INCREMENT vừa được click"

function increment() {
    console.log("Nút INCREMENT vừa được click")
}

Khi click vào nút INCREMENT chúng ta sẽ thấy “Nút INCREMENT đang hoạt động” được hiển thị ở console. Mỗi lần click console sẽ hiển thị một dòng này.

Tạm hiểu là, mỗi lần nút INCREMENT được click, nó gọi hàm increment() và hàm này làm nhiệm vụ console.log("Nút INCREMENT vừa được click")

Trước khi qua các bước tiếp theo hãy tìm hiểu sâu hơn về hàm hay còn gọi là function trong JS.

JS Functions

Cú pháp của function

function tenFunction() {
// body của function
}

một function bắt đầu bằng keyword function + tên function + () + {body của function}
keyword, (), và {} bắt buộc sử dụng, không được thay đổi.
tên của function đặt theo quy ước camelCase, thường sẽ bắt đầu bằng 1 động từ vì mỗi function sẽ làm một nhiệm vụ cụ thể. Ví dụ:

function greetCustomer() {
   console.log("Xin chào khách hàng!")
}

Trong ví dụ trên, function greetCustomer đã được tạo, tuy nhiên nó chưa được gọi. Function sẽ chỉ chạy khi nó được gọi/called (từ giờ sẽ dùng called).

Để gọi một function thì làm như sau:

function greetCustomer() {
   console.log("Xin chào khách hàng!")
}

greetCustomer()
// gọi bằng tên function và dấu ()
// hiển thị trên console "Xin chào khách hàng!"

Tạm tạo một function để đếm ngược cho gần với app chúng ta đang tạo

function countDown() {
    console.log(5)
    console.log(4)
    console.log(3)
    console.log(2)
    console.log(1)
    console.log(0)
}
// call function countDown()
countDown()

trên console sẽ hiện: 5 4 3 2 1

Thực hành

Tạo một function, tự đặt tên cho function, gọi function đó để function log số 42 ra console.

đáp án

function myLogger() {
    console.log(42)
}

myLogger()
// 42

Thực hành

Get Lyam’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Tạo một function, tự đặt tên cho function, function sẽ tính tổng của các biến được cho dưới đây sau đó gọi function để log kết quả ra console.

let doanhThuThangNam = 76
let doanhThuThangSau = 67
let doanhThuThangBay = 50

Đáp án

let doanhThuThangNam = 76
let doanhThuThangSau = 67
let doanhThuThangBay = 50

function tinhTongDoanhThu() {
    console.log(doanhThuThangNam + doanhThuThangSau + doanhThuThangBay)
}

tinhTongDoanhThu()
// 193

Một cách khác

let doanhThuThangNam = 76
let doanhThuThangSau = 67
let doanhThuThangBay = 50

function tinhTongDoanhThu() {
    // tạo một biến tongDoanhThu
    let tongDoanhThu = doanhThuThangNam + doanhThuThangSau + doanhThuThangBay
    console.log(tongDoanhThu)
}

tinhTongDoanhThu()
// 193

Lưu ý biến tongDoanhThu là biến được tạo trong function tinhTongDoanhThu(). Nếu chúng ta gọi lệnh console.log(tongDoanhThu) ở ngoài body của function này thì sẽ gặp lỗi

function tinhTongDoanhThu() {
    let tongDoanhThu = doanhThuThangNam + doanhThuThangSau + doanhThuThangBay
    console.log(tongDoanhThu)
}
console.log(tongDoanhThu)
//ReferenceError: tongDoanhThu is not defined

Lỗi ReferenceError là lỗi thường gặp khi JS không tìm thấy biến vì biến này được tạo trong function tongDoanhThu() nhưng đang được tìm bên ngoài function.

Tạo function tăng số

Để tạo một function tăng số như phần đầu đã nói qua về count = count + 1. Phần code này ta có để trong body của một function để sử dụng.

let count = 0

function increment() {
    count = count + 1
    console.log(count)
}

increment()
// Gọi lần 1: 0 + 1 = 1

increment()
// Gọi lần 2: 1 + 1 = 1

increment(3)
// Gọi lần 1: 2 + 1 = 3

Giờ chúng ta sẵn sàng qua bước số 3 của các bước này:

Tạo biến count và gán cho nó giá trị 0
“Nghe click chuột trên nút INCREMENT
Tăng giá trị của biến count mỗi lần nút được click
Thay đổi hiển thị giá trị count trên app

Thực hành

Tạo function increment() để tăng giá trị của biến count mỗi lần nút INCREMENT được click. Nhớ là mỗi click sẽ gọi function increment() vì function này đã đã được kết nối với nút qua onClick ở file html.

Tạm thời chỉ console.log giá trị của count ra console. Bước cuối cùng chúng ta sẽ làm nó hiển thị trên app.

Đáp án

let count = 0

function increment() {
    count = count + 1
    console.log(count)
}

Sau mỗi lượt click ở nút INCREMENT, console sẽ tăng giá trị của count thêm 1.

Hiển thị “count”

Bước cuối cùng trong là hiển thị giá trị của count trên app

Tạo biến count và gán cho nó giá trị 0
“Nghe click chuột trên nút INCREMENT
Tăng giá trị của biến count mỗi lần nút được click
Thay đổi hiển thị giá trị count trên app

Chia nhỏ đoạn code sau:

document.getElementById('count-el').innerText = 5

phần 1:

document.getElementById('count-el') đoạn code này có thể đọc là : vào document, lấy phần tử (html element) có id là count-el. Tạm thời chúng ta hiểu document là trang web.

Khi một phần tử element được tạo thì chúng chỉ có một id duy nhất, giống số CCCD của một người.

Vì vậy khi chúng ta ‘lệnh’ cho JS vào document để lấy phần tử có id là count-el thì chúng ta sẽ có được một 'vật thể' (object) trong đó chứa nội dung của phần tử (hay phần hiển thị trên web).

phần 2:

.innerText tạm hiểu là nội dung chữ (text) của phần tử

Khi xâu chuỗi 2 phần này lại, chúng ta được một lệnh tạo nội dung bên trong một phần tử, cụ thể là tạo nội dung 5 cho phần tử có id là count-el - trong trường hợp này là phần tử h2 khi chúng ta tạo html

document.getElementById('count-el').innerText = 5

Áp dụng vào các phần tử khác, chúng ta sẽ có được kết quả tương tự

<!-- HTML -->
<h1 id="title">Tựa đề</h1>
<p id="paragraph">Đoạn văn</p>

// JS
document.getElementById('title').innerText = 'Tựa đề đã được thay đổi'
document.getElementById('paragraph').innerText = 'Đoạn văn đã được thay đổi'

Khi sử dụng 2 lệnh này, nội dung của cả 2 thẻ h1 với id là title và thẻ p với id là paragraph đều đã thay đổi.

Áp dụng vào app count

Phần trước function increment() được tạo để log giá trị của count ra console mỗi lần nút INCREMENT trên app được click.

let count = 0
function increment() {
    count = count + 1
    console.log(count)
}

Ta chỉ cần đơn thuần thay thế lệnh console.log(count) bằng lệnh document.getElementById('count-el').innerText = 5.

Tuy nhiên để hiển thị count, cần phải thay 5 bằng count. Code hoàn chỉnh sẽ như sau.

let count = 0

function increment() {
    count = count + 1
    document.getElementById('count-el').innerText = count
}

Để code dễ đọc hơn, có thể tạo một biến để giữ giá trị của document.getElementById('count-el'), sau đó bên trong function sử dụng biến này để hiển thị count

let countEl = document.getElementById('count-el)
let count = 0

function increment() {
    count = count + 1
    countEl.innerText = count
}

Với thay đổi này, click nút INCREMENT trên app, mọi thứ vẫn hoạt động bình thường.

Vậy ta tạm thời xong phần đầu của App Count. Phần tiếp theo sẽ thêm tính năng SAVE để lưu lại mỗi lần đếm và hiển thị kết quả của từng lần đếm.

Đây là phần code html, css, và js hoàn chỉnh:

<!-- HTML -->
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>

/* CSS */
body {
  font-weight: bold;
  text-align: center;
}
h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h2 {
  font-size: 50px;
  margin-top: 0;
  margin-bottom: 20px;
}
button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-weight: bold;
  width: 200px;
  margin-bottom: 5px;
  border-radius: 5px;
}
#increment-btn {
  background: darkred;
}
#save-btn {
  background: darkgreen;
}

// JS
let countEl = document.getElementById("count-el"); 
let count = 0;

function increment() {
  count = count + 1;
  countEl.innerText = count;
}

Những điểm có thể tìm hiểu thêm

document.getElementById()

Tương tự console.log() cú pháp của document.getElementById() không hề khác.

console.log() luôn cần một 'giá trị' trong () để hiện thị ra console. document.getElementById() cũng cần một giá trị.

Đây là 2 hàm trong JS. Cách gọi chính thức của giá trị này là biến số hay argument. Còn có một giá trị khác trong () khi tạo hàm gọi là tham số hay parameter.

Hiểu một cách đơn giản, tham số là giá trị tạm thời khi tạo function. đối số là giá trị thực khi sử dụng function.

Ví dụ:

// tạo function tinhTongHaiSo()
function tinhTongHaiSo(soThuNhat, soThuHai) {
    let soTong = soThuNhat + soThuHai
    console.log(soTong)
}

// sử dụng hàm
tinhTongHaiSo(2, 6)

Trong ví dụ trên. Function được tạo với 2 tham số soThuNhat và soThuHai. Khi sử dụng (call) 2 tham số này được thay thế bởi 2 biến số 2 và 6.

Từ phần này về sau, ta sẽ gọi tham số của function là parameter và biến số là argument.

Function có thể có hoặc không có parameters hoặc/và arguments. Một ví dụ của function không có parameters và arguments là function increase() vừa được tạo trong bài này.

document.getElementById(‘count-el’)

Nếu log giá trị của document.getElementById('count-el') trong bài này ra console ta có [object HTMLHeadingElement].

Tạm thời có thể hiểu giá trị này là một object thuộc loại HTMLHeadingElement - hay phần tử HTLM heading (trong trường hợp này là h2)

Tương tự, lệnh console.log(document.getElementById('increment-btn')) sẽ cho giá trị [object HTMLButtonElement] - hay object thuộc loại phần tử HTML button (trong trường hợp này là nút INCREMENT)

object sẽ được dần dần giới thiệu trong những bài sau.

Sử dụng ‘ ‘ hay “ “

Nếu mở bằng ' thì đóng bằng '

Nếu mở bằng " thì đóng bằng "

Trong một số trường hợp nhất định về sau ta sẽ bắt buộc phải sử dụng một trong hai.

Liên kết file HTML, CSS, và JS

Khi lập trình ở môi trường local (ví dụ trên Visual Studio Code). Các file riêng lẻ trong cùng một dự cần được kết nối với nhau.

Tạm thời, liên kết file CSS với HTML bằng <link rel="stylesheet" href="styles.css">. Thay thế tên file "style.css" bằng tên file của mình.

Liên kết file JS với HTLM bằng <script src="index.js"></script>. Thay thế tên file "index.js" bằng tên file của mình.

Cả 2 đoạn code này đều được đặt trong <head></head> của HTML. Trong một số trường hợp, file JS được đặt ở hàng cuối cùng trong <body></body> của HTML.

Ví dụ:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <script src="index.js"></script>
</body>

Bài này tạm kết thúc ở đây. Bài sau ta sẽ hoàn chỉnh App Count.

JS00 — Count Passenger App (part 1)

Biến

App đếm

phần phép tính

Nút INCREMENT (tăng số)

onClick event listener

JS Functions

Get Lyam’s stories in your inbox

Tạo function tăng số

Hiển thị “count”

Những điểm có thể tìm hiểu thêm

document.getElementById()

document.getElementById(‘count-el’)

Sử dụng ‘ ‘ hay “ “

Liên kết file HTML, CSS, và JS

Written by Lyam

No responses yet

More from Lyam

JS00 — Thực hành

Thực hành 1

Launch website trên Netlify

Netlify là dịch vụ host website. Sau khi hoàn thành website, sử dụng dịch vụ này để launch website miễn phí.

Count Passenger App (part 2)

Tạo function save()

CSS bài 2

Ôn lại kiến thức cũ

Recommended from Medium

What Should Programmers Do While the AI Writes Code?

Hint: not start another AI coding loop

UI Design Direction 2026–2027

UI is already exploring exciting new directions, but doesn’t need new “morphisms”

How To Run Claude Like a Tech Lead, Not a Senior Engineer

You already know how to brief one session. The leverage now is running four of them and still shipping code you’d put your own name on.

Every Frontend Architecture Pattern Explained

One simple idea connects every frontend architecture pattern.

How to Become an AI Engineer in 2026: The Complete Learning Roadmap

Whether you’re starting from scratch or transitioning from software engineering, here’s a structured roadmap to learn the skills companies…

What Wealthy People Do Before 9 AM That Broke People Do Never

A five-year study tracked 233 millionaires and 128 people struggling financially. The differences weren’t income. They weren’t lucky. There…

No responses yet

More from Lyam

JS00 — Thực hành

Thực hành 1

Launch website trên Netlify

Netlify là dịch vụ host website. Sau khi hoàn thành website, sử dụng dịch vụ này để launch website miễn phí.

Count Passenger App (part 2)

Tạo function save()

CSS bài 2

Ôn lại kiến thức cũ

Recommended from Medium

What Should Programmers Do While the AI Writes Code?

Hint: not start another AI coding loop

UI Design Direction 2026–2027

UI is already exploring exciting new directions, but doesn’t need new “morphisms”

How To Run Claude Like a Tech Lead, Not a Senior Engineer

You already know how to brief one session. The leverage now is running four of them and still shipping code you’d put your own name on.

Every Frontend Architecture Pattern Explained

One simple idea connects every frontend architecture pattern.

How to Become an AI Engineer in 2026: The Complete Learning Roadmap

Whether you’re starting from scratch or transitioning from software engineering, here’s a structured roadmap to learn the skills companies…

What Wealthy People Do Before 9 AM That Broke People Do Never

A five-year study tracked 233 millionaires and 128 people struggling financially. The differences weren’t income. They weren’t lucky. There…