Lời nói đầu
Sau khi học xong HTML căn bản, chúng ta có thể tạo ra cấu
trúc và ngữ nghĩa cho tài liệu HTML, nghĩa là đã tạo được phần nội dung cho
trang web.
Khi đã có kiến thức căn bản về CSS, chúng ta có thể định dạng
văn bản, thiết lập màu sắc, định dạng nền, thiết lập kích thước, bố trí các phần
tử, tạo các hiệu ứng, và thiết kế bố cục cho một trang web.
Như đã biết, HTML và CSS đều không phải là ngôn ngữ lập
trình, HTML là ngôn ngữ đánh dấu, CSS là ngôn ngữ định dạng. Khi hiển thị trang
web, trình duyệt sẽ thực thi mã HTML và CSS theo thứ tự từ trái qua phải, từ
trên xuống dưới, rồi hiển thị ra màn hình đúng như những gì đang có trong mã
nguồn. Đây chính là một trang web tĩnh (static webpage). Muốn có trang web động,
cho phép người dùng tương tác được với nó, thì phải sử dụng thêm các ngôn ngữ lập
trình.
Phần này sẽ làm quen với lập trình (programming), với ngôn
ngữ JavaScript. Nếu bạn đã từng học một ngôn ngữ lập trình thì là một điểm lợi,
tuy nhiên, chưa học cũng không sao. Phần này sẽ tìm hiểu những kiến thức căn bản
về lập trình, về JavaScript và áp dụng chúng trong làm web front-end.
Nếu xem trang web là một ngôi nhà, thì tới thời điểm này, chúng
ta đã có thể làm được phần thô và phần trang trí của ngôi nhà. Trong phần này,
chúng ta sẽ tiếp tục học JavaScript, để thêm các chức năng tương tác cho ngôi
nhà, như hệ thống cửa, thông gió, điện, nước, chuông.
Đây là cuốn sách thứ 3, TỰ
HỌC LÀM WEB, Tập 3 – JavaScript căn bản, trong loạt các cuốn sách về tự học
làm web.
Sách được viết theo kiểu tự học, với mỗi chủ đề luôn bắt đầu
là các kiến thức căn bản, các khái niệm, các thực hành minh họa; sau đó là các
nguồn tài liệu tham khảo để bạn đọc và xem thêm; tiếp theo là các bài tập và thực
hành; sau cùng là câu hỏi ôn tập.
Trong sách cũng có các tài liệu tham khảo, câu hỏi, bài tập,
bài thực hành bằng tiếng Anh, để giúp người học trải nghiệm, từng bước nâng cao
khả năng sử dụng tiếng Anh. Bạn có thể sử dụng danh mục các từ tiếng Anh chuyên
ngành tại đây: https://bit.ly/3iLYpgG.
Phần kết thúc sẽ là hướng dẫn làm một số dự án.
Nội dung của cuốn sách này:
– Làm quen với JavaScript
–
Cuốn sách tiếp theo bạn nên có là TỰ HỌC LÀM WEB, Tập 4 – Back-end căn bản.
Dù đã cố gắng, nhưng tài liệu này chắc chắn còn hạn chế về kiến thức, kĩ năng, nhận định. Mong bạn, luôn đọc trong tâm thế hoài nghi.
1
Làm quen với JavaScript
1.1
Vài thông tin chung 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).
Các phiên bản của ECMAScript:
|
Phiên bản |
Năm ra đời |
Từ năm 2016, các
phiên bản được đặt tên theo năm ra đời |
|
1 |
1997-06-01 |
ECMAScript 2016 |
|
2 |
1998-06-01 |
ECMAScript 2017 |
|
3 |
1998-12-01 |
ECMAScript 2018 |
|
E4X |
2004-06-01 |
ECMAScript 2019 |
|
5 |
2009-12-01 |
ECMAScript 2020 |
|
5.1 |
2011-06-01 |
ECMAScript 2021 |
|
ES6 |
2015-06-01 |
ECMAScript 2022 |
JavaScript hỗ trợ nhiều kiểu lập trình (hay mẫu hình –
paradigm), như 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. Chúng ta
có thể sử dụng JavaScript để lập trình web front-end, web 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 đầu tiên
Như ở phần trước đã đề cập, chúng ta 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?
Để lập trình nhanh và tiện lợi, chúng ta sẽ dùng các trình
viết mã (code editor) hoặc IDE. Ví dụ chúng ta có thể sử dụng các trình viết mã
như VS code, Sublime Text.
Chúng ta 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 Xem và đọc thêm
– [1] Tìm kiếm theo các từ khóa sau để đọc thêm: javascript
căn bản, javascript wiki
– [2] JavaScript có thể làm được gì? https://www.youtube.com/watch?v=0SJE9dYdpps&list=PL_-VfJajZj0VgpFpEVFzS5Z-lkXtBe-x5
– [3] JavaScript:
https://en.wikipedia.org/wiki/JavaScript
– [4] JavaScript :
https://vi.wikipedia.org/wiki/JavaScript
1.4 Bài tập và thực hành
Bài 1. Chuẩn bị môi trường để có thể lập trình JavaScript: tải
và cài đặt trình duyệt web Chrome, chương trình VS Code.
Bài 2. Viết và chạy chương trình JavaScript đơn giản bằng 4
cách (như đã trình bày trong phần lý thuyết)
Bài 3. Quiz Ninja
– Tạo thư mục có tên quiz
– Trong quiz, tạo
các tập tin sau:
index.html
main.js
styles.css
– Nhập nội dung cho index.html
<!doctype html>
<html lang='en'>
<head>
<meta
charset='utf-8'>
<meta
name='description' content='A JavaScript Quiz Game'>
<title>Quiz
Ninja</title>
<link
rel='stylesheet' href='styles.css'>
</head>
<body>
<section
class='dojo'>
<div
class='quiz-body'>
<header>
<h1>Quiz Ninja!</h1>
</header>
</div>
</section>
<script
src='main.js'></script>
</body>
</html>
– Định dạng trang web bằng css. Thêm nội dung cho tập tin
styles.css. Bạn có thể tải tập tin dojo.svg tại https://drive.google.com/file/d/18bwSyTzqy20KUseriEWRqdew5Q-gJTeF/view
@import
url('https://fonts.googleapis.com/css?family=Baloo+Da|Roboto');
body{
background: #5F1C1C;
font-family: 'Roboto', sans-serif;
}
.dojo{
background:url(https://cdn.rawgit.com/alexmwalker/6acbe9040d9fe6e5e9fd758a25e1b2a5/raw/9c8131eb2ccc1e3839a5a5114cb16b5dc74daf04/dojo.svg)
no-repeat;
width: 100%;
height: 800px;
background-size: 100% auto;
padding-top: 10px;
}
.quiz-body{
background: rgba(255,255,255,1);
margin: 150px 33%;
padding: 10px 20px 50px 20px;
-webkit-box-shadow: 4px 4px 11px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 4px 4px 11px 3px rgba(0,0,0,0.3);
box-shadow: 4px 4px 11px 3px rgba(0,0,0,0.3);
}
h1{
color: #611BBD;
font-family: 'Baloo Da', cursive;
font-weight: 900;
text-align: center;
font-size: 48px;
margin: 0;
}
button {
color: #ffffff;
background-color: #611BBD;
border-color: #130269;
border-radius: 4px;
margin: 0.2em 0;
display: block;
width: 100%;
font-size: 24px;
}
#question {
font-size: 24px;
}
#result{
color: #fff;
margin: 0.2em 0;
width: 100%;
text-align: center;
}
.correct {
background-color: #0c0;
}
.wrong {
color: #fff;
background-color: #c00;
}
– Thêm mã xử lý tương tác cho trang web. Nhập đoạn mã sau
vào main.js.
alert('Welcome to Quiz Ninja!');
– Mở trang index.html bằng trình duyệt, để xem kết quả. Một
thông báo sẽ xuất hiện, cùng với màn hình có giao diện như sau.
1.5 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
-----
Bạn muốn tự học HTML bài bản? Xem thêm