Microsoft Word - JAVASCRIPT

Bản ghi

1 Kòch baûn JavaScript 1 KÒCH BAÛN JAVASCRIPT TREÂN CLIENT SIDE Moãi öùng duïng Web ñeàu coù söû duïng ít hay nhieàu caùc kòch baûn JavaScript, nhaèm taêng theâm tính thaân thieän ngöôøi duøng, kieåm tra döõ lieäu nhaäp, thao taùc treân trình duyeät,... Trang Web ñöôïc thieát keá döïa treân theû HTML thuaàn tuyù hay caùc kòch baûn Server khaùc, neáu caàn thieát taïo ra moät soá thao taùc, nhaèm cho pheùp ngöôøi duøng thöïc hieän moät soá chöùc naêng thoâng thöôøng treân trình khaùch (Client Side) thì baïn söû duïng Client Script (VBScript vaø JavaScript). Caùc vaán ñeà chính seõ ñöôïc trình baøy: Tham chieáu ñeán theû HTML nhö theá naøo. Moät soá bieán coá thöôøng duøng trong JavaScript. Moät soá phöông thöùc thöôøng duøng. Khai baùo vaø söû duïng bieán trong JavaScript. Phaùt bieåu coù ñieàu khieån cuûa JavaScript. Caùc phöông thöùc kieåm tra döõ lieäu. Cheøn taäp tin JavaScript (.js). Keát hôïp maõ töø trang Web vaø taäp tin.js Môû cöûa soå daïng popup. 1. THAM CHIEÁU ÑEÁN THEÛ HTML NHÖ THEÁ NAØO? Khi duyeät trang Web, chaúng haïn neáu trang Web cuûa baïn cho pheùp ngöôøi duøng nhaäp lieäu vì moät lyù do naøo ñoù, baïn caàn phaûi vieát moät soá phöông thöùc Client Script ñeå kieåm soaùt döõ lieäu nhaäp coù hôïp leä hay khoâng?. Ñeå thöïc hieän ñieàu naøy, baïn caàn phaûi khai baùo phöông thöùc kieåm tra döõ lieäu baèng JavaSript hay VBScript. Tuy nhieân, moät soá ngöôøi cho raèng khoâng caàn phaûi kieåm tra döõ lieäu nhaäp nhö tröôøng hôïp naøy treân trình duyeät, thay vaøo ñoù hoï kieåm tra treân phía Server (Server side).

2 Kòch baûn JavaScript 2 Neáu kieåm tra döõ lieäu treân Server Side, coù nghóa laø ngöôøi duøng nhaäp döõ lieäu khoâng hôïp leä baïn cuõng cho pheùp hoï submit ñeå chuyeån döõ lieäu leân Server Side. Sau ñoù, neáu döõ lieäu khoâng hôïp leä, trang Web seõ chuyeån veà döõ lieäu trang ban ñaàu, baïn caàn phaûi löu giöõ laïi caùc giaù trò tröôùc khi submit nhaèm trình baøy thoâng tin maø ngöôøi duøng nhaäp nhö luùc ñaàu. Tuy nhieân, vôùi tröôøng hôïp naøy baïn ñaõ submit, trang Web naøy ñaõ maát döõ lieäu tröôùc, khi trôû laïi baïn caàn phaûi thoâng baùo cho ngöôøi duøng bieát nhöõng giaù trò naøo khoâng hôïp leä. Laøm nhö vaäy, baïn xöû lyù raát nhieàu vaán ñeà. Moät giaûi phaùp cho ñeán thôøi ñieåm baây giôø vaãn coøn hieäu quaû laø söû duïng Client Script, nhaèm kieåm tra döõ lieäu nhaäp cuûa ngöôøi duøng tröôùc khi submit leân Server Side. Ñoù laø moät ví duï ñieãn hình baïn caàn phaûi söû duïng Client Script. Ngoaøi ra, coøn nhieàu chöùc naêng khaùc baïn caàn phaûi söû duïng Client Script nhö moät phaàn trong laäp trình öùng duïng Web Nguyeân taéc trong JavaScript Moãi caâu leänh trong javascript ñeàu leát thuùc baèng daáu ;. Caùc ñeàu kieän ñöôïc khai baùo trong daáu ( ñieàu kieän vaø daáu ). Moãi phöông thöùc do ngöôøi duøng ñònh nghóa ñöôïc baét ñaàu vôùi töø khoaù function, tham soá truyeàn vaøo phöông thöùc khoâng khai baùo kieåu döõ lieäu. Khi khai baùo bieán trong JavaScript, baïn caàn phaûi söû duïng töø khoaù var tröôùc teân bieán, bieán coù theå khôûi taïo giaù trò hay khoâng ñeàu ñöôïc chaáp nhaän. Trong phaùt bieåu ñieàu khieån, neáu coù hôn moät phaùt bieåu, baïn phaûi söû duïng daáu vaø Tham chieáu ñeán theû HTML Ñeå tham chieáu ñeán theû HTML baèng JavaScript, baïn caàn phaûi xaùc ñònh loaïi theû vaø thuoäc tính cuûa theû. Ñeå theû HTML ñöôïc tham chieáu, chuùng phaûi coù teân (Name) hay ID nhaän daïng.

3 Kòch baûn JavaScript 3 Ñoái vôùi moät soá theû khoâng coù thuoäc tính value, nhöng khi tham chieáu ñeán giaù trò cuûa chuùng, baïn caàn phaûi tham chieáu ñeán thuoäc tính value nhö moät phaàn laáy giaù trò cuûa chuùng. Tham chieáu ñeán thuoäc tính value cuûa moät soá theû HTML cho pheùp nhaäp lieäu thuoäc moät theû form trình baøy nhö trong Baûng 1 bao goàm: Baûng 1: Tham chieáu ñeán giaù trò cuûa theû HTML Theû Ví duï text document.form.txtuser.value hidden document.form.txtfrom.value password document.form.txtpwd.value textarea document.form.txtdesc.value select document.form.cbcity.value select document.form.cbindu[i].value checkbox document.form.chkid.value checkbox document.form.chkid[i].value radio document.form.rdgender.value radio document.form.rdgender[i].value Tuy nhieân, ñoâi khi baïn muoán tham chieáu ñeán caùc thuoäc tính khaùc nhö chieàu daøi cuûa caùc theû treân, baïn cuõng coù theå söû duïng caùc thuoäc tính nhö Baûng 2. Baûng 2: Tham chieáu ñeán chieàu daøi cuûa theû HTML Theû Ví duï text document.form.txtuser.length hidden document.form.txtfrom.length password document.form.txtpwd.length textarea document.form.txtdesc.value.length select document.form.cbcity.length checkbox document.form.chkid.length radio document.form.rdgender.length

4 Kòch baûn JavaScript 4 Ngoaøi ra, neáu baïn muoán tham chieáu ñeán traïng thaùi cuûa moät soá theû treân, baïn cuõng coù theå söû duïng caùc thuoäc tính traïng thaùi nhö Baûng 3. Baûng 3: Tham chieáu ñeán traïng thaùi cuûa theû HTML Theû Ví duï select document.form.cbcity.selectedindex select document.form.lstindu.selected select document.form.lstindu.selectedindex checkbox document.form.chkid.checked radio document.form.rdgender.checked Löu yù: Trong tröôøng hôïp gaùn theâm thuoäc tính thì söû duïng cuù phaùp töông töï nhö sau: document.form1.objname.setattribute("onclick", "alert( ABC );") 1.3. Tham chieáu ñeán theû HTML trong trang Web Ngoaøi caùch tham chieáu ñeán caùc theû HTML trong theû Form nhö trình baøy treân, baïn coù theå tham chieáu ñeán theû HTML khoâng thuoäc trong theû form baèng caùch söû duïng phöông thöùc getelementbyid. Chaúng haïn, baïn coù theå bieát töôùc teân (ID) cuûa moät theû HTML naøo ñoù treân trang Web, baèng caùch söû duïng phöông thöùc coù teân getelementbyid, baïn coù theå truy caäp ñeán caùc thuoäc tính cuûa chuùng nhö ví duï 1. Ví duï 1: Truy caäp theû HTML baèng getelementbyid function Bamboo_Show(obj) // Gaùn giaù trò document.getelementbyid(obj).value="1"; //Che daáu document.getelementbyid(

5 Kòch baûn JavaScript 5 obj).style.display="none"; Löu yù, baïn coù theå söû duïng töø khoaù all coù cuù phaùp nhö sau thay vì söû duïng getelementbyid. document.all[divid]. style.display="none"; Trong tröôøng hôïp gaùn theâm thuoäc tính thì söû duïng cuù phaùp töông töï nhö sau: document.getelementbyid(obj).setattribute("sr c","iamge/logo.gif"); function SetURL(eventObj,objURL,str) document.getelementbyid(objurl).value=str +document.getelementbyid(eventobj).value; function SetOnChangeEvents(eventObj, windowattach,setobj,value) var thecontrol=document.getelementbyid(eventobj); var thefunction="seturl('"+eventobj+ "','" + setobj +"','" + value + "')"; if (windowattach) thecontrol.onchange=new Function (thefunction); else thecontrol.setattribute( "onchange",thefunction); javascript include <html>

6 Kòch baûn JavaScript 6 <head> <title ID=titletext>Under Construction</title> <script language=javascript src=common.js></script> </head> <body bgcolor=white> <form name="toioi" method=get> Status: <select name="ddlstatus" id="ddlstatus"> <option value=a>a</option> <option value=b>b</option> <option value=c>c</option> </select> <br><br> Result:<input id="txturl" name=txturl value=toi size=100> </form> </body> </html> <script language=javascript> SetOnChangeEvents("ddlstatus", window.attachevent,"txturl"," oosolutions.com/"); </script> 1.4. Ghi noäi dung ra trang Web Trong tröôøng hôïp baïn muoán ghi cuoãi hay theû HTML ra trang Web thì söû duïng phöông thöùc write cuûa ñoái töôïng document. Chaúng haïn, ñeå ghi ra ñoaïn HTML ra trang Web baèng JavaScript, baïn söû duïng cuù phaùp töông töï nhö ví duï 1-1. Ví duï 1-1: Söû duïng phöông thöùc write document.write ("<table><td><span id='lbltoday'>hello world</span></td></table>")

7 Kòch baûn JavaScript 7 2. MOÄT SOÁ BIEÁN COÁ THÖÔØNG DUØNG TRONG JAVASCRIPT Khi ngöôøi duøng thöïc hieän moät haønh ñoäng naøo ñoù treân moät soá theû HTML, baïn coù theå söû duïng moät soá phöông thöùc cuûa JavaScript hay phöông thöùc do ngöôøi duøng ñònh nghóa thoâng qua bieán coá xaûy ra. Caùc bieán coá xaûy ra treân caùc theû HTML baïn söû duïng JavaScript ñeå thöïc hieän moät coâng vieäc naøo ñoù ñöôïc trình baøy nhö trong Baûng 4. Baûng 4: Moät soá bieán coá treân theû HTML Bieán coá Dieãn giaûi OnClick Khi ngöôøi duøng nhaán chuoäc treân theû. OnSubmit Khi ngöôøi duøng submit moät form. OnReset Khi ngöôøi duøng reset moät form. OnActive Khi form hoaït ñoäng. OnLoad Khi form naïp leân trình duyeät. Onunload Khi form ñoùng laïi. Onmousemove Khi mouse di chuyeån vaøo theû. Onmouseout Khi mouse di chuyeån ra khoûi theû. OnMouseover Khi mouse di chuyeån treân theû. Onblur Khi con troû di chuyeån ra khoûi theû. Onkeypress Khi phím treân theû MOÄT SOÁ PHÖÔNG THÖÙC THÖÔØNG DUØNG TRONG JAVASCRIPT Ngoaøi caùc phöông thöùc JavaScript do ngöôøi duøng ñònh nghóa, baûn thaân JavaScript cung caáp moät soá phöông thöùc, cho pheùp ngöôøi duøng thöïc hieän moät soá haønh ñoäng thay vì söû duïng thoâng qua caùc bieán coá. Caùc phöông thöùc thöôøng cuûa JavaScript ñeå thöïc hieän moät coâng vieäc naøo ñoù ñöôïc trình baøy nhö trong Baûng 5. Baûng 5: Moät soá phöông thöùc cuûa JavaScript Phöông thöùc Dieãn giaûi

