Javascript 1

THPT NGÔ QUYỀN, Q.7 Diễn đàn HS: http://ngoquyen-edu.
info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT
PHẦN 2: LẬP TRÌNH
§ 1: MỘT SỐ KHÁI NIỆM & LỆNH CƠ BẢN
I. Khái niệm:
- Javascript (JS) là một ngôn ngữ kịch bản, được thiết kế để tăng tính tương
tác cho các trang Web.
- Đơn giản & nhẹ hơn bất kỳ ngôn ngữ lập trình nào. Thực thi trực tiếp trên
máy client, tương thích với hầu hết trình duyệt web.
- Nhúng trực tiếp vào trang Web. Thường dùng để kiểm tra dữ liệu do người
dùng nhập vào các form tương tác, tạo ra các hiệu ứng chuột hay hiệu ứng
text, ...
II. Vị trí đặt mã JS trong trang Web.
Mã lệnh JS được đặt trong cặp thẻ <script> và </script> khi đặt trong trang
web.
<script language=”javascript”>
//viết chương trình ở đây
// nhớ sử dụng chữ thường
</script>
1. Bên trong: Có thể đặt nhiều đoạn mã JS vào cùng một trang HTML ở nhiều
vị trí khác nhau:
<html>
<head>
... phần đầu
</head>
<body>
... phần thân
</body>
</html>
- Trong phần head: sẽ được phiên dịch trước phần body. Chỉ được thực thi
khi được gọi hoặc có sự kiện (event) xảy ra.
- Trong body: được phiên dịch ngay và thực thi khi trang đã nạp vào trình
duyệt.
2. Đặt bên ngoài:
 Giáo viên: Thiên Đăng Trang 1

THPT NGÔ QUYỀN, Q.7 Diễn đàn HS: http://ngoquyen-edu.info
Các lệnh JS được lưu trữ trong một tập tin riêng có phần mở rộng là .js đặt
cùng cấp thư mục với trang Web. Khi cần có thể gọi từ trang web bằng thẻ:
<script language = “javascript” src=”tenfile.js”> </script>
- Sử dụng chữ thường
- Trong file js chỉ cần chứa lệnh js không cần cặp thẻ <script></script>
III. Lệnh đơn giản:
- Lệnh: Là phát biểu được viết trên 1 dòng, dùng để ra lệnh cho chương
trình thực hiện 1 công việc nào đó. Kết thúc bằng dấu chấm phẩy;
- Khối lệnh: là nhiều lệnh được đặt trong cặp dấu {}. Chúng phải thực hiện
tuần tự để đạt được mục đích của người lập trình.
VD lệnh đơn:
//Một lệnh đơn
document.write(“Phương trình vô nghiệm”);
</script>
VD khối lệnh:
{
//Khối lệnh
var x1, x2;
x1=(-b+Math.sqrt(delta))/2/a;
x2=(-b-Math.sqrt(delta))/2/a;
}
</script>
Khi tạo khối lệnh thì cặp {} nên đặt bằng lề trái với nhau.
Chú ý: Văn bản đi sau cặp dấu // là ghi chú của người lập trình, trình duyệt sẽ
bỏ qua các dòng này
1. Lệnh xuất thông báo ra màn hình – Alert box:
window.alert(“Câu thông báo”);
VD1:
<script language="javascript">
window.alert("Đây là một thông báo !");
</script>

2. Lệnh xuất văn bản ra màn hình Browser:

document.write(“Nội dung văn bản”);
Lệnh này có thể xuất các thẻ HTML. Các giá trị trong thuộc tính của thẻ được
dùng bằng dấu nháy đơn thay vì nháy kép như trước đây.
VD2:
document.write("<h2 align=’center’>Chào lớp 10A2 !</h2>");
document.write(“Chào mừng lớp 10A2 đến với <b> Javascript
</b> <br> ”);
document.write(“Chúc các em vui học”);
</script>
Muốn xuống dòng ta có thể dùng thẻ <br> như HTML

