You are on page 1of 185

50 Programs
JavaScript
By Ray Yao

(The Appendix includes “JavaScript 100 Tests & Answers”
for Interview)

Copyright © 2015 by Ray Yao
All Rights Reserved

Neither part of this book nor whole of this book may be reproduced or transmitted in any form or by any means
electronic, photographic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without prior written permission from the author. All Right Reserved!

Ray Yao

About the Author
Ray Yao:
Certified PHP engineer by Zend, USA
Certified JAVA programmer by Sun, USA
Certified SCWCD developer by Oracle, USA
Certified A+ professional by CompTIA, USA
Certified ASP. NET expert by Microsoft, USA
Certified MCP professional by Microsoft, USA
Certified TECHNOLOGY specialist by Microsoft, USA
Certified NETWORK+ professional by CompTIA, USA

To know more Ray Yao’s books in Amazon:
Ray Yao’s books in Amazon:
Linux Command Line
JAVA in 8 Hours
PHP in 8 Hours
JavaScript in 8 Hours
C++ in 8 Hours
AngularJS in 8 Hours
JQuery in 8 Hours
Python in 8 Hours
HTML CSS in 8 Hours
C# in 8 Hours
JavaScript 50 Useful Programs
PHP 100 Tests, Answers & Explanations
JAVA 100 Tests, Answers & Explanations
JavaScript 100 Tests, Answers & Explanations

Preface
“50 Programs of JavaScript” is a useful book for JavaScript programmers. Using these
programs, you’ll be able to build JavaScript projects quicker and easier than ever, you can
use these programs to create a dynamic web site fast.
This book can help you with:
Form and validation
Username and password check
Filter ungraceful words
Forbid copying photo or text
Email format check
Form submit check
Movement and animation
Text and visual effects
Prevent malicious input
……
And much more.
(Note: All programs have no explanations, but you can download the source code of this
book.)

Table of Contents
Advanced JavaScript 50 Programs
1. Countdown to load webpage
2. Are you sure to delete?
3. Marquee Text
4. Count how many letters
5. Search Engine
6. Select Tag
7. Time Format Conversion
8. Count you typed
9. Forbid Copying Photo
10. Check Password Strength
11. Open Your Harddrive
12. Wave Text
13. Text Advertisement
14. Web Clock
15. How much is the Price?
16. Progress Bar
17. Filter Ungraceful Words
18. Forbid Copy Password
19. World Clock
20. Encrypt Code to Number
21. Forbid copying texts
22. Check Email Format
23. Submit Only One Time
24. How much is the Price?
25. Encode the Texts
26. Select All
27. SEO by Keywords
28. Replace a Word

Typing Effect 46. Words processing 35. Mouse coordinates 44. Disable part of scripts 33. Prevent malicious input 45. Greeting by time 36. Five star review Appendix JavaScript 100 Tests & Answers 100 Tests 100 Answers Source Code for Download . Limit wrong password 34. 29. How long have you stayed? 30. Design window size 39. Check digital input 41. Twinkling Text 37. View Source Codes 40. Print this page 31. Magnify texts 50. Check picture uploading 43. Disable right-click menu 32. Set background color 47. Text scrolls up 49. Select Menu 48. Check empty input 42. Login Page 38.

.

Advanced JavaScript 50 Programs .

Countdown to load webpage .1.

diffSeconds = diffTime/1000.indexOf(“. URL=http://www.setTimeout(‘getSeconds()’. var mySeconds1 = ””+mySeconds0.1)”> .timeElapse. } function getSeconds() { var mySeconds0 = initTimer().”))) + ” seconds”. document.amazon.w3.1000). mySeconds1= 10 - eval( mySeconds1.com”> <script language=“JavaScript”> timeObject = new Date().substring(0.myForm.value = mySeconds1.getTime(). window.diffSeconds).setTimeout(‘getSeconds()’. var currentTime = myTime. function initTimer() { var myTime = new Date(). countStart = timeObject.mySeconds1.org/1999/xhtml” > <head> <title>Countdown to load the page</title> <meta http-equiv=“Content-Type” content=“text/html. return(this.Source Code: <html xmlns=“http://www. } </script> </head> <body onLoad=“window. charset=UTF-8” /> <META HTTP-EQUIV=“REFRESH” CONTENT=“10. this.getTime(). var diffTime = currentTime - countStart.

center><br> Load web page after 10 seconds:<br><br> <form name=myForm> <input size=9 name=timeElapse></form> </center> </body> </html> .

2. Are you sure to delete? .

} </script> </head> <body> <center> <br>Are you sure to delete?<br><br> <input id=“deleteButton” type=“button” value=“Delete” onClick=“delOperation()” /> </center> </body> </html> .org/1999/xhtml” > <head> <title>Confirm Delete</title> <meta http-equiv=“Content-Type” content=“text/html. charset=UTF-8” /> <script language=“javascript”> function delOperation() { if(confirm(“Are you sure to delete?”)) alert(“Already deleted!”).w3. else alert(“Cancel deleted!”). Source Code: <html xmlns=“http://www.

3. Marquee Text .

org/1999/xhtml” > <head> <title>Marquee Text</title> <meta http-equiv=“Content-Type” content=“text/html.w3.Source Code: <html xmlns=“http://www.</p> <p><span>The Text Scrolls Up Slowly </span><br><br> </p> </div> <marquee direction=up scrollamount=1 scrolldelay=100 onmouseover=‘this.stop()’ onmouseout=‘this. charset=UTF-8” /> </head> <body> <div align=“center”> <p>&nbsp.start()’ height=60> <div align=“center”> <table> <tr> <td> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> <tr> <td> BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td> </tr> <tr> <td> CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td> </tr> <tr> .

<td> DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</td> </tr> <tr> <td> EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</td> </tr> <tr> <td> FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</td> </tr> <td> GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</td> </tr> <tr> <td> HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</td> </tr> <tr> <td> KKKKKKKKKKKKKKKKKKKKKKKKKKKKK</td> </table> </div> </marquee> </body> </html> .

4. Count how many letters .

length else return 0 } </script> <input onBlur=“alert(cal(this.</p> <p align=“center”>Count how many leters<br> </p> <div align=“center”> <script language=“JavaScript”> function cal(str) { re=/[a-z & A-Z]/g.value) )”> <input type=“button” value=“Count Letters”> </div> </body> </body> </html> .test(str)) return str.org/1999/xhtml” > <head> </head> <body> <p align=“center”>&nbsp. if(re. Source Code: <html xmlns=“http://www.w3.match(re).

Search Engine .5.

myForm. } </script> </p> <p><span style=“font-size: 12pt”>Keyword:</span> <input name=“SeachText” type=“text” size=“21” style=” margin-left: 1px”> </p> <p><br> <span style=“font-size: 12pt”>Select Enginee:</span> <select Name=“SearchSelect” size=“1” > <option selected>Yahoo</option> .forms[formVariable+ document.value= document.value. charset=UTF-8” /> </head> <body><br><br> <form Name=“myForm”> <div align=“center”><center><p> <script language=“JavaScript”> var formVariable.Source Code: <html xmlns=“http://www.myForm.SearchSelect. document.SearchSelect.selectedIndex].forms[formVariable + document.SeachText.elements[0]. function makeSearch() { document.org/1999/xhtml” > <head> <title>Search Engine</title> <meta http-equiv=“Content-Type” content=“text/html.myForm.w3.submit(). selectedIndex].

forms.google.com/search”> <input type=“hidden” name=“q” value> </form> <form action=“http://www.bing.com/search”> <input type=“hidden” name=“q” value> </form> </body> </html> .com/bin/search” method=“get”> <input type=“hidden” name=“p” value> </form> <form action=“http://www.length </script> </p> </center></div> </form> <form action=“http://search. <option value=“Google”>Google</option> <option value=“Bing”>Bing</option> </select> </p> <p><br> <input type=“button” value=” SEARCH ” onClick=“makeSearch()”> <script language=“JavaScript”> formVariable=document.yahoo.

6. Select Tag .

t2Texts. border-left:solid thin #E0E0E0. t5Texts. t3Texts.innerText = label3.selTab{border-left:solid thin white. } function public_Texts(Texts1. text-align:center} </style> <script language=“JavaScript”> function public_Labels(label1. charset=UTF-8” /> <style> . label3.w3. t3. t4. . Texts5){ t1Texts. Texts2.innerText = label1. font-weight:normal} .innerHTML = Texts1.innerHTML = Texts4. t4Texts. Texts3. label4.innerText = label2. font-size:10pt. border-top:solid thin white.innerText = label5.tab{border-top:solid thin #E0E0E0. font-family:Verdana. t2. border-right:solid thin gray.innerText = label4. text-align:center.org/1999/xhtml” > <head> <title>Select Tag</title> <meta http-equiv=“Content-Type” content=“text/html.innerHTML = Texts5. border-right:solid thin black. Texts4. label2.Source Code: <html xmlns=“http://www.conts{visibility:hidden} . font-weight:bold. t5. label5) { t1.innerHTML = Texts3.innerHTML = Texts2.

id + “Texts”. } if(window.style.style. tabContent = document. } function init(){ tabTexts.backgroundColor = “white”. var mark = true. height:300”> <tr><td ID=“t1” CLASS=“selTab” HEIGHT=“25”>SELECT 1</td> <td ID=“t2” CLASS=“tab”>SELECT 2</td> <td ID=“t3” CLASS=“tab”>SELECT 3</td> <td ID=“t4” CLASS=“tab”>SELECT 4</td> <td ID=“t5” CLASS=“tab”>SELECT 5</td> .innerHTML = t1Texts.className = “tab”. myTab = t1base.id + “base”.innerHTML. mark = false. myTab = document. myTab.innerHTML = tabContent.className = “selTab”. myTabID = nowTab.init(). myTab. nowTab. function altertab(){ if(mark == true){ nowTab = t1.all(myTabID). tabContentID = nowTab. } var nowTab.event.innerHTML.className == “tab”) { nowTab.srcElement. var myTab. nowTab = window. tabTexts.all(tabContentID).srcElement. }} </script> </head> <body BGCOLOR=“white” onclick=“altertab()” onLoad=“init()”> <br><br> <table align=“center” CELLPADDING=“0” CELLSPACING=“0” bgcolor=“yellow” STYLE=“width:400.event.backgroundColor = ””.