8 Kòch baûn JavaScript 8 alert(str) Xuaát hieän hoäp hoäi thoaïi vôùi noäi dung laø chuoãi str. confirm(str)xuaát hieän hoäp hoäi thoaïi vôùi noäi dung caùc nhaän vôùi nuùt OK vaø Cancel. prompt(str,default) Xuaát hieän hoäp hoäi thoaïi vôùi noäi dung laø chuoãi str, giaù trò meänh ñeà default cho pheùp ngöôøi duøng nhaäp vaøo giaù trò. f.submit() Submit form coù teân laø f. f.reset() Reset form coù teân laø f. t.focus() Troû con troû vaøo theû coù teân laø t. s.tostring()chuyeån giaù trò cuûa ñoái töôïng sang daïng chuoãi. s.indexof(i)traû veà vò trí ñaàu tieân cuûa chuoãi i tìm thaáy trong chuoãi s. s.lastindexof(i) Traû veà vò trí cuoái cuøng tìm thaáy cuûa chuoãi i trong chuoãi s. s.substr(i,j) Traû veà chuoãi con trong chuoãi s töø vò trí thöù i daøi j kyù töï. s.charat(i) Traû veà kyù töï taïi vò trí thöù i trong chuoãi s Ngoaøi ra, JavaScript coøn coù caùc phöông thöùc thuöôøng duøng ñeå ñieàu khieån cöûa soå hay trình duyeät nhö trong Baûng 6. Baûng 6: Moät soá phöông thöùc ñieàu khieån khaùc Phöông thöùc Dieãn giaûi window.close() Ñoùng cöûa soå hieän taïi. window.open(url)môû moät cöûa soå trình duyeät vôùi ñòa chæ URL. window.opener(url) Môû moät cöûa soå trình duyeät vôùi ñòa chæ URL treân cöûa soå popup. window.history.back(i) Trôû veà cöûa soå trang web trình duyeät tröôùc ñoù i laàn, chaúng haïn baïn muoán trôû veà trang web tröôùc ñoù

9 Kòch baûn JavaScript 9 window.history.back(1). window.history.go(-i) Trôû veà cöûa soå trang web trình duyeät tröôùc ñoù i laàn, chaúng haïn baïn muoán trôû veà trang web tröôùc ñoù window.history.go(-1). window.print() Môû hoäp hoäi thoaïi print ñeå in rang Web. document.write(str) Cho pheùp in chuoãi str ra vò trí hieän taïi treân trang Web. window.external.addfavorite(url) Theâm ñòa chæ URL vaøo Favorite cuûa trình duyeät Web KHAI BAÙO VAØ SÖÛ DUÏNG BIEÁN TRONG JAVASCRIPT 4.1. Khai baùo vaø söû duïng bieán Ñeå khai baùo bieán trong JavaScript, baïn caàn söû duïng töø khoaù var ñi tröôùc teân bieán, bieán coù theå khôûi taïo giaù trò trong khi khai baùo hay coù theå gaùn khi duøng nhö sau: var i=0; var j=0, str= Hello ; var x,y; Trong tröôøng hôïp baïn caàn khai baùo maûng thì söû duïng töø khoaù new vaø Array nhö sau: monthname = new Array("January","February","March","April"," May","June","July","August","September","Octo ber","november","december"); Ñeå söû duïng bieán, cuõng töông töï nhö ngoân ngöõ khaùc, baïn söû duïng pheùp gaùn nhö pheùp gaùn trong Java hay C. i++;//i=i+1 i--;//i=i-1

10 i+=2;//i=i+2 i-=2;//i=i-2 str= Hello ; str+= world ;// str=str+ world Kòch baûn JavaScript Caùc pheùp toaùn trong JavaScript Töông töï nhö trong Java, baïn coù moät soá pheùp toaùn so saùnh nhö Baûng 7 sau: Baûng 7: Moät soá pheùp toaùn Pheùp toaùn Dieãn giaûi == Pheùp toaùn so saùnh baèng.!= Pheùp toaùn so saùnh khaùc nhau. Pheùp toaùn so saùnh or. && Pheùp toaùn so saùnh and.! Pheùp toaùn so saùnh not.?: Pheùp toaùn thay theá cho phaùt bieåu if vaø else ñôn giaûn PHAÙT BIEÅU COÙ ÑIEÀU KHIEÅN CUÛA JAVASCRIPT Cuõng nhö moät soá ngoân ngöõ laäp trình khaùc, ñoái vôùi Javascript baïn cuõng coù theå söû duïng moät soá phaùt bieåu ñieàu khieån nhö if, if..else, for, while vaø switch Phaùt bieåu if Phaùt bieåu if duøng ñeå söû duïng khi coù moät ñieàu kieän ñöa ra nhö ví duï sau: var i=0,x=0; i+=5; if(i>=5) x+=i; i++;

11 Kòch baûn JavaScript 11 Trong tröôøng hôïp chæ coù moät phaùt bieåu trong phaùt bieåu ñieàu khieån, baïn khoâng caàn söû duïng daáu vaø Phaùt bieåu if.. else Phaùt bieåu if.. else duøng ñeå söû duïng khi coù hai ñieàu kieän ñöa ra nhö ví duï sau: var i=0,x=0; i+=5; if(i>=5) x+=i; i++; esle i--; x-=i; 5.3. Phaùt bieåu While Phaùt bieåu voøng laëp while duøng ñeå laëp laïi moät soá laàn khoâng ñònh tröôùc, soá laàn laëp phuï thuoäc vaøo ñieàu kieän cuûa phaùt bieåu while nhö ví duï sau: var i=0,x=0; i+=5; while(i>0) x+=i; i--; 5.4. Phaùt bieåu for Phaùt bieåu for duøng ñeå laëp laïi moät soá laàn nhaát ñònh, soá laàn laëp phuï thuoäc vaøo giôùi haïn treân cuûa phaùt bieåu for nhö ví duï sau: var i=0,x=0,str= Times ; x+=5; for(i=0;i<x;i++)

12 str+=i; Kòch baûn JavaScript 12 Tuy nhieân, cuõng gioáng nhö Java trong tröôøng hôïp baïn chöa khai baùo bieán i tröôùc khi söû duïng, baïn coù theå khai baùo chuùng ngay trong voøng form nhö sau: var x=0,str= Times ; x+=5; for(var i=0;i<x;i++) str+=i; Ngoaøi ra, baïn cuõng coù theå söû duïng phaùt bieåu for.. in ñoái vôùi nhöõng thuoäc tính cuûa ñoái töôïng hay caùc phaàn töû cuûa maûng, chaúng haïn trong tröôøng hôïp naøy chuùng toâi truy caäp ñeán caùc thuoäc tính cuûa ñoái töôïng Scores baèng caùch söû duïng bieán x nhö sau: for (x in Scores) statements; 5.5. Phaùt bieåu Switch.. case Phaùt bieåu reõ nhaùnh switch duøng ñeå reõ nhaùnh moät soá laàn nhaát ñònh tröôùc, thay vì baïn söû duïng phaùt bieåu if trong tröôøng hôïp naøy baïn chuyeån sang phaùt bieåu switch nhö ví duï sau: switch (Number(argMonth)) case 1: // Jan case 3: // Mar case 5: // May case 7: // Jul case 8: // Aug case 10: // Oct case 12: // Dec return 31; break; case 4: // Apr

13 case 6: // Jun case 9: // Sep case 11: // Nov return 30; break; case 2: // Feb if (isleapyear(argyear)) return 29 else return 28 break; Kòch baûn JavaScript 13 default: return 0; Neáu coù nhieàu case cuøng giaù trò vôùi nhau, baïn coù theå khai baùo nhö trong tröôøng hôïp treân: case 4: // Apr case 6: // Jun case 9: // Sep case 11: // Nov return 30; break; 5.6. Phaùt bieåu break vaø continue Phaùt bieåu break duøng ñeå thoaùt ra khoûi voøng for, while hay switch khi caàn thieát. Töông töï nhö vaäy, phaùt bieåu continue cho pheùp tieáp tuïc thöïc hieän trong phaùt bieåu voøng laëp voøng for, while hay phaùt bieåu reõ nhaùnh switch. 6. CAÙC PHÖÔNG THÖÙC KIEÅM TRA DÖÕ LIEÄU Khi baïn cho pheùp ngöôøi duøng nhaäp lieäu treân theû form nhaèm submit döõ lieäu ñoù leân treân Server Side, baïn caàn phaûi vieát moät function ñeå kieåm tra döõ lieäu coù hôïp leä hay khoâng tröôùc khi cho pheùp form ñöôïc submit.

14 6.1. JavaScript vaø theû text, password Kòch baûn JavaScript 14 Söû duïng phaùt bieåu return ñeå traû veà giaù trò true neáu döõ lieäu nhaäp laø hôïp leä, giaù trò false döõ lieäu nhaäp khoâng hôïp leä. Ngoaøi ra, phöông thöùc naøy ñöôïc goïi trong bieán coá onsubmit cuûa form nhö ví duï 2. Ví duï 2: JavaScript vaø theû text, password function checkinput() //Kieåm tra Username if (document.frmlogin.username.value=="") alert("invalid , Please enter your own "); document.frmlogin.username.focus(); return false; //Kieåm tra Password if (document.frmlogin.password.value=="") alert("please enter your own Password"); document.frmlogin.password.focus(); return false; return true; Trong ví duï treân, tröôùc tieân baïn kieåm tra giaù trò treân theû text coù teân USERNAME, neáu giaù trò roãng moät thoâng baùo xuaát hieän vaø chuyeån con troû vaøo theû naøy baèng phöông thöùc focus(). Keá tieáp, phöông thöùc traû veà giaù trò false. Ñieàu naøy coù nghóa laø form seõ khoâng ñöôïc submit cho ñeán khi phöông thöùc treân traû veà giaù trò true. Töông töï nhö vaäy, baïn coù theå kieåm tra giaù trò treân theû password coù teân PASSWORD, neáu giaù trò roãng moät thoâng baùo xuaát hieän vaø chuyeån con troû vaøo theû naøy baèng phöông thöùc focus().

15 Kòch baûn JavaScript 15 Tieáp theo, phöông thöùc traû veà giaù trò false. Ñieàu naøy coù nghóa laø form seõ khoâng ñöôïc submit cho ñeán khi phöông thöùc treân traû veà giaù trò true. Neáu caû hai tröôøng hôïp treân ñeàu hôïp leä, coù nghóa laø ngöôøi duøng coù nhaäp döõ lieäu vaøo hai theû USERNAME vaø PASSWORD, phöông thöùc treân traû veà giaù trò true, form seõ ñöôïc submit theo yeâu caàu ngöôøi duøng. Nhö vaäy, phöông thöùc checkinput() treân ñöôïc goïi khi naøo, thuû nhìn xem ví duï trang ex1.htm trong trình baøy nhö ví duï 2-1. Ví duï 2-1: Goïi phöông thöùc checkinput() <table> <form name="frmlogin" method="post" action="jsdologin.php?goto=" onsubmit="return checkinput();"> <td align="left" class="content-sm"> address:</td> <td align="left" class="input"> <input type="text" name="username" size="25" maxlength="100" class="textbox"> </td> <td align="left" class="content-sm">password:</td> <td align="left" class="input"> <input type="password" name="password" size="25" maxlength="8" class="textbox"> </td> <td><img src="/images/blank.gif" width="1" height="5" alt=""></td>

16 Kòch baûn JavaScript 16 <td align="left" class="text_normal" valign="top"> <br> <input type="submit" style="width=80px" name="signin" value="sign me in!" class="button"> <input type="reset" name="reset" value="reset" class="button"> </td> </form> </table> Khi ngöôøi duøng submit cuûa form treân nhö hình 1, trong bieán coá onsubmit baïn goïi phöông thöùc checkinput() baèng phaùt bieåu: <form name="frmlogin" method="post" action="jsdologin.aspx?goto=" onsubmit="return checkinput();"> Hình 1: Trang ex1.htm Neáu phöông thöùc checkinput() traû veà giaù trò true, form naøy seõ ñöôïc submit. Ngöôïc laïi, trong tröôøng hôïp ngöôøi duøng khoâng nhaäp ñòa chæ phöông thöùc treân traû veà giaù trò false, form treân khoâng ñöôïc submit theo yeâu caàu cuûa ngöôøi duøng, ñoàng thôøi hoäi thoaïi xuaát hieän nhö hình 2.

