Learn how to work with JavaScript

JavaScript is a scripting language based upon Java and it is an Interpreted Language. You require only Notepad and a browser to program using JavaScript. There are two types of scripts.

They are Internal and external. While Internal scripts are written within the header of an HTML file, external scripts are saved in a separate file with extension js. They are then linked in an HTML document with the <script> tag’s src attribute. For example, if the file Myscript.js contains your codes, then it can be linked as follows:

<script language = "Javascript" src = "Myscript.js"></script> 

Hello World program

You can output to the browser document by using the statement given below:

document.write("Put your text here") 

Copy the code given below and save the file as Hello.html. Then fire up your browser and open Hello.html file to execute the program.

<HTML>
<HEAD><TITLE>My first JavaScript program</TITLE>
<Script language = "JavaScript">
document.write ("Hello World")
</Script>
</HEAD> 
<BODY></BODY>
</HTML> 

Using Prompt() and Alert() dialog boxes

Let’s now examine how to add two numbers using JavaScript. The program makes use of Prompt() dialog for accepting the values and Alert() dialog for displaying their sum. Follow the steps in the previous example to save and execute the program.

<HTML>
<HEAD><TITLE>Adding numbers using JavaScript</TITLE>
<Script language = "JavaScript">
<!-- Variable declaration -->
var x, y, z
x = prompt("Enter first number")
y = prompt("Enter second number")
z = eval(x+y)
alert("The sum of " +x+ " and" +y+ "is" +z)
</Script>
</HEAD> 
<BODY></BODY>
</HTML> 

Closing the current window using JavaScript

You can design a Web page, so that your users can exit (by clicking a button) from the current window without pressing the close button or by selecting File | Exit menu. Listing 3 illustrates this technique. The program makes use of functions. When a button or a link is clicked, the execution takes place by triggering appropriate event.

<HTML>
<HEAD><TITLE>Adding numbers using JavaScript</TITLE>
<Script language = "JavaScript">
function ok() { 
Window.close()
}
</Script>
</HEAD> 
<BODY>

<input type = "submit" value = "Click here to close"

onClick = "ok()">

</BODY>
</HTML>

Likewise, if you apply window.print() the current page will be printed provided user’s printer is not idle.

Form validation

Validation means checking the correctness of the HTML form fields. It will check whether the user had entered the required information. If not, the script will prompt the user to enter the relevant information to proceed further. Listing 4 explains this concept clearly. As usual try out the code below and observe the results.

<HTML>
<HEAD><TITLE>Adding numbers using JavaScript</TITLE>
<Script language = "JavaScript">
function validate() {
if(f1.tname.value == "") {
alert("Please enter your name")
tname.focus()
} if(f1.tage.value == "") {
alert("please enter your age")
tage.focus()
}
}
</Script>
</HEAD> 
<BODY>
<Form name = "f1">
<input type = "text" name = "tname" ><br>
<input type = "text" name = "tage"><br>
<input type = "submit" onClick = "validate()">
</Form>
</BODY>
</HTML>

One Response

Leave a Comment