Bài tập thực hành JavaScript
1. Bài Tập 1:
Tạo Giao Diện Nh Sau
Yêu cầu :
Khi Click chuột vào Radio Button thì có các thông điệp (Message) tơng ứng
<FORM>
<p>
1:
<INPUT TYPE="radio" NAME="radio" value="Bạn chọn số 1" onClick="alert(value)">
2:
<INPUT TYPE="radio" NAME="radio" value=" Bạn chọn số 2 " onClick="alert(value)">
3:
<INPUT TYPE="radio" NAME="radio" value=" Bạn chọn số 3 onClick="alert(value)" >
</form>
2. Bài tập 2
Khi Click chuột vàonút Message thì hiện lên câu chào
<form>
<input type="button" value="message" onClick="alert('How are you'); return true">
</form>
3.BàI tập 3
Chào tạm biệt
Khi đóng cửa sổ trình duyệt hoặc chuyển sang trang Web khác thì xuất hiện lời
chào tạm biệt
Bài tập thực hành Javascript
Bµi tËp thùc hµnh Javascript
5.Bài tập 5
Hãy tạo một chơng trình máy tính điện tử nh sau : <html>
<head><script LANGUAGE="JavaScript">
function a_plus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.ans.value = c
}
function a_minus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.ans.value=c
}
function a_times_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.ans.value=c
}
type "number" value="0" name="ans" size="9"> </p>
</form>
</body>
</html>
6.bµI tËp 6:
Tạo chương trình để khi bấm vào nút Play thì hình trong khung sẽ chuyển qua
hình khác một cách ngẫu nhiên . Chương trình sẽ dừng khi bấm vào nút stop
Hướng dẫn : Tạo một site tên BT6 – tạo trong site này một thư mục hình ảnh
Images chứa bộ sưu tập hình <script>
var idq;
function play()
{
var arrhinh= new Array();
Bµi tËp thùc hµnh Javascript
arrhinh[0]= "images/1.jpg";
arrhinh[1]= "images/2.jpg";
arrhinh[2]= "images/3.jpg";
arrhinh[3]= "images/4.jpg";
arrhinh[4]= "images/5.jpg";
arrhinh[5]= "images/6.jpg";
var i=Math.round(Math.random()*4)
idhinh.src=arrhinh[i];
idq=setTimeout("play()",1000);
}
function stop()
{
clearTimeout(idq);
8.Bµi tËp 8
Viết chương cho phép chọn hình trong dropdown list để xem
<script>
function duyet(path)
{
document.XemHinh.abc.src=path;
}
</script>
</head>
<body>
<form id="XemHinh" name="XemHinh">
<table>
<tr>
<td width="312" rowspan="5" align="center" valign="middle">
<img src="img/1.jpg" width="150" height="150" id="abc">
</td>
<td><select name="hinhxe" id="hinhxe" onChange="duyet(value)">
<option value="img/1.jpg" selected>hình 1</option>
<option value="img/2.jpg">Hình 2</option>
<option value="img/3.jpg">Hình 3</option>
<option value="img/4.jpg">Hình 4</option>
<option value="img/5.jpg">Hình 5</option>
<option value="img/6.jpg">Hình 6</option>
<option value="img/7.jpg">Hình 7</option>
Bµi tËp thùc hµnh Javascript
<option value="img/8.jpg">Hình 8</option>
}
return true
}
// End >
</SCRIPT>
<BODY>
<FORM name="testform" onSubmit="return validate()">
Name:<input type="text" size=30 name="Name">
Age:<input type="text" size=3 name="age">
<input type="submit" value="Submit">
</FORM> Bµi tËp thùc hµnh Javascript
11. BµI tËp 11.
T¹o dßng ch÷ ch¹y trªn thanh tr¹ng th¸i:
Welcome to Total <html>
<head><script LANGUAGE="JavaScript">
<! Begin
function scrollit(seed) {
var m1 = "Welcome to Total JavaScript 99! ";
var m2 = " You can find all the scripts you need here! ";
var m3 = " Enjoy ";
var m4 = "";
var msg=m1+m2+m3+m4;
var out = " ";
var c = 1;
// End >
</script>
<title></title>
</head>
<body onLoad="scrollit(100)">
</body>
</html>
12. BµI tËp 12
T¹o dßng ch÷ ch¹y trong TextBox
<script language="JavaScript">
<! begin
var max=0;
function textlist()
{
max=textlist.arguments.length;
for (i=0; i<max; i++)
this[i]=textlist.arguments[i];
}
tl=new textlist
(
"This is a message",
"Another one",
"And this will be the third",
"And the fourth is the last !"
);
<head>
<title>E:\scrolls\classic_.htm</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<! Begin
var osd = " "
osd +="This is yet another JavaScript Scroll example ";
osd +="from the good folks at The JavaScript Source. ";
osd +="This one has the date and time at the front.";
osd +="Did you notice? It's coming around again, look! ";
osd +=" ";
var timer;
var msg = "";
function scrollMaster () {
msg = customDateSpring(new Date())
clearTimeout(timer)
msg += " " + showtime() + " " + osd
for (var i= 0; i < 100; i++){
msg = " " + msg;
}
scrollMe()
}
function scrollMe(){
window.status = msg;
msg = msg.substring(1, msg.length) + msg.substring(0,1);
timer = setTimeout("scrollMe()", 200);
}
function showtime (){
var now = new Date();
return this
}
monthNames = new MakeArray(12)
monthNames[1] = "Janurary"
monthNames[2] = "February"
monthNames[3] = "March"
monthNames[4] = "April"
monthNames[5] = "May"
monthNames[6] = "June"
monthNames[7] = "July"
monthNames[8] = "August"
monthNames[9] = "Sept."
monthNames[10] = "Oct."
monthNames[11] = "Nov."
monthNames[12] = "Dec."
daysNames = new MakeArray(7)
daysNames[1] = "Sunday"
Bµi tËp thùc hµnh Javascript
daysNames[2] = "Monday"
daysNames[3] = "Tuesday"
daysNames[4] = "Wednesday"
daysNames[5] = "Thursday"
daysNames[6] = "Friday"
daysNames[7] = "Saturday"
function customDateSpring(oneDate) {
var theDay = daysNames[oneDate.getDay() +1]
var theDate =oneDate.getDate()
var theMonth = monthNames[oneDate.getMonth() +1]
var dayth="th"
if ((theDate == 1) || (theDate == 21) || (theDate == 31)) {
{
if(update.chonlua[0].checked)
{
vangmua.innerHTML=update.muavao.value;
vangban.innerHTML=update.banra.value;
}
else
{
domua.innerHTML=update.muavao.value;
doban.innerHTML=update.banra.value;
}
}
</script>
15.Bµi tËp 15
T¹o 3 button nh− sau :
<html>
<head>
<title>Create a New Window</title>
Bµi tËp thùc hµnh Javascript
</head>
<body>
<form NAME="winform">
<p><input TYPE="button" VALUE="Open New Window"
onClick="NewWin=window.open('','NewWin',
<body onLoad="Move(50, 400);" >
<img src="gaucon.gif" id="img1"/>
</body>
Bµi tËp thùc hµnh Javascript
17. Bài tập 17
Tạo Combo box có fulldown menu
<html>
<head><script LANGUAGE="JavaScript">
<! Begin
function formHandler(){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
// End >
}
</script>
<title>E:\button\pushme_.htm</title>
</head>
<! STEP ONE: Paste this code into the BODY of your HTML document >
<body>
<form name="form">
<p><select NAME="site" SIZE="1" onChange="formHandler()">
<option VALUE>Go to </option>
<option VALUE="">Metacrawler </option>
<option VALUE="">Altavista </option>
<option VALUE="">Webcrawler </option>
<option VALUE="">Lycos </option>
</p>
</body>
</html>
19. Bài tập 19
Tạo nút bấm khi ngời dùng bấm vào thì hiện mã nguồn chơng trình
<FORM>
<INPUT TYPE=button NAME="view" VALUE="click me for the source of the page "
OnClick='window.location="view-source:" +window.location.href'>
</FORM>
20.Bài tập 20
Sử dụng Cookies để đếm số lần truy cập trang Web
<html>
<head><script LANGUAGE="JavaScript">
<! Begin
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
// End >
</script>
<title>E:\cookies\name_.htm</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<! Begin
Bµi tËp thùc hµnh Javascript
document.write("You've been here <b>" + amt() + "</b> times.")
// End >
</script>
</body>
</html>
21. Bài tập 21
Thiết kế Form như sau:
stt.innerText=dem;
hoten.innerText=dky.ten.value;
socm.innerText=dky.cmnd.value;
diachi.innerText=dky.hokhau.value;
option=document.dky.hinhxe.options[document.dky.hinhxe.selectedIn
dex].text;
image.innerText=option;
dulieu.id="dulieu"+dem;
stt.id="stt"+dem;
hoten.id="hoten"+dem;
Bµi tËp thùc hµnh Javascript
socm.id="socm"+dem;
diachi.id="diachi"+dem;
image.id="image"+dem; a='<table id=bang border=1 class=style1>';
b=bang.innerHTML;
c='<tr id=dulieu>';
c=c+'<td id=stt ></td>';
c=c+'<td id=hoten ></td>';
c=c+'<td id=socm ></td>';
c=c+'<td id=diachi ></td>';
c=c+'<td id=image ></td>';
d='</table>';
bang.outerHTML=a+b+c+d;
dem=dem++;
}
document.dky.cmnd.focus();}
}
}
if(document.dky.hokhau.value=="")
{tbao=tbao+" _ Hộ khẩu chưa điền"
document.dky.hokhau.focus();
}
if(tbao!="")
{alert(tbao);}
else
{nhap();
res();
}
}
function duyet(path)
{
document.dky.abc.src=path;
}
</script>
<body onLoad="mo()">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<! DWLayoutTable >
<tr>
<td width="200" height="600" valign="top"><table width="100%"
border="0" cellpadding="0" cellspacing="0">
<! DWLayoutTable >
<tr>
<td width="200" height="600" align="left" valign="top"><table
width="200" border="2" bordercolor="#999900" bgcolor="#E4E4C9"
<tr>
<td width="600" height="600" align="left" valign="top">
<form action="" method="post" name="dky" id="dky">
<table width="594" border="1">
<tr align="center" valign="middle">
<td colspan="3" class="cls">Đăng ký
giấy phép lái xe ô tô</td>
</tr>
<tr class="style1">
<td width="108" align="right" class="style4">Họ
tên</td>
<td width="152"><input name="ten" type="text" id="ten"
onFocus="sang()"></td>
<td width="312" rowspan="5" align="center" valign="middle"><img
src=" /img/1.jpg" width="150" height="150" id="abc"></td>
Bµi tËp thùc hµnh Javascript
</tr>
<tr class="style1">
<td align="right" class="style4">Số CMND </td>
<td><input name="cmnd" type="text" id="cmnd"
onChange="sang()"></td>
</tr>
<tr class="style1">
<td align="right" class="style4">Hộ khẩu</td>
<td><input name="hokhau" type="text" id="hokhau2"></td>
</tr>
<tr class="style1">
<td align="right" class="style4">Hình xe </td>
<td><select name="hinhxe" id="hinhxe"
onChange="duyet(value)">
<td width="119">Hộ khẩu</td>
<td width="131">Hình</td>
</tr>
<tr id="dulieu">
<td id="stt"> </td>
<td id="hoten"> </td>
<td id="socm"> </td>
<td id="diachi"> </td>
<td id="image"> </td>
</tr>
</table>
<p> </p></td>
</tr><table width="600" border="1">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="59"> </td>
<td width="59"> </td>
<td width="460"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
Copyright: Tài liệu đại học ©