3. Nhập dữ liệu vào một biến:
var <tên biến>;
<tên biến> = window.prompt(“Lời nhắc”,”giá trị gợi ý”);
VD3:
var ten;
ten=window.prompt("Bạn tên gì ?","Không Tên");
document.write("oh, chào " + ten + "<br>Hoan nghênh bạn đến
với JavaScript");
</script>

Nhận xét:
 Nếu nhấn CANCEL: biến ten sẽ mang giá trị rổng (null)
 Nếu nhấn OK: không nhập gì, biến ten sẽ nhận giá trị gợi ý. Nếu có
nhập biến ten sẽ nhận giá trị bạn mới nhập vào.
 Giá trị nhận được là một chuỗi văn bản (cho dù có nhập số).
4. Biến & cách khai báo biến:
a. Khái niệm:
Biến là một vùng nhớ dùng để lưu trữ các giá trị khi chạy chương trình. Sử
dụng vùng nhớ này qua một cái tên gọi là tên biến. Khi kết thúc chương trình,
biến này sẽ mất đi.
Tên biến phải bắt đầu bằng chữ cái, không được có khoảng trống, dấu tiếng
việt. Tên biến có phân biệt chữ hoa, chữ thường.
b. Khai báo:
var n; //khai báo biến n
var n=100; //khai báo biến m và gán giá trị =100
truong=”Ngo Quyen”; //Khai báo biến truong và gán giá trị là chuỗi Ngo
Quyen
5. Lệnh xác nhận:
var <tên biến>=window.confirm(“Nội dung muốn khẳng định ?”);
VD4:
var ok=confirm("Bạn có muốn đi shopping không ?");
document.write("Bạn vừa trả lời "+ok);
</script>
Nhận xét:
Khi thi hành chương trình sẽ đưa ra câu hỏi có giao diện như sau:
Nếu bạn nhấn OK thì hiển thị dòng văn bản: Bạn vừa trả lời true
Nếu bạn nhấn CANCEL thì hiển thị dòng văn bản: Bạn vừa trả lời false
Kết luận: confirm() chỉ trả về giá trị true hay false (kiểu boolean) tùy theo
người dùng click chuột.
Bài tập 1:
Trong chương này chúng ta chỉ viết mã lệnh đơn giản. Đặt các lệnh JavaScript
trong cặp thẻ: <script language=”javascript”> và </script>, sau đó lưu tập tin vào
đĩa có phần mở rộng là .html, chạy thử bằng trình duyệt web (IE, Opera, Firefox).
Trong chương 3 chúng ta mới tiến hành đặt vào trang web & kết hợp với form.
1.1 Viết chương trình nhập vào họ tên, năm sinh, sau đó in ra màn hình
theo kiểu trình bày như sau:
Hướng dẫn:
document.write("<h2>Chương trình tính tuổi</h2>");
var ten, ns;

ten=window.prompt("Bạn tên gì ?","Peter");
ns=window.prompt("Bạn sinh năm mấy ?","1993");
document.write("Chào bạn " + ten + ". Năm nay bạn " + (2009-ns) + "
tuổi");
document.write("Cảm ơn bạn " + ten + "<br>Đã chịu khó sử dụng
chương trình này.");
</script>
1.2 Viết chương trình nhập vào: tên bạn, sĩ số học sinh trong lớp bạn. In ra
màn hình thông báo:
Chào bạn <tên bạn> !
Bạn có <sĩ số hs -1 > người bạn dễ thương trong lớp.
1.3 Viết chương trình nhập vào chiều dài & chiều rộng hình chữ nhật. In ra
màn hình chu vi & diện tích hình chữ nhật đó. Giả định rằng đơn vị tính
là bất kỳ.
1.4 Viết chương trình nhập vào bán kính R của đường tròn. In ra màn hình
chu vi và diện tích hình tròn. Biết rằng:
hằng số PI được định nghĩa sẵn
chu vi đường tròn C= 2*PI*R
Diện tích S=PI*R2
1.5 Viết chương trình nhập vào chiều dài 3 cạnh tam giác ABC (dùng biến a,
b, c là độ dài 3 cạnh). In ra màn hình:
- Chu vi & diện tích của tam giác.
abc
- Bán kính đường tròn ngoại tiếp tam giác theo công thức: R 
4S
Biết rằng:
a bc
Diện tích S  p ( p  a )( p  b)( p  c ) trong đó: p 
2
Và a  Math.sqrt (a )
1.6 Viết chương trình nhập vào 2 số hạng. In ra màn hình tổng, hiệu, tích,
thương của chúng.
HD: Chuyển chuỗi sang số nguyên parseInt();
Chuyển chuỗi sang số thực parseFloat();
1.7 Viết chương trình nhập vào tọa độ thực của 2 điểm A(xA, yA) và B(xB,
yB). In ra màn hình độ dài của đoạn thẳng AB theo công thức
AB  ( xB  x A )2  ( yB  y A )2
1.8 Giải bài toán cổ sau: Vừa gà và chó, bó lại cho tròn. Ba mươi sáu con,
một trăm chân chẵn. Hỏi có bao nhiêu con mỗi loại (trình bày đẹp).

§2: Kiểu Dữ Liệu Trong JavaScript
Có 4 kiểu cơ bản:
Kiểu số number
Chuổi string
Đúng/sai boolean
Không xác định null (khác với 0 của number & khác với rỗng “” của string)
I. Number: kiểu số
a. Số nguyên (integer): là kiểu số không có phần thập phân
VD: 1, 2, 3, -5, 0 ... là các số nguyên
b. Số thực (Float): là số có phần nguyên & phần thập phân (kiểu thập phân).
Phần nguyên & phần thập phân ngăn cách nhau bằng dấu chấm.
VD: 2.5, 3.14, ... là các số thực
Nếu số thực quá lớn hay quá nhỏ, sẽ được biểu diễn bằng dạng E (10 mũ)
VD: 2000000 (2 triệu) = 2*106 = 2E6
-0.000002 = 2*10-6 = 2E-6
II. String: kiểu chuỗi
Là 1 ký tự hay 1 dãy các ký tự đặt trong cặp dấu ngoặc kép “”
VD: “Ngo Quyen” //Chuỗi văn bản
“37851788” //Chuỗi số
“” //Chuỗi rỗng (empty string)
III. Boolean: kiểu đúng sai
Thường dùng cho những trường hợp có 2 trạng thái: đúng/sai, nam/nữ,
đậu/hỏng, ...
Gồm 2 giá trị: true & false
Cũng là kết quả của một biểu thức so sánh:
VD: 5>3 //true
“heo”==”gà” //false
IV. Null:
Là kiểu dữ liệu đặc biệt, không xác định
Ví dụ như khi ta sử dụng một biến chưa khai báo thì sẽ trả về null.
V. Chú ý:

Javascript là ngôn ngữ lập trình có tính linh động cao. Khi khai báo 1 biến ta
không hề chỉ rõ kiểu dữ liệu của biến đó, mà nó tự thay đổi cho thích hợp khi
ta gán hay ghép với một giá trị khác. Do đó dẫn đến khá nhiều phiền toái.
1. Các hàm chuyển đổi chuỗi sang số:
a. Chuyển từ chuỗi sang số nguyên:
VD: parseInt(“100”); //=100
parseInt(“3.14”); //=3
parseInt(“1360 HTP”); //=1360
parseInt(“Lop10A1”); //=NaN (Not a number: không phải số)
b. Chuyển từ chuỗi sang số thực:
VD: parseFloat(“3.14”); //=3.14
Xét ví dụ sau đây để thấy được quá trình tự động chuyển đổi kiểu trong
javascript:
VD5:
var a=true;
var b=10;
var c="không thể tin được, nhưng nó là ";
window.alert(a+b); //(1)
window.alert(c+a); //(2)
</script>
Giải thích:
- Khai báo biến a và gán giá trị true, nghĩa là a kiểu boolean
- khai báo biến b và gán b=10, b là số (nguyên)
- khai báo biến c và gán c = một chuỗi ký tự, c là chuỗi
- (1): a+b=true+10=1+10=11

- c+a=”không thể tin được, nhưng nó là ” + true = ... xem hình
2. Chuyển chuỗi thành biểu thức, mã lệnh JavaScript.

Cú pháp: eval(“chuỗi”);
VD5b:
var s=window.prompt("Nhập biểu thức toán học","2+7-15");
var bt=eval(s);
document.write(s + " = " + bt);
</script>
3. Kiểm tra giá trị không phải số ?
Cú pháp: isNaN(<giá trị>);
Trả về true nếu <giá trị> đưa vào không phải số, ngược lại trả về false.
VD:
document.write(isNaN(5-2));  false
document.write(isNaN(0));  false
document.write(isNaN(“Ngo Quyen”));  true
Bài tập 2: Thực hành các ví dụ & hoàn chỉnh các bài tập của Bài 1.
2.1 Chương trình định dạng ký tự. Yêu cầu người dùng nhập vào một đoạn
văn bản (ít hơn 20 từ).
In văn bản theo các dạng: đậm, nghiêng, gạch chân.
2.2 Viết chương trình in ra dòng chữ: HAPPY NEW YEAR 2009 với màu
sắc do người dùng gõ vào (tất nhiên chỉ một số màu thông dụng như:
red, green, blue, yellow, ...)
2.3 Viết chương trình nhập vào tọa độ 3 đỉnh của tam giác ABC. Tính độ
dài đường trung tuyến AM.
HD: Tính tọa độ trung điểm M của đoạn thẳng BC theo công thức
xB  x C y  yC
xM  ; yM  B Sau đó tính độ dài AM như các bài tập 1.
2 2

§3: SỬ DỤNG BIẾN & BIỂU THỨC
I. Phép gán:
VD: var x=5;
var y=x+100;
Toán tử gán = dùng để gán một giá trị hay một biểu thức khác cho biến (bên
trái).
Các toán tử gán khác:
Toán tử gán Ý nghĩa Ví dụ Diễn giải
= Bằng X=3 X=3
+= Cộng X+=3 X=x+3
-= Trừ x-=3 X=x-3
*= Nhân X*=3 X=x*3
/= Chia x/=3 X=x/3
%= Lấy phần dư X%=3 X=x%3
II. Biểu thức đại số:

Toán tử đại số Diễn giải Ví dụ Kết quả
+ Cộng X=2 X+y=5

Y=3
- Trừ X=3 x-y=-4

Y=7
* Nhân X=5 X*y=20

Y=4
/ chia 15/5 3
3/2 1.5
% Lấy phần dư 5%2 1

10%8 2
++ Tăng 1 X=5; X++; X=6

-- Giảm 1 X=5; x-- X=4
Chú ý 2 toán tử tăng/giảm 1:

Nếu dùng riêng lẻ:
VD:
var x=5;
var y=7;
x++;  x=6
++y;  y=8
Tương tự cho phép --
Nhưng nếu dùng trong một biểu thức thì việc đặt ++x hay x++ có sự khác biệt
rất lớn. Hãy xét ví dụ sau đây:
VD6:
var a;
var b=5;
a=b++;
window.alert("a = " + a +"\n" + "b = " + b); //(1)
var x;
var y=5;
x=++y;
window.alert("x = " + x + "\n" + "y = " + y); //(2)
</script>
Kết quả nhận được
(1) a=b++: nhận thấy phép gán = được (2) x=++y: Phép toán ++y thực
thực hiện trước, sau đó mới đến b++ hiện trước sau đó mới đến =
III. Biểu thức so sánh:

Biến tham gia so sánh phải kiểu số hay chuỗi. Kết quả của biểu thức so sánh là
là một giá trị kiểu boolean (true/false)

Toán tử Diễn giải Ví dụ Kết quả
== Bằng nhau X=5; y=7;

X==y False
=== Bằng nhau & phải cùng kiểu X=5; X==y  true
y=”5”; X===y  false
!= Khác nhau X=5; y=7 X!=y  true
> Lớn hơn
< Bé hơn
>= Lớn hơn hay bằng
<= Bé hơn hay bằng
Ghép biểu thức so sánh:

&& và
|| hay – hoặc
! phủ định
Bảng chân trị:
Biểu thức A Biểu thức B A && B A || B !A
True True True True False
True False False True False
False True False True True
False False False False True
Cánh nhớ:
&& chỉ đúng (true) khi tất cả các biểu thức đều true
|| chỉ sai (false) khi tất cả các biểu thức đều false
! true thành false, false thành true
IV. Toán tử điều kiện ?:
Cú pháp:
(<điều kiện>)?<giá trị cho đk true>:<giá trị cho đk false>;
Ý nghĩa:
Nếu điều kiện đúng (true) thì trả về giá trị cho đk true, ngược lại trả về
giá trị cho điều kiện false.

VD7:
var toan=parseFloat(window.prompt("Điểm Toán =","5.5"));
var ly=parseFloat(window.prompt("Điểm Lý =","6"));
var hoa=parseFloat(window.prompt("Điểm Hóa =","7.4"));
var dtb=(toan+ly+hoa)/3;
var kq=(dtb>=5)?"Bạn thi đậu":"Bạn thi hỏng";
document.write("<h2>Bảng kết quả học tập</h2>");
document.write("Điểm Toán: " + toan + "<br>");
document.write("Điểm Lý : " + ly + "<br>");
document.write("Điểm Hóa : " + hoa + "<p>");
document.write("Kết quả thi: " + kq);
</script>
 Nhận xét chương trình:

Do window.prompt() luôn trả về chuỗi cho dù ta có nhập số. Nên phải dùng
thêm hàm parseFloat() để chuyển chuỗi số người dùng nhập thành số thực
sự.
Nếu dtb>=5 biến kq được gán vào chuỗi: “Bạn thi đậu”, ngược lại kq có giá trị
“Bạn thi hỏng”.

Bài tập 3:
3.1 Viết chương trình yêu cầu nhập vào năm sinh của người dùng. Nếu
tuổi từ 18 trở lên in ra thông báo: “Bạn đã trưởng thành”, ngược lại in
ra câu: “Bạn còn ở tuổi vị thành niên”. Biết rằng năm hiện tại là
2009.
3.2 Viết chương trình nhập vào 2 số a & b, đưa ra màn hình số lớn nhất.
3.3 Đưa ra một biểu thức tính toán, yêu cần người dùng nhập vào kết quả
bt đó. Nếu đáp đúng hiển thị ảnh VUI.JPG, ngược lại hiển thị ảnh
BUON.JPG.
HD: Dùng lệnh document.write(“<img src=’vui.jpg’>”); nếu đáp
đúng, ... các ảnh có thể lấy trên Internet. Ví dụ 2 ảnh sau:
Vui.jpg Buon.jpg
...
3.4 Viết chương trình nhập vào 1 số nguyên từ 2 đến 9. In ra bảng cửu
chương của số nguyên đó. Bảng cửu chương phải đặt trong table.
VD:
5 x 1 =5
5 x 2 = 10
....
5 x 10 = 50

§ 4 CÂU LỆNH RẼ NHÁNH IF & SWITCH
I. Lệnh IF
1. Dạng thiếu:
Cú pháp: if (<điều kiện>) <lệnh; {hoặc khối lệnh;}>
Nếu điều kiện đúng thì thực hiện lệnh hoặc khối lệnh.
VD8:
Yêu cầu người dùng nhập chuỗi (không nhập số) – dùng hàm isNaN() để kiểm
tra, nếu đúng hiển thị ra thông báo: Cảm ơn & kèm theo chuỗi vừa nhập vào.
Nếu người dùng nhập số, chương trình không thông báo gì hết.
var chuoiabc=window.prompt("Nhập vào các chữ cái","abc...");
if (isNaN(chuoiabc)==true)
window.alert("Cảm ơn bạn !\n Bạn vừa nhập: "+chuoiabc);
</script>
2. Dạng đủ:
Cú pháp: if (<điều kiện>) {
khối lệnh 1;
}
else {
khối lệnh 2;
}
Nếu điều kiện đúng, thực hiện khối lệnh 1, ngược lại thực hiện khối lệnh 2. Nếu
chỉ có 1 lệnh thì ta không cần dùng cặp dấu {}.
VD9:
Viết chương trình nhập vào cạnh hình vuông, in ra màn hình chu vi & diện tích
hình vuông đó. Có kiểm tra giá trị người nhập, nếu nhập vào không phải số thì
hiển thị thông báo: Nhập không đúng yêu cầu.
var canhhv=window.prompt("Nhập vào cạnh hình vuông","5");
if (!isNaN(canhhv)==true){
var chuvi=parseFloat(canhhv)*4;
var dientich=parseFloat(canhhv)*2;
document.write("Hình vuông cạnh " + canhhv + "<p>");
document.write("Chu vi = " + chuvi + "<br>");

document.write("Diện tích = " + dientich);
} else
window.alert("Nhập tầm bậy ! Sao tính được.");
</script>
Chú ý:
Biểu thức so sánh !isNaN(canhhv)==true: kiểm tra xem canhhv có phải
là số hay không. Chấm than ! có nghĩa là phủ định.
3. Dạng if nhiều nhánh:
Cú pháp: if (<điều kiện 1>)
{khối lệnh 1;}
else if (<điều kiện 2>)
{khối lệnh 2;}
...
else {khối lệnh cuối;}
VD10:
Nhập vào 3 số nguyên a, b, c. In ra màn hình số lớn nhất.
var a=parseInt(window.prompt("a = ","7"));
var b=parseInt(window.prompt("b = ","9"));
var c=parseInt(window.prompt("c = ","5"));
var max;
if (a>b && a>c)
max=a;
else if (b>a && b>c)
max=b;
else
max=c;
window.alert("So lớn nhất của 3 số = " + max);
</script>
 Nhận xét:
Có 3 số, 1 số gọi là lớn nhất phải lớn hơn 2 số còn lại. Cho nên mới có phép và
&& để ghép 2 điều kiện lại với nhau.
II. Lệnh rẽ nhiều nhánh switch:
Cú pháp: switch (biểu thức) {
case <giá trị 1>:
khối lệnh 1;
break;
case <giá trị 2>:
khối lệnh 2;
break;
...
[default:
khối lệnh khác;]
}// đóng switch
Ý nghĩa: Xét giá trị của biểu thức, xem phù hợp với giá trị của case nào, thực
hiện khối lệnh tương ứng, nếu gặp break thì thoát khỏi switch, nếu không có
break thì thực hiện tiếp các lệnh phía dưới.
VD11:
document.write("<h2>Báo giá rau quả: </h2>");
var traicay=window.prompt("Tên trái cây ","cam");
switch (traicay){
case "chuối":
document.write("Chuối: 15.000 đ/nải");
break;
case "cam":
document.write("Cam: 50.000 đ/chục");
break;
case "xoài":
document.write("Xoài: 65.000 đ/chục");
break;
default:
document.write("Loại " + traicay + " chưa biết giá.")
}//hết switch
</script>
Nhận thấy rằng nếu bạn nhập vào loại trái cây chưa có trong chương trình, nó
sẽ thông báo là chưa biết giá, đây là trường hợp loại trừ default (không thuộc
case nào hết).

Bài tập 4:
4.1 Viết chương trình nhập vào điểm 3 môn: Toán, văn, anh văn. Tính
trung bình cộng 3 môn (toán hệ số 2, văn & anh văn hệ số 1). Dựa
vào điểm trung bình để xét lên lớp (dtb>=5) hay ở lại. Xếp loại học
lực theo tiêu chuẩn: dtb>=9: xuất sắc; dtb>=8: giỏi; dtb>=6.5:
khá; dtb>=5: trung bình; còn lại là yếu kém (sử dụng if dạng 3).
4.2 Viết chương trình nhập vào một số nguyên từ: 0  9. In ra màn hình
tên tiếng Anh của số đó. VD: 1  one, ... Nếu nhập số khác với yêu
cầu thì thông báo lỗi.
4.3 Viết chương trình biện luận & giải phương trình bậc 2 dạng: Ax2 + Bx
+ C = 0. A, B, C do người dùng nhập vào, A phải khác 0.
4.4 Nhập độ dài 3 cạnh tam giác a, b, c là các số thực. Kiểm tra & in ra
màn hình đây có phải là 3 canh của tam giác hay không ? Biết rằng
nếu a, b, c là 3 cạnh của tam giác thì: a+b>c và b+c>a và a+c>b.
4.5 Nhập vào 2 số x, y. Kiểm tra và in ra màn hình x,y cùng âm, cùng
dương, hay không cùng âm dương.
4.6 Nhập vào tháng và năm. Hãy cho biết tháng đó có bao nhiêu ngày.
Biết rằng:
Tháng 1, 3, 5, 7, 8, 10, 12: có 31 ngày
Tháng 4, 6, 9, 11: có 30 ngày
Tháng 2: Nếu năm nhuần 29, năm không nhuần 28 ngày.
Cách nhận biết năm nhuần: là năm chia hết cho 400 hoặc chia hết
cho 4 nhưng không chia hết cho 100. Chi tiết là:
(nam % 400 == 0) || ((nam % 4 == 0) && (nam % 100 !=0))

§ 5: VÒNG LẶP XÁC ĐỊNH & KHÔNG XÁC ĐỊNH
Khi muốn lặp đi lặp tại một hay khối lệnh nào đó, ta chỉ cần đặt chúng vào
vòng lặp. Có 2 loại vòng lặp: lặp với số lần biết trước (for) và lặp với số lần
không biết trước (while, do ... while).
I. Vòng lặp xác định for:
Cú pháp:
for (biến đếm=giá trị đầu;điều kiện lặp;cập nhật biến đếm)
{
Khối lệnh cần xử lý;
[break;]
}
Ý nghĩa:
Bước 1: kiểm tra điều kiện lặp, nếu đúng (=true) thì chuyển sang bước 2,
nếu sai (=false) dừng vòng lặp.
Bước 2: Thực hiện khối lệnh trong {}, cập nhật biến đếm (thường là tăng hay
giãm). Quay lại bước 1.
Chú ý:
Nếu điều kiện lặp luôn đúng thì vòng lặp không bao giờ dừng lại (lặp vô
tận).
Lệnh break dùng để dừng vòng lặp vô điều kiện.
VD:
In ra màn hình các số từ 1 đến 100 trên cùng 1 dòng
for (var i=1;i<=100;i++) document.write(i + “ “);
In cửu chương 2
for (var j=1;j<=10;i++)
{
document.write(“2 x “ + i + “ = “ + 2*i);
document.write(“<br>”);
}
VD11:
Viết chương trình yêu cầu người dùng nhập tên, sau đó nhập tiếp 5 món ăn mà
họ thích. In kết quả ra màn hình như hình minh họa
var ten=window.prompt("Bạn tên gì ?","Tèo");

var monan;
document.write("<h3>5 món ăn mà " + ten
+ " thích nhất là:</h3>");
for (var i=1;i<=5;i++){
monan=window.prompt("Món thứ " + i,"");
document.write(i + ". " + monan + "<br>");
}
document.write("<font size='3'>Wow !
Toàn những thứ hấp dẫn...</font>");
</script>
Hỏi tên
Kết quả trên màn hình

Hỏi 5 món ăn
II. Vòng lặp không xác định:

1. while:
Cú pháp: while (<điều kiện>){
// Khối lệnh cần xử lý;
[break;]
}
Ý nghĩa: Trong khi điều kiện còn đúng (=true) thì thực hiện lệnh bên trong {}.
VD13:
var n="chuỗi";
while (isNaN(n)==true){
n=window.prompt("Nhập vào 1 số =","");
document.write("Bạn vừa nhập: " + n + "<br>");
}
</script>
Chương trình sau đây sẽ yêu cầu người dùng nhập vào số, nếu cố ý nhập chuỗi
chương trình sẽ bắt nhập hoài
đến khi nhập số nó mới dừng lại. Chúng ta nhập vào cái gì nó sẽ in ra màn
hình cái đó.
2. do ... while:
Cú pháp: do
{
Khối lệnh cần xử lý;
[break;]
} while (<điều kiện>);
Ý nghĩa:
Tương tự như while, nhưng vòng lặp này thực hiện lệnh trước sau đó mới kiểm
tra điều kiện.
VD14:
Viết chương trình yêu cầu nhập vào các số nguyên đến khi nhập vào 0 (số
không) chương trình sẽ ngưng lại và in ra màn hình tổng các số vừa nhập vào.
var n=1;
var tong=0;
do
{
n=parseInt(window.prompt("Nhập vào một số = ","1"));
tong=tong+n;
} while (n!=0);
document.write("Tổng các số vừa nhập = " + tong);
</script>
Nhận xét:
- B1: Chương trình yêu cầu nhập số
- B2: Cộng dồn số vừa nhập vào biến tong (tổng)

- B3: Kiểm tra điều kiện dừng. Nếu chưa vi phạm, quay lại B1. Nếu vi
phạm (=false), ngưng vòng lặp và in giá trị tong ra màn hình.

Bài tập 5:
5.1 Viết chương trình nhập vào số nguyên n<=500. In ra màn hình tổng
các số từ 1 đến n.
5.2 Viết chương trình nhập vào số nguyên n<=500. In ra màn hình tổng
các số chẳn trong khoảng từ 1 đến n
5.3 Nhập n là một số nguyên <=50. Tính biểu thức sau:

1 1 1
S  1    ... 
2 3 n
5.4 Viết chương trình nhập vào 2 số nguyên N & M với N<M. Tính và
đưa và đưa ra màn hình tích các số chia hết cho 3 hoặc 5 trong
phạm vi từ N đến M.
5.5 Nhập vào 2 số nguyên a, b. Tìm UCLN của 2 số này.
5.6 Cho số vốn ban đầu là A đồng. Người ta đem gửi tiết kiệm với lãi
xuất như nhau mỗi tháng là 0.3%. Hỏi muốn đạt được B đồng.
Người này phải gửi bao nhiêu tháng. Giả sử, việc gửi tiết kiệm này là
không kỳ hạn và lãi suất hàng tháng không được cộng dồn vào A.
A, B do người dùng nhập vào, và A<B.
5.7 Viết chương trình nhập vào số nguyên n. Tính n! (giai thừa).
5.8 Viết chương trình chuyển số nguyên n>0 thành dãy số nhị phân.
Phụ lục: Bảng màu cho thiết kế Web



Javascript 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript 1

Uploaded by

Copyright:

Available Formats

THPT NGÔ QUYỀN, Q.7 Diễn đàn HS: http://ngoquyen-edu.

PHẦN 2: LẬP TRÌNH

§ 1: MỘT SỐ KHÁI NIỆM & LỆNH CƠ BẢN

 Giáo viên: Thiên Đăng Trang 1

 Giáo viên: Thiên Đăng Trang 2

2. Lệnh xuất văn bản ra màn hình Browser:

Muốn xuống dòng ta có thể dùng thẻ <br> như HTML

 Giáo viên: Thiên Đăng Trang 3

 Giáo viên: Thiên Đăng Trang 5

 Giáo viên: Thiên Đăng Trang 6

§2: Kiểu Dữ Liệu Trong JavaScript

 Giáo viên: Thiên Đăng Trang 7

 Giáo viên: Thiên Đăng Trang 8

2. Chuyển chuỗi thành biểu thức, mã lệnh JavaScript.

 Giáo viên: Thiên Đăng Trang 9

§3: SỬ DỤNG BIẾN & BIỂU THỨC

Toán tử gán Ý nghĩa Ví dụ Diễn giải

= Bằng X=3 X=3

+= Cộng X+=3 X=x+3

-= Trừ x-=3 X=x-3

*= Nhân X*=3 X=x*3

/= Chia x/=3 X=x/3

%= Lấy phần dư X%=3 X=x%3

II. Biểu thức đại số:

+ Cộng X=2 X+y=5

- Trừ X=3 x-y=-4

* Nhân X=5 X*y=20

% Lấy phần dư 5%2 1

++ Tăng 1 X=5; X++; X=6

 Giáo viên: Thiên Đăng Trang 10

Chú ý 2 toán tử tăng/giảm 1:

III. Biểu thức so sánh:

 Giáo viên: Thiên Đăng Trang 11

== Bằng nhau X=5; y=7;

!= Khác nhau X=5; y=7 X!=y  true

> Lớn hơn

>= Lớn hơn hay bằng

<= Bé hơn hay bằng

Ghép biểu thức so sánh:

Biểu thức A Biểu thức B A && B A || B !A

True True True True False

True False False True False

False True False True True

False False False False True

 Giáo viên: Thiên Đăng Trang 12

 Nhận xét chương trình:

 Giáo viên: Thiên Đăng Trang 13

 Giáo viên: Thiên Đăng Trang 14

§ 4 CÂU LỆNH RẼ NHÁNH IF & SWITCH

 Giáo viên: Thiên Đăng Trang 15

 Giáo viên: Thiên Đăng Trang 17

 Giáo viên: Thiên Đăng Trang 18

§ 5: VÒNG LẶP XÁC ĐỊNH & KHÔNG XÁC ĐỊNH

 Giáo viên: Thiên Đăng Trang 19

Kết quả trên màn hình

II. Vòng lặp không xác định:

- B2: Cộng dồn số vừa nhập vào biến tong (tổng)

 Giáo viên: Thiên Đăng Trang 22

5.3 Nhập n là một số nguyên <=50. Tính biểu thức sau:

5.5 Nhập vào 2 số nguyên a, b. Tìm UCLN của 2 số này.

Phụ lục: Bảng màu cho thiết kế Web

 Giáo viên: Thiên Đăng Trang 23

 Giáo viên: Thiên Đăng Trang 24

 Giáo viên: Thiên Đăng Trang 25

= Nhân X=3 X=x*3