ActiveNET HTML, JS, CSS JavaScript. JavaScript

Transcription

1 JavaScript 1. Introduction to JavaScript 2. JavaScript Vs java 3. Diff b/w Interpreted programs Vs Compiled programs Vs Compiled-interpreted programs 4. Diff b/w Object Oriented Vs Object Based Programming Languages? 5. Why we choose JavaScript? 6. Where to place JavaScript 7. JavaScript (variable declarations, control structures, events, objects, function declarations and calling them) 8. Hierarchy of JavaScript 9. Examples Introduction to JavaScript JavaScript is Netscape developed object based scripting language used in millions of web pages and server applications across World Wide Web. JavaScript Vs java Java is an Object Oriented Programming language. JavaScript is Object based Scripting language. Java is strictly typed programming language means variables are declared with specific data types. In JavaScript variables are declared with var keyword, no variable sticks to any datatype hence we can assign value of any data type such as int, long, float, double, Boolean, Date, String etc to the same variable. Java is compiled and interpreted programming language. JavaScript is interpreted programming language on client system at runtime. JavaScript runs on client system. Java runs on server system. Diff b/w Interpreted programs Vs Compiled programs Vs Compiled-interpreted programs In both the cases the program is written using text based commands called source code. In compiled programming languages the source code is passed through compiler to get executable code which can directly runs on Operating system because exec files contains OS binary instructions. Examples of compiled programming languages are C, C++. In interpreted programming languages the source is code is passed through interpreter that converts each line into OS understandable binary instruction. Example of interpreted programming language is PERL (Practical Extraction and Reporting Language). JavaScript is also an interpreted scripting language but it runs on browser. Java is a compiled and interpreted programming language. Compiler compiles java source code into intermediatery called byte code. The Java interpreter reads line-by-line of byte code and converts it into OS binary format. Hence Page 1

2 its slightly slower than compiled programming language but because of both compiled and interpreted it became OS independent. Diff b/w Object Oriented Vs Object Based Programming Languages? The simple difference is Object Oriented Programming language supports inheritance which extends the functionality of a class by inheriting from another class. But whereas Object Based Programming language supports only association between classes but not inheritance.. That means we can use existing classes functionality given by programming language vendor but not user defined classes. Why we choose JavaScript? JavaScript is the only scripting language that most of the browsers supports such as FireFox, IE, Netscape, Opera, Avanti, Hot Java etc. Netscape supports only JavaScript where as IE supports both JavaScript, JScript and VBScript. Netscape supports Layers whereas IE supports IFrames. JavaScript is originally developed by Netscape, later standardized by ECMA (European Computer Manufacturing Association) called ECMAScript. JavaScript JavaScript gives HTML designers a programming tool. JavaScript can put dynamic text into an HTML page. JavaScript can react to events. JavaScript can read and write HTML elements. JavaScript can be used to validate data. JavaScript can be used to detect the visitor s browser. JavaScript can be used to create Cookies. Comparison between JavaScript and java JavaScript Interpreted (not compiled) by client Object-based. Code uses built-in extensible objects, but no classes or inheritance Code integrated with, and embedded in HTML Variable data types are not declared (loose typing) Secure. Cannot write to hard disk. Java Compiled on server before execution on client. Object-oriented. Applets consists of object classes and inheritance. Applets distinct from HTML (accessed from HTML pages) Variable data types must be declared (strong typing) Secure. Cannot write to hard disk. Window, String, Date, Math, Number, Array, Boolean, RegExpr, XMLHttpRequest, ActiveXObject Where to place JavaScript JS1.html <SCRIPT language= JavaScript > document.write( This text is written from JavaScript ); Page 2

3 Note that there are two tags used to implement JavaScript. Variable declarations As same as Java in JavaScript also variable must start with any character (a-z, A-Z, _). Variables must not begin with number but can contain number in middle of the variable name. In variables we can assign values of different data types such as integers, floating points, booleans, Strings, Arrays and Object of other classes. var keyword must be used to declare variable var i=3; // first int value 3 is assigned to i variable. i= Three ; // next Three the String value is assigned to i variable. i=true; // to the same variable boolean value true is assigned. i=10.24; // to the same variable double value is assigned. While declaring variables the keyword var must be used only for the first time. From thereafter variable can be directly used without var keyword. Type conversion functions isnan() eval() parseint() parsefloat() typeof operator isnan The isnan() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value is NaN, and false if not. document.write(isnan(123)+ "<br />"); document.write(isnan(-1.23)+ "<br />"); document.write(isnan(5-2)+ "<br />"); document.write(isnan(0)+ "<br />"); document.write(isnan("hello")+ "<br />"); document.write(isnan("2005/12/12")+ "<br />"); eval() function The eval() function evaluates or executes an argument. If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements. eval("x=10;y=20;document.write(x*y)"); document.write("<br />" + eval("2+2")); document.write("<br />" + eval(x+17)); Page 3

