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

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>