17 Kòch baûn JavaScript 17 Hình 2: Thoâng baùo loãi do ngöôøi duøng khoâng nhaäp Töông töï nhö treân, trong tröôøng hôïp ngöôøi duøng khoâng nhaäp password phöông thöùc treân traû veà giaù trò false, form treân khoâng ñöôïc submit theo yeâu caàu cuûa ngöôøi duøng, ñoàng thôøi hoäi thoaïi xuaát hieän nhö hình 3. Hình 3: Ngöôøi duøng khoâng nhaäp Password 6.2. JavaScript vaø theû radio, checkbox Baèng caùch söû duïng phaùt bieåu return nhö trong tröôøng hôïp login ñeå traû veà giaù trò true neáu döõ lieäu choïn laø hôïp leä, giaù trò false döõ lieäu choïn khoâng hôïp leä. Baïn coù theå tham khaûo phöông thöùc checkinput() trong trang ñaêng kyù ngöôøi duøng trong ex2.htm nhö ví duï 3. Ví duï 3: JavaScript vaø theû radio, checkbox function checkinput() var isok=false;

18 // Kieåm ytra tuyø choïn Giôùi tính baèng caùch Kòch baûn JavaScript 18 // duyeät caùc phaàn töû trong maûng for(var i=0;i<frmreg.rdgender.length;i++) if (frmreg.rdgender[i].checked==true) //Neáu ngöôøi duøng coù choïn giôùi tính isok=true; break; //Neáu ngöôøi duøng khoâng choïn giôùi tính if (isok==false) alert("please enter choose your egnder"); return false; //Kieåm tra caùc tuyø choïn Certificate if (document.frmreg.ba.value=="" document.frmreg.mba.value=="" document.frmreg.bs.value=="" document.frmreg.mbs.value=="") alert("please enter at least one certificate"); return false; return true; Trong ví duï treân, theû input daïng radio coù hai theû cuøng teân nhöng coù giaù trò khaùc nhau. Ñieàu naøy coù nghóa laø khi baïn truy caäp ñeán theû radio coù teân rdgender, baïn phaûi duyeät treân phaàn töû maûng nhö ñoaïn phaùt bieåu sau: for(var i=0;i<frmreg.rdgender.length;i++) if (frmreg.rdgender[i].checked==true) isok=true;

19 break; Kòch baûn JavaScript 19 Ñeå khai baùo toaøn boä trang Web, baïn coù theå thöïc hieän quaù trình khai baùo nhö ñaõ giôùi thieäu trong phaàn HTML, toaøn phaàn HTML coù noäi dung nhö ví duï 4. Ví duï 4: Noäi dung trang ex2.htm... <table> <form name="frmreg" method="post" action="jsdoreg.php?goto=" onsubmit="return checkinput();"> <td>gender</td> <td> <input type="radio" name=" rdgender" value="m">male <input type="radio" name="rdgender" value="f">female </td> <td>marital Status</td> <td> <input type="radio" name="rdmar" value="s" checked> Single <input type="radio" name="rdmar" value="m"> Married</td> <td>graduate</td> <td> <input type="checkbox" name="chkba" value="ba">ba <input type="checkbox" name="chkbs" value="bs">bs

20 Kòch baûn JavaScript 20 <input type="checkbox" name="chkmba" value="mba">mba <input type="checkbox" name="chkmbs" value="mbs">mbs</td> <td> </td> <td align="left" class="text_normal" valign="top"> <br> <input type="submit" style="width=80px" name="register" value="register" class="button"> <input type="reset" name="reset" value="reset" class="button"> </td> </form> </table>... Ñoaïn HTML treân theå hieän treân trình duyeät nhö hình 4, ñoái vôùi theû input daïng radio coù teân rdmar, baïn khoâng caàn kieåm tra traïng thaùi cuûa chuùng, bôûi vì trong khai baùo HTML ñaõ coù giaù trò maëc ñònh. Ñieàu naøy coù nghóa laø neáu ngöôøi duøng khoâng choïn, thì hoï seõ coù tình traïng gia ñình maëc ñònh laø Single. Ngoaøi ra, trong caùc theû input daïng submit vaø button, baïn coù theå söû duïng caùc khai baùo HTML nhö class= button, ñaây laø moät phaàn töû trong trang.css.

21 Kòch baûn JavaScript 21 Hình 4: Ñaêng kyù ex2.htm Neáu ngöôøi duøng khoâng choïn giôùi tính, sau khi baám nuùt Register, trình duyeät seõ thoâng baùo chuoãi nhö baïn ñaõ ñònh nghóa beân trong nhö hình 5. Hình 5: Thoâng baùo yeâu caàu choïn Gender Töông töï nhö vaäy, trong tröôøng hôïp ngöôøi duøng khoâng choïn baát kyø moät Certificate naøo trong danh saùch Certificate yeâu caàu, trình duyeät cuõng xuaát hieän moät thoâng baùo yeâu caàu choïn Certificate töông töï nhö hình 6.

22 Kòch baûn JavaScript 22 Hình 6: Thoâng baùo choïn Certificate Tyu nhieân, neáu ngöôøi duøng choïn ñaày ñuû caùc tuyø choïn nhö hình 7, sau khi baám nuùt Register, form seõ ñöôïc submit ñeán trang Server Script JavaScript vaø theû select Hình 7: Choïn ñaày ñuû caùc tuyø choïn Töông töï phöông thöùc checkinput() nhö treân, trong tröôøng hôïp naøy chuùng toâi söû duïng phaùt bieåu ñeå traû veà giaù trò true neáu döõ lieäu choïn laø hôïp leä, giaù trò false döõ lieäu choïn khoâng hôïp leä. Baïn coù theå tham khaûo phöông thöùc checkinput() trong trang ñaêng kyù ngöôøi duøng trang ex3.htm nhö ví duï 5. Ví duï 5: JavaScript vôùi theû select function checkinput()

23 Kòch baûn JavaScript 23 var isok=false; if (document.frmreg.cbcity.value=="") alert("please choose your city"); return false; if (document.frmreg.lstindu.value=="") alert("please choose your Industry"); return false; return true; Kieåm tra döõ lieäu choïn cuûa hai loaïi theû select treân töông töï nhö theû input daïng text, nhöng chuùng chæ khaùc nhau khi laáy döõ lieäu töø cô sôû döõ lieäu ñeå ñieàn vaøo theû select. Ñeå tieáp tuïc thöïc hieän caùc yù ñoà cho öùng duïng trong phaàn PHP vaø JavaScript, chuùng toâi trình baøy cho caùc baïn moät vi duï ñeà caäp ñeán vieäc laøm sao ñeå choïn moät phaàn töû khi giaù trò cuûa noù ñöôïc chæ ñònh tröôùc. Ñieàu naøy coù nghóa laø baïn coù tröôùc moät giaù trò thaønh phoá, chaúng haïn trong tröôøng hôïp naøy laø HCM, trong khi ñoù trong danh saùch thaønh phoá trong theû select coù teân cbcity ñang choïn maëc ñònh laø, nhöng khi ngöôøi duøng goïi trang Web naøy, nhaõn thaønh phoá Ho Chi Minh seõ ñöôïc choïn. Ñeå thöïc hieän quaù trình naøy, baïn chæ caàn dôøi töø selected ñeán ñuùng vò trí phaàn töû HCM cuûa theû select coù teân cbcity. Tuy nhieân, khi keát hôïp vôùi cô sôû döõ lieäu MySQL vaø PHP, baïn coù theå thöïc hieän

24 Kòch baûn JavaScript 24 ñieàu naøy baèng caùch laäp trình treân Server Script. Hình 8: Maëc ñònh laø Chon TP Giaû söû raèng, baïn khai baùo moät bieán coù teân varcity vôùi giaù trò khôûi taïo laø HCM, moät theû select daïng combox box coù teân cbcity vaø choïn maëc ñònh cho nhaõn Chon TP vôùi giaù trò laø "" nhö ví duï 6 trong trang ex4.htm. Ví duï 6: Khai baùo theû select daïng combo box <form name="frmedit" method="post" action="jsdoreg.php?goto=" onsubmit="return checkinput();"> <td>city</td> <td> <select name="cbcity"> <option value="" selected>chon TP</option> <option value="han">ha Noi</option> <option value="hue">hue</option> <option value="hcm">ho Chi Minh</option> </select> </td> <td align="left" class="text_normal" valign="top"> <br> <input type="submit" style="width=80px" name="register" value="register" class="button"> <input type="reset" name="reset" value="reset" class="button"> </td> </form>

25 Kòch baûn JavaScript 25 Roõ raøng trong ví duï treân ñang choïn maëc ñònh laø nhaõn Chon TP vôùi giaù trò roãng nhö hình 8, ñeàu naøy coù nghóa laø töø selected ñang thuoäc phaàn töû: <option value="" selected>chon TP</option> Khi duyeät trang Web naøy treân trình duyeät, baïn mong muoán theû select coù teân cbcity phaûi choïn thaønh phoá laø Ho Chi Minh. Ñoái vôùi tröôøng hôïp naøy, coù nghóa laø baïn phaûi vieát ñoaïn JavaScript ñeå dôøi töø selected ñeán ñuùng phaàn töû coù giaù trò laø HCM (baèng giaù trò cuûa bieán varcity) nhö hình 9. Hình 9: Töï ñoäng dôøi ñeán nhaõn coù giaù trò HCM Ñeå thöïc hieän ñöôïc ñieàu naøy, tröôùc tieân baïn caàn phaûi vieát ñoaïn JavaScript, söû duïng voøng laëp for ñeå duyeät treân töøng phaàn töû cuûa cbcity, kieåm tra neáu thaáy coù moät phaàn töû thöù i naøo ñoù coù giaù trò baèng vôùi giaù trò cuûa bieán varcity, töùc thì baïn dôøi töø selected ñeán phaàn töû ñoù vaø thoaùt khoûi voøng for nhö ví duï 7. Ví duï 7: Dôøi töø selected <script language=javascript> var varcity="hcm"; for(var i=0; i<document.frmedit.cbcity.length;i++)

26 Kòch baûn JavaScript 26 if (document.frmedit.cbcity[i].value== varcity) document.frmedit.cbcity[i].selected=true; break; </script> Tuy nhieân, ñeå thöïc hieän ñuùng nhö yù muoán cuûa baïn, tröôùc tieân baïn copy ñoaïn maõ cuûa theû <script> treân vaøo ngay beân döôùi theû select coù teân cbcity trong trang ex4.htm, noäi dung cuûa trang ex4.htm coù toaøn boä noäi dung nhö ví duï 8. Ví duï 8: Noäi dung trang ex4.htm <html> <head> <title>welcome to JavaScript</title> <link rel="stylesheet" type="text/css" href="../style.css"> <SCRIPT language=javascript> // Söû duïng ñeå kieåm tra khi ngöôøi duøng muoán caäp // nhaät döõ lieäu function checkinput() if (document.frmedit.cbcity.value=="") alert("please choose your city"); return false; return true; </script> </head> <body> <div class=text_header>update Data</div> <br> <table width="251"> <form name="frmedit" method="post" action="jsdoreg.php?goto=" onsubmit="return checkinput();">

27 Kòch baûn JavaScript 27 <td>city</td> <td> <select name="cbcity"> <option value="" selected> Chon TP</option> <option value="han">ha Noi</option> <option value="hue">hue</option> <option value="hcm">ho Chi Minh</option> </select> </td> <script language=javascript> var varcity="hcm"; for(var i=0; i<document.frmedit.cbcity.length;i++) if (document.frmedit.cbcity[i].value==varcity) document.frmedit.cbcity[i].selected=true; break; </script> <td align="left" class="text_normal" valign="top"> <br> <input type="submit" style="width=80px" name="update" value="register" class="button"> <input type="reset" name="reset" value="reset" class="button"> </td> </form> </table> </body> </html>

28 Kòch baûn JavaScript 28 Neáu theû select cuûa baïn coù daïng listbox, baïn cuõng thöïc hieän töông töï nhö vaäy. Tuy nhieân, trong tröôøng hôïp naøy chuùng toâi chæ giaû söû raèng bieán varidu coù moät giaù trò. Caùc theû <option> khai baùo trong theû select coù teân lstindu nhö ví duï 9. Ví duï 9: Khai baùo theû select daïng listbox <form name="frmedit" method="post" action="jsdoreg.php?goto=" onsubmit="return checkinput();"> <td>industry</td> <td> <select name="lstindu" multiple size="5"> <option value="" selected> Chon Industry</option> <option value="aut">auto</option> <option value="eng">engineering </option> <option value="cop">computer</option> <option value="wor">worker</option> </select> </td> <td align="left" class="text_normal" valign="top"> <br> <input type="submit" style="width=80px" name="update" value="update" class="button"> <input type="reset" name="reset" value="reset" class="button"> </td> </form> Tuyø choïn maëc ñònh cuûa ví duï treân cuõng thuïoâc veà phaàn töû coù nhaõn choïn Chon Industry vôùi giaù trò nhö phaùt bieåu: <option value="" selected> Chon Industry</option>

