bài thực hành thiết kế web, phần 6
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (128.58 KB, 5 trang )
Bà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>
<a href="javascript:sayhello()">
<img src="images/TPHCM17.jpg" border="0" alt="TPHCM" width="75" height="51"></a>
</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>
<script language="javascript">
document.write("Hello " + name + " ! I hope you like JavaScript ");
</script>
</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:
Tên:
<input TYPE="TEXT" NAME="TEN" MAXLENGTH="10" SIZE="10">
Tên ñệm: <input TYPE="TEXT" NAME="DEM" MAXLENGTH="15" SIZE="10">
Họ:
<input TYPE="TEXT" NAME="HO" MAXLENGTH="10" SIZE="10">
Age
onChange="CheckAge(PHIEU_DIEU_TRA)">
Bạn thích mùa nào nhất::
Mùa xuân<input TYPE="RADIO" NAME="MUA" VALUE="Mua xuan"> Mùa hạ
Mùa thu<input TYPE="RADIO" NAME="MUA" VALUE="Mua thu"> Mùa ñông
Bạn thích hoạt ñộng nào ngoài trời::
ð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">
<input TYPE="SUBMIT"> <input TYPE="RESET">
</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>
</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>
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Value:
onChange="calculate(this.form,this.name);" size="20">
<BR>
Action (default double):
onClick="calculate(this.form,this.name);" value="ON">
Square
<BR>
Result:
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.
