Bài 06: Thiết kế một trang web như sau: Trong ñó trường Value ñể nhập giá trị vào, CheckBox “Square” ñể chị ñịnh phép bình phương.. Trường Result ñể hiện kết quả của phép tính.. Khi nhập
Trang 1Bài thực hành #06 JavaScript
Bài 01: Dùng JavaScript ñể in ra một lời chào
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<script language="JavaScript">
document.write("Xin chao ban");
</script>
</body>
</html>
Bài 02: Dùng hàm alert() ñể in ra lời chào, sử dụng một file riêng ñể chứa code JavaScript
Trong file “general.js”
// JavaScript Document
function sayhello()
{
alert('Hello, Chao cac ban lop 04CT1 \nChuc cac ban mot ngay vui ve!');
}
Trong file “vidu.htm”
<html>
<head>
</head>
<body>
<script language="javascript" src="general.js">
</script>
<center>
<a href="javascript:sayhello()">
<img src="images/TPHCM17.jpg" border="0" alt="TPHCM" width="75" height="51"></a>
</center>
</body>
</html>
Bài 03: Giao tiếp với người sử dụng qua hàm prompt()
<HTML>
<HEAD>
<TITLE> JavaScript Exemple </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
var name=prompt("Hello! What’s your name ?","Lung");
// document.write("Hello " + name + " ! I hope you like JavaScript ");
</SCRIPT>
</HEAD>
<BODY>
<center>
Trang 2<script language="javascript">
document.write("Hello " + name + " ! I hope you like JavaScript ");
</script>
</center>
</BODY>
</HTML>
Bài 04:Tạo một form nhập dữ liệu có dạng sau:
<html>
<head>
<title>An Event Handler Exemple</title>
<script LANGUAGE="JavaScript">
function CheckAge(form) {
if ( (form.AGE.value<0)||(form.AGE.value>120) )
{
alert("Tổi nhập vào không hợp lệ! mời bạn nhập lại");
form.AGE.value=0;
}
}
</script>
</head>
<body>
<form NAME="PHIEU_DIEU_TRA">
Nhập các thông tin họ tên bạn vào:<br>
Tên:
<input TYPE="TEXT" NAME="TEN" MAXLENGTH="10" SIZE="10"><br>
Tên ñệm: <input TYPE="TEXT" NAME="DEM" MAXLENGTH="15" SIZE="10"><br>
Trang 3Họ:
<input TYPE="TEXT" NAME="HO" MAXLENGTH="10" SIZE="10"><br>
Age
<input TYPE="TEXT" NAME="AGE" MAXLENGTH="3" SIZE="2"
onChange="CheckAge(PHIEU_DIEU_TRA)"><br>
<p>Bạn thích mùa nào nhất::<br>
Mùa xuân<input TYPE="RADIO" NAME="MUA" VALUE="Mua xuan"> Mùa hạ<input TYPE="RADIO" NAME="MUA" VALUE="Mua ha">
Mùa thu<input TYPE="RADIO" NAME="MUA" VALUE="Mua thu"> Mùa ñông<input TYPE="RADIO" NAME="MUA" VALUE="Mua dong">
</p>
<p>Bạn thích hoạt ñộng nào ngoài trời::<br>
ði bộ <input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Di bo"> Trượt tuyết<input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Truot tuyet">
Bơi lội<input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Duoi nuoc"> ðạp xe <input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Dap xe"> </p>
<p><input TYPE="SUBMIT"> <input TYPE="RESET"> </p>
</form>
</body>
</html>
Bài 05: Tạo ñồng hồ trên trang web
<HTML>
<HEAD>
<script language="JavaScript">
// Clock online
function show_time()
{
var dat, hour, min, sec, data;
dat = new Date();
hour = dat.getHours(); if(hour<10) hour = "0" + hour;
min = dat.getMinutes(); if(min<10) min = "0" + min;
sec = dat.getSeconds(); if(sec<10) sec = "0" + sec;
data = hour + ":" + min + ":" + sec;
document.clock.time.value = data;
setTimeout("show_time()", 1000);
}
</script>
</HEAD>
<BODY>
<form name="clock" method="post">
<input type="text" name="time" size="10">
</form>
<script language="javascript">
show_time();
</script>
</BODY>
Trang 4</HTML>
Bài 06: Thiết kế một trang web như sau:
Trong ñó trường Value ñể nhập giá trị vào, CheckBox “Square” ñể chị ñịnh phép bình phương Trường Result ñể hiện kết quả của phép tính Khi nhập vào Value thì Result sẽ là Value*2, còn nếu Square là Checked thì Result là Value2 và nếu nhập vào Result trước thì sẽ suy ra Value ngược lại
<HTML>
<HEAD>
<TITLE>checkbox Example</TITLE>
<SCRIPT>
<! HIDE FROM OTHER BROWSERS
function calculate(form,callingField) {
if (callingField == "result") { // if(1)
if (form.square.checked) { // if(2)
form.entry.value = Math.sqrt(form.result.value);
}
else {
form.entry.value = form.result.value / 2;
} //end if(2)
}
else{
if (form.square.checked) { // if(3)
form.result.value=form.entry.value*form.entry.value;
}
else {
form.result.value = form.entry.value * 2;
} //enfzd if(3)
}//end if(1)
}//end function
// STOP HIDING FROM OTHER BROWSERS >
</SCRIPT>
</HEAD>
<BODY>
Trang 5<FORM METHOD=POST>
Value:
<INPUT TYPE="text" NAME="entry" VALUE=0
onChange="calculate(this.form,this.name);" size="20">
<BR>
Action (default double):
<INPUT TYPE=checkbox NAME=square
onClick="calculate(this.form,this.name);" value="ON">
Square
<BR>
Result:
<INPUT TYPE="text" NAME="result" VALUE=0
onChange="calculate(this.form,this.name);" size="20">
</FORM>
</BODY>
</HTML>
Bài 07:
Thiết kế một máy tính với các phép tính +, -, x, : Mỗi khi thực hiện thì phải kiểm tra dữ liệu nhập vào xem có ñúng là số không, nếu không thì alert thông bao cho người dùng biết