29 Kòch baûn JavaScript 29 Chính vì vaäy, khi trang naøy duyeät treân trình duyeät, keát quaû gioáng nhö hình 10. Hình 10: Khai baùo theû select daïng listbox Cuõng gioáng nhö trong tröôøng hôïp theû select coù teân cbcity, baèng caùch dôøi selected ñeán phaàn töû coù giaù trò baèng vôùi giaù trò cuûa bieán varindu (chaúng haïn bieán naøy coù giaù trò ENG), baïn coù theå vieát ñoaïn JavaScript ngay beân döôùi theû select coù teân lstindu nhö ví duï 10. Ví duï 10: Ñoaïn JavaScipt dôøi töø selected <script language=javascript> var varindu ="ENG"; for(var i=0; i<document.frmedit.lstindu.length;i++) if (document.frmedit.lstindu[i].value==varindu) document.frmedit.lstindu.selectedindex =i; break; </script>

30 Kòch baûn JavaScript 30 Baèng caùch so saùnh giaù trò cuûa bieán varindu vôùi giaù trò cuûa töøng phaàn töû trong theû select, neáu chuùng baèng nhau baïn dôøi töø selected ñeán ñuùng vò trí thöù i. Sau khi baïn theâm ñoaïn script treân vaøo trang Web coù teân ex5.htm nhö hình 11. Hình 11: Nhaõn Engineering ñöôïc choïn Ñeå thöïc hieän ñöôïc yù ñoà nhö hình 11 treân, baïn caàn phaûi baûo ñaûm raèng toaøn boä noäi dung cuûa trang ex5.htm coù noäi dung nhö ví duï 11. Ví duï 11: Noäi dung trang ex5.htm <html> <head> <title>welcome to JavaScript</title> <link rel="stylesheet" type="text/css" href="../style.css"> <script language=javascript> function checkinput() if (document.frmedit.lstindu.value=="") alert("please choose your Industry"); return false; return true;

31 Kòch baûn JavaScript 31 </script> </head> <body> <div class=text_header>update Data</div> <br> <table width="251"> <form name="frmedit" method="post" action="jsdoreg.php?goto=" onsubmit="return checkinput();"> <td>industry</td> <td> <select name="lstindu" multiple size="5"> <option value="" selected> Chon Industry</option> <option value="aut">auto</option> <option value="eng">engineering</option> <option value="cop">computer</option> <option value="wor">worker</option> </select> </td> <script language=javascript> var varindu ="ENG"; for(var i=0; i<document.frmedit.lstindu.length;i++) if (document.frmedit.lstindu[i].value==varindu) document.frmedit.lstindu. selectedindex =i; break; </script> <td align="left" class="text_normal" valign="top"> <br> <input type="submit" style="width=80px"

32 Kòch baûn JavaScript 32 name="update" value="update" class="button"> <input type="reset" name="reset" value="reset" class="button"> </td> </form> </table> </body> </html> Trong thöïc teá, theû select daïng naøy thuôøng cho ngöôøi duøng choïn nhieàu phaàn töû cuønbg moät luùc. Ñieàu naøy coù nghóa laø ngöôøi duøng coù nhieàu ngaønh hoïc chaúng haïn, sau khi löu vaøo cô sôû döõ lieäu moät chuoãi vôùi töøng giaù trò caùch nhau daáu,. Nhöng khi laáy leân treân trang Web ñeå trình baøy, baïn caàn phaûi gaùn nhieàu töø selected treân moãi phaàn töû cuûa noù. Ví duï trong tröôøng hôïp naøy, chuùng toâi coù bieán varindu laø chuoãi END,WOR. Vaäy treân theû select coù teân lstindu phaûi ñöôïc choïn hai phaàn töû nhö hình 12. Hình 12: Choïn nhieàu phaàn töû Ñeå thöïc hieän quaù trình naøy, tröôùc tieân baïn gaùn giaù trò cho bieán varindu vôùi moät chuoãi coù hai phaàn töû nhö ENG,WOR, sau ñoù baïn khai baùo ñoaïn JavaScript ngay beân döôùi theû select nhö ví duï 12.

33 Ví duï 12: Theû select vôùi nhieàu giaù trò Kòch baûn JavaScript 33 <script language=javascript> var varindu ="ENG,WOR"; var strindu=""; for(var i=0; i<document.frmedit.lstindu.length;i++) strindu=document.frmedit.lstindu[i].value; if (varindu.indexof(strindu) >=0 ) document.frmedit.lstindu[i].selected= true; </script> Löu yù: Trong quaù trình thöïc thi caùc trang Web coù khai baùo theû <script>, neáu baïn khai baùo cuù phaùp khoâng ñuùng vôùi chuaån Javascript, baïn seõ nhaän ñöôïc loãi phaùt sinh, thoâng thöôøng trang Web hieån thò daáu maøu vaøng döôùi thanh status nhö hình 13. Hình 13: Loãi JavaScript phaùt sinh Baèng caùch Double-Click vaøo daáu maøu vaøng beân döôùi thanh status, baïn seõ nhaän ñöôïc moät hoäp hoäi thoaïi nhö hình 14 trình baøy chi tieát loãi cuûa JavaScript, töø ñoù baïn coù theå doø tìm vaø khaéc phuïc baèng caùch choïn vaøo nuùt Show Details>>.

34 Kòch baûn JavaScript 34 Hình 14: Chi tieát loãi 6.4. JavaScript vôùi theû textarea Theû textarea khoâng coù thuoäc tính value, tuy nhieân khi tham chieáu ñeán giaù trò cuûa noù, baïn laïi söû duïng thuoäc tính naøy nhö caùch tham chieáu ñeán theû input daïng text. Ngoaøi ra, trong theû textarea khoâng giôùi haïn ñöôïc chieàuu daøi hcoãi. Ñieàu naøy coù nghóa laø baïn phaûi vieát moät ñoaïn javascript ñeå khoâng cheá chieàu daøi ngöôøi duøng nhaäp cho phuø hôïp vôùi chieàu daøi cuûa coät döõ lieäu ñaõ khai baùo trong cô sôû döõ lieäu. Baèng caùch thieát keá trang Web coù hai theû textarea, theû thöù nhaát coù teân txtdesc khoâng khai baùo giaù trò maëc ñònh trong theû textarea, theû thöù hai coù teân txtreq vôùi chuoãi maëc ñònh trong theû. Theâm vaøo ñoù, baïn coù theå theâm moät theû input daïng text ñeå trình baøy soá kyù töï ngöôøi duøng ñaõ nhaäp vaøo theû textarea coù teân txtdesc treân bieán coá onkeypress nhö hình 15.

35 Kòch baûn JavaScript 35 Hình 15: Trang ex7.htm Ñeå kieåm tra chieàu daøi cuûa theû txtdesc, baïn coù theå söû duïng thuoäc tính length cuûa value nhö ví duï 13. Ví duï 13: Kieåm tra chieàu daøi cuûa theû textarea function checkinput() if (document.frmedit.txtdesc.value=="") alert("please enter your Description"); document.frmedit.txtdesc.focus(); return false; if (document.frmedit.txtdesc.value.length>200) alert("please enter your Description <200 _ characters"); document.frmedit.txtdesc.focus(); return false; return true; Cuõng thoâng tin nhö caùc tröôøng hôïp kieåm tra döõ lieäu treân, trong tröôøng hôïp ngöôøi duøng khoâng nhaäp döõ lieäu vaøo theû txtdesc, hay chuoãi nhaäp lôùn hôn 200 kyù töï, trình duyeät xuaát hieän thoâng baùo nhö hình 16.

36 Kòch baûn JavaScript 36 Hình 16: Thoâng baùo chuoãi nhaäp khoâng hôïp leä Tuy nhieân, ñeå kieåm tra chieàu daøi cuûa theû textarea, baïn söû duïng tham chieáu txtdesc.value.length, sau ñoù so saùnh chieàu daøi naøy vôùi chieàu daøi ñöôïc giôùi haïn, vôùi muïc ñích ghi chuù cho ngöôøi duøng bieát soá kyù töï hoï coù theå theâm vaøo theû txtdesc nhö ví duï 14. Ví duï 14: Hieån thò chieàu daøi cuûa chuoãi function count() document.frmedit.txtcount.value=200- document.frmedit.txtdesc.value.length; Böôùc keá tieáp, baïn seõ khai baùo phöông thöùc count() treân bieán coá onkeypress cuûa theû txtdesc, trôû lai trình duyeät, baïn nhaäp vaøo moät chuoãi, trong theû text coù teân txtcount seõ xuaát hieän soá kyù töï coøn laïi nhö hình 17. Hình 17: Soá kyù töï coøn laïi treân theû textarea

37 Kòch baûn JavaScript 37 Ñeå hoaøn thieän quaù trình thöïc hieän JavaScript teân theû textarea, baïn coù theå tham khaûo noäi dung trang ex7.htm nhö trong ví duï 15. Ví duï 15: JavaScript vaø theû textarea <html> <head> <title>welcome to JavaScript</title> <link rel="stylesheet" type="text/css" href="../style.css"> <SCRIPT language=javascript> // Kieåm tra nhaäp lieäu function checkinput() if (document.frmedit.txtdesc.value=="") alert("please enter your Description"); document.frmedit.txtdesc.focus(); return false; // Kieåm tra chieàu daøi chuoãi nhaäp vöôïc quaù //chieàu daøi quy ñònh if (document.frmedit.txtdesc.value.length>200) alert("please enter your Description < 200 characters"); document.frmedit.txtdesc.focus(); return false; return true; // Tính soá lyù töï coøn laïi coù theå nhaäp vaøo theû // textarea coù teân txtdesc function count() document.frmedit.txtcount.value=200- document.frmedit.txtdesc.value.length; </script> </head>

38 Kòch baûn JavaScript 38 <body> <div class=text_header>update Data</div> <br> <table width="288"> <! Khai baùo theû form goïi phöông thöùc kieåm tra döõ lieäu nhaäp -- > <form name="frmedit" method="post" action="jsdoreg.php?goto=" onsubmit="return checkinput();"> <td> Description (maximum 100 characters)</td> <td valign="top"> <! goïi pt count() treân bieán coá onkeypress--> <textarea name="txtdesc" rows="3" cols="40" class="textbox" onkeypress="count();"> </textarea> </td> <td valign="top"> Job Require (maximum 16,000 characters)</td> <td valign="top"> <textarea name="txtreq" rows="3" cols="40" class="textbox">please enter your requirement</textarea> </td> <td align="left" class="text_normal" valign="top"> Characters of Description <input type="text" name="txtcount" size="5" maxlength="5" class="textbox"> <br> <input type="submit" style="width=80px" name="update" value="update" class="button"> <input type="reset" name="reset" value="reset" class="button">

39 </td> </form> </table> </body> </html> Kòch baûn JavaScript JavaScript vôùi theû checkbox cuøng teân Nhö baïn bieát, moãi khi trang Web cuûa baïn ñoù moät soá löôïng maåu tin töø keát quaû tìm kieám hay lieät keâ saûn phaåm chaúng haïn, neáu baïn muoán cho pheùp ngöôøi duøng xoaù hay caäp nhaät treân nhieàu maåu tin, baïn seõ trình baøy döõ lieäu nhö caùc trình baøy döõ lieäu cuûa nhieàu mail trong hoäp mail ñieän töû yahoo hay hotmail. Haûy thöû töôûng xem döõ lieäu cuûa ngöôøi duøng trình baøy nhö hình 18, khi ngöôøi duøng muoán caäp nhaät döõ lieäu hay xoaù maåu tin ñöôïc choïn baèng caùch Click vaøo nhöõng checkbox hoï muoán vaø baám nuùt haønh ñoäng töông öùng. Haàu heát caùc öùng duïng Web coù keát noái cô sôû döõ lieäu ñeàu coù nhöõng daïng form nhö treân, neáu trong Table döõ lieäu baïn coù chöùa bao nhieâu maåu tin, Server Script seõ ñoïc vaø phaân trang theo töøng phaàn moãi phaàn 5 trang, moãi trang 20 maåu tin, chaúng haïn phaân trang nhö: Goto Page Next hay Previous Next. Theû coù teân chkall Theû coù teân chkid

