Embed Size (px)
Citation preview
BÀI TẬP JAVASCRIPTPHẦN 1:1. Hiển thị dòng "Hello, Welcome to JavaScript!" bằng lệnh
document.write().(lệnh này phải được hiển thị ngay chứ không giống như hàm vì thế phải đặt lệnh này ngay nơi cần hiển thị).<HTML> <HEAD>
<TITLE>JavaScript</TITLE> </HEAD> <BODY>
<SCRIPT>document.write("Hello, Welcome to JavaScript");
</SCRIPT> </BODY>
</HTML>2. Kết quả ở câu 1 sẽ là một dòng màu đen, hãy đổi thành màu "blue" và đặt
ở giữa trang, cho thành chữ đậm, nghiêng, …Thay đổi câu lệnh thành: document.write("<fonr color='blue'>Hello, Welcome to JavaScript!</font>");Nếu muốn ở giữa trang thì thêm thẻ <center> vào trước thẻ <font>.
3. Thay đổi màu nền ( dùng thuộc tính bgColor của document), màu chữ trên trang ( fgColor của document ), thanh trạng thái ( defaultSatus ), …
4. Thông báo ra màn hình hôm nay là thứ mấy<SCRIPT> document.write("Hello, Welcome to JavaScript!");
Var Today = new Date();var day = Today.getDate();Var month = Today.getMonth()+1;//phải cộng 1 vì số 0 là tháng 1, số 1 là tháng 2, …Var year = Today.getFullYear();Document.write("Today is "+day+"/"+month+"/"+year);
</SCRIPT>5. Thông báo thêm hôm nay là thứ mấy ( Sunday, Monday, … )?
Đối tượng date có phương thức getDay() trả về thứ trong tuần: 0 là Sunday, 1 là Monday, … Dùng phương thức này ta chỉ nhận được số nguyên chứ không nhậ được tên theo thứ tự mong muốn. Vì vậy ta phải có cách để chuyển đổi sod61 nguyên từ 0 đến 6 sang các thứ trong tuần, ta viết hàm DayTxt(DayNumber) nhận tham số là 1 số từ 0 đến 6 và trả về thứ tương ứng.Đưa các dòng sau đây vào thẻ <head>:<SCRIPT>
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang1/12
Var Days = new Array();Days[0] = "Sunday";Days[1] = "Monday";Days[2] = "Tuesday";Days[3] = "Wednesday";Days[4] = "Thursday";Days[5] = "Friday";Days[6] = "Saturday";Function DayTxt(DayNumber){
return Days[DayNumber];}
</SCRIPT>Sửa các dòng lệnh ở bài 4 thành:<SCRIPT> document.write("Hello, Welcome to JavaScript!");
var Today = new Date();var day = Today.getDate();var month = Today.getMonth()+1;var year = Today.getFullYear();var dayTxt = DayTxt(Today.getDay());document.write("Today is"+datTxt+" "+day+"/"+month+"/"+year);
</SCRIPT>6. Dùng phương pháptương tự trên, hãy hiển thị tháng dưới dạng chữ
(Jannury, February, March, April, May, Jun, July, August, September, Otober, November, December).
7. Cũng như bài 6 nhưng thông báohôm nay là ngày chẳn hay ngày lẻ (even hay odd) dựa vào ngày hiện hành đã lưu trong biến dayViết dòng lệnh tiếp theo:if (day%2==0 ){
Document.write("<BR>This is an even day");}else{
document.write("<BR>This is an odd day");}8. Hãy nhập bảng lượng giác của các góc: 0, 15, 30, 45, … , 180 độ.( góc sau
hơn góc trước 15 độ )Chú ý: Đối tượng Math có hàm sin, cos và tính sin, cos theo radian, vì vậy phải chuyển độ thành radian trước khi sử dụng các phương thức của Math.Yêu cầu: Kết quả phải ở dạng bảng (table).Viết trong phần <BODY><table> <TR>
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang2/12
<TH>Degrees<TH>Sin<TH>Cos
</TR><SCRIPT>
for (d=0; d<=180; d++){var Radian = (Math.PI/180)*d;var SinValue = Math.sin(radian);var CosValue = Math.cos(radian);
//hiển thị các giá trị sin, cos lên table… … … }
<SCRIPT></table>
9. Hãy tạo một Form để nhập thông tin của một người gồm tên họ, địa chỉ, ngày tháng năm sinh, trình độ học vấn, …Yêu cầu: Chọn ngày từ danh sánh 1, 2, 3, …, 31.Chọn tháng từ danh sách 1, 2, 3, …, 12.Chọn năm từ danh sách các năm ( chẳng hạn từ 1950 đến 2001 ).Chú ý: Vì các danh sách có rất nhiều giá trị nênta không thể trực tiếp nhận vào tất cả được mà phải dùng JavaScript.Ví dụ: <SELECT name="Day"> <script>
for (i=1; i<=31; i++){document.writeln("<option>"+i)
}</script>
</SELECT>Kết quả tạo được như ta mong muốn, nhưng khi chọn và Submit form đi thì trường "Day" sẽ không có giá trị nào cả! Đó là vì trong thẻ <option> ta không có thuộc tính value.Sửa lại như sau:…document.writeln("<option value='"+i+"'>"+i);…Kết quả sẽ là <option value='1'>1 <option value='2'>2, …
10. Như bài 9 nhưng ngày tháng mặc định là chọn ngày tháng hiện hành. Chú ý: ở bài 9 ngày mặc định là 1, tháng mặc định là 1 (do chúng nằm ở phần đầu tiên)
PHẦN 2:Baøi 1:
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang3/12
Vieát chöông trình nhaäp vaøo 2 soá m(doøng),n(coät) (duøng haøm prompt ñeå nhaäp). Sau ñoù xuaát ra trang Web moät Table theo daïng sau:Ví duï (m=3,n=4)11 12 13 1421 22 23 2431 32 33 34Baøi 2: Vieát chöông trình nhaäp vaøo Maõ soá SV, Hoï teân, Lôùp (duøng haøm prompt ñeå nhaäp) Sau ñoù hieån thò thoâng tin vöøa nhaäp vaøo ra baûng theo daïng sau:
Baøi taäp 3:Vieát chöông trình nhaäp vaøo soá 3 soá m,n , p (duøng haøm prompt). Sau ñoù taïo ra moät Form goàm coù m phaàn töû Text , n nhoùm radio moãi nhoùm coù 2 tuøy choïn caùc nuùt radio coù giaù trò laàn löôït laø 1->2*n , vaø 1 Dropdown menu(Listbox) coù p tuøy choïn moãi option coù giaù trò laàn löôït laø 1->p vaøText cuûa option laø Text1 ->Textp.(Löu yù laø caùc phaàn töû treân Form phaûi coù teân khaùc nhau.)Baøi 4:Vieát chöông trình taïo moät Form nhö sau:
Sau ñoù nhaäp lieäu vaøo Form I%khi baám nuùt Nhap(button)roài hieån thò keát quaû ra daïng nhö sau:laáy döõ lieäu tröôøng Hoï teân hieån thò vaøo oâ YourName, Maät khaåu vaøo oâ YourPWD
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang4/12
Baøi 5.Yeâu caàu nhö baøi 4 nhöng kieåm tra döõ lieäu caùc tröôøng phaûi khoâng roãng vaø tröôøng Password coù ít nhaát 6 kyù töï neáu tröôøng naøokhoâng thoûa yeâu caàu thì hieån thò thoâng baùo vaø ñöa con troû veà oâ ñoù ñeå yeâu caàu ngöôøi söû duïng nhaäp laïi döõ lieäu.Baøi 6 : Yeâu caàu nhö baøi 4 nhöng theâm ñieàu kieän nhö sau khi Form Load leân thì con troû ñaët trong tröôøng UserName vaø nuùt Nhap ôû cheá ñoä khoâng cho pheùp choïn . Khi ngöôøi söû duïng rôøi khoûi tröôøng UserName neáu kieåm tra tröôøng naøy khoâng roãng thì nuùt Nhap ñöôïc saùng leân (cho pheùp choïn)Baøi 7: Thieát keá trang nhö sau:
Baám vaøo nuùt Play thì chöông trình thay ñoåi hình thay ñoåi moät caùch ngaãu nhieân (2 giaây ñoåi 1 hình) Baám stop thì döøng laïiBaøi 8: Thieát keá trang nhö sau. Khi ngöôøi söû duïng nhaäp vaøo tröôøng soá löôïng vaø rôøi khoûi tröôøng naøy thì oâ Toång thaønh tieàn seõ ñöôïc caäp nhaät(löu yù neáu nhaäp vaøo khoâng phaûi laø soá thì thoâng baùo yeâu caàu nhaäp laïi)
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang5/12
Baøi 9:Cho trang Web sau
Trong noù goàm caùc tuøy choïn sau:Mua vaøo, Baùn ra laø tröôøng textboxLoaïi xe laø Dropdown Menu goàm caùc optionText Value
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang6/12
Toyota ../images/mer2.jpgKIA ../images/otoa1.jpgFord ../images/t2.jpgCaäp nhaät cho: goàm 2 tuøy choïn laàn löôït coù giaù trò laø 1 , 0 maëc ñònh khoâng ñöôïc choïn nuùt naøo.Update, State laø nuùt button.Yeâu caàu xöû lyù:
1) Khi trang load leân thì con troû nhaäp lieäu trong tröôøng ‘Mua vaøo’ vaø nuùt State ôû cheá ñoä khoâng cho pheùp choïn.
2) Khi di chuyeån con troû ra khoûi tröôøng ‘Mua vaøo’ neáu nhö giaù trò tröôøng naøy laø soá vaø khoâng roãng thì nuùt State saùng leân.
3) Khi Click vaøo muïc choïn hình quaõng caùo thì seõ theå hieän hình ñoù beân vuøng beân.
4) Khi baám vaøo nuùt Update vaø neáu nuùt radio ‘Vaøng’ ñöôïc choïn thì caäp döõ lieäu ôû ‘Baûng tin thò tröôøng’ trong muïc ‘Vaøng’ coøn ngöôïc laïi thì caäp nhaät ôû muïc ‘USD’ töông öùng vôùi tröôøng ‘Mua vaøo’ cuûa coät ‘Mua vaøo’ vaø tröôøng ‘Baùn ra’ cuûa coät ‘Baùn ra’ (Duøng inner ñeå caäp nhaät)
Baøi 10: Ch o trang web sau:
Yeâu caàu: (Töï theâm caùc option trong Listbox vaø ñaët giaù trò trong radio) Haõy nhaäp döõ lieäu treân Form sau ñoù baám Dang ky thì döõ lieäu seõ hieän thò vaøo caùc coät töông öùng a,b,c,d .(Löu yù laø döõ lieäu tröôùc ñoù vaãn coøn) duøng:
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang7/12
a) innerHTML hoaëc innerTextb) Iframe
Ví duï: Thieát keá Form nhö sau:
Vieát chöông trình xöû lyù theo yeâu caàu sau:1. Khi trang load leân thì nuùt Nhap ôû cheá ñoä môø vaø
con troû nhaäp lieäu ôû oâ hoï teân.2. Khi rôøi khoûi tröôøng Lôùp neáu tröôøng hoï teân vaø
lôùp khaùc roãng thì nuùt Nhap saùng leân.3. Baám nuùt Nhap thì döõ lieäu hieån thò vaøo baûng
“Danh Sach Sinh Vien” ôû beân döôùi vaø nuùt Nhap laïi môø
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang8/12
<html><head><meta http-equiv="Content-Language" content="en-us"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>THEM SINH VIEN</title><script><!-- Cau 1--> function Init() { frmnhap.ht.focus() frmnhap.nh.disabled=true }<!---Cau 2--> function Test() { var hten,lop; hten=frmnhap.ht.value; lop=frmnhap.lo.value; if(hten=="") { alert("Ban quen nhap ho ten roi") return; } if(lop=="")
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang9/12
{ alert("Ban quen nhap lop roi") return; } frmnhap.nh.disabled=false } var count; count=1; function WriteData() { var hten,lop; var pdau,pthan,pthem,pcuoi hten=frmnhap.ht.value; lop=frmnhap.lo.value;
Idhten.innerHTML=htenIdlop.innerHTML=lopIdhten.id="Idhten"+countIdlop.id="Idlop"+countcount++;pthan=Iddata.innerHTMLpdau="<table id=Iddata border='1' cellpadding=1
cellspacing='1' width='100%' STYLE='border-collapse:collapse'>"
pthem="<tr>" pthem=pthem+ " <td width=50% id=Idhten style='font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold'> </td>" pthem=pthem+" <td width=50% id=Idlop style='font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold'> </td>" pthem=pthem+ " </tr>" pcuoi="</table>"
Iddata.outerHTML=pdau+pthan+pthem+pcuoifrmnhap.nh.disabled=truefrmnhap.ht.value=""frmnhap.lo.value=""
}</script>
</head>
<body onload=Init()>
<form method="POST" action="--WEBBOT-SELF--" name="frmnhap">
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang10/12
<table width=100% border="1" cellspacing="1" cellpadding=1 cellspacing="1" STYLE="border-collapse:collapse"> <tr> <td width="100%" colspan="2" style="font-family: Times New Roman; font-size: 14pt; color: #808000; font-weight: bold" align="center" bgcolor="#E6FFF9">THEM SINH VIEN</td> </tr> <tr> <td width="26%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold" align="right">Họ tên</td> <td width="74%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold"><input type="text" name="ht" size="20"></td> </tr> <tr> <td width="26%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold" align="right">Lớp</td> <td width="74%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold"><input type="text" name="lo" size="20" onblur="Test()"></td> </tr> <tr> <td width="26%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold" align="right"></td> <td width="74%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold"><input type="button" value="Nhap" onclick="WriteData()" name="nh"></td> </tr> <tr> <td width="100%" style="font-family: Times New Roman; font-size: 14pt; color: #CC3300; font-weight: bold" align="center" colspan="2" bgcolor="#E6FFF9">DANH SACH SINH VIEN</td> </tr> <tr> <td width="100%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold" align="center" colspan="2">
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang11/12
<table id=Iddata border="1" cellpadding=1 cellspacing="1" width="100%" STYLE="border-collapse:collapse"> <tr> <td width="50%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold" align="center" bgcolor="#E0E0E0">HỌ TÊN</td> <td width="50%" style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold" align="center" bgcolor="#E0E0E0">LỚP</td> </tr> <tr> <td width="50%" id=Idhten style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold"> </td> <td width="50%" id=Idlop style="font-family: Tahoma; font-size: 10pt; color: #336699; font-weight: bold"> </td> </tr> </table> </td> </tr> </table></form>
</body>
</html>
Khoa – CNTT - Đại học Công nghiệp TPHCM Trang12/12
