Chương 55: Một website biết “chuyển động”
Enjoy!
----------------------------------
Một website biết “chuyển động”
“Phải làm được form liên hệ hoạt động đàng hoàng thì mới coi như hoàn thành bài tập.”
“Không biết dùng JavaScript thì chưa nói chuyện được đâu.”
Nhận thêm thử thách mới từ Takuya-san, tôi lập tức bắt đầu tìm hiểu về JavaScript.
Nó giống như một ngôn ngữ hoàn toàn khác so với HTML hay CSS. Đây là lần đầu tiên tôi thực sự chạm tay vào cái gọi là “lập trình”.
“Cái này… có vẻ thú vị thật đấy…”
Chiều hôm sau tan học, tôi bước đến phòng máy với tâm trạng nhẹ bẫng.
“Thưa thầy, muốn làm cho form hoạt động thì phải làm sao ạ? Thực ra em muốn làm một form đặt hàng. Khách nhập tên sản phẩm, số lượng rồi bấm gửi, thì nội dung đơn hàng sẽ tự động cập nhật vào bảng tính. Anh trai của Yamada… à, Takuya-san ấy, bảo em phải dùng JavaScript.”
“Ồ, nghe khá là bài bản đấy. Đúng rồi, muốn làm vậy thì cần JavaScript. Cuối cùng em cũng bước vào lãnh vực lập trình rồi.”
Lập trình… Nếu làm được đến mức này, liệu tôi có thể tự xưng là lập trình viên không nhỉ?
Thầy Kobayashi trầm ngâm một chút.
“HTML và CSS là ‘đánh dấu’ và ‘trang trí’, còn JavaScript thì là ‘lập trình’. Cách suy nghĩ sẽ khác hoàn toàn.”
“Khác như thế nào ạ?”
“HTML và CSS giống như một bản hướng dẫn: ‘hãy hiển thị thế này’. Nó mang tính tĩnh. Còn JavaScript thì là: ‘nếu điều kiện này xảy ra thì làm việc này, nếu điều kiện kia thì làm việc khác’. Nó xử lý động.”
Thầy ấy mở trình duyệt, cho tôi xem một ví dụ JavaScript rất đơn giản.
“Trước hết là cú pháp cơ bản. Thầy sẽ giải thích về biến, hàm và xử lý sự kiện.”
Thầy Kobayashi giảng từng chút một, rất cẩn thận.
“Đầu tiên là biến. Nó giống như một cái hộp để chứa giá trị. Ví dụ, nếu viết let userName = '健太'; thì em đã lưu chuỗi ‘健太’ vào chiếc hộp tên là userName.”
“À, tức là đặt tên cho cái hộp rồi cất giá trị vào đó, đúng không ạ?”
“Tiếp theo là hàm. Đây là cách gom một loạt xử lý lại với nhau. Ví dụ function checkForm() { ... }. Em có thể gom phần kiểm tra form vào một chỗ. Khi cần, chỉ việc gọi checkForm() là xử lý sẽ chạy.”
“Ồ, tức là tạo sẵn một thao tác, đặt tên cho nó, rồi dùng lại khi cần. Tiện thật ạ!”
“Và quan trọng nhất là xử lý sự kiện. Đây là cơ chế quyết định sẽ làm gì khi người dùng bấm nút hay nhập chữ. Ví dụ, khi bấm nút gửi thì kiểm tra nội dung rồi mới gửi.”
“À, tức là phản ứng lại hành động của người dùng! Kiểu như bấm nút là có chuyện xảy ra!”
“Lưu thông tin bằng biến, gom xử lý bằng hàm, rồi phản ứng với thao tác người dùng bằng sự kiện. Kết hợp ba thứ này lại, em sẽ tạo ra được một website động.”
“Ra vậy…!” Tôi phấn khích đến mức vỗ tay một cái.
“Giờ thì cùng xem một đoạn code đơn giản nhé.”
Thầy Kobayashi hiển thị trên màn hình một đoạn mã kết hợp HTML và JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>問い合わせフォーム</title>
</head>
<body>
<form>
<label>お名前：</label>
<input type="text" id="name" placeholder="お名前を入力してください">
<label>メールアドレス：</label>
<input type="email" id="email" placeholder="example@email.com">
<button type="button" id="submitBtn">送信</button>
</form>
<script>
function checkForm() {
let userName = document.getElementById('name').value;
let userEmail = document.getElementById('email').value;
if (userName === '') {
alert('お名前を入力してください');
return false;
}
if (userEmail === '') {
alert('メールアドレスを入力してください');
return false;
}
alert('送信しました！ありがとうございます');
return true;
}
document.getElementById('submitBtn').onclick = checkForm;
</script>
</body>
</html>
“Ồ… đây chính là code thật sao! Hoàn toàn khác với HTML và CSS…”
Tôi lặng lẽ nhìn chằm chằm vào màn hình, như đang đấu mắt với từng dòng code.
“──Đoạn code này là khi nút được bấm thì hàm checkForm sẽ được gọi, rồi bên trong hàm đó sẽ kiểm tra xem tên hay email có bị để trống không. Nếu trống thì hiện thông báo lỗi, còn nếu nhập đầy đủ thì sẽ hiện thông báo gửi thành công, đúng không ạ?”
“Chính xác! Em hiểu rất tốt đấy. Điều quan trọng nhất trong đoạn code này là cách tư duy điều kiện kiểu ‘nếu thế này thì làm thế kia’.”
Lần đầu tiên tôi thực sự chạm vào “tư duy lập trình”. Nó khác hẳn với những kỹ thuật trước giờ chỉ xoay quanh việc “tạo hình thức bên ngoài”. Rẽ nhánh điều kiện, vòng lặp, hàm… tất cả đều là những khái niệm hoàn toàn mới mẻ.
“Cái này… thú vị thật sự.”
“Ha ha! Satou-kun đúng là học trò dễ dạy mà.”
Tôi chỉ muốn nhanh chóng về nhà để tự tay viết chương trình của riêng mình. Trong lòng nôn nao không yên.
—----------------------
Về đến nhà, tôi lại lao vào JavaScript giống hệt như hồi học CSS và Bootstrap.
Buổi tối, tôi tiếp tục học tập trong phòng mình. Bắt đầu từ việc kiểm tra dữ liệu nhập: tên và địa chỉ email. Từng bước một, tôi viết xử lý báo lỗi khi để trống, rồi kiểm tra định dạng email.
Khi đã hiểu được toàn bộ luồng xử lý, tôi lập tức bắt tay vào triển khai phần form thật sự.
Lỗi xuất hiện liên tục. Tôi sửa, chạy lại, rồi lại lỗi. Cứ thế lặp đi lặp lại.
“À… hiện thông báo lỗi rồi!”
Form dần dần bắt đầu “sống”.
Tôi vật lộn đến tận khuya, hoàn thiện xử lý khi gửi form: hiển thị thông báo hoàn tất, tạo màn hình “Cảm ơn quý khách”.
Ngẩng đầu lên nhìn đồng hồ, đã hơn 2 giờ sáng lúc nào không hay. Nhưng vui quá, không dừng lại được.
“Được rồi… chạy rồi!”
Tôi tự tay nhập dữ liệu vào form, bấm nút gửi. Kiểm tra lỗi hoạt động chính xác, thông báo hoàn tất hiện ra đúng như mong muốn.
Hôm sau, tôi tiến hành kiểm tra lần cuối. Trên PC, trên điện thoại. Tất cả thao tác gửi form đều không có vấn đề gì.
Làm đúng theo những gì thầy Kobayashi đã dạy, tôi dùng FTP client để upload file JavaScript đã chỉnh sửa.
“Lần này thì… hoàn hảo rồi.”
Sáng hôm sau, tôi gửi báo cáo cuối cùng cho Takuya-san.
“Yamada-san, form liên hệ đã hoàn thành rồi ạ.”
Tôi gửi kèm URL đã cập nhật.
Một lúc sau, có vẻ như anh ấy đã trực tiếp kiểm tra form.
“…Ừm, cuối cùng thì cũng xong bài tập rồi.”
“…!”
Tôi gào thét trong lòng. Cuối cùng… dài thật sự.
HTML, CSS, Bootstrap, FTP, JavaScript. Nhìn lại mới thấy mình đã học được quá nhiều thứ. Một đứa từng loay hoay với Google Sites, vậy mà giờ đã đi đến tận đây.
“Đáng lẽ anh sẽ kèm cặp cậu nghiêm túc hơn… nhưng cuối năm có dự án giao hàng, công việc đang rối lắm. Sang năm mới thì đến nhà anh. Ta sang bước tiếp theo.”
“Vâng ạ!”
Trong tôi trào lên một sự háo hức mới.
“Nhưng kỳ nghỉ đông mà để không thì phí quá. Cái này anh tổng hợp rồi, tranh thủ học trước đi.”
Ngay sau đó, anh gửi đến một danh sách học tập cho kỳ nghỉ đông: Linux, AWS, React.js.
Cuộc phiêu lưu của chúng tôi… mới chỉ bắt đầu!!!
Có vẻ như kỳ nghỉ đông này, tôi lại sẽ ngập đầu trong học tập rồi.
Hãy bình luận để ủng hộ người đăng nhé!