40 Kòch baûn JavaScript 40 Hình 18: Danh saùch döõ lieäu Tuy nhieân, trong phaàn naøy chuùng giaû ñònh raèng moät maåu tin coá ñònh, baèng caùch taïo ra theû checkbox, cho pheùp ngöôøi duøng choïn nhöõng maåu tin hoï caàn caäp nhaät traïng thaùi hay xoaù chuùng khoûi Table. Trong hình treân, baïn coù theå khai baùo moät theû checkbox coù teân chkall, neáu ngöôøi duøng choïn vaøo nuùt naøy thì taát caû caùc theû checkbox trong phaàn chi tieát seõ coù traïng thaùi cuøng vôùi traïng thaùi cuûa theû chkall. Ñieàu naøy coù nghóa laø neáu theû chkall ñang coù traïng thaùi checked, taát caû caùc theû checkbox (coù teân chkid) chi tieát ñeàu coù traïng thaùi checked. Töông töï nhö vaäy cho tröôøng hôïp ngöôïc laïi. Ngoaøi ra, baïn cuõng coù theå cho pheùp ngöôøi duøng choïcn vaøo Check All hay Clear All, hai link naøy cuõng coù chöùc naêng töông töï nhö traïng thaùi cuûa theû chkall. Ñeå thöïc hieän quaù trình naøy, baïn coù theå vieát moät function coù teân docheck nhö ví duï 16. Ví duï 16: Checked hay Uncheck caùc theû chkid function docheck(status,from_) var alen=document.frmlist.elements.length; // tính soá phaàn töû coù treân form alen=(alen>5)? document.frmlist.chkid.length:0; if (alen>0) // duyeät treân caùc phaàn töû neáu soá maåu tin // nhieàu hôn moät

41 Kòch baûn JavaScript 41 for(var i=0;i<alen;i++) document.frmlist.chkid[i].checked=status; else document.frmlist.chkid.checked=status; // gaùn traïng thaùi cuûa theû chkall if(from_>0) document.frmlist.chkall.checked=status; Trong phöông thöùc treân coù hai tham soá truyeàn vaøo, tham soá thöù nhaát laø traïng thaùi baïn muoán gaùn cho caùc theû chkid, neáu baïn goïi phöông thöùc docheck töø bieán onclick cuûa theû chkall, baïn coù theå gôûi tham soá status chính laø traïng thaùi cuûa theû chkall sau khi ngöôøi duøng choïn vaø tham soá from_ laø 0. Nhöng neáu baïn goïi phöông thöùc naøy link coù teân Check All, baïn caàn truyeàn tham soá status laø true vaø tham soá from_ laø 1. Töông töï nhö vaäy neáu baïn goïi phöông thöùc docheck töø link coù teân Clear All, baïn caàn truyeàn tham soá status laø false vaø tham soá from_ laø 2. Caû hai link coù teân Check All hay Clear All ñeàu coù aûnh höôûng ñeán traïng thaùi cuûa theû checkall. Ñieàu naøy coù nghóa laø neáu ngöôøi duøng goïi Check All nghóa laø taát caû caùc theû chkid ñeàu ñöôïc checked, ñoàng thôøi traïng thaùi cuûa theû chkall cuõng checked. Ngöôïc laïi trong tröôøng hôïp Clear All. Ñoù laø lyù do taïi sao trong phöông thöùc docheck baïn coù theå khai baùo doøng leänh nhö sau: if(from_>0) document.frmlist.chkall.checked=status; Tuy nhieân, neáu döõ lieäu trình baøy treân form nhieàu hôn moät maåu tin, coù nghóa laø caùc theû checkbox coù cuøng teân chkid vaø khaùc nhau giaù trò, cho neân baïn coù theå söû duïng voøng for ñeå duyeät treân töøng phaàn töû chkid[i]. Nhöng trong tröôøng hôïp chæ coù 1 maåu tin, voøng

42 Kòch baûn JavaScript 42 for treân khoâng hôïp leä, thay vaøo ñoù baïn chæ tham chieáu ñeán tmoät theû checkbox coù teân laø chkid. Vaäy trong tröôøng hôïp naøy chuùng toâi giaûi quyeát nhö theá naøo, baèng caùch tính toaùn tröôøng hôïp coù moät maåu tin, toång coäng soá phöông thöùc laø 5 (2 theû checkbox, 2 theû input daïng submit, 1 theû input daïng reset). Neáu döõ lieäu trình baøy nhieàu hôn moät maåu tin, soá löôïng phaàn töû seõ lôùn hôn 5. Chính vì vaäy, trong tröôøng hôïp naøy, baïn phaûi nhaän bieát khi naøo söû duïng voøng for cho phaàn töû chkid[i], khi naøo thì tham chieáu ñeán moät phöông thöùc ñôn chkid. var alen=document.frmlist.elements.length; alen=(alen>5)? document.frmlist.chkid.length:0; if (alen>0) for(var i=0;i<alen;i++) document.frmlist.chkid[i].checked=status; else document.frmlist.chkid.checked=status; Löu yù: Phöông thöùc docheck ñöôïc goïi trong bieán coá onclick cuûa theû checkbox coù teân chkall vaø trong hai link coù teân Check All, Clear All. Thuoäc tính elements traû veà taäp caùc phaàn töû (Collection) trong Form, baïn coù theå söû duïng thuoäc tính length ñeå bieát soá löôïng. Khi ngöôøi duøng chæ caàn choïn vaøo theû chkall (traïng thaùi hieän taïi laø khoâng cheked), theû naøy ñöôïc checked, laäp töùc taát caû caùc theû chkid ñeàu checked. Neáu traïng thaùi hieän taïi cuûa theû chkall ñang checked, traïng thaùi cuûa noù seõ chuyeån sang traïng thaùi khoâng choïn, taát caû caùc theû chkid ñeàu coù traïng thaùi khoâng choïn.

43 Kòch baûn JavaScript 43 Töông töï nhö vaäy, trong tröôøng hôïp ngöôøi duøng Click vaøo Check All, traïng thaùi cuûa caùc theû chkid seõ chuyeån sang checked nhö hình 19. Hình 19: Choïn taát caû caùc theû chkid Neáu ñang trong traïng thaùi nhö hình 19, ngöôøi duøng choïn Clear All hay Click vaø theû chkall, taát caû caùc theû chkid ñeàu coù traïng thaùi khoâng choïn nhö hình 20.

44 Kòch baûn JavaScript 44 Hình 19: Khoâng choïn taát caû caùc theû chkid Neáu ngöôøi duøng choïn töøng theû chkid cho ñeán khi taát caû caùc theû chkid ñeàu checked, laäp töùc traïng thaùi cuûa theû chkall cuõng checked nhö hình 19. Ngöôïc laïi, trong tröôøng hôïp taát caû caùc theû chkid ñeàu checked, chæ caàn coù moät theû chkid khoâng checked, laäp töùc theû chkall seõ khoâng checked nhö hình 21. Hình 21: Ít nhaát theû chkid khoâng checked

45 Kòch baûn JavaScript 45 Ñeå thöïc hieän yù ñoà treân, baïn phaûi vieát phöông thöùc docheckone, phöông thöùc naøy gaùn treân bieán coá onclick cho töøng theû checkbox coù teân chkid, baïn ñöøng lo laéng trong tröôøng hôïp nhieàu maåu tin, bôûi vì trong tröôøng hôïp keát noái cô sôû döõ lieäu, baïn chæ caàn khai baùo moät maåu tin, voøng laëp do until, for hay while seõ taïo ra caùc haøng khaùc cho baïn. Phöông thöùc docheckone seõ duyeät treân taát caû caùc theû chkid treân form, neáu taát caû ñeàu checked, laäp töùc baïn ñoåi traïng thaùi cuûa chkall sang traïng thaùi checked nhö ví duï 17. Ví duï 17: Noäi dung docheckone function docheckone() var alen=document.frmlist.elements.length; // Baïn cho raèng taát caû caùc theû chkid ñeàu checked var ischecked=true; alen=(alen>5)? document.frmlist.chkid.length:0; if (alen>0) // kieåm tra neáu coù ít nhaát moät theû chkid // khoâng checked, bieán ischecked coù giaù // trò false. for(var i=0;i<alen;i++) if(document.frmlist. chkid[i].checked==false) ischecked=false; else // trong tröôøng hôïp chæ moät maåu tin if(document.frmlist.chkid.checked==false) ischecked=false; // Gaùn traïng thaùi cuûa theû chkall baèng vôùi giaù // trò cuûa bieán ischecked document.frmlist.chkall.checked=ischecked;

46 Kòch baûn JavaScript 46 Sau khi thao taùc caùc böôùc treân, ngöôøi duøng baét ñaàu quyeát ñònh xoaù hay caäp nhaät moät hay nhieàu maåu tin cuøng moät luùc, ngöôøi duøng seõ baám nuùt Delete hay Update, tröôùc khi submit ñeán moät form ñeå thöïc thi vieäc thao taùc döõ lieäu trong cô sôû döõ lieäu, baïn caàn phaûi kieàm tra ít nhaát moät maåu tin ñöôïc choïn. Vôùi lyù doù raøng buoäc nhö vaäy, baïn coù theå vieát phöông thöùc checkinput() nhö ví duï 18, nhaèm kieåm tra ít nhaát moät maåu tin ñöôïc choïn thì form seõ submit. Ví duï 18: Phöông thöù checkinput() function checkinput() var alen=document.frmlist.elements.length; var ischecked=false; alen=(alen>5)?document.frmlist.chkid.length:0; if (alen>0) for(var i=0;i<alen;i++) if(document.frmlist.chkid[i].checked==true) ischecked=true; else if(document.frmlist.chkid.checked==true) ischecked=true; if (!ischecked) alert( Please select at least one of them ); return ischecked; Baøng caùch kieåm tra soá maåu tin trình baøy treân form, baïn coù theå kieåm tra coù hay khoâng ít nhaát moät maåu tin ñöôïc choïn. Tröôùc tieân, baïn khai baùo bieán ischecked coù giaù trò false, giaù trò naøy cho raèng khoâng coù theû chkid naøo ñöôïc choïn, voøng laëp for sau ñoù hay phöông thöùc ñôn döôïc kieåm tra, neáu coù choïn bieán naøy seõ gaùn laø true. Cuoái cuøng, phöông thöùc traû veà giaù trò baèng vôùi giaù trò bieán ischecked.

47 Kòch baûn JavaScript 47 Trôû laïi trình duyeät Web, baïn laøm töôi trang Web coù teân ex8.htm, khoâng choïn baát kyø theû chkid naøo vaø baám nuùt Delete chaúng haïn, hoäp hoäi thoaïi xuaát hieän nhö hình 22 vôùi noäi dung thoâng baùo nhö baïn ñaõ ñònh nghóa. Hình 22: Thoâng baùo choïn checkbox Ñeå tham khaûo moät caùch toaøn dieän öùng duïng checkbox cuøng teân nhö ñaõ trình baøy ôû treân, baïn coù theå tham khaûo noäi dung trang ex8.htm nhö ví duï 19. Tuy nhieân, baïn cuõng coù theå tìm thaáy ví duï naøy trong ñóa ñính keøm. Ví duï 19: Noäi dung trang ex8.htm <html> <head> <title>welcome to JavaScript</title> <link rel="stylesheet" type="text/css" href="../style.css"> <script language=javascript> function docheck(status,from_) var alen=document.frmlist.elements.length; // tính soá phaàn töû coù treân form alen=(alen>5)? document.frmlist.chkid.length:0; if (alen>0) // duyeät treân caùc phaàn töû neáu soá maåu tin // nhieàu hôn moät

48 Kòch baûn JavaScript 48 for(var i=0;i<alen;i++) document.frmlist.chkid[i].checked=status; else document.frmlist.chkid.checked=status; // gaùn traïng thaùi cuûa theû chkall if(from_>0) document.frmlist.chkall.checked=status; function docheckone() var alen=document.frmlist.elements.length; // Baïn cho raèng taát caû caùc theû chkid ñeàu checked var ischecked=true; alen=(alen>5)? document.frmlist.chkid.length:0; if (alen>0) // kieåm tra neáu coù ít nhaát moät theû chkid // khoâng checked, bieán ischecked coù giaù // trò false. for(var i=0;i<alen;i++) if(document.frmlist. chkid[i].checked==false) ischecked=false; else // trong tröôøng hôïp chæ moät maåu tin if(document.frmlist.chkid.checked==false) ischecked=false; // Gaùn traïng thaùi cuûa theû chkall baèng vôùi giaù // trò cuûa bieán ischecked document.frmlist.chkall.checked=ischecked; function checkinput() var alen=document.frmlist.elements.length; var ischecked=false;

