Docstoc

Java Script Tutorial

Document Sample
Java Script Tutorial Powered By Docstoc
					Java Script Tutorial
Introductory lines The pyramids of Egypt are the most eloquent hold-outs on the age-old bromide that simple tools and techniques do not essentially have to produce bland, unglamorous results. They can also trigger off monumental creations that speak to everyone who visits them. Java Script, the latest offering from the IT industry's bigwig-duo Sun Microsystems and Netscape, is very much in the same domains. Quite simple in its basic mechanisms, yet holding the promise of sprucing up (revolutionizing) the vast skeins of the World Wide Web. In this issue, you will learn some of the rudimentary stuff about Java Script and what underlies the so-called dynamic future. There is something rather spooky about the epithet "Java". You (christen ) name a chunk of islands after it and they become international tourism hotcakes. Pour yourself a cuppa coffee and call it Java to send the cafe's trial balance snowballing. Brew up a set of accoutrements for a computer programming language, give it the magic title and it is touted to plateau the brand equity of a biggie like Microsoft. Trouble is, it does. Pick out some disregarded product "Live script" from some dark and deserted cubbyhole, sprinkle the may-dew of this divine beverage (call it "Java script", that is) and whoa! it becomes the best thing that ever happened to the human race after the "man on the moon". Almost all, if not all, the ions in the IT industry swoop down with dripping tongues on the treasure trove and label it the sure-fire prototype of a dynamic future. Infact, it sends big rats (in the race, ofcourse) like Microsoft staggering back to garret! The point is, to put it in a politically correct manner, the association of logic and the computer industry is a misnomer idea in the first place. And therein lies the rub of the World Wide Web. It is totally unpredictable, absolutely anarchaic and outright post-judiced, strung together with shocks of illogicality. Yet, lets face it. As it stands today, all the furnishings of the glamorous web are based on the underpinnings of HTML (that's HyperText MarkUp Language, for the out-of-touch). There's more to establishing presence on the web than mastering the ins and outs of Hyper Text. If your most fiendish nightmare is falling out of the rat race, if there is one, then you'd better re-think your Web-oriented efforts. The rather drab HTML is already considered primitive. Its the likes of Java script and Netscape plug-ins that are calling the shots. Java script has its rhizome in HTML. Infact, quite like the Web, the two are so inextricably intertwined that to really comprehend the whys and wherefores of Javascript, we will have to take a brief detour back to its ancestor HTML. Including tags along with text is what demarcates HTML from any ordinary ASCII file. In HTML, the tags are enclosed within angle brackets. For instance, a document heading is indicated with <H1>. Since most of these tags travel in pairs, a <H1> marks the beginning of a heading and a corresponding </H1> marks its end. Likewise, a word within the tags <b> and </b> will instruct your browser that the word has to displayed in Bold. That's the reason why it is called scripting language, because anything between the less than sign and a greater than sign is understood by the browser.

One finds, after a short spell with HTML, that its beauty lies in the fact that it is a stream of plain, old characters. Which makes any half-witted text editor a potential HTML generator. There is no dearth of programs like WordPerfect where you create your page, pictures and all, and it will create a corresponding HTML file automatically. Therefore, it is rather silly to call it a programming language as it is popularly misidentified, unless you think that adding a couple of dumb stubs or tags is equivalent to programming. Strictly speaking, it does not allow any intelligent functionalities, say, the for the if statements. That is where Java script makes its glorious entry. It has functions, loops, variables and not to forget objects (which you can spend your life researching and still never get to know what they really are). Just a widget of wisdom before we begin to grapple with the innards of Java script. Using a scripting language is pointless if you are not working with the Internet and specifically, the World Wide Web. They are not generalised languages like C/C++ or talking of the more in-thing, Java. One would be a minimalist bumpkin if he/she intended using something like PowerBuilder or Visual Basic to program a spaceship directed towards Mars, while C could prove helpful. (Infact, a language like C is so generically applicable, it could very well be used to grow water melons). PowerBuilder servers well as a front end to databases only and it is sensible to restrict it to that level. In the same vein, Java Script has been designed to work with HTML. Second and very important, Netscape is the only known browser to support Javascript. Now. With that nugget up our sleeve, lets whip the horse. Consider the following code... 1.html

<SCRIPT> document.writeln("Hello"); </SCRIPT> This code has to written and saved as an HTML file. To try the code out, load the HTML file in your browser. The script tag tells my browser that everything inside it is Javascript code. That is, whatever you write within the two tags is taken to be part of Java Script. As a part of the code, we have document.writeln. A document is an object that refers to the entire document or form that you are currently in. As regards the million-dollar query "What's an object", well that remains a fairly brilliant question, only that there is no immediately convincing answer. One can live out fairly long life without being able to define an object for the simple reason that everything around us is an object -- from the spider's cobweb above you to this article or a magazine you are reading. Infact, one can live out a fairly cheerful life without ever needing to define an object. Since the analogy here is a magazine, let us take that. A magazine has pages, the pages have words, the words have letters of the alphabet etc. If magazine were an object, the pages would be the members. Similarly, our object in question document has members -- in the form of variables and functions. writeln is a function, as is apparent, looking at the round brackets that follow it. The period '.' seperates the function from its superordinate object (i.e, it seperates writeln from document).

We pass Hello as a parameter to the writeln function. The work of writeln is to instruct the browser to display on the screen whatever is passed to it (writeln) as a parameter. Therefore, when you now load the above HTML file, you will see the word Hello in your Netscape browser. At this point, try snipping out those script tags. 2.html

document.writeln("Hello"); Since the tags are absconding, the browser will refuse to recognize the line as a Javascript and display the whole thing -- document.writeln("Hello"); Note that unlike C or C++, Java script is not ruthlessly unforgiving if you skip the semicolon at the end of the line of code. As a slight deviation, try this out... 3.html <SCRIPT> document.writeln("<H1> Hello </H1>"); </SCRIPT> As discussed earlier, the H1 tag represents that a heading. Since we specify this inside the writeln, the browser will sniff out the same Hello as a heading -- bigger, bolder, better. 4.html

<SCRIPT> document.writeln(" <IMG SRC = \"joe.surf.yellow.small.gif\"> "); </SCRIPT> The <IMG> tag forewarns the browser that an image is on its way. The browser makes arrangements accordingly to display the image. Here we use a .gif file that contains a picture. (For the people in the dark, .gif stands for Graphical Interface Format). Obediently, the browser will display the image provided the .gif file is present in the current directory. Alternatively, the entire path of the file can be specified. Notice the backslash '\' before the quotes that contain the name of the file. If we do not specify a slash there, the browser will understand it to be the end of the double quote pair that starts from the one before IMG tag. Therefore, to avoid the confusion with four double inverted commas, we put the slash. A backslash tells the browser to ignore the character immediately following it. 5.html

<SCRIPT> document.fgcolor = "#ff0000" </SCRIPT>

<FORM> good boy </FORM> That fgcolor stands for "foregroung colour". Our object document also has a variable called fgcolor. We initialize this variable to a hexadecimal number. Let us not bother ourselves with hexadecimal rhetoric lest we should need a dozen aspirins. We learnt in school about the three primary colours -- RGB, i.e, Red, Green and Blue. It ought to suffice to sat at this juncture that the ff in the hex number above stands for full red. The remaining pairs of zeroes representing the green and the blue element in the overall foreground colour (they are both zero, thus making the foreground entirely red). Note that the value/density of the three basic elements in a given colour can range from 0 to 255. The tag <FORM> comes from the good, ol' HTML. Whatever is between <FORM> and </FORM> means it will be displayed immediately on the screen. Since our foreground colour is red, good boy will be displayed in red. If we set the foreground colour, it will not take a Sherlock Holmes to tell that we can do the same for background colour as well. Consider the next one ... 6.html

<SCRIPT> document.bgcolor = "#ff0000" </SCRIPT> <FORM> good boy </FORM> Since the the background color is made red, the screen will be in red. At this point of time whether you have a <form> and a </form> does not make a difference. Next... 7.html

<SCRIPT> document.fgcolor = "#ff0000" </SCRIPT> <FORM> <INPUT TYPE = "button" VALUE = "Press Me"> </FORM> For the ones who came in late, INPUT is a word that HTML knows. TYPE is another word HTML is well acquainted with and it can be used only after the word INPUT (as that's a part of unarguable syntax, we try to be obedient). Now when we say button with the value being "Press Me", we will see a small command button on the screen with "Press Me" as its label. That's because we said the TYPE was button and the VALUE was "Press Me". But as of now, clicking on the button does not wake up the

button. To trap a click of a button, Javascript provides an additional facility called "onClick". Try the next program... 8.html

<FORM> <INPUT TYPE = "button" VALUE = "Press Me" onClick = "alert('good')"> </FORM> Mark the case and stick by it for Java script is not as lenient with case-typos as with semicolons. An onClick inside an INPUT statement ensures that whatever follows it will get executed. OnClick is added to input, it is a part of JavaScript. Here we give an alert() after the onClick with the parameter good. An alert() is a global function that can be called from any nook of the program. In our case, it will bring us a message box with good displayed in it. Note that the contents of onClick are stuffed inside double quotes while good is within single quotes. A slightly differently different from the alert() is the confirm() which boasts a couple of additional buttons -- OK and CANCEL. The following program should make that adequately clear... 9.html <FORM> <INPUT TYPE = "button" VALUE = "Press Me" onClick = "confirm('good')"> </FORM> That demonstrates one of the reasons why people love using Java script -- it has a large number of built in functions like these. In the next example you get the same answer , the only difference being that we do not use confirm directly. 10.html

<SCRIPT> function aaa() { confirm("good") } </SCRIPT> <FORM> <INPUT TYPE = "button" VALUE = "Press Me" onClick = "aaa()"> </FORM> Since smooshing multiple options on the same line in INPUT can be a trifle cumbersome, we define our own function called aaa(). Now when the user clicks with the mouse, the aaa() gets called to display the confirm box. This also serves a dual purpose. We can now do an array of complex things inside our function and call it with the click of a mouse! The next example says that each time you click on the button, the background color will change.

11.html <SCRIPT> function aaa() { document.bgcolor = "#ff0000" } </SCRIPT> <FORM> <INPUT TYPE = "button" VALUE = "Press Me" onClick = "aaa()"> </FORM> The true strength of JavaScript comes on with the objects that it gives you. It gives us an interesting object called history. Consider the following code... 12.html

<SCRIPT> function aaa() { history.go(-1) } </SCRIPT> <FORM> <INPUT TYPE = "button" VALUE = "Press Me" onClick = "aaa()"> </FORM> As is adequately explicit, the above code makes use of a function called go() that comes with the object history. We pass a parameter of -1 which means that it will take us to the previous page. Let us make it a little clearer. When you are browsing on the web, you flip through screenfuls of pages. If you want to move to the previous page at any given point of time, you just click on the button that says "Back". (And we are talking Netscape here). The go(-1) works precisely like that. Your HTML program can now cruise through the various ages that a user has been surfing through. You could have a couple of buttons, one with a label of a left arrow (<-) and the other with a right arrow (->). When the user clicks on the left arrow, you could take him one page back (with go(-1) ) and (with go(+1) ) forth in the history. consider the following... 13.html

<SCRIPT> function aaa() { alert(history.current) } </SCRIPT>

<FORM> <INPUT TYPE = "button" VALUE = "Press Me" onClick = "aaa()"> </FORM> Like any other object, history has its set of functions and variables. current is a variable that tells you where the user is in history, i.e., on which page is he since the time he started surfing this time. So thats what we are displaying in the alert message box. Given above are only a few examples of Java Script along with the explanations to them. Many more script programs can be tried out from More Java Script Examples

Java Script Tutorial Create a directory and using any dos editor key in the following programs . The java scripts are embedded within the html files, so create a file with an html extension and enter the code as given, one at a time.Load the Netscape Browser (we have used Netscape 2.0b4 copy) to see the output .When we worked on these programs , the output displayed are also mentioned. Brief explanations to every programs are given . Please bear with us as this page will be updated soon with more scripts and complete explanations. Program 1 <script> document.writeln("hello"); </script>

Output : displays hello on the screen. Program 2 <script> document.writeln("<h1>hello</h1>"); </script>

Output : displays hello on the screen with the heading 1 format. Program 3 <script> document.writeln("<img src = \"joe.surf.yellow.small.gif\">"); </script>

Output : displays the image on the screen .The .gif is assumed to be present in the current directory. Program 4 <script> document.fgColor="#ff0000"; </script> <Form> good boy </Form>

Output : The text displayed on the document will have the foreground color of red. good boy is therefore in red Program 5 <script> document.bgColor="#ff0000"; </script> <Form> good boy </Form>

Output : The background color of the document will change to red Program 6 <script> document.writeln("<h1>hello</h1>"); </script> <form> <input type="button" value="Press me"> </form> Flow is from top to bottom . hello is displayed in the heading 1 format. The Button is displayed with 'Press me' as the label on it. If the script code is placed after the form, the button is displayed first, and then the text of writeln. Program 7 <form> <input type="button" value="Press me" onClick = "alert('good')"> </form>

Output : The Button is with Press me displayed on it.When clicked on it, a window pops up displaying JavaScript alert on the first line The second line displays the message which is good . Program 8 <form> <input type="button" value="Press me" onClick = "confirm('good')"> </form> The Button is with the Press me label.When clicked on it, a window pops up displaying JavaScript confirm on the first line The second line displays the message good . A minor difference from the alert box,it has two buttons, Ok and Cancel. Program 9 <script> function aaa() {confirm ("all okay"); } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form>

When clicked on the Button, the aaa function which is a user defined function gets called. In aaa the confirm function displays a window with the message 'all okay'. Program 10 <script> function aaa() { document.bgColor="#00ff00"; } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> The Button when clicked on it,calls the aaa function - user defined function. In the aaa function the background color of the document is changed to green. Program 11 <script> function aaa() { history.go(-1); } </script> <form>

<input type="button" value="Press me" onClick = "aaa()"> </form> When clicked on the Button,the aaa function gets called. The history object has the go function . -1 in the go() is to move to one back in the history list. This is similar to clicking left arrow on the toolbar. Program 12 <script> function aaa() { alert(history.current); } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> The aaa function shows the alert message box when clicked on the button. The Alert box has no text displayed in it. Program 13 <script> function aaa() { history.back(); } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> history.back() in the aaa function moves one document back.It is similar to go(-1). Program 14 <script> function aaa() { history.forward(); } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> Output : history.forward is like clicking on the right arrow of the tool bar which is very much similar to go(+1).

Program 15 <script> function aaa() { top.location.assign("http://www.neca.com"); } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> top.location.assign("http://www.neca.com")- assign the url to the location area and moves on to that site. We have tried top.location.assign("file:///d:/jscript/z3.html") The url is shown in the Location area and z3.html file gets loaded on. Program 16 <script> function aaa() { alert(location.pathname) alert(location.toString()) } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> The location.pathname displays the filename without the protocol (the string after http:// will be displayed) The location.toString displays the entire url (i.e http://www......) both these strings are displayed in the alert box. Program 17 <script> function aaa() { window.status="hell" } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> The status line of the window displays hell when clicked on the button Program 18 <script> function aaa()

{ window.prompt() } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> When clicked on the Button, the window is seen with the first line as JavaScript prompt . The second line and the edit area in this window show undefined. There are two buttons for Ok and Cancel. Program 19 <script> function aaa() { a=window.prompt("hi","bye") alert(a); } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> The window.prompt() is now used with two parameters . The first paramtere which is hi becomes the title and the second one is the text displayed in the edit box of the window . Making changes to the text and when clicked on Ok the new text gets assigned to the variable a.Alert will then display the value of a . Program 20 <script> function aaa() { window.open("z2.html") } </script> <form> <input type="button" value="Press me" onClick = "aaa()"> </form> window is an object having open as a method in it. This function opens another window i.e it starts another copy of netscape with the file z2.html as the loaded file in it. Program 21 <script> function aaa() {

document.alinkColor="#0000ff" } function bbb() { document.alinkColor="#00ff00" } </script> <form> <input type="button" value="Press" name="aa" onClick="aaa()"> <input type="button" value="me" name="bb" onClick = "bbb()"> <a href="z2.html">Hello</a> </form> Output : Hello is a link (hyper link/text) alinkColor is the color which will be displayed when anchored on the link . When clicked with the mouse on Hello and not releasing the click,the color changes .This is the default color depending upon the settings given . Click on the Press button, the alinkColor is being changed to blue through the aaa(). To check this click on Hello and leave it depressed, the blue color is seen till the mouse button remains clicked. The same is the procedure for bbb(). Program 22 <form> <a href="z2.html"onMouseOver="alert('hi')">Hello </a> </form> <p> Output : The onMouseOver clause in html syntax of 'a href' traces the mouse. If the arrow moves over the link/text Hello , the alert box appears with 'hi' . Program 23 <form> <a href="z2.html" onClick="alert('hi')">Hello </a> </form> Output : Click with the mouse on Hello .The alert box will appears first and then it takes you to the reference file which is z2.html. Program 24 <script> function aaa(f) { alert(f.value) alert(f.name) alert(this.name) } </script> <form> <input type="button" value="Press Me" Name="ss" onClick="aaa(this)">

</form> Output: value, name ... are properties of an object. The aaa() takes 'this' as the parameter .'this' refers to button as the statement having the aaa function has the object of type button. f in function aaa looks like this. f.value will display "Press Me' the value of button f.name shows ss which is the name for the button. The last alert box displays nothing because this in aaa refers now to aaa function rather than the button. Program 25 <script> document.writeln("<h1>Hello</h1>") function aaa(f) { a=confirm("all okay"); alert(a) if(a) f.ss.value='yes' else f.ss.value='no' } </script> <form> <input type="button" value="Press Me" onClick="aaa(form)"> <input type="text" Name="ss"value="aa" size=9 > </form> In the aaa (), the form is given as the parameter. The form itself is treated as an object which can in turn have objects or call it elements. One object can access the other via the form. ss is the name for the text box object of the form and has a property called value. f looks like form so now through f all the objects of the forms can be manipulated. If the confirm box results in true i.e if clicked on the OK buuton , the value in the text box will show 'yes' otherwise a 'no'. Program 26 <script> document.writeln("<h1>Hello</h1>") function aaa(f) { a=confirm("all okay"); alert(a) if(a) form.ss.value='yes' else form.ss.value='no' } </script> <form> <input type="button" value="Press Me" onClick="aaa(form)"> <input type="text" Name="ss" size=9 >

</form> Click on the button and the confirm box appears. When clicked on OKAY or CANCEL in the confirm window, an error saying form not defined pops up. The error is displayed for form because form is understood by html syntax and not by the script language. Program 27 <script> document.writeln("<h1>Hello</h1>") function aaa(f) { a=confirm("all okay"); alert(a) if(a) f.value='yes' else f.value='no' } </script> <form> <input type="button" value="Press Me" onClick="aaa(ss)"> <input type="text" Name="ss" size=9 > </form> The button when clicked on shows the confirm box . OKAY or CANCEL will show an error statement of 'ss not defined' .The reason behind it is that one object cannot refer to the other object directly. ss is the variable name for the text box but the button cannot refer/use it inspite of it being the elements of the same form. Program 28 <script> document.writeln("<h1>Hello</h1>") function aaa(f) { a=confirm("all okay"); alert(a) if(a) f.value='yes' else f.value='no' } </script> <form> <input type="button" value="Press Me" onClick="aaa(form.ss)"> <input type="text" Name="ss" size=9 > </form> This is the modification to the previous program showing how one object can refer to the other using the form. The confirm box gets displayed to the click on the button.

The aaa function has for.ss as the parameter which the variable f now refers to.Again f refers not to the form but to the object referred to by ss in the form When clicked on OKAY or CANCEL Output in the edit box shows either a 'yes' or a 'no'. Program 29 <script> document.writeln("<h1>Hello</h1>") function aaa(f) { a=confirm("all okay"); alert(a) if(a) f.ss.value='yes' else f.ss.value='no' } </script> <form> <input type="button" value="Press Me" onClick="aaa(this.form)"> <input type="text" Name="ss" size=9 > </form> this.form is the form containing the cuurent object i.e button. It is very much similar to passing 'form' to the aaa as seen in one of the above examples .The changes in the edit area depend upon the button clicked in the confirm box. Program 30 <script> function bbb() { alert("hi") } function aaa(f) { alert(f.bb.checked) f.bb.checked=false } </script> <form> <input type="button" value="Press Me" Name = ss onClick="aaa(this.form)"> <input type="checkbox" Name="bb"CHECKED > </form> As the button , text ...are object to be used in the form , a checkbox can also be displayed. Giving the type as checkbox, the memory name as bb and marking it CHECKED, the html file will show a tick mark on the document. function aaa has f which refers to the form . f.bb.checked property returns true or false depending upon the state of the checkbox. Whatever it may be , the checkbox is then unticked.

Program 31 <script> function bbb() { alert("hi") } function aaa(f) { alert(f.bb.value) f.bb.checked=true } </script> <form> <input type="button" value="Press Me" Name = ss onClick="aaa(this.form)"> <input type="checkbox" Name="bb"CHECKED VALUE="off" onClick="bbb()" > </form> Click on the button and the alert box shows the value as 'off'. The checked property when assigned to true will check the box. Whether the checkbox is checked or unchecked the value remains off but if the value clause is omitted in the syntax, the alert will show it as on. The alert showing hi is displayed first when clicked on the checkbox, and then the state of the box changes. Program 32 <script> function aaa(f) { alert(f.qq.options) } </script> <form> <input type="button" value="Press Me" onClick="aaa(this.form)"> <select name="qq"><option selected>hell<option>hello<option>hi <option>Goodbye </select> </form> As there are checkboxes, button ...,a listbox with options can be displayed too. The syntax says that hell from the list of options will be the default text displayed. The form is passed as the parameter to the aaa() to refer to qq . The option property of the listbox displays the settings of the variable qq. So even when the size clause has not been specified in the select, along with the syntax ,we see the size displayed as 1. Program 33

<script> function aaa(f) { if (f.qq[0].selected) alert("one"); if (f.qq[1].selected) alert("two"); if (f.qq[2].selected) alert("three"); if (f.qq[3].selected) alert("four");

} </script> <form> <input type="button" value="Press Me" onClick="aaa(this.form)"> <select name="qq"><option selected>hell<option>hello<option>hi <option>Goodbye </select> </form> On the screen with a button having Press Me as the label , a drop down list box is also displayed. The select clause in the form makes hell as the default selected item of the list.qq is the name for the list box.Hell is the first item or the zeroth element of the list box which is selected. If now clicked on the button, the output will be one as the selected property shows true .Select another item from the list and click on the button the output changes depending upon which element /object of the list box has been selected. Program 34

<script> function aaa(f) { for (i in f) alert(i) } </script> <form> <input type="button" value="Press Me" onClick="aaa(this)"> </form> f stands for an object or to be more specific a button.Every object has properties and methods. i will refer to the property in the object f. f looks like button so i will now hold the property names that the button has. alert(i) will display the property name in the alert window. Program 35 <script> function aaa(f) { for (i in f) { j = "name.."+i+"..value.."+f[i] alert(j) } } </script> <form> <input type="button" value="Press Me" onClick="aaa(this)"> </form> Output: f stands for the object button.i refers to the property name f[i] will display the assigned value to the property This value is displayed in the alert box along with the property name. Program 36 <script> function aaa(f) { for (i in f) { alert(i) } } </script> <form> <input type="button" value="Press Me" onClick="aaa(form)"> </form>

f is now the form object .i stands for the properties in the form. alert shows the property names that a form contains. Program 37 <script> function aaa(f) { for (i in f) { alert(i) } } </script> <form> <input type="button" value="Press Me" onClick="aaa(history)"> </form> f refers to the history object .i will be for the properties in the history. Program 38

<form> <input type="button" value="Press Me"> <input type="text" Name="ss" value="aa" size=9 > <input type="button" value="hello" Name="jj"> </form> <script> document.writeln(document.forms[0].jj.name) document.writeln(document.forms[0].ss.value) document.writeln(document.forms[0].elements[0].name) document.writeln(document.forms[0].elements[0].value) </script> The Output for the Program jj aa

Press Me The first form is the zeroth form of the document. In the first form of the document the name for jj object(i.e the third statement ) is jj. The value given for the ss object which is the text box is aa There is no name give to the first element in the form so no output. And the value for the first element in the form is displayed as "Press Me" Program 39 <script> function aaa() { a = new zzz } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> Error: zzz is not defined There is no object called zzz Program 40 <script> function aaa() { a = new zzz } function zzz() { alert("in zzz") } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> The function zzz is now an object in the document.a gets initialised to the object zzz and can now refer to the variables of it The statement a = new zzz could very well be written as a = new zzz(). Both mean the same calling the zzz().Alert box shows 'in zzz'. a can be used to work with the variables of the zzz function. Program 41 <script> function aaa() { a = new zzz alert(a.i) a.i = "Hell"

alert(a.i) } function zzz() { } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> The first Output says undefined for the value of a.i a.i is a new variable holding the value of Hell. So, the next alert box shows hell as the output for a.i. Program 42 <script> function aaa() { a = new zzz alert(a.i) a.i = "Hell" alert(a.i) b = new zzz; alert(b.i) a.j="Good" alert(b.j) } function zzz() { this.i = "hi" } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> The Output is as follows in the alert box. Hi Hell hi undefined In the aaa function, a looks like zzz. Program 43

<script> function aaa() { a = new zzz alert(a.i) a.i = "Hell" alert(a.i) b = a; alert(b.i) a.j="Good" alert(b.j) } function zzz() { this.i = "hi" } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> The Output is as follows in the alert box. Hi Hell Hell good Program 44 <script> function aaa() { a = new zzz("Hi","Bye") alert(a.i) alert(a.j) b = new zzz("Good","Bad") alert(b.i) alert(b.j) } function zzz(x,y) { this.i = x this.j = y } </script> <form>

<input type="button" value="Press Me" onClick="aaa()"> </form> The Output is as follows in the alert box. Hi Bye Good Bad Program 45 <script> function aaa() { a = new zzz("Hi") alert(a.i) a.i = "Bye" b = new zzz("Hell") alert(b.i) a.aa() b.aa() ooo(); alert(a.bb()) } function zzz(p) { this.i = p this.aa=ooo this.bb=ppp } function ooo() {alert("In ooo") } function ppp() { return "Bad" } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> The Output is as follows in the alert box. Hi Hell

In ooo In ooo In ooo Bad Program 46 <script> function aaa() { a = new zzz("Hi") b = new zzz("Bye") a.cc("Good") b.cc("Very Bad") a.cc(100) } function zzz(p) { this.cc = ooo } function ooo(z) {alert(z) } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> The Output is as follows in the alert box. Good Very Bad 100 Program 47 <script> function ooo() { return "bad" } function zzz(a,b) { this.aaa = a this.bbb = b this.ccc = ooo

} function aaa() { a = new zzz(1,"hi") alert(a.ccc()) } </script> <form> <input type="button" value="Press Me" onClick="aaa()"> </form> The Output is as follows in the alert box. bad Program 48 <script> function aaa() { a = 10+20 alert(a) b = "Hi" + "Bye" alert(b) c = 10+"20" alert(c) d = "10" + 20 alert(d) e = 10+"Hi" alert(e) f = "10" + "20" alert(f) } </script> <form> <input type="button" value= "Press me" onClick="aaa()"> </form>

Output 30 HiBye 30 1020 error: Hi is not a numeric literal

does not get displayed but if the order is changed displays 1020 Program 49 <script> function aaa() { a = new zzz alert(a[0]) a[0]="Hello" a[1]="Hi" alert(a[1]) } function zzz() { } </script> <form> <input type="button" value= "Press me" onClick="aaa()"> </form> Output null Hi Program 50 <script> function aaa() { a = new zzz(4) alert(a.l) for(i=0;i<4;i++) alert(a[i]) } function zzz(i) { this.l = i; alert(i); for(j=0; j<i;j++) { this[j] = j; } } </script> <form> <input type="button" value= "Press me" onClick="aaa()"> </form>

Output: 4 0 0 1 2 3 Program 51 <script> function zzz(x,y) { this.aaa = x this.bbb = y } function aaa() { a = new zzz(1,"hi") alert(a["bbb"]) alert(a[0]) alert(a[1]) } </script> <form> <input type="button" value= "Press me" onClick="aaa()"> </form> Output: hi 1 hi


				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:177
posted:11/29/2009
language:English
pages:28
Jun Wang Jun Wang Dr
About Some of Those documents come from internet for research purpose,if you have the copyrights of one of them,tell me by mail vixychina@gmail.com.Thank you!