Ray Yao - 50 JavaScript Programs

50 Programs JavaScript By Ray Yao For JavaScript Programmers 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 Highly Recommend Computer Books on Amazon: Linux Command Line JAVA Programming PHP Programming JavaScript Programming C++ Programming AngularJS Programming JQuery Programming Python Programming HTML CSS Programming C# Programming Visual Basic Programming JavaScript 50 Useful Programs Preface 50 Programs of JavaScript is a useful book for JavaScript programmers. Using these programs, youll 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.

Source Code:

content="text/html; charset=UTF-8" /> URL=http://www.amazon.com">
timeObject = new Date(); countStart = timeObject.getTime(); function initTimer() { var myTime = new Date(); var currentTime = myTime.getTime(); var diffTime = currentTime - countStart; this.diffSeconds = diffTime/1000; return(this.diffSeconds); } function getSeconds() { var mySeconds0 = initTimer(); var mySeconds1 = ""+mySeconds0; mySeconds1= 10 - eval( mySeconds1.substring(0,mySeconds1.indexOf("."))) + " seconds"; document.myForm.timeElapse.value = mySeconds1; window.setTimeout('getSeconds()',1000); } center>
Load web page after 10 seconds:
2.

Are you sure to delete?

Source Code:

content="text/html; charset=UTF-8" /> function delOperation() { if(confirm("Are you sure to delete?")) alert("Already deleted!"); else alert("Cancel deleted!"); }
Are you sure to delete?
value="Delete" onClick="delOperation()" />

3. Marquee Text

Source Code:

content="text/html; charset=UTF-8" /> The Text Scrolls Up Slowly scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' height=60>

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

KKKKKKKKKKKKKKKKKKKKKKKKKKKKK

4. Count how many letters

Source Code:

Count how many leters
function cal(str) { re=/[a-z & A-Z]/g; if(re.test(str)) return str.match(re).length else return 0 }

5. Search Engine

Source Code:

content="text/html; charset=UTF-8" />
var formVariable; function makeSearch() { document.forms[formVariable + document.myForm.SearchSelect. selectedIndex].elements[0].value= document.myForm.SeachText.value; document.forms[formVariable+ document.myForm.SearchSelect.selectedIndex].submit(); } Keyword: style=" margin-left: 1px">
Select Enginee: YahooGoogleBing
onClick="makeSearch()"> formVariable=document.forms.length method="get"> 6. Select Tag

Source Code:

content="text/html; charset=UTF-8" /> .conts{visibility:hidden} .tab{border-top:solid thin #E0E0E0; border-right:solid thin gray; border-left:solid thin #E0E0E0; font-family:Verdana; font-size:10pt; text-align:center; font-weight:normal} .selTab{border-left:solid thin white; border-top:solid thin white; border-right:solid thin black; font-weight:bold; text-align:center} function public_Labels(label1, label2, label3, label4, label5) { t1.innerText = label1; t2.innerText = label2; t3.innerText = label3; t4.innerText = label4; t5.innerText = label5; } function public_Texts(Texts1, Texts2, Texts3, Texts4, Texts5){ t1Texts.innerHTML = Texts1; t2Texts.innerHTML = Texts2; t3Texts.innerHTML = Texts3; t4Texts.innerHTML = Texts4; t5Texts.innerHTML = Texts5; init(); } function init(){ tabTexts.innerHTML = t1Texts.innerHTML; } var nowTab; var myTab; var mark = true; function altertab(){ if(mark == true){ nowTab = t1; myTab = t1base; mark = false; } if(window.event.srcElement.className == "tab") { nowTab.className = "tab"; myTab.style.backgroundColor = "white"; nowTab = window.event.srcElement; myTabID = nowTab.id + "base"; tabContentID = nowTab.id + "Texts"; myTab = document.all(myTabID); tabContent = document.all(tabContentID); nowTab.className = "selTab"; myTab.style.backgroundColor = ""; tabTexts.innerHTML = tabContent.innerHTML; }}
bgcolor="yellow" STYLE="width:400; height:300">

SELECT 1	SELECT 2	SELECT 3	SELECT 4	SELECT 5
STYLE="border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin white">

1.AAAAAAAAAA 2.BBBBBBBBBB 3.CCCCCCCCCC 4.DDDDDDDDDD 5.EEEEEEEEEE 7.

Time Format Conversion

Source Code:

charset=UTF-8" />
function timeFormat() { if (document.myForm.showFormat[0].checked) { return true; } return false; } function showHours(nowHour) { if (timeFormat() || (nowHour > 0 && nowHour < 13)) { return (nowHour); } if (nowHour == 0) { return (12); } return (nowHour-12); } function displayZero(timeVal) { if (timeVal > 9) { return "" + timeVal; } return "0" + timeVal; } function AmPm() { if (timeFormat()) { return (""); } if (now.getHours() < 12) { return (" AM"); } return (" PM"); } function displayTime() { now = new Date document.myForm.showTime.value = showHours(now.getHours()) + ":" + displayZero(now.getMinutes()) + ":" + displayZero(now.getSeconds()) + AmPm() setTimeout("displayTime()",1000) }

24 Hour Format
12 Hour Format