J a v a S cript
description
Transcript of J a v a S cript
![Page 1: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/1.jpg)
JavaScript
popo
![Page 2: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/2.jpg)
JavaScript• JavaScript is a programming language
used to make web pages interactive.• JavaScript is scripting language used for
client side scripting.• JavaScript developed by Netscape in 1995• Case sensitive
popo
![Page 3: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/3.jpg)
JavaScript• Benefits of JavaScript• JavaScript gives HTML designers a
programming tool• JavaScript can react to events Alert
Messages• JavaScript can be used to validate data • JavaScript can be used to input Validation• Disadvantages of JavaScript• Depends on the browser
popo
![Page 4: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/4.jpg)
JavaScript• Java and JavaScript• Java and JavaScript are two completely
different• Java (developed by Sun Microsystems) is a
powerful and much more complex programming.
• JavaScript is scripting language used for client side scripting.
• JavaScript developed by Netscape in 1995.
popo
![Page 5: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/5.jpg)
JavaScript• Embedding JavaScript in HTML• <script> tag is used to insert a JavaScript into an
HTML page• <html>• <body>• <script language="javascript">• document.write ("Hello");• </script>• </body>• </html>
popo
![Page 6: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/6.jpg)
JavaScript• External file• JavaScript can be put in a separate .js
file<script
src="myJavaScriptFile.js"></script>
An external .js file lets you use the same JavaScript on multiple HTML pages
popo
![Page 7: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/7.jpg)
JavaScript• <html>• <body>• <script language="javascript">• document.write ("<p><b><i>Welcome to
popo! Hello");• </script>• </body>• </html>• document.write()- method used to print text
popo
![Page 8: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/8.jpg)
JavaScript• document.writeln() and \n• - used to print in new line(only valid when <PRE> tag)• (pre format) • <html>• <body>• <pre>• <script language="javascript">• document.write ("<p><b><i>Welcome to popo! \nHello");• document.writeln ("and peepe");• </script>• </body>• </html>
popo
![Page 9: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/9.jpg)
JavaScript• lastModified• include the last update date on your page
by using the following code: • <script language="JavaScript">• document.write("This page Last update:" +
document.lastModified);• </script>
popo
![Page 10: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/10.jpg)
JavaScript• bgColor and fgColor• <script>• document.bgColor="black“;• document.fgColor="#336699“;• </script>
popo
![Page 11: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/11.jpg)
JavaScript• Data Types• Basic types of data in JavaScript are• strings, numbers, boolean and null.• String- group of characters enclosed in
double quote• Number- integers and floating point values• Boolean- true or false • Null- represents nothing and has a special
value, indicated by null
popo
![Page 12: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/12.jpg)
JavaScript• Variables• Variables are storage locations used to store date• Variable can be declared as• var variable name= value;• Eg• Var example=“this is a string”;• <html>• <body>• <pre>• <script language="javascript">• var name="popo"; • document.writeln ("My name " +name);• </script>• </body>• </html>
![Page 13: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/13.jpg)
JavaScript• Operators• JavaScript uses “operators” allows to make
mathematical calculations• Assignment operators =, +=, -=, *=,/=• Arithmetic operators +, -, *, /, %• Logical operators &&, || , !=• Comp`arison operators <, <=, >, >=, ==, !=• Conditional operator (exp1)?(exp2) : (exp3);
popo
![Page 14: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/14.jpg)
JavaScript• <html>• <body>• <pre>• <script language="javascript">• var a=10;• var b=20;• var c=a+b;• document.writeln ("sum of "+a+" + "+b+" = "+ c);• </script>• </body>• </html>
popo
![Page 15: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/15.jpg)
JavaScript• <html>• <body>• <pre>• <script language="javascript">• var a=10;• var b=20;• var c=a+b;• if(c%2==0){document.write("even");}• else{document.write("odd");}• </script>• </body>• </html>
popo
![Page 16: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/16.jpg)
JavaScript• loop statements:
while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement;
• <html>• <body>• <pre>• <script language="javascript">• var i;• for(i=1;i<=40;i++)• document.writeln(i);• </script>• </body>• </html>
popo
![Page 17: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/17.jpg)
JavaScript• The switch statement:
switch (expression)• {
case label : statement; break; case label : statement; break; ... default : statement; }
popo
![Page 18: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/18.jpg)
JavaScript• Alert() method• Used to alert the user on some action, with some information• Syn• alert(“message”);• <html>• <body>• <pre>• <script language="javascript">• alert("I am popo");• </script>• </body>• </html>
popo
![Page 19: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/19.jpg)
JavaScript• Prompt() Method• Prompt method displays a small dialog box with a provision for text entry
along with 2 buttons• Ok and Cancel• The text entered in the box can be stored in a variable• <html>• <body>• <pre>• <script language="javascript">• var age= prompt("enter age");• if(age>=20)alert("I am happy");• else alert("I am popo");• </script>• </body>• </html>• Can assign value var k=prompt("dfgsdf",“value");
popo
![Page 20: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/20.jpg)
JavaScript• Confirm() method• Enables the user to confirm • <html>• <body>• <pre>• <script language="javascript">• var age=prompt("enter age");• if( confirm("is it greater than 20") )alert("I am happy");• else alert("I am popo");• </script>• </body>• </html>
popo
![Page 21: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/21.jpg)
JavaScript• parseInt()- convert string to integer• parseFloat()-convert string to float• var a= parseInt(b)+parseInt( c);• <html>• <body>• <pre>• <script language="javascript">• var a="10";• var b="20";• var c=a+b;• alert(c);• var d=parseInt(a)+parseInt(b);• alert(d);• </script>• </body>• </html>
popo
![Page 22: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/22.jpg)
JavaScript• eval() method• evaluate a numeric expression given as a
string into numerical value• Eg• Eval(“10*10”); 100
popo
![Page 23: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/23.jpg)
JavaScript• Date function• Date manipulations can be performed by the
method of the Date object• Create an instance of Date object• Using different methods of Date object user
can carry out date manipulations• Some methods are
![Page 24: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/24.jpg)
JavaScript• Date methods
getDate Return day of the month as integer(1-31)
getDay Return day of the week as integer(0-6)
getMonth Return month as integer (0-11)
getSeconds Return seconds as integers (0-59)
getYear Return year as two digit integer
setDate set the day of the month as integer(1-31)
popo
![Page 25: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/25.jpg)
JavaScript• <html>• <body>• <pre>• <script language="javascript">• var d=new Date();• document.write(d.getDate()+"/"+d.getMonth()+1 +"/"+d.getYear());
• </script>• </body>• </html>• Output -10/01/2013
popo
![Page 26: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/26.jpg)
JavaScript• Functions• Function can be defined• function function name(arguments)• {
– Function body;• }• Eg• function fact(num)• {• var fact=1;• for(i=1;i<=num;i++)• fact=fact*i;• return fact;• }
popo
![Page 27: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/27.jpg)
JavaScript• <HEAD>• <SCRIPT LANGUAGE="JavaScript">• function square(number)• {alert( number * number);}• </SCRIPT>• </HEAD>• <BODY>• <SCRIPT>• document.write("The function returned ", square(5) );• </SCRIPT>• </BODY>
popo
![Page 28: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/28.jpg)
JavaScript• <HEAD>• <SCRIPT LANGUAGE="JavaScript">• function square(number)• {return number * number;}• </SCRIPT>• </HEAD>• <BODY>• <SCRIPT>• document.write("The function returned ", square(5));• </SCRIPT>• </BODY>• The function returned 25.
popo
![Page 29: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/29.jpg)
JavaScript• Event handler• Event handlers can be considered as
triggers that execute JavaScript when something happens, such as click or move your mouse over a link, submit a form etc.
• Events are signals generated when specific action occur.Script can be written to react to these events.
popo
![Page 30: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/30.jpg)
JavaScriptonclick Occurs when user clicks on link or form elementondblclick Occurs when a mouse double-clickonmousedown Occurs when mouse button is pressedonmousemove Occurs when mouse pointer movesonmouseout Occurs when mouse pointer moves out of an element
onmouseover Occurs when mouse pointer moves over an element
onmouseup Occurs when mouse button is releasedonkeydown Occurs when a key is pressedonkeypress Occurs key is pressed and releasedonchange Occurs when user changes the value in form fieldonreset Occurs when a form is resetonsubmit Occurs when a form is submitted onfocus Occurs when user clicks inside the fieldonblur Occurs when user clicks outside a fieldonload Occurs when a page is loadedunload Occurs when user leaves a page
popo
![Page 31: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/31.jpg)
JavaScript• onClick• onClick handlers execute only when users click on buttons, links, etc. • <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="button" value="Click here" onClick="ss()">• </form>• The function ss() is invoked when the user clicks the button.• Note: Event handlers are not added inside the <script> tags
popo
![Page 32: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/32.jpg)
JavaScript• onDblclick• Occurs when a mouse double-click• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="text" value="10" onDblclick=" ss();">• </form>
popo
![Page 33: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/33.jpg)
JavaScript• onMousedown• Occurs when mouse button is pressed• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="text" value="10" onMousedown=" ss();">• </form>
popo
![Page 34: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/34.jpg)
JavaScript• onMousemove• Occurs when mouse pointer moves• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="text" value="10" onMousemove=" ss();">• </form>
popo
![Page 35: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/35.jpg)
JavaScript• onMouseout• Occurs when mouse pointer moves out of an element• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <table border=2 width=100 heigth=100 >• <tr><td bgcolor=brown onMouseout=" ss();">• <font color=red >popo• </form>
popo
![Page 36: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/36.jpg)
JavaScript• onkeypress• Occurs key is pressed and released• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="text" value="10" onkeypress=" ss();">• </form>
popo
![Page 37: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/37.jpg)
JavaScript• onsubmit• Occurs when a form is submitted • <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form onsubmit=" ss();">• <input type="submit" value="dfsdfg" onSubmit=" ss();">• </form>
popo
![Page 38: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/38.jpg)
JavaScript• onload• Occurs when a page is loaded• <script>• function ss()• {• alert("popo");• }• </script>• <body onLoad="ss()">
popo
![Page 39: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/39.jpg)
JavaScript• onmouseover• Occurs when mouse pointer moves over an element• <script>• function ss()• {• document.write("popo");• }• </script>• <a href="#" onMouseover="ss();">Over Here!</a>
popo
![Page 40: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/40.jpg)
JavaScript• unload• Occurs when user leaves a page• <body onUnload="alert('Thank you for
visiting us. See you soon')">
popo
![Page 41: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/41.jpg)
JavaScript• Most of the events handlers are associated with
the following objectObject Event Handlers
Selectionlist onBlur, onChange, onFocusText element onBlur, onChange, onFocus, onSelectTextarea element onBlur, onChange, onFocus, onSelectButton element onClickCheckbox onClickRadio button onClickHyper link onClick, onMouseoverSubmit button onClickReset button onClickDocument onLoad, onUnloadWindow onLoad, onUnloadForm onSubmit
popo
![Page 42: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/42.jpg)
JavaScript• Addition of 2 nos (each Nos in 2 text, result in result text, with a button)• <script>• function calcu(f)• {• f.ans.value=parseInt(f.first.value)+parseInt(f.sec.value);• }• </script>• <form name=f>• Enter first no :<input type=text name=first>• <br>• Enter sec no:<input type=text name=sec>• <input type=button value=calculate onClick="calcu(f);">• <br><br><br>• <input type=text name=ans>• </form>
popo
![Page 43: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/43.jpg)
JavaScript• All arithmetic operation with 4 buttons & 3 text• <script>• function add(f){• f.ans.value=parseInt(f.first.value)
+parseInt(f.sec.value);• }• function sub(f){• f.ans.value=parseInt(f.first.value)-
parseInt(f.sec.value);• }• function mult(f){•
f.ans.value=parseInt(f.first.value)*parseInt(f.sec.value);
• }• function div(f){• f.ans.value=parseInt(f.first.value)/
parseInt(f.sec.value);• }
• </script>• <form name=f>• Enter first no :<input type=text name=first>• <br>• Enter sec no:<input type=text
name=sec><br>• <input type=button value=Add
onClick="add(f);">• <input type=button value=Sub
onClick="sub(f);">• <input type=button value=Mult
onClick="mult(f);">• <input type=button value=Div
onClick="div(f);">• <br><br><br>• Answer :<input type=text name=ans>• </form>
![Page 44: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/44.jpg)
JavaScript• Print First n nos• <script>• function pr(f)• { var n=parseInt(f.no.value);• for(i=1;i<=n;i++)• document.write(i+" ");• }• </script>• <form>• Enter limt no :<input type=text name=no>• <input type=button value=print onClick="pr(this.form);">
• </form>
popo
![Page 45: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/45.jpg)
JavaScript
![Page 46: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/46.jpg)
JavaScript• String length• Var str="Hello world!"
document.write(str.length);• ------------------------------------------------------------------------• <script>• function s(f)• {• st=f.st.value• alert(st.length); • }• </script>• <form name="feedback">• Email:<input type="text" size="20" name="st" onblur="s(this.form)">• </form>• </body></html>
popo
![Page 47: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/47.jpg)
JavaScript• charAt() function to get character from a location
inside a string• var my_str="Welcome “
document.write(my_str.charAt(3) ); • The output of above code is c .
concat() join 2 strings• Var var2=" popo"
var var3= " pp"var var4=var1.concat(var2,var3);document.write(var4);
popo
![Page 48: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/48.jpg)
JavaScript• indexOf() to get location of a string• var my_str="popo and pp"• document.write( my_str.indexOf("and") ) ;• Output 5 .• lastIndexOf() This function returns the position of
string by checking from end or right side of the string
• var my_str="popo and pp"• document.write( my_str.lastIndexOf("a") ) ;• Output 5 .
popo
![Page 49: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/49.jpg)
JavaScript• Search & replace of part of string by
replace() method• var msg="Welcome to popo";• msg=msg.replace("popo","Ajith");• document.write(msg);• Output : Welcome to Ajith
popo
![Page 50: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/50.jpg)
JavaScript• Substring()• In substr() function we used start point and
length of the substring required• my_string= new String("Welcome to popo");• document.write(my_string.substring(2,5)); • Output : lco
popo
![Page 51: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/51.jpg)
JavaScript
![Page 52: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/52.jpg)
JavaScript• String reversal using charat and length property• <script type="text/javascript">• var my_str="nattop"• var i=my_str.length;• i=i-1;• for (var x = i; x >=0; x--)• {• document.write(my_str.charAt(x));• }• </script>
popo
![Page 53: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/53.jpg)
JavaScript• String Search• WE can search for presence of a string inside a main string in
client side JavaScript by using string.search function. • If the search string is found inside the main string then it will
return the position of the location of the string. • If the string is not found inside the main string then it returns -
1.• <script type="text/javascript">• var my_str="Welcome to popo"• var str="popo";• document.write (my_str.search(str));• </script>• Output 11
popo
![Page 54: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/54.jpg)
JavaScript• Lower case text to Uppercase • var a1 = str.toUpperCase(); • Uppercase letters to Lower case• var a2 = str.toLowerCase(); • Checking number using isNaN function• isNaN() to check any data is number or string• var my_string="This is a string";
if(isNaN(my_string)){document.write ("this is not a number ");}else{document.write ("this is a number ");}
popo
![Page 55: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/55.jpg)
JavaScript• Number to string• To convert a number to a string, do:• var c = (16 * 24)/49 + 12; • d = c.toString();
![Page 56: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/56.jpg)
JavaScript• Check validation• <script>• function validate()• {• if(document.login.userName.value=="")• { alert ("Please enter User Name") }• if(document.login.password.value=="")• { alert ("Please enter Password") }• }• </script>• <form name="login" onSubmit="return validate()">• <input type="text" size="20" name="userName">• <input type="text" size="20" name="password">• <input type="submit" name="submit" value="Submit">• </form>
popo
![Page 57: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/57.jpg)
JavaScript
![Page 58: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/58.jpg)
JavaScript II• Array• Different ways to declare Array• 1) var colors = ["red", "green", "blue"];• colors[0] is "red"
• 2) new Array() - to create an empty array:– var colors = new Array();– Add elements to the array later:
colors[0] = "red"; – colors[1]="green"; colors[2] = "blue";
• 3) new Array(n) to create an array of that size– var colors = new Array(3);
![Page 59: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/59.jpg)
JavaScript II• Array example• <html>• <body>• <pre>• <script language="javascript">• var colors = ["red", "green", "blue"];• for(i=0;i<3;i++)• document.write(colors[i]+" ");• </script>• </body>• </html>
![Page 60: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/60.jpg)
JavaScript II• Array Example• <html>• <body>• <pre>• <script language="javascript">• var colors = new Array();• for(i=0;i<10;i++)• {• colors[i]="color"+i;• document.write(colors[i]+" ");• }• </script>• </body>• </html>
![Page 61: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/61.jpg)
JavaScript
![Page 62: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/62.jpg)
JavaScript• File popo.js Contents:• function popup() {• alert("Hello popo")• }• --------------------------------------------------------------------------------------• HTML & JavaScript Code:• <html>• <head>• <script src=“popo.js">• </script>• </head>• <body>• <input type="button" onclick="popup()" value="Click Me!">• </body>• </html>
![Page 63: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/63.jpg)
JavaScript• Print Index of select• <html>• <script language="javascript">• function check(n){• var t=parseInt(n)+1;• alert("index is "+ t);• }• </script>• <body>• <select name=a onChange="check(selectedIndex )">• <option value=one >one</option>• <option value=one >two</option>• <option value=one >three</option>• <option value=one >four</option>• </select>• </body>• </html>
![Page 64: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/64.jpg)
JavaScript
![Page 65: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/65.jpg)
JavaScript• javaScript Print Script - window.print()• The JavaScript print function
window.print() will print the current webpage when executed.
• <form>• <input type="button" value="Print This
Page" onClick="window.print()" />• </form>
![Page 66: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/66.jpg)
JavaScript• JavaScript Redirect• <html>• <script type="text/javascript">• function delayer(){• window.location = "http://www.poposir.orgfree.com"• }• </script>• <body onLoad="setTimeout('delayer()', 5000)">• <h2>This page is waiting for redirect location , poposir.orgfree.com"• </body>• </html>
• The delayer() function to be used after 5 seconds or 5000 milliseconds , so we pass the setTimeout() two arguments.
• 'delayer()' - The function we want setTimeout() to execute after the specified delay.• 5000 - the number of millisecods to wait before executing our function. • 1000 miliseconds = 1 second.
![Page 67: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/67.jpg)
JavaScript• document.getElementById()• To quickly access the value of an HTML element. • This small script below will check to see if there is any text in the text field "myText". • The argument that getElementById requires is the id of the HTML element you wish to
utilize.• <script type="text/javascript">• function notEmpty(){• var myTextField = document.getElementById('myText');• if(myTextField.value != "")• alert("You entered: " + myTextField.value)• else• alert("Would you please enter some text?")• }• </script>• <input type='text' id='myText' />• <input type='button' onclick='notEmpty()' value='Form Checker' />
![Page 68: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/68.jpg)
JavaScript• Cuttent Time AM/ PM• <h4>It is now • <script type="text/javascript">• var currentTime = new Date();• var hours = currentTime.getHours();• var minutes = currentTime.getMinutes();• if (minutes < 10){minutes = "0" + minutes;}• document.write(hours + ":" + minutes + " ");• if(hours > 11){document.write("PM");}• else {document.write("AM");}• </script>• </h4>
![Page 69: J a v a S cript](https://reader038.fdocuments.us/reader038/viewer/2022110212/5681431a550346895daf79d6/html5/thumbnails/69.jpg)
JavaScript