background-color:white”> </td> </tr><tr><td HEIGHT=”*” COLSPAN=“5” ID=“tabTexts” STYLE=“border-left:solid thin white. background-color:white”> </td> <td ID=“t5base” STYLE=“height:2.DDDDDDDDDD </p> </div><div CLASS=“conts” ID=“t5Texts”> <p align=“center”>5.CCCCCCCCCC </p> </div><div CLASS=“conts” ID=“t4Texts”> <p align=“center”>4. background-color:white”> </td> <td ID=“t3base” STYLE=“height:2.border-right:solid thin white”>&nbsp.AAAAAAAAAA</p> </div><div CLASS=“conts” ID=“t2Texts”> <p align=“center”>2.</td> </tr></table></div><div CLASS=“conts” ID=“t1Texts”> <p align=“center”>1.EEEEEEEEEE</p> </div> </body> </html> . background-colro:white”> </td> <td ID=“t2base” STYLE=“height:2.BBBBBBBBBB</p> </div><div CLASS=“conts” ID=“t3Texts”> <p align=“center”>3. background-color:white”> </td> <td ID=“t4base” STYLE=“height:2.</tr><tr> <td ID=“t1base” STYLE=“height:2.border-bottom:solid thin white.

7. Time Format Conversion .

w3. } return false. } function AmPm() { if (timeFormat()) { return (””).checked) { return true. Source Code: <html xmlns=“http://www. charset=UTF-8” /> <SCRIPT LANGUAGE=“JavaScript”> function timeFormat() { if (document. } return (nowHour-12). .org/1999/xhtml” > <head> <title>Time Format Conversion</title> <meta http-equiv=“Content-Type” content=“text/html.showFormat[0]. } return “0” + timeVal. } if (nowHour == 0) { return (12). } function displayZero(timeVal) { if (timeVal > 9) { return ”” + timeVal. } function showHours(nowHour) { if (timeFormat() || (nowHour > 0 && nowHour < 13)) { return (nowHour).myForm.

myForm.value = showHours(now.getMinutes()) + “:” + displayZero(now. } if (now.getHours()) + “:” + displayZero(now.1000) } </script> </head> <BODY onLoad=“displayTime()”> <center><br><br> <form name=myForm> <input type=text name=showTime size=11><p> <input type=radio name=showFormat>24 Hour Format<br> <input type=radio name=showFormat>12 Hour Format<br> </form> </center> </body> </html> .getHours() < 12) { return (” AM”).showTime.getSeconds()) + AmPm() setTimeout(“displayTime()”. } function displayTime() { now = new Date document. } return (” PM”).

8. Count you typed .

displayNum.org/1999/xhtml” > <head> <title>Show number of words</title> <meta http-equiv=“Content-Type” content=“text/html.value. } </script> </head> <body><br><br> <center> <textarea id=myContents rows=10 colors=38 onKeyUp=“countWords(this) ” onKeyDown=“countWords(this)”> </textarea> <br><h3>The number of words you have typed: </h3> <h1><div id=“displayNum”></div></h1> </center> </body> </html> . charset=UTF-8” /> <script LANGUAGE=“JavaScript”> function countWords(myContents) { wordsNum=myContents.innerText=wordsNum.w3.length. Source Code: <html xmlns=“http://www.

Forbid Copying Photo .9.

images) for(i=0.images.org/1999/xhtml” > <head> <title>Forbid copy photo</title> <meta http-equiv=“Content-Type” content=“text/html. } function findPhoto() { if(document.onmousedown = stopCopying.length.i++) document.w3. } </script> </head> <body oncontextmenu=“return false” onLoad=“findPhoto()”> <br><br> <div align=“center”><img src=” width=200 height=150 border=1 alt=‘My Photo’></div> </body> </html> . Source Code: <html xmlns=“http://www.close().images[i]. window. charset=UTF-8” /> <script language=“javascript”> function stopCopying(control) { alert(“Stop Copying! Allright Reserved!”).i<document.

10. Check Password Strength .

