---------
Phần 18.
Căn bản lập trình JavaScript (1)
Tới đây đã phần nào hình dung được hoạt động của JavaScript,
cách lập trình với JavaScript. Nói chung, để lập trình với JavaScript chỉ cần
một trình soạn mã nguồn (Notepad, VS Code, hoặc Sublime text) và một trình
duyệt là đủ.
Hoặc có thể thực hành và xem kết quả trực tiếp bằng hai
trang web sau:
và
Theo kinh nghiệm cá nhân, nên học làm các ứng dụng liên quan
đến JavaScript thì sẽ dễ nhớ và nhớ lâu hơn.
Khóa học lập trình JavaScript của ZendVN
Clip 1: làm quen
với JavaScript
Clip 2: biến
Biến dùng để lưu một giá trị.
Khai báo: var tên_biến;
Ba cách để xuất thông tin kiểm tra:
– xuất thông tin trên một cửa sổ: alert(x)
– xuất thông tin lên cửa sổ trình duyệt: document.write(x)
– xuất thông tin trong cửa sổ console: console.log(x)
Tên biến phải bắt đầu bằng kí tự, hoặc dấu _; không có
khoảng trắng
Tên biến có phân biệt chữ hoa, chữ thường.
Gợi ý cách đặt tên biến:
– Đặt tên biến có ý nghĩa, dễ nhận diện
– Chữ đầu tiên của biến là chữ thường, các chữ còn lại sẽ
viết hoa chữ cái đầu tiên
Clip3: kiểu dữ liệu
Các kiểu dữ liệu căn bản: string, number, boolean, array, object
Undefined: biến được khai báo nhưng chưa gán giá trị
Null: một loại giá trị đặc biệt của biến, được sử dụng để
xóa dữ liệu trong một biến
JavaScript là ngôn ngữ định kiểu yếu, nghĩa là không cần chỉ
định kiểu khi khai báo biến. Để xác định kiểu của biến tại một thời điểm, sử
dụng hàm typeof tên_biến
Lưu ý: hàm typeof thực hiện trên biến kiểu “null”, object, và
array đều cho ra kết quả là object, do vậy để kiểm tra ba kiểu của ba trường
hợp này cần viết một hàm cụ thể hơn, chứ không thể sử dụng hàm typeof.
Clip 4: hàm
Khai báo hàm:
function tên_hàm(var1,
var2, …, varn){
nội dung của hàm
}
Gọi hàm:
tên_hàm(var1, var2, …,
varn);
Có ba cách gọi hàm:
– (01) Gọi hàm trong phần tử script,
<script>
function
xuatThongBao(info){
document.write("Nội dung thông báo <strong>" + info +
"</strong>");
}
xuatThongBao("Tèo");
</script>
– (02) Gọi hàm dựa vào sự kiện
…
<script>
function
xuatThongBao(info){
document.write("Nội dung thông báo <strong>" + info +
"</strong>");
}
</script>
</head>
<body>
<a
href="#" onclick="xuatThongBao('Tèo');">Bấm chuột để gọi
hàm</a>
</body>
…
– (03) Gọi hàm trong hàm khác
<script>
function
xuatThongBao(info){
document.write("Nội dung thông báo <strong>" + info +
"</strong>");
}
function xuat(){
xuatThongBao("Tèo");
}
xuat();
</script>
Hàm trả về một giá trị:
<script>
function
fullName(firstName, lastName){
return
firstName + ' ' + lastName;
}
var name =
fullName('Nguyen', 'Teo');
document.write(name);
</script>
Gọi hàm từ tập tin function.js:
<script src="functions.js"></script>
<script>
var name =
fullName('Nguyen', 'Teo');
document.write(name);
</script>
Biến toàn cục và cục bộ:
Biến toàn cục
|
Biến cục bộ
|
Hiện diện (visible) trong toàn trang
|
Hiện diện trong hàm nó được khai báo
|
Vòng đời bắt đầu khi biến được khởi tạo
|
Vòng đời bắt đầu khi biến được khởi tạo
|
Vòng đời kết thúc khi đóng trang web
|
Vòng đời kết thúc khi hàm thực thi xong
|
Clip 5: toán tử căn bản
Các toán tử căn bản: +, -, *, /, ++, --, %, -=, +=, *=, /=
Clip 6: toán tử so sánh, logic
Các toán tử so sánh: ==, ===, !=, >, <, >=, <=
Các toán tử logic: &&, ||, !
Toán tử điều kiện: (biểu thức so sánh) ? xử lý cho trường
hợp đúng : xử lý cho trường hợp sai
var x = 4;
(x > 5) ?
document.write('lớn hơn') : document.write('bằng hoặc nhỏ hơn');
Clip 7: cấu trúc điều khiển if, switch
Clip 8: xác định kiểu dữ liệu (typeof)
Viết lại hàm myTypeOf:
<script>
var myNumber = 10;
var myString =
'hi';
var myBoolean =
true;
var myObject = {};
var myArray = [];
var myUnderfined =
undefined;
var myNull = null;
function
myTypeOf(obj){
var type = typeof obj;
if(type !=
'object'){
return
type;
} else if (obj
instanceof Array){
return
'array';
} else if (obj
== null) {
return
'null';
} else {
return
'object';
}
}
document.write(myTypeOf(myNull));
</script>
Clip 9: vòng lặp for
for(var i = 1; i <=
10; i++){
document.write(i + '<br>');
}
Clip 10: vòng lặp while
var i = 1;
while(i <= 10){
document.write(i + '<br>');
i++;
}
Clip 11: vòng lặp do-while
var i = 1;
do {
document.write(i
+ '<br>');
}
while(i > 10);
Từ khóa “break” dùng thể thoát khỏi vòng lặp. Từ khóa “continue”
dùng để dừng thực thi lần lặp hiện tại và thực hiện lần lặp ở giá trị tiếp theo
của biến đếm.
Clip 12: bài tập về vòng lặp
Clip 13: try-catch, throw
Cú pháp:
try{
//viết mã xử lý
}catch (err){
//xử lý lỗi
}
Ví dụ,
try{
allert('hello');
//tạo ra lỗi
}catch(e){
document.write(e); //lệnh này sẽ được thực hiện
}
Throw dùng để xuất
thông báo lỗi tùy ý, lệnh throw sẽ
chuyển thông báo lỗi đến tham số e của
catch(e). Ví dụ,
var n = 0;
try{
n = '';
if(n == '')
throw 'Biến n chưa có giá trị'
}catch(e){
document.write(e);
}
-----------
Cập nhật [3/9/2020]
-----------