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à khi đặt trong trang web. <script language=”javascript”> //viết chương trình ở đây // nhớ sử dụng chữ thường 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: ... phần đầu ... phần thân -
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
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT 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”> -
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>
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: <script language=”javascript”> //Một lệnh đơn document.write(“Phương trình vô nghiệm”); VD khối lệnh: <script language=”javascript”> { //Khối lệnh var x1, x2; x1=(-b+Math.sqrt(delta))/2/a; x2=(-b-Math.sqrt(delta))/2/a; } 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 !");
Giáo viên: Thiên Đăng
Trang 2
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
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: <script language="javascript"> document.write("
Chào lớp 10A2 !
"); document.write(“Chào mừng lớp 10A2 đến với
Javascript ”); document.write(“Chúc các em vui học”);
Muốn xuống dòng ta có thể dùng thẻ
như HTML 3. Nhập dữ liệu vào một biến: var
; = window.prompt(“Lời nhắc”,”giá trị gợi ý”); VD3: <script language="javascript"> var ten; ten=window.prompt("Bạn tên gì ?","Không Tên"); document.write("oh, chào " + ten + "
Hoan nghênh bạn đến với JavaScript");
Giáo viên: Thiên Đăng
Trang 3
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
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 =window.confirm(“Nội dung muốn khẳng định ?”); VD4: <script language="javascript"> var ok=confirm("Bạn có muốn đi shopping không ?"); document.write("Bạn vừa trả lời "+ok); Giáo viên: Thiên Đăng
Trang 4
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 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à , 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: <script language="javascript"> document.write("Chương trình tính tuổi
"); var ten, ns; Giáo viên: Thiên Đăng
Trang 5
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 ten=window.prompt("Bạn tên ns=window.prompt("Bạn sinh document.write("Chào bạn " tuổi"); document.write("Cảm ơn bạn chương trình này.");
1.2
gì ?","Peter"); năm mấy ?","1993"); + ten + ". Năm nay bạn " + (2009-ns) + " " + ten + "
Đã chịu khó sử dụng
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 ! 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. - Bán kính đường tròn ngoại tiếp tam giác theo công thức: R
abc 4S
Biết rằng: Diện tích S Và 1.6
p ( p a )( p b)( p c ) trong đó: p
a bc 2
a Math.sqrt (a )
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).
Giáo viên: Thiên Đăng
Trang 6
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
§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ú ý: Giáo viên: Thiên Đăng
Trang 7
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 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: <script language="javascript"> 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)
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
Giáo viên: Thiên Đăng
Trang 8
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 -
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: <script language="javascript"> 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); 3. Kiểm tra giá trị không phải số ? Cú pháp: isNaN(); Trả về true nếu đư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 xM
xB x C y yC ; yM B Sau đó tính độ dài AM như các bài tập 1. 2 2
Giáo viên: Thiên Đăng
Trang 9
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
§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 Cộng
Ví dụ X=2
Kết quả X+y=5
Y=3 -
Trừ
X=3
x-y=-4
Y=7 *
Nhân
X=5
X*y=20
Y=4 /
%
++
chia
Lấy phần dư
Tăng 1
Giáo viên: Thiên Đăng
15/5
3
3/2
1.5
5%2
1
10%8
2
X=5; X++;
X=6 Trang 10
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 --
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: <script language="javascript"> 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) Kết quả nhận được
(1) a=b++: nhận thấy phép gán = được thực hiện trước, sau đó mới đến b++
(2) x=++y: Phép toán ++y thực 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)
Giáo viên: Thiên Đăng
Trang 11
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 Toán tử ==
Diễn giải
Ví dụ
Bằng nhau
===
X=5; y=7;
Bằng nhau & phải cùng kiểu
!=
Khác nhau
>
Lớn hơn
<
Bé hơn
>=
Lớn hơn hay bằng
<=
Bé hơn hay bằng
Kết quả
X==y
False
X=5;
X==y true
y=”5”;
X===y false
X=5; y=7
X!=y true
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>)?:; Ý 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. Giáo viên: Thiên Đăng
Trang 12
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 VD7: <script language="javascript"> 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("Bảng kết quả học tập
"); document.write("Điểm Toán: " + toan + "
"); document.write("Điểm Lý
: " + ly + "
");
document.write("Điểm Hóa : " + hoa + ""); document.write("Kết quả thi: " + kq);
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”.
Giáo viên: Thiên Đăng
Trang 13
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 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(“”); 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
Giáo viên: Thiên Đăng
Trang 14
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
§ 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>) 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. <script language="javascript"> 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); 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. <script language="javascript"> 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 + ""); document.write("Chu vi Giáo viên: Thiên Đăng
= " + chuvi + "
"); Trang 15
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 document.write("Diện tích = " + dientich); } else window.alert("Nhập tầm bậy ! Sao tính được."); 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. <script language="javascript"> 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); 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 : khối lệnh 1;
Giáo viên: Thiên Đăng
Trang 16
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 break; case : 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: <script language="javascript"> document.write("Báo giá rau quả:
"); 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 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).
Giáo viên: Thiên Đăng
Trang 17
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 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))
Giáo viên: Thiên Đăng
Trang 18
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
§ 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(“
”); } 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 <script language="javascript"> var ten=window.prompt("Bạn tên gì ?","Tèo"); Giáo viên: Thiên Đăng
Trang 19
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 var monan; document.write("5 món ăn mà " + ten + " thích nhất là:
"); for (var i=1;i<=5;i++){ monan=window.prompt("Món thứ " + i,""); document.write(i + ". " + monan + "
"); } document.write("Wow ! Toàn những thứ hấp dẫn...");
Hỏi tên
Hỏi 5 món ăn
Kết quả trên màn hình
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: <script language="javascript"> var n="chuỗi"; Giáo viên: Thiên Đăng
Trang 20
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 while (isNaN(n)==true){ n=window.prompt("Nhập vào 1 số =",""); document.write("Bạn vừa nhập: " + n + "
"); } 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: Giáo viên: Thiên Đăng
Trang 21
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 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. <script language="javascript"> 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); 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.
Giáo viên: Thiên Đăng
Trang 22
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 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
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
Giáo viên: Thiên Đăng
Trang 23
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
Giáo viên: Thiên Đăng
Trang 24
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
Giáo viên: Thiên Đăng
Trang 25