1
Can thiệp luồng xử lý Form bằng JavaScript
Ở các bài học trước, chúng ta đã biết dùng HTML để tạo ra nội
dung cho trang web; dùng CSS để trang trí, trình bày trang web cho ấn tượng,
hài hòa, đẹp mắt.
Phần này, chúng ta sẽ tìm hiểu về ngôn ngữ JavaScript, để thực
hiện các xử lý bên phía client.
1.1
Tổng quan về JavaScript
– JavaScript là ngôn ngữ lập trình, do Brendan Eich – một
nhà công nghệ người Mỹ, phát triển vào năm 1995.
– Tên ban đầu của JavaScript là Mocha, sau đổi thành
LiveScript, hiện nay đang có tên là JavaScript.
– Cũng như các ngôn ngữ lập trình khác, JavaScript không ngừng
được cải tiến, thay đổi; do vậy tính từ khi ra đời đến nay đã có rất nhiều
phiên bản của JavaScript được tạo ra. Hiện nay, mọi người đang sử dụng các
phiên bản JavaScript do tổ chức European Computer Manufacturer’s Association
(ECMA) chuẩn hóa, nên có tên gọi là ECMAScript (thường được gọi tắt là ES). Ví
dụ: ES6 (hay ES2015), ES7 (hay ES2016), ES2021.
– JavaScript hỗ trợ nhiều kiểu lập trình (hay mẫu hình –
paradigm), ví dụ: lập trình kịch bản (scripting), lập trình hướng đối tượng
(object-oriented), lập trình hàm (functional), lập trình mệnh lệnh
(imperative), lập trình hướng sự kiện (event-driven), lập trình thủ tục
(procedural).
– Tập tin mã nguồn JavaScript có phần mở rộng là .js
– Bạn có thể sử dụng JavaScript để lập trình front-end,
back-end, ứng dụng di động, ứng dụng desktop.
– Một số thư viện, framework dựa trên JavaScript: jQuery,
React, Angular, Vue (web front-end); Express, Next (web back-end); React Native
(mobile app), Electron (desktop app).
1.2
Chương trình JS đầu tiên
Bạn có thể sử dụng JavaScript để lập trình phần web
front-end, web back-end, ứng dụng desktop, ứng dụng di động. Để đơn giản, chúng
ta sẽ học JavaScript để làm phần web front-end; tất nhiên những kiến thức nền tảng
về JavaScript sẽ vẫn luôn có ích cho bạn trong các môi trường làm việc khác.
Để viết một chương trình bằng ngôn ngữ lập trình bất kì, một
vài câu hỏi đầu tiên luôn là: dùng phần mềm gì để viết mã, dùng phần mềm gì để
dịch mã nguồn, thực thi chương trình và hiển thị kết quả ở đâu?
Với JavaScript mọi thứ khá đơn giản: bạn có thể lập trình JavaScript bằng web browser, text editor, code editor, hoặc IDE đều được. Để hiển thị kết quả bạn có thể sử dụng Nodejs, tuy nhiên đơn giản nhất bạn chỉ cần sử dụng web brower là đủ. Web browser (trình duyệt web) có thể đóng cả 3 vài trò: trình soạn thảo mã nguồn, trình dịch mã, thực thi và hiển thị kết quả. Trong trình duyệt web có sẵn thành phần dịch mã JavaScript, xem hình minh họa.
Để lập trình nhanh và tiện lợi, người ta thường sử dụng code
editor (trình viết mã) hoặc IDE để lập trình JavaScript. Ví dụ: VS code,
Sublime Text.
Cùng trải nghiệm viết một chương trình JavaScript đơn giản bằng
một số cách.
Cách 1. Dùng cửa sổ console của trình duyệt web
– Mở trình duyệt web (ví dụ Chrome)
– Mở cửa sổ Developer tools (bấm F12, chuột phải vào cửa sổ
trình duyệt > chọn Inspect, hoặc vào menu > chọn More tools > chọn
Developer tools)
– Trong cửa sổ Developer tools, chọn tab Console
– Nhập vào dòng mã nguồn sau, bấm Enter để xem kết quả:
console.log('chao bac
Teo!');
– Để xóa sạch màn hình Console, bấm phím Ctrl + L, hoặc gõ
vào lệnh console.clear();
Cách 2. Nhúng mã JavaScript trong tài liệu HTML
Tạo mới một tập tin
HTML bằng trình soạn thảo mã nguồn bất kỳ (ví dụ: Notepad, VS code) và nhập vào
đoạn mã sau,
<!DOCTYPE html>
<head>
<title>test</title>
</head>
<body>
<script>
alert("Chao
bac Teo");
</script>
</body>
</html>
Lưu lại tập tin và mở bằng trình duyệt để xem kết quả. Một cửa
sổ thông báo sẽ xuất hiện, với nội dung là “Chao bac Teo”.
Cách 3. Viết mã JavaScript trong một tập tin .js
– Tạo thư mục rainbow, trong thư mục này tạo hai tập tin
rainbow.html và main.js
– Nhập đoạn mã sau cho tập tin rainbow.html
<!DOCTYPE html>
<html>
<head>
<title>I Can Click A
Rainbow</title>
</head>
<body>
<button id='button'>click
me</button>
<script
src='main.js'></script>
</body>
</html>
– Nhập đoạn mã sau cho tập tin main.js
const btn =
document.getElementById('button');
const rainbow =
['red','orange','yellow','green','blue','rebeccapurple','violet'];
function change(){
document.body.style.background = rainbow[Math.floor(7*Math.random())];
}
btn.addEventListener('click', change);
– Mở tập tin rainbow.html bằng trình duyệt, bấm nút “click
me” để xem màu nền thay đổi.
Cách 4. Chạy mã JavaScript trên nền tảng Nodejs
– Vào trang web của Nodejs, tải chương trình Nodejs về máy
tính: https://nodejs.org/en/
– Cài đặt Nodejs trên máy tính, sau khi cài đặt xong, vào
cmd, gõ lệnh node –v để kiểm tra xem việc cài đặt Nodejs được chưa, nếu cửa sổ
dòng lệnh có hiển thị phiên bản là đã cài đặt được
– Mở một trình soạn thảo mã nguồn bất kỳ (ví dụ: Notepad, VS
code) và nhập vào đoạn mã sau:
console.log(‘Chao bac Teo’);
– Lưu lại với tên myjs.js,
để trong ổ đĩa D:\
– Mở cửa sổ dòng lệnh (cmd), di chuyển dấu nhắc lệnh về ổ
đĩa D:\
– Gõ lệnh node myjs.js
để Nodejs thực thi đoạn mã, xem kết quả xuất ra ngay cửa sổ dòng lệnh
1.3 Lấy dữ liệu của form và chuyển hướng gửi dữ liệu
Bạn đã biết cách tạo ra một form nhập liệu giả mạo bằng HTML
và CSS.
Mặc định, sau khi người dùng bấm nút “submit”, trình duyệt sẽ
gom dữ liệu từ các input, tạo thành các cặp key:value
và gửi về web server.
Ví dụ form sau:
Khi người dùng bấm nút “Đăng nhập”, cặp giá trị username:ten-khach-hang và password:mat-khau sẽ được gửi về web
server có địa chỉ là httpbin.org.
Bây giờ, chúng ta sẽ dùng JavaScript để lấy các giá trị của
form tại máy client, sau đó thay đổi dữ liệu này:
Bạn mở trang web trên trình duyệt, nhập dữ liệu cho form, bấm
nút Đăng nhập, mở Developer tools, chọn tab Console và quan sát kết quả. Bạn sẽ
thấy giá trị của trường Tên đăng nhập.
1.4 Xem và đọc thêm
1.5 Bài tập và thực hành
Bài
tập 1. Làm các phần thực hành, viết lại các đoạn mã trong phần lý thuyết.
Bài tập 2. Sử dụng HTML và CSS tạo một form đăng nhập giả mạo
của một ngân hàng bất kì. Sử dụng JavaScript để:
– Lấy giá trị của trường họ tên và mật khẩu
– Đổi giá trị của 2 trường này
1.6 Câu hỏi ôn tập
Câu 1. Bạn có thể lập trình (viết mã) JavaScript bằng các
công cụ sau. Đáp án nào sai?
A. Web browser
B. Text editor
C. Code editor, IDE
D. JavaScript Interpreter
Câu 2. Trong HTML, mã JavaScript được đặt trong phần tử nào?
A.
<javascript>
B. <script>
C. <js>
D. <scripting>
Câu 3. Trong
JavaScript, ES8 là viết tắt của?
A. Essential 8
B. ECMAScript 8
C. Explorer
Source 8
D. European Script 8
Câu 4. JavaScript was created in …… by Brendan Eich, an
employee of Netscape.
A. 1994
B. 1995
C. 1996
D. 2015
Đáp án: 1 (D), 2 (A), 3 (B), 4 (B).