49 Kòch baûn JavaScript 49 alen=(alen>5)?document.frmlist.chkid.length:0; if (alen>0) for(var i=0;i<alen;i++) if(document.frmlist.chkid[i].checked==true) ischecked=true; else if(document.frmlist.chkid.checked==true) ischecked=true; // Neáu khoâng check chkid, thoâng baùo cho ngöôøi // duøng bieát. if (!ischecked) alert( Please select at least one of them ); return ischecked; </script> </head> <! Baét ñaàu noäi dung HTML--> <body> <div class=text_header><br> Update/Delete Data</div> <br> <table width="354"> <form name="frmlist" method="post" action="jsdo.php?goto=" onsubmit="return checkinput();"> <td><b>my Orders</b></td> <td valign="top" height="79"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <td width="6%"> <input type="checkbox" name="chkall" value="0" onclick=

50 Kòch baûn JavaScript 50 "docheck(document.frmlist.chkall.checked,0); "> <! treân moãi theû chkall goïi phöông thöùc docheck ()--> </td> <td width="30%"><b>order No</b></td> <td width="36%"><b>customer Name</b></td> <td width="28%"><b>order Date</b></td> <td width="6%"> <! treân moãi theû chkid ñeàu goïi phöông thöùc docheckone()--> <input type="checkbox" name="chkid" value="i00001" onclick="docheckone();"> </td> <td width="30%">i00001</td> <td width="36%">nguyen Van A</td> <td width="28%">feb </td> <td width="6%"> <! treân moãi theû chkid ñeàu goïi phöông thöùc docheckone()--> <input type="checkbox" name="chkid" value="i00002" onclick="docheckone();"> </td> <td width="30%">i00002</td> <td width="36%">tran Hoa</td> <td width="28%">feb </td> <td width="6%"> <! treân moãi theû chkid ñeàu goïi phöông thöùc docheckone()--> <input type="checkbox" name="chkid" value="i00003" onclick="docheckone();"> </td> <td width="30%">i00003</td> <td width="36%">le Thi Ha</td> <td width="28%">feb </td>

51 Kòch baûn JavaScript 51 </table> </td> <td align="left" class="text_normal" valign="top"> <a href="javascript:docheck(true,1);"> Check All</a> <! treân link coù teân Check All goïi phöông thöùc docheck(true)--> <a href="javascript:docheck(false,2);"> Clear All</a> <! treân link coù teân Clear All goïi phöông thöùc docheck(false)--> </td> <td align="left" class="text_normal" valign="top"> <input type="submit" style="width=80px" name="submit" value="delete" class="button"> <input type="submit" style="width=80px" name="submit" value="update" class="button"> <input type="reset" name="reset" value="reset" class="button"> </td> </form> </table> </body> </html> Löu yù: Trong tröôøng hôïp baïn goïi moät phöông thöùc baèng bieán coù cuûa theû input, baïn chæ caàn khai baùo teân phöông thöùc cuøng tham soá neáu coù. Tuy nhieân, trong tröôøng hôïp goïi phöông thöùc baèng link nhö Check All hay Clear All chaúng haïng, baïn caàn khai baùo theâm töø khoaù JavaScript nhö ví duï sau: <td align="left" class="text_normal"

52 Kòch baûn JavaScript 52 valign="top"> <a href="javascript:docheck(true,1);"> Check All</a> <a href="javascript:docheck(false,2);"> Clear All</a> </td> 7. CHEØN TAÄP TIN JAVASCRIPT Trong tröôøng hôïp coù nhieàu laàn khai baùo trong caùc trang Web, baïn coù theå taïo ra moät taäp tin.js vôùi caùc phöông thöùc chung, sau ñoù coù theå khai baùo vaø söû duïng chuùng trong caùc trang Web khaùc khi coù nhu caàu. Ñeå khai baùo caùc phöông thöùc JavaScript do ngöôøi duøng ñònh nghóa trong trang.js cuõng töông töï nhö caùc khai baùo trong theû Script cuûa töøng trang Web. Chaúng haïn, trong tröôøng hôïp baïn muoán kieåm tra moät ñòa chæ coù hôïp leä hay khoâng veà teân goïi, baïn coù theå vieát moät phöông thöùc is vôùi chuoãi truyeàn vaøo nhö moät tham soá, phöông thöùc naøy traû veà giaù trò true coù nghóa laø naøy hôïp leä, ngöôïc laïi naøy khoâng hôïp leä. Töông töï nhö vaäy, trong tröôøng hôïp kieåm tra chuoãi soá ñieän thoaïi, chuoãi ngaøy thaùng hôïp leä, môû cöûa soå,... nhö trong trang common.js. Ví duï 20: Noäi dung trang common.js function is (s) //Neáu laø chuoãi roãng if (s=="") return false; //Neáu laø chuoãi coù khoaûng traéng if(s.indexof(" ")>0) return false; //Neáu laø chuoãi khoâng coù if(s.indexof("@")==-1) return false; var i = 1; var slength = s.length;

53 Kòch baûn JavaScript 53 //Neáu laø chuoãi khoâng coù daáu. if (s.indexof(".")==-1) return false; //Neáu laø chuoãi coù hai daáu. gaàn nhau if (s.indexof("..")!=-1) return false; //Neáu laø chuoãi coù hai if (s.indexof("@")!=s.lastindexof("@")) return false; //Neáu laø chuoãi coù daáu. cuoái cuøng if (s.lastindexof(".")==s.length-1) return false; //Neáu laø chuoãi coù kyù töï khoâng thuoäc caùc kyù töï sau var str="abcdefghikjlmnopqrstuvwxyz-@._"; for(var j=0;j<s.length;j++) if(str.indexof(s.charat(j))==-1) return false; //Neáu laø chuoãi döõ lieäu, phöông thöùc traû veà true return true; function isempty(s) return ((s == null) (s.length == 0)) function iswhitespace (s) var whitespace = " \t\n\r"; var i; if (isempty(s)) return true; for (i = 0; i < s.length; i++) var c = s.charat(i); if (whitespace.indexof(c) == -1) return false; return true; Löu yù: Moät hôïp leä laø coù 1 hai kyù töï hai beân laø kyù töï alphanumeric. Töông töï nhö vaäy, coù ít nhaát

54 Kòch baûn JavaScript 54 moät daáu., hai kyù töï hai beân daáu. laø kyù töï alphanumeric. Sau coù í nhaát moät daáu, khoâng coù khoaûn traéng,... Baïn coù theå ñieàu chænh laïi phöông thöùc is sao cho hôïp leä yù cuûa baïn, sau ñoù coù theå söû duïng chuùng cho nhöõng vò trí coù kieåm tra . Sau khi baïn soaïn xong noäi dung cuûa caùc phöông thöùc trong taäp tin common.js, trong baát kyø trang Web naøo baïn caàn söû duïng caùc phöông thöùc ñoù, baïn coù theå khai baùo cheøn taäp tin ñoù vaø goïi chuùng nhö caùch goïi phöông thöùc ñònh nghóa ngay trong trang Web. Chaúng haïn trong trang ex9.htm, neáu baïn muoán söû duïng phöông thöùc is ñeå kieåm tra ngöôøi duøng nhaäp vaøo hôïp leä hay khoâng nhö hình 23, thay vì khai baùo phöông thöùc is treân trang ex9.htm, baïn chæ caàn khai baùo cheøn common.js nhö khai baùo sau: <script language=javascript src=../js/common.js></script> Hình 23: Cheøn taäp tin js

55 Kòch baûn JavaScript 55 Trong khi khai baùo cheøn taäp tin.js, baïn caàn phaûi chæ roõ vò trí cuûa taäp tin ñoù trong thö muïc Web theo ñòa chæ töông ñoái. Keá tieáp, trong caùc phöông thöùc JavaScript, baïn coù theå khai baùo ñeå söû duïng nhö ví duï 21. Ví duï 21: Cheøn taäp tin.js <html> <head> <title>welcome to JavaScript</title> <link rel="stylesheet" type="text/css" href="../style.css"> <!--Khai baùo cheøn taäp tin common.js--> <script language=javascript src="../js/common.js"></script> <script language=javascript> function checkinput() if (document.frmlogin.username.value=="") alert("please enter your own "); document.frmlogin.username.focus(); return false; // Khai baùo goïi phöông thöùc is // trong common.js if (!is ( document.frmlogin.username.value)) alert("invalid , Please enter your own "); document.frmlogin.username.focus(); return false; if (document.frmlogin.password.value=="") alert("please enter your own Password"); document.frmlogin.password.focus(); return false; return true;

56 Kòch baûn JavaScript 56 </script> </head> <body> <div class=text_header>login User</div><br> <table> <form name="frmlogin" method="post" action="jsdologin.php?goto=" onsubmit="return checkinput();"> <td align="left" class="content-sm"> Address:</td> <td align="left" class="input"> <input type="text" name="username" size="25" maxlength="100" class="textbox"> </td> <td align="left" class="content-sm"> Password:</td> <td align="left" class="input"> <input type="password" name="password" size="25" maxlength="8" class="textbox"> </td> <td><img src="/images/blank.gif" width="1" height="5" alt=""></td> <td align="left" class="text_normal" valign="top"> <br> <input type="submit" style="width=80px" name="signin" value="sign me in!" class="button"> <input type="reset" name="reset" value="reset" class="button"></td> </form>

57 </table> </body> </html> Kòch baûn JavaScript 57 Ngoaøi ra, do nhu caàu bieán coù keát hôïp giaù trò coù thay ñoåi trong nhieàu tröøong hôïp do ngöôøi söû duïng thöïc hieän, baïn coù theå khai baùo bieán trong theû <script> treân trang Web nhöng cuõng coù theå goïi chuùng trong taäp tin.js khai baùo cheøn. Chaúng haïn, baïn khai baùo treân trang Web coù caáu truùc nhö ví duï Ví duï 21: Cheøn taäp tin.js <html> <head> <title>welcome to JavaScript</title> <!--Khai baùo cheøn taäp tin common.js--> <script language=javascript src="../js/call.js"></script> <script language=javascript> var str ="Welcome"; </script> <script language=javascript> function call() calljs(); </script> </head> <body> <input type="button" name="call" value="call" onclick="call();" ></td> </body> </html> Trong ñoù, phöông thöùc calljs() ñöôïc khai baùo trong taäp tin all.js töông töï nhö ví duï Ví duï 21-2: Phöông thöùc calljs

58 function calljs() alert(str); Kòch baûn JavaScript 58 Löu yù, bieán str ñöôïc khai baùo beân ngoaøi trang Web coù khai baùo cheøn taäp tin call.js. 8. JAVASCRIPT VÔÙI MENU Trong phaàn naøy chuùng toâi tieáp tuïc trình baøy cho caùc baïn moät soá phöông thöùc JavaScript khaùc coù lieân quan ñeán öùng duïng trieån khai trong giaùo trình Xaây döïng menu baèng theû Table Tröôùc tieân, baïn thöû hình dung moät menu nhö moâ phoûng, cho pheùp ngöôøi duøng choïn moät menu naøo ñoù trong toång 3 menu, nhöng trong tröôøng hôïp ngöôøi duøng reâ chuoäc treân töøng menu, maøu neàn cuûa menu seõ ñoåi maøu. Login Search Help Chaúng haïn trong tröôøng hôïp treân, ngöôøi duøng vöøa reâ chuoäc ñeánb menu coù teân Search, menu naøy ñoåi maøu neàn xaùm, töông töï nhö vaäy trong tröôøng hôïp reâ ñeán menu coù teân Help thì menu coù teân Search trôû laïi maøu ban ñaàu, maøu neàn cuûa menu coù teân Help coù maøu neàn xaùm. Ñeå thuïc hieän ñöôïc yù ñònh naøy, tröôùc tieân baïn khao baùo moät haøng vôùi 3 coät coù maøu neàn laø maøu nhaát ñònh. Sau ñoù, treân moãi coät baïn khai baùo caùc bieán coù onmouseover vaø onmouseout. Khi bieán onmouseover xaûy ra, maøy neàn cuûa coät hieän taïi ñöôïc löu vaøo bieán coù teân oldcolor, thay theá maøu neàn baèng maøu môùi, khi bieán coá onmouseout xaûy ra, phuïc hoài maøu neàn cuûa coät hieän taïi baèng maøu töø bieán oldcolor nhö ví duï 22 sau: Ví duï 21: Thay ñoåi maøu neàn <script language=javascript>