charset=UTF-8”/> </head> <body> <br><center> <form name=“myForm”> <label for=“pwd1”>Password</label> <input type=“Password” name=“pwd1” onBlur=“valuate(this)” /> <br><br> <label for=“pwd2”>Retype Password </label> <input type=“password” name=“pwd2” /> </form> </center> <center><div id=“showStrength”></div> </center> <script type=“text/javascript”> function valuate(pwd) { var t=pwd. var myColor=new Array(4). message[0]=“Password too short!”. var message=new Array(4). var id=getStrength(t).value. Source Code: <html> <head> <title>Password Strength</title> <meta http-equiv=“Content-Type” content=“text/html. message[3]=“Password strong!”. myColor[1]=“red”. message[2]=“Password medium!”. myColor[0]=“black”. message[1]=“Password poor!”. .

} var level = 0. myPWD.style. } if (p.style. var setWidth=300.length < 6 && level > 0){ level—. myPWD. } if (p. myPWD.style.style. myColor[3]=“green”.myColor[2]=“orange”.match(/[0-9]/ig)){ level++.height=setHeight + “px”.length < 4){ return 0.fontSize=“15px”.style. myPWD.match(/[a-z]/ig)){ level++.innerHTML=“Strength: ” + message[id]. var setHeight=15. } function getStrength(p){ if(p. myPWD.getElementById(“showStrength”). myPWD.width=setWidth + “px”.color=myColor[id].textIndent=“20px”.lineHeight=setHeight + “px”. } return level .match(/(. if (p. } if (p. myPWD.[^a-z0-9])/ig)){ level++. var myPWD=document.style.

} </script> </body> </html> .

11. Open Your Harddrive .

org/1999/xhtml” > <head> <title>Open Your Harddrive</title> <meta http-equiv=“Content-Type” content=“text/html.w3. charset=UTF-8” /> </head> <body> <br><center><h3>Open Your Harddrive</h3><br> <form action=“file:///c|/”> <input type=“submit” value=“Open C Disk”></form> <form action=“file:///d|/”> <input type=“submit” value=“Open D Disk”></form> <form action=“file:///e|/”> <input type=“submit” value=“Open E Disk”></form> </center> </body> </html> . Source Code: <html xmlns=“http://www.

12. Wave Text .

14/makeWaveText. for (i = 0. display = ””. if (n > makeWaveText.sin( (i+n)*3.length. 300). i++) { size = 68*Math.abs(Math. } textDiv.substring(i.innerHTML = display.i+1)+ “</font>”. i < makeWaveText.><br> <div ID=“textDiv” align=“center”> </div> </body> . } </script> <body onload=makeWave(0).length)) display += “<font style=‘font-size: “+ size + “pt’ color=‘green’>” +makeWaveText.length) {n=0} else {n++} setTimeout(“makeWave(” + n + “)”. Source Code: <script language=“JavaScript”> function makeWave(n) { makeWaveText = “JavaScript”.

13. Text Advertisement .

myText=myText.panel.myText.200).length) +myText. myText+=” >>>JavaScript is very good language!>>>”. function textAd(){ document. myText=myText.length-1.substring(myText. var aLetter=50.myText. myText. setTimeout(“textAd()”.forms[0].length).length-aLetter.length-1). Source Code: <meta http-equiv=“Content-Type” content=“text/html. } </script> </div> <form> <div align=“center”> <input type=“text” name=“panel” value=”” size=“38”> </div> </form> </body> .value= myText.”><br><br> <div align=“center”>Text Advertisement<br><br> <script language=“JavaScript”> var myText=” >>>Welcome to JavaScript world!>>>”.substring(myText. charset=UTF-8” /> <body onLoad=“textAd().substring(0.

14. Web Clock .

innerHTML=Eclock.getMinutes() var seconds=dataobj. Source Code: <div align=“center”><br> <br> <h2 >Web Clock</h2> <br> </div> <table bgcolor=“green” align=center> <tr><td><div id=“showClock”></div></td></tr> </table> <script language=“javascript”> function webClock(){ var dataobj=new Date() var hours=dataobj.getHours() var minutes=dataobj.1000) } webClock(). setTimeout(“webClock()”. </script> .getSeconds() if(minutes<=9) minutes=“0”+minutes if(seconds<=9) seconds=“0”+seconds Eclock=”<font size=‘7’ color=‘white’ face=‘Arial black’>” +hours+”:”+minutes+”:”+seconds+”</font>” showClock.

15. How much is the Price? .

charset=UTF-8” /> <SCRIPT LANGUAGE=“JavaScript”> var sum=0.total. Source Code: <html> <body> <meta http-equiv=“Content-Type” content=“text/html. } document. } else { sum += eval(chk.”> </td> </tr> . $500</td> <td width=30> <input type=“checkbox” name=“b1” value=500 onclick=“checkPrice(this).checked == false){ sum -= eval(chk.value). function checkPrice(chk){ if (chk.value = ‘$’+ eval(sum).value).priceForm. } </script> <br> <form method=“POST” name=“priceForm”> <table align=center width=300> <tr> <td height=50 colspan=2>The Price of Books : </td> </tr> <tr> <td >JAVA in 8 Hours:&nbsp.

”> </td> </tr> <tr> <td>HTML in 8 Hours: $450 </td> <td width=30> <input type=“checkbox” name=“b3” value=450 onclick=“checkPrice(this).”> </td> </tr> </table> </form> </body> </html> .<tr> <td>LMAP in 8 Hours: $400</td> <td width=30> <input type=“checkbox” name=“b2” value=400 onclick=“checkPrice(this).”> </td> </tr> <tr> <td colspan=2 align=right>Total: <input type=“text” name=“total” size=8 value=’$0’ onFocus=“this.blur().

16. Progress Bar .

document.percent. document. color:green.loading. var mark=”||” .value=loadingPercent+”%”.100).Source Code: <html> <meta http-equiv=“Content-Type” content=“text/html. background-color:#fef4d0.com”. color:green.progress. Loading……</font> <br><br> <input type=text name=progress size=55 style=“font-family:Arial Black. border-style:none.loading. count() .”> <br><br> <input type=text name=percent size=50 style=“font-family:Arial Black. border-width:medium. padding:0px. var sum=”||” .location.href = “http://www.”> <script language=“JavaScript”> var loadingPercent=0 . text- align:center.value=sum . if (loadingPercent<99) { setTimeout(“count()”.amazon. border-style:none. sum =sum + mark. } else { window. charset=UTF-8” /> <body> <br><br> <form name=loading> <p align=center> <font color=“green” size=“2” face=“Arial Black”>Please wait. function count(){ loadingPercent=loadingPercent+2. } } </script> </p> </form> . font- weight:bolder.

</body> </html> .

17. Filter Ungraceful Words .

} else{ message=message. which has been replaced by: ” + message.Source Code: <html> <head> <title>Filter Ungraceful Words</title> <meta http-equiv=“Content-Type” content=“text/html.bold().replace(subsitude.write(myText) </script> <br> </body> </html> .bold(). if (message. myText=“Yor message has no ungraceful word. idiot.””). message=message.fontcolor(“#FF0000”). Please enter your message: “. you said: ” + message. imbecile and moron” words.“master”). charset=UTF-8” /> <script language=“javascript”> message=prompt(“Filter “fool.match(subsitude)){ message=message. subsitude = /fool|idiot|imbecile|moron/g. } </script> </head> <body> <script language=“javascript”> document.fontcolor(“#0000FF”). myText=“Your message has a ungraceful word.

Forbid Copy Password .18.

charset=UTF-8” /> <script language=“javascript”> function noCopy(pwd){ alert(“Please don’t copy password!”) with(document.focus() } else if(pwd == “pwd2”){ pwd2.focus() }}} </script> </head> <body> <form name=“myForm”> <p><br> Password: <input type=“password” name=“pwd1” onSelect=“noCopy(this.name)”> </p> <p>Retype Password: <input type=“password” name=“pwd2” onSelect=“noCopy(this.Source Code: <html> <head> <title>Forbid Copy Password</title> <meta http-equiv=“Content-Type” content=“text/html.blur() pwd1.blur() pwd2.myForm){ if (pwd == “pwd1”) { pwd1.name)”> </p> <br> </form> </body> </html> .

World Clock .19.

.

getUTCHours() UTCm= nowDate.-5) worldClock(“Los Angeles”.value=city + “ : ” + (UTCh+diffTime) + “:” + (UTCm) + “:” + (UTCs) + “.Source Code: <html> <head> <title> The Time of Cities in the World </title> <meta http-equiv=“Content-Type” content=“text/html.9) worldClock(“Beijing”.getUTCMilliseconds() with(document){ forms[0][t]. charset=UTF-8” /> <script language=“javascript”> var t function wordTime(){ t=0 nowDate= new Date() worldClock(“New York”.getUTCSeconds() UTCms= nowDate.diffTime){ UTCh= nowDate.-8) worldClock(“London”.” + (UTCms) t++ } } </script> </head> .getUTCMinutes() UTCs= nowDate.1) worldClock(“Tokyo”.0) worldClock(“Paris”.1000) } function worldClock(city.8) setTimeout(“wordTime()”.

<body onLoad=“wordTime()”> <center> <br><br>World Clock<br><br> <form name=“myForm”> <table align=“center”> <tr><td> <input type=“text”><br><input type=“text”><br><input type=“text”><br> <input type=“text”><br><input type=“text”><br><input type=“text”><br> </tr> </table> </form> </center> </body> </html> .

20. Encrypt Code to Number .

output.substr(i. var numInput. for(i = 0. i < numOutput.output.value == ””) alert(e) else { numOutput = form.charCodeAt(i) - 23. var numOutput = ””. i += 2) { numInput = parseInt(numOutput.output. else { strInput = escape(form. i < strInput. form. .value = ””. numInput = unescape(‘%’ + numInput. if(form. i++) { numOutput += strInput.value. function StrToNum(form) { numOutput = ””. for(i = 0. var txt = “Please enter data!”.input.value == ””) alert(txt).Source Code: <html> <head> <title>Encrypt Code to Number</title> <meta http-equiv=“Content-Type” content=“text/html.input. if(form. } } function NumToStr(form) { strOutput = ””.value = numOutput.[2])) + 23.length. } form.length.value). var strOutput = ””. charset=UTF-8” /> </head> <SCRIPT LANGUAGE=“JavaScript”> var strInput.input.toString(16)).

form)”> <br> <input type=button value=” <— Decode ” onClick=“javascript:NumToStr(this. form.value = unescape(strOutput). } form.input. } } </script> <body> <br> <div align=“center”>Encrypt Code to Number </div> <center> <form> <table> <tr> <td align=center> <input name=input type=text size=20 value=“JavaScript”> </td> <td align=center> <br> <input type=button value=” Encode —> ” onClick=“javascript:StrToNum(this.strOutput += numInput.value = ””.output.form)”> <br> </td> <td align=center> <input name=output type=text size=20 value=“51749574607691828993”> </td> </tr> </table> </form> </center> .

</body> </html> .

Forbid copying texts .21.

org/1999/xhtml”> <head> <meta http-equiv=“Content-Type” content=“text/html. charset=UTF-8” /> <title>Cannot Copy</title> </head> <body oncontextmenu=“return false” ondragstart=“return false” onselectstart=“return false”> You are not able to copy these texts! </body> </html> .w3. Source Code: <html xmlns=“http://www.

Check Email Format .22.

focus().”|| document.w3.} } else{ alert(“Email cannot be empty!”).0 Transitional//EN” “http://www.email.value.’)==document. } else { alert(“Email Format Correct!”).’.email. Source Code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.value.myForm.email. } return false.email.value.email.email.lastIndexOf(‘@’)==document.charAt(0)==”.email.value.value.myForm.focus().org/TR/xhtml1/DTD/xhtml1-transitional. document.myForm. return false.myForm.value. return false.0)==-1|| document.length- 1|| document.email.0)==-1|| document.lastIndexOf(‘.value.length!=0){ if(document.indexOf(‘@’.myForm.myForm.email.value.myForm. } .myForm.myForm.email.length- 1 ) { alert(“E-mail format wrong!”).value.myForm.indexOf(‘. charset=UTF-8” /> <script type=“text/javascript”> function checkemail( ){ if(document.dtd”> <html> <head> <title>Check Email Format</title> <meta http-equiv=“Content-Type” content=“text/html. document.myForm.charAt(0)==”@”|| document.email.

<input type=“submit” value=“Submit” > </div> </form> </body> </html> .</script> </head> <body> <center> <h2>Check E-mail Format </h2> <hr> </center> <form name=“myForm” method=“POST” action onSubmit=“return checkemail()”> <div align=“center”>E-mail: <input type=“text” name=“email” id=“email” size=“20”> &nbsp.

23. Submit Only One Time

Prevent repeatedly submit.

Source Code:
<script type=“text/JavaScript”>
function MM_popupMsg(message) {
alert(message);
}
</script>
<body>
<p>&nbsp;</p>
<form>
<p align=center>&nbsp;</p>
<table width=“200” align=“center”>
<tr>
<td>Username:</td>
<td><input type=text name=username size=30></td>
</tr>
<tr>
<td>Password: </td>
<td><input type=password name=pwd size=30></td>
</tr>
<tr>
<td>Company: </td>
<td><input type=text name=danwei size=30></td>
</tr>
<tr>
<td>Contact: </td>
<td><input type=text name=lianxi size=30></td>
</tr>
<tr>
<td>Address: </td>
<td><input type=text name=dizhi size=30></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><div align=“right”>
<input type=submit name=b1 value=“Submit ”
onClick=“disabled=true;MM_popupMsg(‘Submit Subcessfully!’)”>
</div></td>
</tr>
</table>
<p align=center>&nbsp;</p>
</form>
</body>

How much is the Price? .24.

Source Code: <html xmlns=“http://www.w3. for(var i=0.</p> <p>The price of programing: </p> <p> <input type=“checkbox” value=“2000” name=“myChoice”> $2000 for JAVA programing<br/> <input type=“checkbox” value=“1500” name=“myChoice”> $1900 for LAMP programing <br/> . } </style> </head> <body><p>&nbsp.i<obj. sum+=parseFloat(obj[i].org/1999/xhtml” > <head> <title>How Much is the Price?</title> <meta http-equiv=“Content-Type” content=“text/html.i++) { if(!obj[i].getElementsByName(“myChoice”). var obj=document. } </script> <style type=“text/css”> body { margin-left: 100px.checked) continue. charset=UTF-8” /> <script language=“javascript”> function dataCal(){ var sum=0.value). } alert(“Total Price is:”+sum).length.

<input type=“checkbox” value=“1800” name=“myChoice”> $1800 for J2EE programing<br/> <input type=“checkbox” value=“1800” name=“myChoice”> $1700 for HTML programming </p> <p> <br/> <input type=“button” value=“Total Price” onClick=“dataCal()”> </p> </body> </html> .

Encode the Texts .25.

value = NewTexts.NewTexts. form. } </script> <title>Encode the Texts</title> <body> <p>&nbsp. function SetWords(word) { Words = word. form. } function MakeTexts2(form) { var NewTexts. NewTexts = (unescape(Words)).</p> <table align=center> <tr> <form method=post> <td align=center> <p><textarea cols=50 name=Word onchange=SetWords(this) rows=5></textarea> </p> .value. Source Code: <html> <script language=JavaScript> var Words.value = NewTexts.</p> <p>&nbsp.NewTexts. } function MakeTexts1(form) { var NewTexts. NewTexts = encodeURI(escape(Words)).

form) type=button value=“Encode”> </p> <p><textarea cols=50 name=NewTexts rows=5></textarea> </p> <p><input name=uncode onclick=MakeTexts2(this.form) type=button value=“Uncode”> </p> </form> </td> </tr> </table> </body> </html> .<p><input name=encode onClick=MakeTexts1(this.

Select All .26.

myForm.elements.length.checked=!e. e. Source Code: <html> <script language=javascript> function CheckToggle(){ for(var i=0.i++){ var e=document.myForm.checked.elements[i].i<document. }} </script> <body> <form method=“post” name=“myForm”> <table align=“center”> <tr> <td width=88 height=20 onClick=“javascript:CheckToggle()” STYLE=‘cursor:hand’> <input type=“button” name=“Submit” value=“Select All” /></td> <td width=“252”>PROGRAMMING:</td> </tr><tr> <td height=20><input type=“checkbox” name=“checkbox1” ></td> <td height=20>HTML</td> </tr><tr> <td height=20><input type=“checkbox” name=“checkbox2”></td> <td height=20>J2EE</td> </tr><tr> <td height=20><input type=“checkbox” name=“checkbox3”></td> <td height=20>ASP</td> </tr><tr> <td height=20><input type=“checkbox” name=“checkbox4” /></td> <td height=20>PHP</td> </tr><tr> <td height=20><input type=“checkbox” name=“checkbox5” /></td> <td height=20>JSP</td> </tr><tr> .

<td height=20><input type=“checkbox” name=“checkbox6” /></td> <td height=20>VB</td> </tr><tr> <td height=20><input type=“checkbox” name=“checkbox7”/></td> <td height=20>C#</td> </tr> </table> <div align=“center”></div> <div align=“center”></div> </form> </body> </html> .

SEO by Keywords .27.

my bank”>     </head> <body> <br><br> <center> <p>Search engine optimization (SEO) is the process</p> <p> of affecting the visibility of a website</p> <p> or a web page in a search.</p> <p>improving search engine rankings</p> <p> by keywords or other methods……</p> <p>Note: </p> <p>My business.org/1999/xhtml” > <meta http-equiv=“Content-Type” content=“text/html.Source Code: <html xmlns=“http://www. my factory.w3. my factory. </p> </center> </body> </html> . my bank </p> <p>are keywords of this web page. charset=UTF-8” /> <head> <title>SEO by Keywords</title> <meta name=“Keywords” content=“My business.

Replace a Word New word can replace old word. . Old Word means the existing word in text area.28.

text1.value = bb+str3+cc.”).indexOf(str2). Source Code: <html> <head> <title>Search & Replace</title> <script language=“JavaScript”> function lookFor(str2) { var str1 = document.} else {alert(“Please input some sentents first.substring(s+str2. var str3 = document.text1.text2. var s = str1.text1.form1. var cc = str1.text1.form2. str1.text1.value. var str2 = document.form2.”).} else {alert(“There is no this word.}} . var str2 = document.value.length). if(str2 !=”” && str3 !=”” ) { if(s != -1) { var bb = str1. document.form1.form2.} } function subs() { var str1 = document. if(s != -1 && str2 != ””) {alert(“The word will be replaced!”).indexOf(str2).substring(0.form1. var s = str1.value.length.value.value. s).

} } </script> </head> <body> <br> <center> <p>&nbsp.</p> <p>Input texts in following area. </p> <p> <textarea name=“text1” rows=10 cols=30></textarea> </p> </form> <form name=“form1”> <p> <input type=“text” name=“text1” size=20> <input type=“button” value=“Old Word” onClick=“lookFor()”> </p> <p> <br> <input type=“text” name=“text2” size=20> <input type=“button” value=“New Word” onClick=“subs()”> <br> </p> </form> </center> </body> </html> .else {alert(“Erorr!”).</p> <form name=“form2”> <p>&nbsp.

29. How long have you stayed? .

Source Code: <html> <head> <title>How long have you stayed?</title> <meta http-equiv=“Content-Type” content=“text/html.} if(min==60){min=0. charset=UTF-8”> </head> <body> <center><form name=forms> <p>&nbsp. idt=window.} </script> </form> </center> </body> </html> .hou+=1.idt=window.1000). var min=0.min+=1.setTimeout(“Elapse().value=hou+”: “+min+”: “+sec+” “. if(sec==60){sec=0. function Elapse(){ sec++.} document.setTimeout(“Elapse().”.”.flag=0. var hou=0.forms.stayTime.</p> <p><b>How long have you stayed? </b></p> <p> <input type=text name=stayTime size=3></p> </div> <script language=javascript> var sec=0.1000).

30. Print this page .

print()”></div> </form> </body> </html> .Source Code: <html xmlns=“http://www.org/1999/xhtml”> <head> <meta http-equiv=“Content-Type” content=“text/html. charset=UTF-8” /> <title>Print this page</title> </head> <body> <form name=“form1” method=“post” action=””> <div align=“center”> <input type=“submit” name=“Submit” value=“Print This Page” onClick=“javascript:window.w3.

31. Disable right-click menu .

charset=UTF-8” /> <body oncontextmenu=“return false. } } document.” > <div> <div align=“center”> <p>&nbsp.w3.onmousedown=click.org/1999/xhtml” > <head> <title>Disable righ-click menu</title> <script language=“javascript”> function click() { if (event. </script> </head> <meta http-equiv=“Content-Type” content=“text/html. Source Code: <html xmlns=“http://www.</p> <p>Stop using right-click menu! </p> </div> </div> </body> </html> .button==2) { alert(‘Stop using right-click menu!’).

32. Disable part of scripts .

w3.</p> <p>Part of scricts have been disabled. charset=UTF-8” /> </head> <body> <div align=“center”> <p>&nbsp.</p> <p>&nbsp.dtd”> <html xmlns=“http://www. Source Code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.org/TR/xhtml1/DTD/xhtml1-transitional. </script> </noscript> </p> </div> </body> </html> . <noscript> <script LANGUAGE=“JavaScript”> alert(“You are not able to see this message!”).0 Transitional//EN” “http://www.w3.org/1999/xhtml” > <head> <title>Disable part of scripts</title> <meta http-equiv=“Content-Type” content=“text/html.

33. Limit wrong password Username: Smith Password: 123 .

you must not use this system anymore!”) window.username. } else{ if((document.close().amazon.myForm.myPassword. Source Code: <script language=“JavaScript”> numberTimes=0 function checkpassword(){ if (numberTimes== 3){ alert(“You have entered wrong password for three times. } else{ numberTimes=numberTimes+1 alert(“Wrong password. please try again!”) return false } } } </script> </head> <meta http-equiv=“Content-Type” content=“text/html. charset=UTF-8” /> <body> <br> <form name=“myForm” method=“post”> <div align=“center”><p>&nbsp.location=“http://www.value == “Smith”)&& (document.</p><br> Username: .myForm.value == “123”)) { alert(“Password Correct!”) window.com”.

</p> <p>you will be not allowed to use this system anymore! </p> </div> </form> </body> .”> </p> <br> <p>If you enter wrong password for three times.<input name=“username” type=“text”><br> Password: <input name=“myPassword” type=“password”><br> <input type=“button” name=“submit” value=“Submit” onClick=“checkpassword().

34. Words processing .

Source Code:
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Word Processing</title>
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8” />
</head>
<body><br>
<h1 id=“myHeading” align=“center” style=“font-size: larger;”>Pleas input a sentence!
</h1>
<form name=“myForm” id=“myForm” action=”#” method=“get”>
<p align=“center”><br />
<input type=“text” name=“myText” id=“myText” size=“30” />
<input type=“button” value=“Input a sentence”
onclick=“document.getElementById(‘myHeading’).textContent=document.myForm.myText.valu
/></p>
<p align=“center”>
<input type=“button” value=“Align Left”
onclick=“document.getElementById(‘myHeading’).align=‘left’;” />
<input type=“button” value=“Align Center”
onclick=“document.getElementById(‘myHeading’).align=‘center’;” />
<input type=“button” value=“Align Right”
onclick=“document.getElementById(‘myHeading’).align=‘right’;” /><br /><br />
<input type=“button” name=“Submit” value=“72 px size”
onClick=“document.getElementById(‘myHeading’).style.fontSize=‘72’+‘px’;”>
<input type=“button” value=“36 px size”
onclick=“document.getElementById(‘myHeading’).style.fontSize=‘36’+‘px’;” />
<input type=“button” value=“18 px size”
onclick=“document.getElementById(‘myHeading’).style.fontSize=‘18’+‘px’;” /><br />
<br />
<input type=“button” value=“Red”
onclick=“document.getElementById(‘myHeading’).style.color=‘red’;” />
<input type=“button” value=“Blue”

onclick=“document.getElementById(‘myHeading’).style.color=‘blue’;” />
<input type=“button” value=“Green”
onclick=“document.getElementById(‘myHeading’).style.color=‘green’;” /> <br /></p>
</form>
</body>
</html>

35. Greeting by time

do you begin to work?”)} if (hr==10) {document.write(“Mid-Night 12 o’clock now , Good Nignt! Get up early tomorrow!”)} if (hr==1) {document. have you had you breakfast or gone to work? “)} if (hr==9) {document.write(“Good Mornning! At 7 o’clock you want to school or go to work?”)} if (hr==8) {document.write(“OH! 4 o’clock! You stay up whole night or just get up so early?”)} if (hr==5) {document.getHours() if (hr==0) {document.</p><p>&nbsp.write(“At 8 o’clock. Source Code: <html><head> <title>Greeting by time</title></head> <body><p>&nbsp.write(“9 o’clock now. are you very busy?”)} .write(“OH! 1 o’clock am now , It’s time to sleep.</p><p>&nbsp.write(“Good Mornning! You get up so early at 5 o’clock for doing something?”)} if (hr==6) {document.write(“My God! , You are stay up at 3 o’clock midnight!!!”)} if (hr==4) {document.write(“Good Mornning! At 6 o’clock you can prepare breakfast?”)} if (hr==7) {document.write(“10 o’clock now.write(“WOW! You are not sleeping at 2 o’clock midnight!”)} if (hr==3) {document.</p> <strong>Greeting By Time</strong><br><br> <script language=“JavaScript”> var now=new Date() var hr hr=now.”)} if (hr==2) {document.

write(“9 o’clock now!! It is time for TV!”)} if (hr==22) {document.write(“6 o’clock now!!!May be you have come home after work!”)} if (hr==19) {document.write(“8 o’clock now!! Time for internet?”)} if (hr==21) {document.write(“4 o’clock now!! It seems you look tired!”)} if (hr==17) {document.if (hr==11) {document.write(“2 o’clock now! are you working very busy?”)} if (hr==15) {document.write(“3 o’clock now! you have so many job to do?”)} if (hr==16) {document.write(“11 o’clock now! hungry ?! It will be lunch time.”)} if (hr==12) {document.write(“7 o’clock now! Dinner time!”)} if (hr==20) {document.write(“10 o’clock now!! Are you still online?”)} if (hr==23) {document.write(“1 o’clock now! do you want to have a break?”)} if (hr==14) {document.write(“5 o’clock now!! It’s time to get off work?”)} if (hr==18) {document.write(“12 o’clock now1 It is time to lunch!”)} if (hr==13) {document.write(“11 o’clock now!! Are you tired!”)} </script></body></html> .

Twinkling Text .36.

charset=UTF-8” /> <body> <br> <br> <script language=“JavaScript”> function colorArray() { this.length.length. “#0000FF”.text.arguments[i]. </script> </body> </html> . (count < color.length-1) ? count++ : count = 0.arguments. Source Code: <html> <head> <title>Twinkling Text</title> </head> <meta http-equiv=“Content-Type” content=“text/html.”#CC6666”.write(‘<div id=“text”><center>’+twinkleText+’</center></div>’).color = color[count].style.all. for (var i = 0. function updateColor(){ document.length = colorArray. i < this. } } var twinkleText = “<h1>Look! I am twinkling!</h1>”. } setInterval(“updateColor()”. i++) { this[i] = colorArray. var color = new colorArray(“#000000”.200).”#6699FF”). “#FFCC33”. document.”#33ffff”. var count = 0.

Login Page Username: Smith Password: 123 .37.

alert(“Login successfully. charset=UTF-8” /> <body> <br><br><center><br><br> <script language=JavaScript> function checking(){ if(document. } else{ window.value==“Smith”&&document.username.value==””||document.href=“http://www.value==“123”) { window.passwrd.username.alert(“Sorry. “+document.username.myForm. Welcome.com”.myForm.google.username. Password</title> </head> <meta http-equiv=“Content-Type” content=“text/html.document.} else{ if(document. Source Code: <html><head> <title>Login: Username.myForm. Wrong password!”) } } } </script> <form name=“myForm”> <table border=2 cellpadding=5 cellspacing=0 > <tr><td colspan=2 align=center> <font size=3 color=#993366><b>Enter Your Information</b></font> </td></tr> <tr><td> .value+ ” !”) location.myForm.”).alert(“Please enter username & password.myForm.myForm.passwrd.focus().value==””) {window.

return false.”> </td></tr> </table> </form> </center></body></html> . <font size=3 color=#993366><b>Username:</b></font></td> <td><input type=“text” name=“username” value=”” size=10> </td></tr> <tr><td> <font size=3 color=#993366><b>Password:</b></font></td> <td><input type=“password” name=“passwrd” value=”” size=10> </td></tr> <tr><td colspan=2 align=center> <input type=“button” name=“btn” value=” Login ” onClick=“checking().

Design window size .38.

width=’ + document. scrollbars=no.height. resizable=no. directories=no.value + ‘. location=no.&nbsp.&nbsp. ‘toolbar=no. Height : <input type=“text” name=“height” value=777 size=5 maxlength=3><br><br> <input type=“button” value=“Open” onClick=“designWindow()” > </div> </form> </body> </html> . Source Code: <html> <head> <title>Design window size</title> <meta http-equiv=“Content-Type” content=“text/html.&nbsp.width.open(“http://www. ”.&nbsp.windowSize.windowSize. menubar=no.height=’ + document.com”. charset=UTF-8”> </head> <body><br> <h3 align=“center”>Design the size of window by yourself.value +”).</h3> <br> <script language=JavaScript> function designWindow() { window. } </script> <form name=“windowSize”> <div align=“center”>Width : <input type=“text” name=“width” value=999 size=5 maxlength=3> &nbsp.google.

39. View Source Codes .

} </script> <form> <div align=“center”> <input type=“text” name=“URL” value=“http://” size=40 > </div> </form> <form> <div align=“center”> <input type=“button” value=“View Source Codes” onClick=view()> </div> </form> </body> </html> . </h4> <script language=JavaScript> function view(){ var sourceCodes=document.value window.location=“view-source:”+sourceCodes. Source Code: <html> <head> <title>View Source Code</title> </head> <body> <br><br> <h4 align=“center”>Pleas enter an URL of a website.URL.forms[0].

40. . Check digital input Prevent non-digital input.

num. myForm. myForm.num.value)){ alert(“Please enter a digital number!”). } } </script> <body> <br> <h4> <div align=“center”>Check Digital Input </div></h4> <form name=myForm> <div align=“center”> <input type=text name=num size=25> <input type=button onClick=“checkDigitals()” value= “Check Digitals”> </div> </form> </body> . Source Code: <script language=“javascript”> function checkDigitals() { if(isNaN(myForm.focus(). } else { alert(“Input correct!”).value=”” return (false).num.

41. Check empty input Prevent nothing input. .

email.email.focus().value == ””) { alert(“Please leave a message!”). return (false).message. return (false).focus().Source Code: <html> <head> <title>Check Empty Input</title> <script language=“JavaScript”> function checkEmpty(myForm) { if (myForm.value == ””) { alert(“Please enter email address!”). myForm. } if (myForm.message.phone. } if (myForm.focus(). return (false).value == ””) { alert(“Please enter phone number!”). } } </script> </head> <body> <br> <center> <p><strong>Check Empty Input</strong></p> . myForm.phone. myForm.

”> <table width=“36” border=“0” cellspacing=“1” cellpadding=“1” align=“center”> <tr> <td>Phone: <input type=text name=phone size=30> </td> </tr> <tr> <td>Email: <input type=“text” name=email size=“30”> </td> </tr> <tr> <td>Message:<br> <textarea name=message cols=37 rows=6></textarea> </td> </tr> <tr> <td> <div align=“right”> <input type=“submit” name=“pub” value=“Check Empty”> </div> </td> </tr> </table> </form> </body> </html> . <br> </center> <form name=“myForm” method=“post” onSubmit=“javascript:return checkEmpty(this).

42. Check picture uploading Prevent non-image upload .

switch(checkFile){ case “GIF”: alert(“You are uploading GIF picture. Source Code: <html> <script language=JavaScript> function uploadPicture(){ myForm.value. case “BMP”: alert(“You are uploading BMP picture. png pictures allowed to upload!”) break. break. break. }} </script> <title>Check Picture Upload</title> .src=myForm. jpg. break.value.lastIndexOf(“. case “PNG”: alert(“You are uploading PNG picture.myForm. ok!”).”)+1.substring(myForm. case “JPG”: alert(“You are uploading JPG picture. ok!”). default: alert(“Error! Only gif.pic.myPicture.pic. break. var checkFile.pic. bmp. checkFile=myForm.len checkFile=checkFile.value. ok!”).pic. ok!”).toUpperCase().

charset=UTF-8”> <body> <br> <p align=“center” >Only gif.<meta http-equiv=“Content-Type” content=“text/html. bmp. png allowed to upload! </p> <form name=“myForm” id=myForm> <p align=center> <input name=pic type=“file” size=“10”> </p> <p align=center> <input name=“button” type=button onClick=“uploadPicture()” value=‘Upload Picture ‘ /> </p> <p align=“center”><img name=“myPicture” id=“myPicture”/> </p> </form> </body> </html> . jpg.

43. Mouse coordinates .

value && e.x != document.event.myForm.screenY != document. }} </script> <meta http-equiv=“Content-Type” content=“text/html.y.value){ document.screenY.y. Source Code: <html> <script language=“JavaScript”> if (navigator. } } function cursorCoordinates(){ if (window.x. } function mousePosition(e) { if (e.x.myForm.value = e.myForm.myForm. charset=UTF-8” /> <body onMousemove=“cursorCoordinates()”> <div align=“center”><p>&nbsp.appName == ‘Netscape’){ document.y.myForm.x.event.screenX != document.y != document. document.myForm.value = e.y.captureEvents(Event.value = window.MOUSEMOVE). document.event.onmousemove = mousePosition.x.y. document.value) { document.screenX.event.value && window.x.myForm.myForm.</p> <p>Mouse Coordinates <br><br></p></div> <form name=“myForm”> <div align=“center”> X: <input type=“text” name=“x” size=“3”> y: <input type=“text” name=“y” size=“3”> </div> </form></body></html> .value = window.

44. Prevent malicious input .

status = “Only digital number allowed!”. keyChar.which. charset=utf-8”> <script type=“text/JavaScript”> function digital(field. Source Code: <html> <head> <title>Prevent malicious input</title> <meta http-equiv=“content-type” content=“text/html. return false. else return true. keyChar = String. event) { var key.fromCharCode(key).test(keyChar)) { window.status = ””.event. if (window. } } </script> </head> <body> <br> <center> <h2>Prevent malicious inputs </h2> .keyCode. return true. } else { window. if (/\d/.event) key = window. else if (event) key = event. if (key == null || key == 0 || key == 8 || key == 13 || key == 27) return true.

</center> <div align=“center”> <p> No any letter or symbol allowed to input! </p> </div> <form name=“myForm” id=“myForm” action=”#” method=“get”> <div align=“center”>Only digital allowed to input: <input type=“text” name=“num” id=“num” size=“10” maxlength=“10” onkeypress=“return digital(this.” title=“Prevent malicious input”> </div> </form> </body> </html> . event).

45. Typing Effect

Words are typed letter by letter automatically

Source Code:
<html>
<head>
<title>Typing effect</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<script>
var i = 0
var displayWords= “Hi!” +
” JavaScript in 8 Hours is a very good book! ” + “You can learn a lot of skills by this
book, if you are interested in programming, you also can learn jQuery in 8 Hours,
AngularJS in 8 Hours, which can help you become an excellent programmer. But you
need to spend many hours to study all those programs so that you can use them in job
easily……”
function marquee()
{
var wordSize= displayWords.length
document.show.typingEffect.value= document.show.typingEffect.value +
displayWords.charAt(i)
i++
var timeID= setTimeout(“marquee()”,100)
if (i >= wordSize)
{clearTimeout(timeID); i=0}
}
</script>
</head>
<body onLoad=“marquee()”>
<br>
<table WIDTH=“96%” BORDER=“0” CELLSPACING=“5”
CELLPADDING=“5” align=“center”>
<tr>
<td WIDTH=“100%”><font FACE=“ARIEL,HELVETICA” SIZE=“1”><form
name=“show”>
<p align=“center”>

<textarea rows=“9” cols=“50” wrap=“virtual” name=“typingEffect”>
</textarea>
</p>
</form>
</td>
</tr>
</table>
</body>
</html>

Set background color .46.

</p> <br> </div> <form> <div align=“center”> <input type=“text” name=“color”> <input type=“button” name=“btn” value=“Click” onClick=“chooseColor(this.color.value == ””) alert(“Please enter the background color you like”) else { document.form)”> </div> </form></body></html> . charset=UTF-8” /> </head> <body> <div align=“center”> <p>&nbsp.bgColor=(””+form.value+””). Source Code: <html> <head> <title>Choose backgroun color</title> <script language=“JavaScript”> function chooseColor(form) { if (form.color. } } </script> <meta http-equiv=“Content-Type” content=“text/html.</p> <p> Enter the background color you like.

47. Select Menu .

apple. if (myChoice!= 0) window.selectedIndex. Source Code: <html> <head> <meta http-equiv=“Content-Type” content=“text/html.value.”> <option value=”” selected=“seclected”>Select a website:</option> <option value=“http://www.amazon.com”>Google</option> <option value=“http://www.charset=utf-8”> <title>select menu</title> </head> <body> <br><center> <script type=“text/javascript”> function toWebsite(menu) { var myChoice = menu.yahoo.com”>Apple</option> </select> </form> </center> </body> </html> .com”>Amazon</option> <option value=“http://www.google.options[myChoice]. } </script> <form name=“myForm” id=“myForm” method=“post” > <h3>Select Menu</h3><br> <select name=“sites” id=“sites” onChange=“toWebsite(this).location = menu.com”>Yahoo</option> <option value=“http://www.

48. Text scrolls up Whole text slides up slowly .

var lineHigh = 42.overflow:hidden” onMouseOver=“slideAmount=0” onmouseout=“slideAmount=1”>   AAAAAAAAAAAAAAAAAAAAAAAAAA<br/>   BBBBBBBBBBBBBBBBBBBBBBBBBB<br/>   CCCCCCCCCCCCCCCCCCCCCCCCCC<br/>   DDDDDDDDDDDDDDDDDDDDDDDDDD<br/>   EEEEEEEEEEEEEEEEEEEEEEEEEEE<br/>   FFFFFFFFFFFFFFFFFFFFFFFFFFF<br/>   GGGGGGGGGGGGGGGGGGGGGGGGGGG<br/>   HHHHHHHHHHHHHHHHHHHHHHHHHHH<br/>   IIIIIIIIIIIIIIIIIIIIIIIIIII<br/> JJJJJJJJJJJJJJJJJJJJJJJJJJJ<br/>   KKKKKKKKKKKKKKKKKKKKKKKKKKK<br/>   LLLLLLLLLLLLLLLLLLLLLLLLLLL<br/>   MMMMMMMMMMMMMMMMMMMMMMMMMMM<br/> NNNNNNNNNNNNNNNNNNNNNNNNNNN<br/> </div> </center> <script language=“javascript”> var slideUp = document. charset=UTF-8” /> </head> <body> <br><br><br> <center> <div id=“textSlideUp” style=“width:100%. var lineNumber = 7. Source Code: <html> <head> <title>Text scroll up</title> <meta http-equiv=“Content-Type” content=“text/html.getElementById(“textSlideUp”). .height:100px.

5 ).setTimeout( “move()”. } else { window. </script></body></html> .scrollTop == lineNumber * lineHigh ) slideUp.scrollTop = 0. if ( slideUp.scrollTop += slideAmount.innerHTML.setTimeout( “move()”. if ( slideUp. window.var slideAmount = 1. 60 ).} } slideUp.innerHTML += slideUp.setTimeout( “move()”. 1000 ). function move() { slideUp.scrollTop % lineHigh == 0 ) { window.

Magnify texts Text will be magnified 200% when mouse hovers over it.49. .

w3.0 Transitional//EN” “http://www. charset=UTF-8” /> </head> <body> <p align=“center”>&nbsp.zoom=‘normal’”> JavaScript in 8 Hours<br> Jquery in 8 Hours<br> Java in 8 Hours<br> </p> </body> </html> .</p> <p align=“center”><strong>Please hover following texts</strong> </p> <p> <hr> </p> <p align=“center” onMouseOver=“this.org/1999/xhtml” > <head> <title>Magnify texts</title> <meta http-equiv=“Content-Type” content=“text/html.style.zoom=‘200%’” onMouseOut=“this.style. Source Code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.dtd”> <html xmlns=“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

Five star review .50.

j++) eval(“id”+j).i<=5. } function rating() { alert(“Your review is: “+starNumber+” stars.i++) { document.i<=5.i++) eval(“id”+i).innerText=“ ☆ “. function stars() { starNumber=event. Thank you!”).write(‘<span id=“id’+i+’” onclick=“stars()” style=“cursor:hand. charset=UTF-8” /> </head> <body><br><br><br> <div align=“center”>Please give a five star review: <br><br> </div> <table width=“200” border=“0” align=“center”> <tr> <td><center><script> var starNumber=0.”> ☆ </span>’).id. } document.srcElement.j<=starNumber. </script></center></td> </tr> </table> .write(‘<p><button onclick=“rating()”>Review</button></p>’).org/1999/xhtml” > <head> <title>Five star review</title> <meta http-equiv=“Content-Type” content=“text/html. } for (var i=1. for (var j=1.innerText=“ ★ “. for (var i=1.slice(-1).w3. Source Code: <html xmlns=“http://www.

</body> </html> .

.

Appendix JavaScript 100 Tests & Answers .

my_var 4. Both // and /* */ can be used in single line or multiple comments. /* */ are used in single line comments 3. a *= b means a = (a * b) 4.. var10 . varName 3. <?……?> 2. which following is correct? 1. Which following tags is for JavaScript? 1.</JavaScript> 3. About JavaScript comments. <script Language=”JavaScript”>……</JavaScript> 4.100 Tests 1. 10var 2. <script type = “text/JavaScript”>……</script> 2. Which following expression is not correct? 1. // is used in multiple line comments 2. <JavaScript……>…. a != b means a = (a ! b) 3. Which following variable name is invalid? 1. 4. // is used in single line comments and /* */ are used in multiple comments. 3. a %= b means a = (a % b) 4. a += b means a = (a + b) 2.

write( ) C.writeline( ) E. document.getElementById( ). + is used in addition 2. * is used in multiplication 4. var 3. % is used in division 6. 5. – is used in subtraction 3. console. Which following command is not for displaying text in JavaScript? A. float 4. document. nonVir 2.innerHTML 7. alert( ) B. Which following operator description is not correct? 1. Which following can be used as variable name? 1. try .

line2 3. // line 1 secondFunction( ). 10. C. //line 2 } function secondFunction( ){ // line3 document. line1 2. “n” is used in “newline” C. line3 4. 1. Which line is not correct in the following codes? function firstFunction( ){ var num = 100. B.write( num ). line4 . Which following data type description is not correct? A. “string” is a character of a string of characters. “t” is used in “tap”. B. D. “\b” is used in “backslash”. 9. Which following escape sequence description is not correct? A. // line4 } firstFunction(). “number” is an integer or a floating-point number. “integer” is an integer number. “boolean” returns true or false.8. “r” is used in “return” D.

if ( ) then { } else { } 3. Which following is a correct command? 1. if ( ) then { } if else { } . 11. if ( ) then { } then else { } 4. if ( ) { } else { } 2.

!= D. ! 14. line2. Which line in the following is not correct? var a = 10. // lin4 1. line1. $$ B. Which following is not a logical operator in JS? A. // line 1 var b = 3. 2. line4 . 12. line3 4. // line 2 var num = (a % b = 0) ? “EVEN” : “ODD”. && C. <= C. || D. 3. // line 3 alert ( num ). Which following is not a comparison operator in JS? A. => 13. == B.

write(“D”). true B. ” ” ). case 3: document. BCD 17. alert( teststring). line1.write(“B”). 3.write( “Hello” + name ). What is the output in the following code? var num = 2.write(“C”). A 2. case 2: document. } 1. false .write(“A”). // line4 1. BC 4. 2. A. switch (num){ case 1: document. 15. default: document. What is the output in the following code? var teststring = (“JavaScript ” == “Javascript”). Which line in the following is not correct? var name = null. line4 16. // line1 name = prompt (“Please Input Your Name”. // line2 if ( name == ” ” ) // line3 document. line3 4. B 3. line2.

1. x is 12 and y is 42 3. while ( x < 10) { y—. x is 13 and y is 43 19. y = 50. x is 11 and y is 41 4. do { y—. 1 D. x is 12 and y is 42 4. } while ( x < 10) alert ( “x is: ” + x + “ and y is: ” + y). x++. -1. x is 10 and y is 40 .C. x is 13 and y is 43 2. x++. What is output in the following code? var x = 0. What is the result in the following code? var x = 0. } alert ( “x is: ” + x + “ and y is: ” + y). 18. y = 50. 1. x is 10 and y is 40 2. x is 11 and y is 41 3.

1 2 3 4 7 4.20. “B”. 1 2 3 4 8 22. “C” >. 1 2 3 4 6 3. 4. num < 7. What is the output in the following code? for (var num = 1. 3. var a = new Array < “A”. 2. var a = new Array ( “A”. var a = new Array { “A”. num ++) { document. “B”. 1 2 3 4 4. 1 2 3 4 5 2. document. 1. } 1. num < 10. 1 2 3 4 5 21. “C” }. “B”. “B”. “C” ). What is the output in the following code? for (var num = 1. . var a = new Array [ “A”. if (num % 5 == 0) break.write ( num + ” ” ). “C” ]. 1 2 2. num++) { if (num == 5) continue. 1 2 3 3.write ( num + ” ” ). Which is correct in creating an array? 1.

// line3 alert (a[3]). Which line is not correct in the following code? var a = new Array( 1. 3 ). // line 2 alert (a[2]). line2 3. 2. line4 25. // line 1 alert (a[1]). Which line is not correct in the following code? var a = new Array( ). line1 2. 23. line2 3. var arraySize = a. line3 4. // line3 alert ( arraySize ). line3 4. //line4 1.length( ). . a[1] = “B”. line1 2. // line2 a[1] = “B”. // line1 a[0] = “A”. a[0] = “A”. What is the output in the following code? var a = new Array( ). line4 24. // line 4 1.

use___. C 3. 1. A - B - C 4. return elements from m to n-1. 4. “C” 26. To obtain Greenwich Mean Time. December 28.join( ” - ” )). getTime( ) . October 3. 3. return elements from m-1 to n-1. toGMTString( ) 2. 2. Which following statement is correct? Array. A B C 2. 1. var n). September 2. “B”. return elements from m-1 to n.slice(var m. 27. return elements from m to n. it means __? 1. alert (a. 1. B. getTimeZoneOffset( ) 4. “A”. November 4. getUTCHours( ) 3. If the getMonth( ) returns 11. A.a[2] = “C”.

-1 32. 2. 1 4. log( ) returns a natural logarithm of a number 3.settimeout( “myFunction( )”. 4. calls myFunction every 1000 seconds. sqrt( ) returns a square root of a number 4. ceil( ) returns an integer that is greater than or equals to its argument. calls myFunction every 10000 seconds. setHour( ) 31. calls myFunction every 10 seconds. setMonth( ) 3. false 3. . 30. Which following function is not correct? 1.29. true 2. Which following statement of Math method is not correct? 1. “3 > 5 && false” returns __? 1. calls myFunction every 100seconds. 10000 )”? 1. 3. setYear( ) 4. setDate( ) 2. What is meaning by “window. floor( ) returns a closest value equal to an integer. 2.

-8 -7 35. math.max(-5.ceil(-7. 7 -7 36. 8 -8 2. 33. -7 -7 3.floor (7. -4). 7 8 2.5)? 1. 8 7 34.round (-7.5 ) & math. -5 -4 2.5). 8 8 4. What is the result of math.5)? 1. -8 -8 4. math. 7 -8 4.5) & math. 7 7 3.round (7. What is the result of math.min(-5. What is the result of math. -4) is__? 1. -7 -8 2. 8 -7 3.floor ( -7.ceil (7. -5 -5 . The result of math.5)? 1.

v 2. error 38. S 4. What is the output in the following code? var str = “JavaScript is very good!”. -4 -5 4. a 3.charAt(3). if (str1 != str2) { alert(str1. -4 -4 37. null 4. What is the output in the following code? var str1 = ” “. 1 3. var str2 = null. error 39. alert( ch ). 3. var ch = str. 0 2.length). What is the output in the following code? . } 1. 1.

var str = num. 6 ). // line 3 alert( num).var str = “JavaScript is very good!”. error 4. alert (sub). aScrp 4. var sub = str. What is the output in the following code? var num = 100. 1. //line 4 } . Scr 3. 200 3.substr( 4. // line 1 if ( NaN )== num){ // line 2 num++. aSc 2. 300 2.toString( ) + 200. Script 40. 1. alert( str ). Which line is not correct in the following code? var num = 100. 100200 41.

1. 200 3.write( eval ( x*2 + y - z )). line 2 3.write ( myString. // line 4 1. line 1 2. // line1 . line 1 2. line 2 3. // line 3 document. // line 1 var str2 = “is very good.length( )). document. line 4 43. 100 2. // line 2 var myString = str1 + str2. Which line is not correct in the following code? var str1 = “JavaScript”. 1.”. 300 4. line 3 4. What is the output in the following code? var x = 100. line 3 4. line 4 42. Which line is not correct in the following code? var str1 = “Hello “. var y = 200. var z = 300. 400 44.

write( myString ).write( txt ). line 4 45. world 2. . document. line 1 2. document. // line 4 1.slice ( -1 ). line 3 4. null 3. “ ” 2. 1.write( txt ). What is the output in the following code? var str = “Hello world!”. var txt = str.var str2 = ” World!”. orld 3. means___? 1. world! 47. var txt = str. // line 3 document. ! 4. 6 4. 1. Returning 8 means August. line 2 3. What is the output in the following code? var str = “Hello world!”. 7 46. If getMonth( ) returns 8. // line 2 var myString = concat(str1 + str2).lastIndexOf( “o” ).

0.3). What is the output in the following codes? var arr = new Array(0. var con = arr.write( Math. -8 4. -2 2.3 3. document. 1. y )). 0 1 2 3 50. 2.pow ( x. 3.2. 4. Returning 8 means October. Which line is not correct in the following code? try { // line 1 x = y.1. 0_1_2_3 4.1. 48. document. 1.2. Returning 8 means November. Returning 8 means September. 4 3. What is the output in the following code? var x = -2. var y = 4.join( ). 16 49. // line 2 } .write ( con ). 0-1-2-3 2.

cookieAllowed .catch ( e) { // line 3 document. // line 4 } 1.write ( e). To know the browser whether support cookie or not. use___? 1. line 1 2. Navigator.cookieUsed 3. line 4 51. Navigator. Navigator. line 3 4.cookieUtilized 4. Navigator.cookieEnable 2. line 2 3.

<script> element appears inside <form> element. What is the output? var a=6. <script> element appears before <form> element. 3 3. 4 4. 4 4. 2. <form> element appears before <script> element. What is the output? 1. What is the output? var a=6. 5 . <script> element or <form> element? 1. <form> element appears inside <script> element. b=++a-3. In a HTML document. alert (b). b. 3. b. 2 2. What is the output? 1. which element should appear first. 2 2. b=a++-3. 52. alert (b). 3 3. 5 54. 53. 4.

Boolean constant 3. Which is not the Constant data type in the following? 1. String constant 4.55. Double constant . Floating-point constant 2.

use__ keyword to declare a function. 56. 1. && > ||> ! 58. Keep running program. var 4. && > ! > || 4. In JavaScript. Stop running program 3. 59. Keep running program 2. Exit from looping. The difference between “break” and “continue” is__ and __? 1. fun 2. Stop running program. variable 2. method 3. Enter next looping. Which operator has a higher precedence? (From higher to lower) 1. myVariable 4. ! > && > || 2. Enter next looping. 4. Exit from looping. || > && > ! 3. var 3. JavaScript declares a variable by___ keyword? 1. myVar 57. function .

regain 2. In JavaScript function. 3. Function definition appears before function call. Function call appears before function definition. using __ keyword can retrieve a result value to caller. Their sequence doesn’t matter. 2. Function call appears inside function definition. 1. result . 60. return 3. function definition or function call? 1. 61. 4. retrieve 4. In a HTML document. which JS command should appear first.

navigator. line 1 2. line 2 3. line 3 4.platform 3.plugin 4. ” Large”).size = size. // line 2 } var myCar = new car (“Yellow “. // line 1 car = new Object( ).color + myCar. navigator. size ){ this. Which line is not correct in the following code? var car. // line 2 car = “Yellow”. line 1 2.color = color. line 4 63. line 2 3. // line 4 1. alert (myCar.userAgent 2. // line 1 this. // line 3 1.appName . // line 3 alert (“The color of car is yellow”). 64. Which answer is correct in the following code? function car ( color. 62. Which following command can show the browser name? 1. line 3 4. Above all.size). navigator. navigator.

window.go( number ).availWidth 2. window.history.history.getHeight 3. Which line is not correct in the following code? . Which command is not the JavaScript command in the following? 1.history. Which following command cannot get the resolution of screen? 1. window. Which following command is JavaScript command? (Multiple choice) 1.moveBy( ) 3.back( ). window.scrollBy( ) 2. window. 4.screen.screen. 2. window.screen.scrollTo( ) 4.forward( ).screen. window. 3. 65. window. window. 66.reverse( ). window.moveTo( ) 68.width 4. window.height 67. window.history.

line 4 69. // line 3 .”) : // line 3 alert ( “Cancel button was clicked.”). “).html”. line 2 3. // line 2 width = 300. // line 4 1. Which line is not correct in the following code? var num = window. // line 3 else // line 4 alert ( “There are two or more cars. line 1 2. // line 1 if (num == “1”) // line 2 then alert ( “There is one car. Which line is not correct in the following code? var win = window. line 4 70. 3 or other number.prompt ( “How many car? Please enter 1. height = 200. line 3 4. // line 1 ( result = true) ? // line 2 alert ( “OK button was clicked. status = no ). // line 1 “MyWindow”.”). line 3 4.var result = window.” ).open ( “w. 2. line 1 2.confirm( “OK or Cancel?”). 1. line 2 3.

Which following statement is not correct? 1. 2. line 3 4.getElementByClass( ) address an element by its class name.win. document. document. // line 4 1. line 2 3.getElementByVariable addresses an element by its variable name. document.document. . line 1 2.write(“This is a small window. 3.getElementByTagName( ) address an element by its tag name. document. 4. line 4 71.getElementById( ) address an element by its ID.”).

74. 3.document.document.document. “window. “window. “window. Which following statement is not correct? 1. 2. backward( )” 3.createElement( )” can dynamically create a new HTML element object.createID( )” can create an ID object which specifies an ID of an element. onclick = “history. removeChild( ) can delete a HTML element object in the document. 1. 3. “window. Which following statement is correct? (Multiple choices) 1. 75. getAttribute( ) can get the value that assigned to an attribute. appendChild( ) can add a HTML element object into the document. setAttribute( ) can add an attribute to HTML element object. When clicking a button. onclick = “history.createTextNode( )” can create a text object which specifies a string.title” includes the browser title. “hasChildNodes” can test if an element has nested child elements. 3. “window.document. 4.document.document. previous( )” 4. 4.referrer” includes the URL of the web page with the link. Which following statement is not correct? 1.URL” includes the complete URL address. withdraw( )” 2. 2. go back to previous page. onclick = “history. 2. 4. 72. onclick = “history. back( )” . use following __ code.document. “window. 73. “window.domain” includes the domain of the URL.

onUnload = alert(“Is it OK?”) 2. onScroll event 4. onMouseDown event 3. run alert( ) command. onMove = alert(“Is it OK?”) 4. onFocus = alert(“Is it OK?”) 3. onSubmit event 78. Which following belong to button event? (Multiple Choice) 1. // line 3 alert ( “The web page loaded”). onHelp event 2. onReset event 3. onMouseUp event 2.onload( ) = welcome( ). use__? 1. onSgClick event 79. Which following is not a mouse event? 1. // line 1 function welcome( ){ // line 2 alert ( “Welcome to my web site!”). 76. onBlur = alert(“Is it OK?”) 77. When the cursor leaves away from the object. onDbClick event 4. // line 4 } . Which line is not correct in the following code? window.

1. line 2 3. line 1 2. line 3 4. line 4 .

line 1 2. To test whether a number is an odd or an even value. if (num + 2 == 0)… 2.write(e). // line1 var x = y. line 2 3. if (num - 2 == 0)… 3. line 3 4. if (num * 2 == 0)… 4. Which line is not correct in the following code? try{ var num. // line 4 } 1. line 4 81. it’s better use__? 1. // line 2 } catch(e){ // line 3 document.80. if (num % 2 == 0)… .

forms. alert ( message ).value. What is the output in the following code? <form id = “f” method = “post” action = ” ” > <input type = “button” id = “b” value = “Please Click” onclick=myFunction()> </form> <script> function myFunction(){ var message. message = document. } </script> 1.f. button 2. b 3. nothing . 82. Please Click 4.b.

t.f.t. var n = str.style.value = “JavaScript!”. line 3 4.write ( n ). nothing 85. window. document. // line 3 window.style.document.forms. 1. // line 4 </script> 1. 1 2. line 2 3.t. line 1 2.forms. usually use __ codes. -1 4.font = “18pt”.f. (Multiple choice) .document. welcome to my web site!. Which line is not correct in the following code? <form id = “f” method = “post” action = ” ” > <!— line 1—> <input type = “text” id = “t” name = “mytext”> </form> <!— line 2 —> <script> window.”.forms. What is the output in the following code? var str = “Hello world.f. 0 3.color = “red”. To check email format if it is incorrect. 83.indexOf(“JavaScript”). line 4 84.document.

location.value. atan( ) 2.”) == 0. email.value. email.ip returns an ip address. window. 1. getDay( ) 4. 2.value. Which following method belongs to Math object? 1. 4. 86.indexOf( “@”) == 0.port returns a port number.host returns both hostname and port number.”) == -1. email. . location.value. email.indexOf( “@”) == -1.self 2. indexOf( ) 3. window.indexOf(“. location. 2. 3. setSecond( ) 88.hostname returns a hostname. Which is not correct in the following property? 1.status 87. 3. location. 4. window.parent 3. window.indexOf(“.top 4. Which property returns text in browser status bar? 1.

return a substring from m to n-1 91. Which following statement is correct? str. 318. 4. 637. 7. 1. i ++ ) { sum = sum + i. push( ) adds an element at the end of an array.5 4.substring (var m. pop( ) removes an element at the end of an array. return a substring from m-1 to n-1. What is the output in the following code? var sum = 0. } alert (sum). i < 51. for ( var i = 1. Which following is correct method of Array object? (Multiple choice) 1. 2550 2. 2. 8.75 90.89. return a substring from m-1 to n. 3. var n) 5. shift( ) removes an element at the beginning of an array. unshift( ) adds an element at the beginning of an array. return a substring from m to n. 1275 3. 6. .

1. document. 93. 2. Node is a kind of Element. var today = now. 4. 94.write(today). 2. “screenX / screenY” is the length from the mouse coordinates to the screen coordinates when event occurs. Element and Node is completely different. returns Greenwich Mean Time. returns current time. 3. returns a number that is the difference in milliseconds between the current time and January 1. . 3. “clientX / clientY” is the length from the mouse coordinates to the web page coordinates when event occurs. 2. “offsetX / offsetY” is the length from the mouse coordinates to the triggered element coordinates when event occurs. Element is a kind of Node. returns a time zone. 1970. What is the output in the following code? var now = new Date( ). 3. 92. “imageX / imageY” is the length from the mouse coordinates to the image coordinates when event occurs.getTime( ). Which following statement is correct in DOM? 1. There are no Element and Node in DOM at all. 4. 4. Which following statement is not correct? 1.

TextNode 3. Hello Dom! ( at the center ) . 3. Hello Dom! ( on right side ) 2. 2. A single line break.createTextNode(“Hello Dom!”). 1.body. 95. Hello Dom! ( on left side) 3. 96. myText 2. A size-changeable heading 4. Hello Dom! 97.getElementsByTagName(“p”)[0]. What is the output in the following code? var myText = document.setAttribute(“align”.appendChild(myText).appendChild(myLine). document.body.createElement(“hr”). What is the output in the following code? <p>Hello Dom!</p><br> <script> var s = document. A hyperlink. What is the output in the following code? var myLine = document. appenChild 4. s. document. A horizontal ruled line. </script> 1. “center”). 1.

4. Hello Dom! center 99. </script> 1. Align 3.getAttribute( “align” ).write( attr ). What is the output in the following code? <p>Hello Dom!</p><br> <script> var s = document. </script> 1. false .setAttribute(“align”. alert ( child ). “center”). Hello Dom! 2. s. hasChildNodes 3. true 4. TagName 4. What is the alert output in the following code? <ul id=“color”><li>Green</li><li>Yellow</li></ul> <script> var child = document.getElementById(“color”).hasChildNodes( ). Display nothing.getElementsByTagName(“p”)[0]. color 2. document. 98. var attr = s.

when readyState is 4. it means that request process at the stage is ___? 1. forbidden 4. not found. when http status is 200. 2. unauthorized 3. Sending data 3. Uninitialized 2. 101. . In Ajax. In Ajax. it means that the result of request is ____? 1. Returned data available. the request succeeded. Received data 4.100.

3. 2. . onreadystatechange property is a status event. readyState property is a request status from 0 to 4. 4. Http status returns a number 200. responseText property returns a text from server. 403 or 404. Which following statement is correct about Ajax? (Multiple choice) 1. 102. 401.

D 58.B 91.A 53.B 74.D 19.B 15. B 33.D 3.C 14.C 11.C 94.A 13. D 30.B 6.D 2.A 43.A 59.A.D 96.B 42.D 9.B 60.100 Answers 1.C.A 90.D 22.A.A 77. A 34.B 81.D 12.B.A 76.B 93.C 95.C 78. D 27.C.B. A 29.D 41.B 56.D 67.D 51.B 47.A.B 66.B 79.D 70.B 72.D 16.D 18.C 10.D 4.D 73.B 62. B 28.D 97.C 71. A 32.B 86.B 63.B 85.B 21.D 7. C 31.D 24.D 35.C 83.A 36.C 8.D 54.C 55.D 65.C .D 57.A 68.A 82.C 87. D 26.C 39.C 98.C 40.D 64.D 45.D 89.C 23.C 48.A 5.ABCD 99.D 17.D 88.C 61.D 84.D 52.D 49.C 69.B.D 37.B 46.D 44.D 80.A 38.A 20.D 92.

A.D 100.D 101.A 102.C.25.B.D .C 50.B 75.

Ray Yao’s books in Amazon: Linux Command Line JAVA in 8 Hours PHP in 8 Hours JavaScript in 8 Hours C++ in 8 Hours AngularJS in 8 Hours JQuery in 8 Hours Python in 8 Hours HTML CSS in 8 Hours C# in 8 Hours JavaScript 50 Useful Programs PHP 100 Tests. Answers & Explanations JavaScript 100 Tests. Answers & Explanations . Answers & Explanations JAVA 100 Tests.How time flies! It is time to say good-bye.

.

could you please return the eBook for a refund within seven days of the date of purchase? If you found any errors in this book. See you! . could you please send an email to me? yaowining@yahoo. Source Code for Download Please download the source code of this book: 50 Programs of JavaScript Source Code for Download Dear My Friend. Thank you very much! Sincerely Ray Yao My friend. If you are not satisfied with this eBook.com I will be very grateful for your email.