4 parseint() function The parseint() function parses a string and returns an integer. document.write(parseint("10") + "<br />"); document.write(parseint("10.33") + "<br />"); document.write(parseint(" ") + "<br />"); document.write(parseint(" 60 ") + "<br />"); document.write(parseint("40 years") + "<br />"); document.write(parseint("he was 40") + "<br />"); parsefloat() function The parsefloat() function parses a string and returns a floating point number. document.write(parsefloat("10") + "<br />"); document.write(parsefloat("10.33") + "<br />"); document.write(parsefloat(" ") + "<br />"); document.write(parsefloat(" 60 ") + "<br />"); document.write(parsefloat("40 years") + "<br />"); document.write(parsefloat("he was 40") + "<br />"); typeof operator The "typeof" operator in JavaScript allows you to probe the data type of its operand, such as whether a variable is string, numeric, or even undefined. The below simple example alerts the data type of the variable "myvar". var myvar=5; alert(typeof myvar); // alerts number string boolean object null undefined Arrays Array declaration and Initialization JS2.html <SCRIPT language= JavaScript > var tree=new Array(4); function displayarray() { tree[0]= Roots ; tree[1]= Trunk ; tree[2]= Branches ; tree[3]= Leaves ; window.alert(tree); Page 4

5 <BODY onload= displayarray() > Dynamic Array declaration and Initialization var tree = new Array('Roots', 'Trunk', 'Branches', 'Leaves'); window.alert(tree); Auto Array Increment tree[4]= Twigs ; // If we assign another value to tree array variable its size increases. JavaScript Operators Math Operators Operator Meaning Example + Addition Subtraction 6-2 * Multiplication 5*3 / Division 15/3 % Modulus 43%10 ++ Increment var i=10; i++; // i value is Decrement var i=10; i--; // i value is 9 JS3.html <body> <script type="text/javascript"> <!-- var two = 2 var ten = 10 var linebreak = "<br />" document.write("two plus ten = ") var result = two + ten document.write(result) document.write(linebreak) document.write("ten * ten = ") result = ten * ten document.write(result) document.write(linebreak) document.write("ten / two = ") result = ten / two document.write(result) //--> </body> Bitwise Operators Operator Usage Description Page 5

6 Bitwise AND a & b Returns a one in each bit position for which the corresponding bits of both operands are ones. Bitwise OR a b Bitwise XOR a ^ b Bitwise NOT ~a Left Shift a << b Sign propagation a >> b right shift Zero fill right shift a >>> b JavaScript events 1. onload The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements. 2. onunload The onunload event occurs when the user agent removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements. 3. onclick The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements. 4. ondblclick Page 6

7 The ondblclick event occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements. 5. onmousedown The onmousedown event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements. 6. onmouseup The onmouseup event occurs when the pointing device button is released over an element. This attribute may be used with most elements. 7. onmouseover The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements. 8. onmousemove The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements. 9. onmouseout The onmouseout event occurs when the pointing device is moved away from an element. This attribute may be used with most elements. 10. onfocus The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 11. onblur The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus. 12. onkeypress The onkeypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements. 13. onkeydown The onkeydown event occurs when a key is pressed down over an element. This attribute may be used with most elements. 14. onkeyup The onkeyup event occurs when a key is released over an element. This attribute may be used with most elements. 15. onsubmit The onsubmit event occurs when a form is submitted. It only applies to the FORM element. 16. onreset The onreset event occurs when a form is reset. It only applies to the FORM element. 17. onselect The onselect event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements. 18. onchange The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA. JavaScript Objects Window object Window Object Properties The window object represents an open window in a browser. Property Description Page 7

8 closed defaultstatus document frames history innerheight innerwidth length location name navigator opener outerheight outerwidth pagexoffset pageyoffset parent screen screenleft screentop screenx Returns a Boolean value indicating whether a window has been closed or not Sets or returns the default text in the statusbar of a window Returns the Document object for the window (See Document object) Returns an array of all the frames (including iframes) in the current window Returns the History object for the window (See History object) Returns the inner height of a window's content area Returns the inner width of a window's content area Returns the number of frames (including iframes) in a window Returns the Location object for the window (See Location object) Sets or returns the name of a window Returns the Navigator object for the window (See Navigator object) Returns a reference to the window that created the window Returns the outer height of a window, including toolbars/scrollbars Returns the outer width of a window, including toolbars/scrollbars Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window Returns the parent window of the current window Returns the Screen object for the window (See Screen object) Returns the x coordinate of the window relative to the screen Returns the y coordinate of the window relative to the screen Returns the x coordinate of the window relative to the screen Page 8

9 screeny self status top Returns the y coordinate of the window relative to the screen Returns the current window Sets or returns the text in the statusbar of a window Returns the topmost browser window Window Object Methods Method alert() atob() blur() btoa() clearinterval() cleartimeout() close() confirm() createpopup() focus() moveby() moveto() open() print() prompt() resizeby() Description Displays an alert box with a message and an OK button Decodes a base-64 encoded string Removes focus from the current window Encodes a string in base-64 Clears a timer set with setinterval() Clears a timer set with settimeout() Closes the current window Displays a dialog box with a message and an OK and a Cancel button Creates a pop-up window Sets focus to the current window Moves a window relative to its current position Moves a window to the specified position Opens a new browser window Prints the content of the current window Displays a dialog box that prompts the visitor for input Resizes the window by the specified pixels Page 9