59 //Bieán löu maøu cuû var curbgcolor; Kòch baûn JavaScript 59 // Ñoåi maøu neàn function active(obj,color) curbgcolor=obj.bgcolor; obj.bgcolor=color; // Phuïc hoài maøu neàn function deactive(obj) obj.bgcolor=curbgcolor; </script> Hai phöông thöùc active vaø deactive ñöôïc goïi chung trong theû <td> cuûa trang ex10.htm nhö ví duï 22. Ví duï 22: Hai bieán onmouseover vaø onmouseout <td valign=top bgcolor="#ffffff" onmouseover="active(this,'#ddeeff')" onmouseout="deactive(this)" >Login</td> <td valign=top bgcolor="#ffffff" onmouseover="active(this,'#ddeeff')" onmouseout="deactive(this)" >Search<td> <td valign=top bgcolor="#ffffff" onmouseover="active(this,'#ddeeff')" onmouseout="deactive(this)" >Help<td> Baïn coù theå duyeät trang ex10.htm treân trình duyeät, keát quaû nhö hình 24, khi ngöôøi duøng reâ chuoäc vaøo nhaõn Search, laäp tuùc coät coù nhaõn Search seõ thay theá maøu xanh (#ddeeff).

60 Kòch baûn JavaScript 60 Hình 24: Thieát keá menu daïng baûng 8.2. Xaây döïng menu baèng theû span daïng caây Töông töï nhö Exploer cuûa Windows, baïn cuõng coù theå thieát keá menu daïng caây treân trang Web, baèng caùch söû duïng JavaScript cho pheùp ngöôøi duøng collapse hay expand caùc node cuûa menu caây nhö hình 25. Hình 24: Menu daïng caây Khi ngöôøi duøng choïn nuùt -, laäp töùc nuùt naøy thay theá nuùt +, caùc menu con beân döôùi seõ bò che daáu nhö trong hình 25, ngöôïc laïi ñang daáu +, ngöôøi duøng choïn vaøo daáu + (collapse) laäp töùc daáu (expand) thay theá, caùc menu con laïi xuaát hieän.

61 Kòch baûn JavaScript 61 Hình 25: Menu daïng caây Ñeå thöïc hieän ñöôïc yù ñoà treân, baïn coù theå vieát moät phöông thöùc coù teân explorer nhö ví duï 23 trong theû JavaScript (baïn coù theå tìm thaáy ví duï naøy trong trang ex11.htm), vôùi nhieäm vuï menu ñang daïng collapse, chuyeån sang daïng expand vaø ngöôïc laïi. Ví duï 23: Phöông thöùc explorer <script language=javascript> function explorer(iself,name1,name2,divid) // So saùnh neáu hai hình khoâng gioáng nhau, thay theá hình hieän // taïi baèng hình htöù hai vaø ngöôïc laïi. Trong luùc thay theá, // baïn coù theå che daáu hay hieån thò theû span töông öùng. if (iself.src.lastindexof(name1) ==iself.src.length-name1.length) iself.src = name2; document.all[divid].style.display=''; else iself.src = name1; document.all[divid].style.display='none'; </script>

62 Kòch baûn JavaScript 62 Tuy nhieân, ñeå coù ñöôïc moät ví duï hoaøn chænh nhö treân, baïn coù theå goïi phöông thöùc treân töøng theû <img> cuøng vôùi theû <span> coù thuoäc tính id ñi keøm, baïn coù theå tham khaûo ví duï 24. Ví duï 24: Goïi phöông thöùc explorer <HTML> <HEAD> <SCRIPT language=javascript> function explorer(iself,name1,name2,divid) if (iself.src.lastindexof(name1) ==iself.src.length-name1.length) iself.src = name2; document.all[divid].style.display=''; else iself.src = name1; document.all[divid].style.display='none'; </SCRIPT> </HEAD> <BODY> <TABLE > <TBODY> <TR> <TD valign="top"> <font face="arial, Helvetica, sans-serif" size="2"> <!-Theû image vaø span thöù hai---> <IMG name=a onclick= "explorer(this,'image/sub.gif', 'image/plus.gif','div01');" src="image/sub.gif"> Database Services<br> <SPAN id="div01"> <img src=../images/space.gif height=1 width=29> <A href="#">backup</a><br> <img src=../images/space.gif height=1 width=29> <A href="#">restore</a><br> <img src=../images/space.gif height=1

63 Kòch baûn JavaScript 63 width=29> <a href="#">database Report</a><br> </SPAN> <!-Theû image vaø span thöù hai---> <IMG name=b onclick= "explorer(this,'image/plus.gif', 'image/sub.gif','div02');" src="image/sub.gif">web Folder<BR> <SPAN id="div02"> <img src=../images/space.gif height=1 width=29> <A href="#">backup</a><br> <img src=../images/space.gif height=1 width=29> <A href="#">restore</a><br> <img src=../images/space.gif height=1 width=29> <A href="#">database Report</A><br> </SPAN> </font></td> </TR> </TBODY> </TABLE> </BODY> 9. MÔÛ CÖÛA SOÅ DAÏNG POPUP Trong quaù trình duyeät Web treân Internet, ñoâi khi baïn baét gaëp moät soá trang quaûng caùo xuaát hieän döôùi daïng popup. Ñieàu naøy coù nghóa laø cöûa soå xuaát hieän ñoù khoâng coù caùc nuùt stop, refresh, thanh status,... Ñeå thöïc hieän yù ñoà treân, tröôùc tieân baïn xaây döïng moät trang Web coù teân ex12.htm, treân trang naøy bao goàm caùc hình aûnh quaûng caùo cho moät saûn phaåm hay nhöõng chuoãi giôùi thieäu chaúng haïn. Sau ñoù, thieát keá trang Web coù teân ex13.htm, trong trang naøy baïn khai baùo moät phöông thöùc cho pheùp môû trang Web coù teân ex12.htm döôùi daïng cöûa soå popup nhö ví duï 25. Ví duï 25: Phöông thöùc môû cöûa soå daïng popup function openbox(winwidth, winheight, scrollbars,toolbar,,top,left,filesrc)

64 Kòch baûn JavaScript 64 var newparameter = "width=" + winwidth + ",height=" + winheight ; newparameter += ",scrollbars="+scrollbars+",toolbar="+toolbar +",top="+top+",left="+left; newwindow = open (filesrc, "a", newparameter); Baèng caùch truyeàn caùc tham soá chieàu cao, chieàu roäng cuûa cöûa soå, khoaûng caùch töø cöûa soå ñeán caïnh phía treân vaø phía caùch beân traùi cuûa trình duyeät, che daáu hay xuaát hieän thanh scrollbars vaø toolbar hay khoâng. Keá tieáp, baïn coù theå noái taát caû tham soá thaønh moät chuoãi vaø truyeàn vaøo phöông thöùc OpenBox nhö moät tham soá. Ngoaøi ra, ñeå phöông thöùc treân thaønh phöông thöùc söû duïng chung trong nhieàu trang Web cuûa Web Site, baïn caàn khai baùo phöông thöùc naøy trong trang common.js, song nhö vaäy baïn phaûi truyeàn teân URL caàn môû nhö moät tham soá. Heä soá a trong phöông thöùc window.open, cho pheùp taïi thôøi ñieåm ñoù chæ toàn taïi moät trang Web treân cöûa soå popup ñoù. Ñeå môû cöûa soå daïng popup, baïn coù theå goïi phöông thöùc môû cöûa soå trong bieán onload cuûa theû body cuûa trang ex13.htm nhö ví duï 26. Ví duï 26: Goïi phöông thöùc OpenBox <HTML> <HEAD> <SCRIPT language=javascript> function openbox(winwidth, winheight, scrollbars,toolbar,top,left,filesrc) var newparameter = "width=" + winwidth + ",height=" + winheight ; newparameter += ",scrollbars="+scrollbars+", toolbar="+toolbar+",top="+top+",left="+left; newwindow = open (filesrc, "a", newparameter); </SCRIPT> </HEAD>

65 Kòch baûn JavaScript 65 <BODY onload="openbox(200,200,'no','no',0,0,'ex12.h tm');"> Here is Popup Window </BODY> </HTML> Trôû laïi trình duyeät, khi baïn naïp trang Web coù teân ex13.htm, laäp töùc trang Web coù teân ex12.htm xuaát hieän döôùi daïng moät cöûa soå popup nhö hình 26. Hình 26: Xuaát hieän cöûa soå daïng popup 10. THEÂM, XOAÙ PHAÀN TÖÛ TRONG HAI THEÛ SELECT Trong phaàn naøy, chuùng toâi muoán trình baøy laøm theá naøo ñeå theâm moät phaàn töû töø theû select naøy sang theû select khaùc vaø ngöôïc laïi. Trong tröôøng hôïp cuï theå giöõa hai theû select daïng listbox, chuùng toâi choïn caùch theâm phaàn töû töø theû select beân traùi (visiblelist1) sang beân phaûi (visiblelist2) vaø ngöôïc laïi, moãi laàn

66 Kòch baûn JavaScript 66 theâm chuùng töø beân tra sang beân phaûi, ñoàng thôøi phaàn töû ñoù khoâng toàn taïi töø theû beân traùi vaø ngöôïc laïi nhö hình 27. Baèng caùch söû duïng hai tuyø choïn, ñeå cho pheùp ngöôøi duøng chæ söû duïng thuoäc tính naøy khi hoï choïn tuyø choïn (coù teân visibleto) thöù 2 coù giaù trò laø People in list. Ñieàu naøy coù nghóa laø khi trang Web naøy xuaát hieän treân trình duyeät, phaàn theâm hay xoaù phaàn töû trong theû select seõ voâ hieäu hoaù nhö hình 27 tröø khi ngöôøi duøng choïn tuyø choïn thöù hai nhö hình 28. Hình 27: Voâ hieäu hoaù hai theû select vaø hai theû input Ñeå thöïc hieän yù ñoà treân, tröôùc tieân chuùng toâi vieát phöông thöùc coù teân AddTo ( srcobj,desobj), vôùi hai tham soá truyeàn vaøo öùng vôùi hai theû select (theû select beân traùi (visiblelist1) vaø theû select beân phaûi laø (visiblelist2)).

67 Kòch baûn JavaScript 67 Phöông thöùc AddTo thöïc hieän coâng vieäc laø duyeät treân theû select nguoàn (srcobj), neáu tìm thaáy nhaõn ñöôïc choïn seõ taïo ra phaàn töû môùi vaø theâm noù vaøo theû select ñích (desobj) nhö ví duï 27. Ví duï 27: Phöông thöùc di chuyeån phaàn töû cuûa theû select function AddTo ( srcobj,desobj ) var i= srcobj.selectedindex, j, k; var bins = false; if (i==-1) return 0; for (k=srcobj.options.length-1; k>=0; k--) bins=false; if (srcobj.options(k).selected==true) var f1=srcobj.options(k).text; var f2=srcobj.options(k).value; var total=desobj.options.length var ooption = document.createelement("option"); desobj.options.add(ooption); ooption.innertext = f1; ooption.value = f2; ooption.selected= true; srcobj.options.remove(k); SortItem(srcobj); SortItem(desobj); Tìm treân theû select coù teân srcobj, neáu coù nhaõn ñöôïc choïn baïn coù theå laáy giaù trò vaø nhaõn cuûa chuùng baèng caùch söû duïng voøng laëp nhö sau: for (k=srcobj.options.length-1; k>=0; k--) bins=false; if (srcobj.options(k).selected==true) var f1=srcobj.options(k).text; var f2=srcobj.options(k).value;

68 Kòch baûn JavaScript 68 Sau khi theâm phaàn töû choïn töø srcobj vaøo desobj, baèng caùch khai baùo khôûi taïo phaàn töû: var ooption = document.createelement("option"); desobj.options.add(ooption); ooption.innertext = f1; ooption.value = f2; ooption.selected= true; Keá tieáp, baïn coù theå xoaù phaàn töû trong theû select coù teân srcobj baèng phaùt bieåu nhö sau: srcobj.options.remove(k); Cuoái cuøng, chuùng goïi phöông thöùc SortItem ñeå saép xeáp laïi phaàn töû trong 2 theû select theo chieàu thöù töï alphabet baèng hai phaùt bieåu sau: SortItem(srcobj); SortItem(desobj);

69 Kòch baûn JavaScript 69 Hình 28: Theâm vaø xoaù phaàn töû trong hai theû select Ñoái vôùi quaù trình saép xeáp phaàn töû trong theû select, baïn coù theå khai baùo phöông thöùc coù teân SortItem vôùi tham soá truyeàn vaøo theû select. Phöông thöùc naøy duyeät treân phaàn töû cuûa theû select vaø duøng phöông phaùp saép xeáp Bubble ñeå saép xeáp phaàn töû nhö ví duï 28. Ví duï 28: Saép xeáp phaàn töû trong theû select function SortItem(obj) // Khai baùo bieán chöùa soá phaàn töû trong theû var num= obj.options.length; var i, j=0; // Khai baùo hai maûng döõ lieäu öùng vôùi giaù trò vaø nhaõn var anarrayvalue= new Array(num+1); var anarraytext= new Array(num+1); // Duyeät treân theû select vaø laáy giaù trò, nhaõn löu vaøo hai maûng for ( i =0 ; i< num; i++) // Löu giaù trò vaøo maûng anarraytext[i]= obj.options(i).text; // Löu nhaõn vaøo maûng anarrayvalue[i] = obj.options(i).value; // Khai baùo hai bieán taïm öùng vôùi value vaø label cuûa option var valuetemp=""; var texttemp=""; // Duøng phöông phaùp Bubble Sort for (i =0 ; i< num ; i++) texttemp= anarraytext[i]; valuetemp= anarrayvalue[i]; for (j= i + 1; j < num ; j++) if ( anarraytext[j] < texttemp) anarraytext[i]=anarraytext[j]; anarraytext[j]= texttemp; anarrayvalue[i]=anarrayvalue[j]; anarrayvalue[j]= valuetemp; valuetemp= anarrayvalue[i]; texttemp= anarraytext[i];

70 // Xoaù heát phaàn töû trong theû select for (i =num-1; i>=0 ; i--) obj.options.remove(i); Kòch baûn JavaScript 70 // Gaùn trôû aïi phaàn töû cho theû select töø phaàn töû töông öùng // trong maûng for (i =0; i<num ; i++) var ooption = document.createelement("option"); obj.options.add(ooption); ooption.innertext = anarraytext[i]; ooption.value =anarrayvalue[i]; Tröôùc tieân, baïn coù theå khai baùo bieán ñeå bieát ñöôïc soá phaàn töû (theû option) trong theû select. Sau ñoù, baïn khai baùo hai maûng öùng vôùi soá phaàn töû ñoù ñeå löu giaù trò vaø nhaõn cuûa chuùng. // Khai baùo bieán chöùa soá phaàn töû trong theû var num= obj.options.length; Duøng phaùt bieåu voøng laëp for ñeå ñoïc taát caû caùc giaù trò vaø nhaõn cuûa theû option vaøo hai maûng töông öùng nhö phaùt bieåu: // Khai baùo hai maûng döõ lieäu öùng vôùi giaù trò vaø nhaõn var anarrayvalue= new Array(num+1); var anarraytext= new Array(num+1); // Duyeät treân theû select vaø laáy giaù trò, nhaõn löu vaøo hai maûng for ( i =0 ; i< num; i++) // Löu giaù trò vaøo maûng anarraytext[i]= obj.options(i).text; // Löu nhaõn vaøo maûng anarrayvalue[i] = obj.options(i).value;

71 Kòch baûn JavaScript 71 Sau khi ñoïc xong, baïn coù theå xoaù heát phaàn töû trong theû select baèng phaùt bieåu: // Xoaù heát phaàn töû trong theû select for (i =num-1; i>=0 ; i--) obj.options.remove(i); Khai baùo hai bieám taïm vaø söû duïng phöông phaùp Bubble Sort ñeå saép xeáp caùc phaàn töû trong maûng baèng ñoaïn chöông trình sau: // Khai baùo hai bieán taïm öùng vôùi value vaø label cuûa option var valuetemp=""; var texttemp=""; // Duøng phöông phaùp Bubble Sort for (i =0 ; i< num ; i++) texttemp= anarraytext[i]; valuetemp= anarrayvalue[i]; for (j= i + 1; j < num ; j++) if ( anarraytext[j] < texttemp) anarraytext[i]=anarraytext[j]; anarraytext[j]= texttemp; anarrayvalue[i]=anarrayvalue[j]; anarrayvalue[j]= valuetemp; valuetemp= anarrayvalue[i]; texttemp= anarraytext[i]; Sau khi saép xeáp xong, baïn coù theå söû duïng voøng laëp for ñeå gaùn trôû loaïi theû select töø caùc phaàn töû ñaõ saép xeáp trong maûng. Ñeå laøm ñieàu naøy, baïn coù theå tham khaûo khai baùo: // Gaùn trôû aïi phaàn töû cho theû select töø phaàn töû töông öùng // trong maûng for (i =0; i<num ; i++) var ooption = document.createelement("option");

72 Kòch baûn JavaScript 72 obj.options.add(ooption); ooption.innertext = anarraytext[i]; ooption.value =anarrayvalue[i]; Khi ngöôøi duøng goïi trang additem.htm treân trình duyeät, neáu hoï choïn tuyø choïn Assign to others, laäp töùc hai theû select vaø hai theû input daïng nuùt seõ coù hieäu löïc nhö hình 28. Ñeå laøm ñieàu naøy, baïn khai baùo phöông thöùc JavaScript ñeå trình baøy hay che daáu 2 theû select vaø 2 theû input) treân nhö ví duï 29. Ví duï 29: Che daáu hay xuaát hieän 4 theû (select vaø input) function setvisible( yes ) if (yes) // Cho pheùp söû duïng 2 theû select vaø hai theû input document.frm.visiblelist1.disabled= false; document.frm.visiblelist2.disabled= false; document.frm.addvisibled.disabled= false; document.frm.removevisibled.disabled= false; else // Voâ hieäu hoaù 2 theû select vaø hai theû input document.frm.visiblelist1.disabled= true; document.frm.visiblelist2.disabled= true; document.frm.addvisibled.disabled= true; document.frm.removevisibled.disabled= true; Baèng caùch choïn moät trong nhöõng nhaõn coù trong theû select beân traùi, choïn nuùt Add >> ñeå theâm vaøo theû select beân phaûi. Töông töï nhö vaäy, trong tröôøng hôïp ngöôøi duøng muoán chuyeån nhaõn töø theû select beân phaûi sang beân traùi baèng caùch baám nuùt Remove <<. Ñeå

73 Kòch baûn JavaScript 73 tìm hieåu quaù trình goïi caùc phöông thöùc treân, baïn coù theå tham khaûo ví duï 30. Ví duï 30: Khai baùo theû vaø goïi phöông thöùc JavaScript <body> <form name="frm" method=post> <table border="0" cellspacing="1" cellpadding="0" width="379"> <td height='29' class='row_light'> This Job assign To<br> <input type=radio name='visibleto' value="everyone" checked onclick="setvisible(false)"> Assign to me <br> <input type=radio name='visibleto' value="people in list" onclick="setvisible(true)"> Assign to others<br> </td> <td class='row_light'> <table width=100% height="100%"> <td> <input type=hidden name=visiblelist value=""> <select disabled style='width: 120px; HEIGHT: 100px' name='visiblelist1' class='textbox' size="1" multiple > <option value="1">(administrator)</option> <option value="2"> Top Admin</option> <option value="3"> User1</option> <option value="4">user2</option> </select> </td> <td> <input type=button disabled

74 Kòch baûn JavaScript 74 name=addvisibled value=" Add >> " style="width:100px" class=button onclick="addto(frm.visiblelist1, Frm.visibleList2)"> <br> <input type=button disabled name=removevisibled value=" Remove << " style="width:100px" class=button onclick="addto(frm.visiblelist2, Frm.visibleList1)"> </td> <td> <select disabled style='width: 120px; HEIGHT: 100px' name='visiblelist2' class='textbox' size="1" multiple > </select> </td> </table> </td> </table> <br> </form> </body> Keát quaû thöïc hieän nhö hình 29.

75 Kòch baûn JavaScript 75 Hình 29: Theâm hay xoaù phaàn töû trong theû select 11. THEÂM MOÄT CHI TIEÁT SAÛN PHAÅM Trong thöïc teá, neáu baïn xaây döïng öùng duïng baèng ngoân ngöõ laäp trình nhö Visual Basic, Visual C++, Access hay Java. Ñoâi khi baïn coù theå söû duïng caùc Component daïng löôùi (Grid) ñeå trình baøy hay cho pheùp ngöôøi duøng kích hoaït vaø theâm saûn phaåm chi tieát. Chaèng haïn, moä hoaù ñôn baùn haøng hay hôïp ñoàng coù hai phaàn, phaàn ñaàu laø caùc thoâng tin chung nhö: Soá hoaù ñôn (InvoiceNo), ngaøy phaùt sinh (Date), khaùch haøng (Customer), dieãn giaûi (Description),... phaàn naøy ñöôïc löu tröõ vaøo baûng döõ lieäu goïi laø tblinvoicemaster. Phaàn thöù hai laø phaàn chi tieát baùn haøng, bao goàm saûn phaåm (Item), soá löôïng (Quantity), ñôn giaù (Price) vaø soá tieàn (Amount) ñöôïc löu tröõ vaøo baûng döõ lieäu coù teân tblinvoicedetails. Nhö vaäy, treân form cho pheùp ngöôøi duøng nhaäp lieäu hay caäp nhaät hoaù ñôn, baïn thieát keá form nhö hình 30. Nhaäp Invoice InvoiceNo : INV00001 _ Date Customer : 20/04/2003 : Nguyeãn Vaên Hoaøng _ Description : Baùn haøng qua maïng Item Quantity Price Amount I I I Toång coäng

76 Kòch baûn JavaScript 76 Hình 30: Maãu hoaù ñôn moâ phoûng Nhö hình treân, ñeå thieát keá phaàn treân bao goàm Soá hoaù ñôn (InvoiceNo), ngaøy phaùt sinh (Date), khaùch haøng (Customer), dieãn giaûi (Description),... thì quaù deã daøng caû treân öùng duïng vaø Web. Nhöng phaàn chi tieát beân döôùi laø moät vaán ñeà caàn phaûi baøn caõi, neáu baïn duøng moät trong caùc ngoân ngöõ laäp trình: Visual Basic, Visual C++, Access hay Java, baïn seõ söû duïng caùc ñieàu khieån hay ñoái töôïng cuûa chuùng. Trong tröôøng hôïp treân öùng duïng Web, baïn coù theå söû duïng theû HTML maø cho pheùp ngöôøi duøng nhaäp chi tieát saûn phaåm tuyø yù. Ñieàu naøy coù nghóa laø hoï coù theå coù N chi tieát saûn phaåm nhö hình 31. Hình 31: Nhaäp N saûn phaåm chi tieát

77 Kòch baûn JavaScript 77 Baèng caùch baám nuùt Add Regular Item hay Add Mile Item, laäp töùc moät maãu bao goàm caùc theû nhö trong phaàn chi tieát xuaát hieän nhö hình 32. Ñoái vôùi tröôøng hôïp naøy, baïn cung caáp hai loaïi maåu tin khaùc nhau, haøm yù laø hai loaïi chi tieâu haèng ngaøy cuûa ngöôøi duøng. Vôùi yù ñoà nhö vaäy, baïn khoâng giôùi haïn ngöôøi duøng nhaäp bao nhieàu chi tieát saûn phaåm khi mua haøng hai nhaäp hoaù ñôn nhö trình baøy ôû treân. Tuy nhieân, coù theå do tính ñaëc thuø cuõa moãi öùng duïng, baïn coù theå ñònh nghóa tröôùc bao nhieâu saûn phaåm nhaèm giôùi haïn ngöôøi duøng chæ coù theå nhaäp moät soá giaù trò saûn phaåm chi tieát chaúng haïn. Hình 32: Nhaäp chi tieát khoâng giôùi haïn Trong tröôøng hôïp ngöôøi duøng muoán xoaù ñi moät chi tieát saûn phaåm, hoï coù theå baám vaùo hình vôùi kyù hieäu xoaù beân caïnh moãi maåu tin, laäp töùc moät thoâng baùo JavaScript xaùc nhaän haønh ñoäng cuûa ngöôøi duøng nhö hình 33, neáu ngöôøi duøng choïn OK, maåu tin chi tieát treân form seõ boï xoaù khoûi trang Web.

78 Kòch baûn JavaScript KEÁT CHÖÔNG Hình 33: Xaùc nhaän baèng JavaScript Trong phaàn trình baøy veà JavaScript, chuùng toâi taäp trung giôùi thieäu moät vaøo ñoaïn chöông trình vieát baèng JavaScript, nhaèm trình baøy nhöõng yù töôûng söû duïng kòch baûn JavaScript vôùi caùc theû HTML.