10 resizeto() scroll() scrollby() scrollto() setinterval() settimeout() stop() Resizes the window to the specified width and height This method has been replaced by the scrollto() method. Scrolls the content by the specified number of pixels Scrolls the content to the specified coordinates Calls a function or evaluates an expression at specified intervals (in milliseconds) Calls a function or evaluates an expression after a specified number of milliseconds Stops the window from loading JS1.html <html> <head> <script> function welcome() { window.alert("hai good morning, Welcome to all of you to my Java script session. Hope you will enjoy. Thank you- Surya"); </head> <body onload="welcome()"> </body> </html> JS2.html <html> <head> <script> function ask() { var status=window.confirm("would you like to close this window"); if(status==true) { window.close(); </head> <body onload="ask()"> </body> </html> JS3.html <html> <head> <script> function new1() { Page 10

11 // open ActiveNET site // window.open(" olbar=no,location=no,statusbar=no,scrollbars=no,menubar=no,zlock=yes,width=800,height=500,resizable=no"); var w1=window.open("","window1","titlebar=no,toolbar=no,location=no,statusb ar=no,scrollbars=no,menubar=no,z-lock=yes, width=500, height=300, resizable=no"); w1.document.writeln("<form action=''>"); w1.document.writeln("<input type='text' name=' ' value=''>"); w1.document.writeln("<input type='submit' name='submit' value='submit you ID'>"); w1.document.writeln("</form>"); </head> <body onload="new1()"> </body> </html> JS4.html <html> <head> <script> function take() { var name=window.prompt("enter you name","chinni/bujji/chitti"); alert( Hello +name+", rename your name to Pokiri / Basha / Shivaji"); </head> <body onload="take()"> </body> </html> JS4.html <html> <head> <script> function examine() { alert("keep an observation like that, press OK and find out what happens"); window.settimeout("call()", 1000); function call() { window.close(); </head> <body onload="examine()"> </body> </html> JS5.html <html> <head> Page 11

12 <script> function welcome() { alert("keaka"); document.writeln("su...per color"); // function document.fgcolor="yellow"; // property document.bgcolor="blue"; // property document.link="red"; // property document.alink="magenta"; // property document.vlink="gray"; // property </head> <body onload="welcome()"> </body> </html> JS6.html <FORM> <H3>BackGround Colors</H3> <INPUT TYPE="button" VALUE=" Red " onclick="document.bgcolor ='red'"> <INPUT TYPE="button" VALUE=" White " onclick="document.bgcolor = 'white'"> <H3>ForeGround Colors</H3> <INPUT TYPE="button" VALUE=" Blue " onclick="document.fgcolor ='blue'"> <INPUT TYPE="button" VALUE=" Green " onclick="document.fgcolor = 'green'"> </FORM> JS7.html <SCRIPT> function dupe() { window.open(location.href, "windowname", ""); <BODY onload='dupe()'> </BODY> JS8.html <SCRIPT> function disp() { window.document.writeln(location.protocol+"\n"); window.document.writeln(location.host+"\n"); window.document.writeln(location.hostname+"\n"); window.document.writeln(location.port+"\n"); window.document.writeln(location.pathname+"\n"); window.document.writeln(location.href+"\n"); Page 12

13 <BODY onload=' disp ()'> </BODY> JS9.html <SCRIPT> function nav(command) { if(command=='back') history.back(); else if(command=='forward') history.forward(); else if(command=='go') history.go(parseint(window.document.frm1.loc.value)); else if(command=='len') window.document.writeln(history.length); else history.current(); <BODY> <FORM name="frm1"> <INPUT type="button" name="button" value="back" onclick="nav('back')"> <INPUT type="button" name="button" value="forward" onclick="nav('forward')"> <INPUT type="text" name="loc" value="2"> <INPUT type="button" name="button" value="go" onclick="nav('go')"> <INPUT type="button" name="button" value="len" onclick="nav('len')"> </FORM> </BODY> JS10.html <SCRIPT> function disp() { document.write("<p><b>navigator.appcodename =</B> "+navigator.appcodename); document.write("<p><b>navigator.appname =</B> "+navigator.appname); document.write("<p><b>navigator.appversion =</B> "+navigator.appversion); document.write("<p><b>navigator.useragent =</B> "+navigator.useragent); document.write("<p><b>navigator.mimetypes[0].type =</B> "+navigator.mimetypes[0].type); document.write("<p><b>navigator.plugins[0].name =</B> "+navigator.plugins[0].name); document.write("<p><b>navigator.language =</B> "+navigator.language); document.write("<p><b>navigator.platform =</B> "+navigator.platform); Page 13

14 <BODY onload="disp()"> </BODY> JS11.html <SCRIPT LANGUAGE="JAVASCRIPT"> var smonth = "September"; var nyear = 2000; var nday = 27; var sdate = smonth + " " + nday + ", " + nyear; Then we created this button: <FORM> <INPUT TYPE="button" VALUE="sDate" onclick="alert(sdate)"> </FORM> JS12.html <SCRIPT LANGUAGE="JAVASCRIPT"> var sdate = new Date(); <FORM> <INPUT TYPE="button" VALUE="sDate" onclick="alert(sdate)"> </FORM> JS13.html <SCRIPT LANGUAGE="JAVASCRIPT"> var d=new Date(); window.document.write(d+"<br>"); window.document.write(d.getdate()+"<br>"); window.document.write(d.getday()+"<br>"); window.document.write(d.getfullyear()+"<br>"); window.document.write(d.gethours()+"<br>"); window.document.write(d.getmilliseconds()+"<br>"); window.document.write(d.getminutes()+"<br>"); window.document.write(d.getmonth()+"<br>"); window.document.write(d.getseconds()+"<br>"); window.document.write(d.gettime()+"<br>"); window.document.write(d.gettimezoneoffset()+"<br>"); window.document.write(d.getutcdate()+"<br>"); window.document.write(d.getutcday()+"<br>"); window.document.write(d.getutcfullyear()+"<br>"); window.document.write(d.getutchours()+"<br>"); window.document.write(d.getutcmilliseconds()+"<br>"); window.document.write(d.getutcminutes()+"<br>"); window.document.write(d.getutcmonth()+"<br>"); window.document.write(d.getutcseconds()+"<br>"); window.document.write(d.getyear()+"<br>"); JS14.html (Clock) Page 14

15 <SCRIPT LANGUAGE="JavaScript"> // define the variables we need for the program var timestr, datestr; var now, hours, minutes, seconds; function clock() { now = new Date(); // now becomes an instants of the Date Object // the gethours() pulls out the Hours from the new now Object hours = now.gethours(); // the getminutes() pulls out the Minutes from the new now Object minutes = now.getminutes(); // the getseconds() pulls out the Seconds from the new now Object seconds = now.getseconds(); // below we want to create a String, so here we are concatenating // an Empty String with a number and we end up with a string. timestr = "" + hours; // minutes are shown as :12 or :09 for example, the ternary operator does just that // if minutes are < 10 then add :0 before the number of minutes // else if the minutes are > 9 then just add : before the number of minutes timestr += ((minutes < 10)? ":0" : ":") + minutes; timestr += ((seconds < 10)? ":0" : ":") + seconds; // once we have created the time string then place that value into the FORM's "time" field document.clock.time.value = timestr; // the settimeout Method says // I want you to call clock() every 1000 milliseconds or every 1 second // since there is no prefix for the settimeout - // it means that it is method of the Window Object settimeout("clock()", 1000); <BODY onload="clock()"> The onload Event Handler is executed when the Document or Frameset is fully loaded, which means that all Images have been downloaded and displayed, all subframes have loaded, any Java Applets and Plugins (Navigator) have started running, and so on. The function clock() will be called after "everything" is loaded The NAME of the FORM is "clock" <FORM NAME="clock"> The NAME of the text field is "time". NOTE: the VALUE is an Empty String waiting to be filled with the "TIME". Time: <INPUT TYPE="text" NAME="time" VALUE=""> </FORM> </BODY> Page 15

16 JS15.html <SCRIPT LANGUAGE="JavaScript"> function loaded() { alert( Window loaded ); function unloaded() { alert( Window unloaded ); <BODY onload="loaded()"onunload="unloaded()"> </BODY> JS16.html (onclick) <SCRIPT LANGUAGE="JavaScript"> function clicked() { alert( Button Clicked ); <BODY> <FORM> <INPUT type= button name= b1 value= Button1 onclick= clicked() > </FORM> </BODY> JS17.html onmousedown <SCRIPT LANGUAGE="JavaScript"> function msd() { alert("mouse down"); <BODY onmousedown="msd()"> </BODY> JS18.html onmouseover, onmousemove, onmouseout <SCRIPT LANGUAGE="JavaScript"> function mso() { alert("mouse over"); function mm() { Page 16

17 alert("mouse move"); function mo() { alert("mouse out"); <BODY> <IMG src="activenet_logo3.jpg" onmouseover="mso()" onmousemove="mm()" onmouseout="mo()"> </BODY> JS19.html onfocus, onblur <SCRIPT LANGUAGE="JavaScript"> function onfs() { alert("on focus"); function onblr() { alert("on blur"); function prmtsbmt() { var stat=prompt("would you like to submit this form to server, Press Y for yes and N for no", "Y"); if(stat=='y') { window.document.frm1.submit(); alert("submission khatam, your form is submitted"); <BODY> <FORM name="frm1" action="./tell_me_where_to_go"> <INPUT type="text" name="name" value="enter your name" onfocus="onfs()" onblur="onblr()"> <INPUT type="text" name=" " value="enter your " onblur="prmtsbmt()"> </FORM> </BODY> JS20.html <SCRIPT LANGUAGE="JavaScript"> function dispmp() { window.status=window.event.screenx+", "+window.event.screeny; <BODY onmousemove="dispmp()"> </BODY> Page 17

18 JS21.html <SCRIPT LANGUAGE="JavaScript"> function cnfrm() { var stat=prompt("confirm your form submission", "Y"); if(stat=="y") { alert("submitted"); <BODY> <FORM name="frm1" action="./tell_me_where_to_go" onsubmit="cnfrm()"> <INPUT type="text" name="name" value="enter your name"> <INPUT type="text" name=" " value="enter your "> <INPUT type="submit" name="submit" value="cccl...i...k..."> </FORM> </BODY> JS22.html <SCRIPT LANGUAGE="JavaScript"> function chng() { alert(window.frm1.name.value); function dispslct() { alert("you like : "+window.frm1.slct.value); function slct() { alert(window.frm1.name.value); <BODY> <FORM name="frm1" action="./tell_me_where_to_go"> <INPUT type="text" name="name" value="enter your name" onchange="chng()"> <SELECT name="slct" onchange="dispslct()"> <OPTION value="india">india</option> <OPTION value="pak">pakistan</option> <OPTION value="china">china</option> <OPTION value="singapore">singapore</option> <OPTION value="japan">japan</option> </SELECT> </FORM> </BODY> JS23.html <head> Page 18

19 <script language="javascript"> function newxmlhttprequest() { var xmlreq = false; if (window.xmlhttprequest) { // Create XMLHttpRequest object in non-microsoft browsers xmlreq = new XMLHttpRequest(); alert("xmlhttprequest object is created"); else if (window.activexobject) { // Create XMLHttpRequest via MS ActiveX try { // Try to create XMLHttpRequest in later versions of Internet Explorer xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); alert("msxml2.xmlhttp object is created"); catch (e1) { // Failed to create required ActiveXObject try { // Try version supported by older versions of Internet Explorer xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); alert("microsoft.xmlhttp object is created"); catch (e2) { return xmlreq; </head> <BODY onload="newxmlhttprequest()"> </BODY> JS24.html <script language="javascript"> function readxml() { alert("before changing DIV"); document.getelementbyid("results").innerhtml="sample div modified"; var mydoc = new ActiveXObject("Microsoft.XMLDOM"); mydoc.load("sample.xml"); // mydoc.loadxml("<emps><emp><eno>1</eno></emp><emp><eno>2</eno></emp></emps>"); alert(mydoc.documentelement.childnodes.length); <BODY onload="readxml()"> <div name="div" id="results" style="color:red; font-weight:bold;"> Sample div </div> </BODY> Page 19

20 JS25.html <script language="javascript"> function readxml() { var select=document.createelement("select"); var option1=document.createelement("option"); option1.setattribute("value", "Jet Airways"); option1.appendchild(document.createtextnode("jet Airways")); var option2=document.createelement("option"); option2.setattribute("value", "Sahara"); option2.appendchild(document.createtextnode("sahara")); var option3=document.createelement("option"); option3.setattribute("value", "Go Air"); option3.appendchild(document.createtextnode("go Air")); var option4=document.createelement("option"); option4.setattribute("value", "KingFisher"); option4.appendchild(document.createtextnode("kingfisher")); var option5=document.createelement("option"); option5.setattribute("value", "Paramount Airways"); option5.appendchild(document.createtextnode("paramount Airways")); var option6=document.createelement("option"); option6.setattribute("value", "Air Deccan"); option6.appendchild(document.createtextnode("air Deccan")); select.appendchild(option1); select.appendchild(option2); select.appendchild(option3); select.appendchild(option4); select.appendchild(option5); select.appendchild(option6); document.getelementbyid("air").appendchild(select); <BODY onload="readxml()"> <SPAN name="air" id="air" style="color:red; font-weight:bold;"> Choose airways </SPAN><BR/> <SPAN name="source" id="source" style="color:red; font-weight:bold;"> Select Source </SPAN><BR/> <SPAN name="dest" id="dest" style="color:red; font-weight:bold;"> Page 20

21 Select Destination </SPAN><BR/> </BODY> JS26.html IFrame using MSXMLDOM A.html Page A B.html Page B iframe.html <TITLE>Changing Element Attributes</TITLE> <SCRIPT LANGUAGE="JavaScript"> function change_image() { document.all.myiframe.src="b.html"; <BODY> <IFRAME id=myiframe src="a.html"> </IFRAME> <BUTTON onclick=change_image()>change contents of the IFRAME</BUTTON> </BODY> String Object The String object is used to manipulate a stored piece of text. String objects are created with new String(). Syntax var txt = new String("string"); or more simply: var txt = "string"; Property Constructor length Prototype Description Returns the function that created the String object's prototype Returns the length of a string Allows you to add properties and methods to an object String Object Methods Method charat() charcodeat() concat() Description Returns the character at the specified index Returns the Unicode of the character at the specified index Joins two or more strings, and returns a copy of the joined strings Page 21

22 fromcharcode() indexof() lastindexof() match() replace() search() slice() split() substr() substring() tolowercase() touppercase() valueof() Converts Unicode values to characters Returns the position of the first found occurrence of a specified value in a string Returns the position of the last found occurrence of a specified value in a string Searches for a match between a regular expression and a string, and returns the matches Searches for a match between a substring (or regular expression) and a string, and replaces the matched substring with a new substring Searches for a match between a regular expression and a string, and returns the position of the match Extracts a part of a string and returns a new string Splits a string into an array of substrings Extracts the characters from a string, beginning at a specified start position, and through the specified number of character Extracts the characters from a string, between two specified indices Converts a string to lowercase letters Converts a string to uppercase letters Returns the primitive value of a String object JS27.html <SCRIPT LANGUAGE="JavaScript"> var str=new String( ActiveNET ); // var str= ActiveNET ; window.document.writeln(str.constructor+ <br> ); window.document.writeln(str.length+ <br> ); window.document.writeln(str.prototype+ <br> ); window.document.writeln(str.charat(6)+ <br> ); window.document.writeln(str.concat( Infor )+ <br> ); window.document.writeln(str.fromcharcode(2)+ <br> ); window.document.writeln(str.indexof( T )+ <br> ); window.document.writeln(str.lastindexof( T )+ <br> ); var str1="the rain in SPAIN stays mainly in the plain"; var pattern1=/ain/gi; window.document.writeln(str1.matches(pattern1)+ <br> ); // Displays ain wherever exist irrespective of case sensitive window.document.writeln(str.replace( e, E )+ <br> ); window.document.writeln(str.search( ACT )+ <br> ); // returns -1 if string is not found var str2= Hello happy world window.document.writeln(str2.slice(0)+ <br> ); // from 0 th index all characters are returned window.document.writeln(str2.slice(6)+ <br> ); // from 6 th index all characters are returned window.document.writeln(str2.slice(-6)+ <br> ); Page 22

23 // from last 6 characters are returned window.document.writeln(str2.slice(0,1)+ <br> ); // from 0 th index 1 character is returned window.document.writeln(str2.slice(6,11)+ <br> ); // from 6 th index to 11 th index characters are returned var str3= How are you doing today ; window.document.writeln(str3.split()+ <br> ); // String displayed as it is window.document.writeln(str3.split( )+ <br> ); // wherever white space character occurs they are all splitted as Strings window.document.writeln(str3.split( )+ <br> ); // Each character in String splits as character and displayed window.document.writeln(str3.split(, 3)+ <br> ); // Wherever space occurs they are splitted as Strings but only first 3 Strings are displayed window.document.writeln(str.substr(3)+ <br> ); // From 3 rd index all characters are displayed window.document.writeln(str.substr(3,5)+ <br> ); // From 3 rd index to 5 th index String retrieved and displayed as String window.document.writeln(str.tolowercase()+ <br> ); window.document.writeln(str.touppercase()+ <br> ); RegExp Object A regular expression is an object that describes a pattern of characters. Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text. Syntax var patt=new RegExp(pattern,modifiers); or more simply: var patt=/pattern/modifiers; pattern specifies the pattern of an expression modifiers specify if a search should be global, case-sensitive, etc. Modifiers Modifiers are used to perform case-insensitive and global searches: Modifier i g M Description Perform case-insensitive matching Perform a global match (find all matches rather than stopping after the first match) Perform multiline matching Brackets Brackets are used to find a range of characters: Expression [abc] Description Find any character between the brackets Page 23

24 [^abc] Find any character not between the brackets [0-9] Find any digit from 0 to 9 [A-Z] [a-z] [A-z] [adgk] [^adgk] (red blue green) Find any character from uppercase A to uppercase Z Find any character from lowercase a to lowercase z Find any character from uppercase A to lowercase z Find any character in the given set Find any character outside the given set Find any of the alternatives specified Metacharacters Metacharacters are characters with a special meaning: Metacharacter Description. Find a single character, except newline or line terminator \w Find a word character \W Find a non-word character \d Find a digit \D Find a non-digit character \s Find a whitespace character \S Find a non-whitespace character \b Find a match at the beginning/end of a word \B Find a match not at the beginning/end of a word \0 Find a NUL character \n Find a new line character \f Find a form feed character \r Find a carriage return character \t Find a tab character \v Find a vertical tab character \xxx \xdd \uxxxx Find the character specified by an octal number xxx Find the character specified by a hexadecimal number dd Find the Unicode character specified by a hexadecimal number xxxx Quantifiers Quantifier Description n+ Matches any string that contains at least one n n* Matches any string that contains zero or more occurrences of n n? Matches any string that contains zero or one occurrences of n n{x Matches any string that contains a sequence of X n's n{x,y Matches any string that contains a sequence of X to Y n's Page 24

25 n{x, Matches any string that contains a sequence of at least X n's n$ Matches any string with n at the end of it ^n Matches any string with n at the beginning of it?=n Matches any string that is followed by a specific string n?!n Matches any string that is not followed by a specific string n RegExp Object Methods Method compile() exec() test() Description Compiles a regular expression Tests for a match in a string. Returns the first match Tests for a match in a string. Returns true or false compile() The compile() method is used to compile a regular expression during execution of a script. The compile() method can also be used to change and recompile a regular expression. Syntax RegExpObject.compile(regexp,modifier) Parameter Regexp Modifier Description A regular expression Specifies the type of matching. "g" for a global match, "i" for a case-insensitive match and "gi" for a global, case-insensitive match JS28.html var str="every man in the world! Every woman on earth!"; var patt=/man/g; var str2=str.replace(patt,"person"); document.write(str2+"<br />"); patt=/(wo)?man/g; patt.compile(patt); str2=str.replace(patt,"person"); document.write(str2); Output Every person in the world! Every woperson on earth! Every person in the world! Every person on earth! exec() method The exec() method tests for a match in a string. This method returns the matched text if it finds a match, otherwise it returns null. Syntax RegExpObject.exec(string) Page 25

26 Parameter String Description Required. The string to be searched JS29.html var str="hello world!"; //look for "Hello" var patt=/hello/g; var result=patt.exec(str); document.write("returned value: " + result); //look for "W3Schools" patt=/w3schools/g; result=patt.exec(str); document.write("<br />Returned value: " + result); Output Returned value: Hello Returned value: null test() method The test() method tests for a match in a string. This method returns true if it finds a match, otherwise it returns false. Syntax RegExpObject.test(string) Parameter String Description Required. The string to be searched JS30.html var str="hello world!"; //look for "Hello" var patt=/hello/g; var result=patt.test(str); document.write("returned value: " + result); //look for "W3Schools" patt=/w3schools/g; result=patt.test(str); document.write("<br />Returned value: " + result); Output Returned value: true Returned value: false Page 26

27 Array What is an Array? An array is a special variable, which can hold more than one value, at a time. If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this: var car1="saab"; var car2="volvo"; var car3="bmw"; However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300? The best solution here is to use an array! An array can hold all your variable values under a single name. And you can access the values by referring to the array name. Each element in the array has its own ID so that it can be easily accessed. Create an Array An array can be defined in three ways. The following code creates an Array object called mycars: 1: var mycars=new Array(); // regular array (add an optional integer mycars[0]="saab"; // argument to control array's size) mycars[1]="volvo"; mycars[2]="bmw"; 2: var mycars=new Array("Saab","Volvo","BMW"); // condensed array 3: var mycars=["saab","volvo","bmw"]; // literal array Note: If you specify numbers or true/false values inside the array then the variable type will be Number or Boolean, instead of String. Access an Array You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. The following code line: document.write(mycars[0]); will result in the following output: Saab Modify Values in an Array To modify a value in an existing array, just add a new value to the array with a specified index number: mycars[0]="opel"; Now, the following code line: document.write(mycars[0]); will result in the following output: Opel Array Object Properties Property constructor Description Returns the function that created the Array object's prototype Page 27

28 Length prototype Sets or returns the number of elements in an array Allows you to add properties and methods to an object Array Object Methods Method concat() indexof() join() pop() push() reverse() shift() slice() sort() splice() tostring() unshift() valueof() Description Joins two or more arrays, and returns a copy of the joined arrays Joins all elements of an array into a string Removes the last element of an array, and returns that element Adds new elements to the end of an array, and returns the new length Reverses the order of the elements in an array Removes the first element of an array, and returns that element Selects a part of an array, and returns the new array Sorts the elements of an array Adds/Removes elements from an array Converts an array to a string, and returns the result Adds new elements to the beginning of an array, and returns the new length Returns the primitive value of an array concat() method The concat() method is used to join two or more arrays. This method does not change the existing arrays, it only returns a copy of the joined arrays. JS31.html var parents = ["Jani", "Tove"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(children); document.write(family); Output Jani,Tove,Cecilie,Lone Join three arrays JS32.html var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); Page 28

29 Output Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone join() method The join() method joins all elements of an array into a string, and returns the string. The elements will be separated by a specified separator. The default separator is comma (,). Syntax array.join(separator) JS33.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.join() + "<br />"); document.write(fruits.join("+") + "<br />"); document.write(fruits.join(" and ")); pop() method The pop() method removes the last element of an array, and returns that element. Note: This method changes the length of an array! Syntax array.pop() JS34.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.pop() + "<br />"); document.write(fruits + "<br />"); document.write(fruits.pop() + "<br />"); document.write(fruits); Output Mango Banana,Orange,Apple Apple Banana,Orange push() method The push() method adds new elements to the end of an array, and returns the new length. Note: This method changes the length of an array! Syntax: array.push(element1, element2,..., elementx) JS35.html Page 29

30 var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.push("kiwi") + "<br />"); document.write(fruits.push("lemon","pineapple") + "<br />"); document.write(fruits); Output 5 7 Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple reverse() method The reverse() method reverses the order of the elements in an array (makes the last element first, and the first element last). Note: This method changes the original array! Syntax array.reverse() JS36.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.reverse()); Output Mango,Apple,Orange,Banana shift() method The shift() method removes the first element of an array, and returns that element. Note: This method changes the length of an array! Syntax array.shift() JS37.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.shift() + "<br />"); document.write(fruits + "<br />"); document.write(fruits.shift() + "<br />"); document.write(fruits); Output Banana Orange,Apple,Mango Page 30

31 Orange Apple,Mango slice() method The slice() method selects a part of an array, and returns the new array. Note: The original array will not be changed. Syntax array.slice(start, end) JS38.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.slice(0,1) + "<br />"); document.write(fruits.slice(1) + "<br />"); document.write(fruits.slice(-2) + "<br />"); document.write(fruits); Ouput Banana Orange,Apple,Mango Apple,Mango Banana,Orange,Apple,Mango sort() method The sort() method sorts the elements of an array. Note: This method changes the original array! Syntax array.sort(sortfunc) JS39.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.sort()); Output Apple,Banana,Mango,Orange splice() method The splice() method adds and/or removes elements to/from an array, and returns the removed element(s). Note: This method changes the original array! Syntax array.splice(index,howmany,element1,...,elementx) JS40.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("added: " + fruits.splice(2,0,"lemon") + "<br />"); document.write(fruits); Page 31

32 Output Added: Banana,Orange,Lemon,Apple,Mango JS41.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("removed: " + fruits.splice(2,1,"lemon") + "<br />"); document.write(fruits); Output Removed: Apple Banana,Orange,Lemon,Mango JS42.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("removed: " + fruits.splice(2,2,"lemon") + "<br />"); document.write(fruits); Output Removed: Apple,Mango Banana,Orange,Lemon tostring() method The tostring() method converts an array to a string and returns the result. Note: The returned string will separate the elements in the array with commas. JS43.html var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.tostring()); Output Banana,Orange,Apple,Mango unshift() method The unshift() method adds new elements to the beginning of an array, and returns the new length. Note: This method changes the length of an array! Syntax array.unshift(element1,element2,..., elementx) JS44.html Page 32

33 var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.unshift("kiwi") + "<br />"); document.write(fruits.unshift("lemon","pineapple") + "<br />"); document.write(fruits); Output 5 7 Lemon,Pineapple,Kiwi,Banana,Orange,Apple,Mango Math Object The Math object allows you to perform mathematical tasks. Math Object Properties Property Description E Returns Euler's number (approx ) LN2 Returns the natural logarithm of 2 (approx ) LN10 Returns the natural logarithm of 10 (approx ) LOG2E Returns the base-2 logarithm of E (approx ) LOG10E Returns the base-10 logarithm of E (approx ) PI Returns PI (approx ) SQRT1_2 Returns the square root of 1/2 (approx ) SQRT2 Returns the square root of 2 (approx ) Math Object Methods Method abs(x) acos(x) asin(x) atan(x) atan2(y,x) ceil(x) cos(x) exp(x) floor(x) log(x) max(x,y,z,...,n) min(x,y,z,...,n) pow(x,y) Description Returns the absolute value of x Returns the arccosine of x, in radians Returns the arcsine of x, in radians Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians Returns the arctangent of the quotient of its arguments Returns x, rounded upwards to the nearest integer Returns the cosine of x (x is in radians) Returns the value of E x Returns x, rounded downwards to the nearest integer Returns the natural logarithm (base E) of x Returns the number with the highest value Returns the number with the lowest value Returns the value of x to the power of y random() Returns a random number between 0 and 1 Page 33

34 round(x) sin(x) sqrt(x) tan(x) Rounds x to the nearest integer Returns the sine of x (x is in radians) Returns the square root of x Returns the tangent of an angle JS45.html <html> <body> var b1=new Boolean(0); var b2=new Boolean(1); var b3=new Boolean(""); var b4=new Boolean(null); var b5=new Boolean(NaN); var b6=new Boolean("false"); document.write("0 is boolean "+ b1 +"<br />"); document.write("1 is boolean "+ b2 +"<br />"); document.write("an empty string is boolean "+ b3 + "<br />"); document.write("null is boolean "+ b4+ "<br />"); document.write("nan is boolean "+ b5 +"<br />"); document.write("the string 'false' is boolean "+ b6 +"<br />"); </body> </html> Output 0 is boolean false 1 is boolean true An empty string is boolean false null is boolean false NaN is boolean false The string 'false' is boolean true Number Object The Number object is an object wrapper for primitive numeric values. Number objects are created with new Number(). Syntax var num = new Number(value); Number Object Properties Property constructor MAX_VALUE MIN_VALUE NEGATIVE_INFINITY POSITIVE_INFINITY Description Returns the function that created the Number object's prototype Returns the largest number possible in JavaScript Returns the smallest number possible in JavaScript Represents negative infinity (returned on overflow) Represents infinity (returned on overflow) Page 34

35 prototype Number Object Methods Method toexponential(x) tofixed(x) toprecision(x) tostring() valueof() Allows you to add properties and methods to an object Description Converts a number into an exponential notation Formats a number with x numbers of digits after the decimal point Formats a number to x length Converts a Number object to a string Returns the primitive value of a Number object Page 35