Website Hosting Tutorials

Tutorials

Javascript - Overview

On this page:

Javascript
Java and Javascript - are they the same?
Things to do with Javascript
What can Javascript do?
Event Handling with Javascript
The First Script
Form Validation with Javascript
Using External Javascript Files
Benefitsof using Javascript
Limitations of using Javascript

JavaScript

JavaScript is a scripting language, a complete but lightweight programming language. It is usually embedded directly into HTML pages. While the power of HTML is limited within static web pages, using JavaScript can make these pages dynamic and more elegant. It increases the aesthetics and friendliness of website by adding author specified user events to the static pages.

JavaScript shares the fundamental features of all programming languages. It can get data from some source, process that data and output the results. JavaScript is integrated into HTML and because of this the script already knows what the browser knows, and can figure out how many elements are there on that particular web page and how many frames have been used in it. It also knows how to work in such environment and can perform these frame-specific tasks.

back to top

Java and JavaScript - are they same?

JavaScript is not Java; the two are completely different languages - in both concept and design. While Java is a complex programming language, JavaScript is a simple scripting language.

back to top

Things you can do with JavaScript

JavaScript lets you do many things - you can control a page, open and close windows and frames, programmatically access the history window and other browser features. You can also make the images swap when you mouse over on them, make the form elements influence each other on the fly, and the calculations can be done without having to resort to a CGI script. There is nothing like submit and then wait for the web server’s response - everything happens on your web page while you are playing with it. Moreover, with JavaScript you can provide feedback to your user, generate new HTML pages using variable information and implement user-defined functions.

The most interesting part of using JavaScript is that you can do a great deal with very little programming. You don’t even need a fancy computer or access to web server; you only need a word processor and web browser - the work is done right from your own computer.

back to top

What can JavaScript do?

JavaScript offers HTML designers a programming tool, which the HTML authors can easily use without mastering any programming language. Almost anyone can put small snippets of JavaScript codes into HTML tags and execute it.

JavaScript can incorporate dynamic text into an HTML page. For instance:

It can write a variable text into an HTML page.

JavaScript can react to events like when page finishes loading or when user clicks on an element. Moreover, JavaScript can validate data before submitting it to the server. JavaScript can also detect visitor’s browser and depending on the browser’s nature loads another page.

back to top

Event Handling with JavaScript

At present JavaScript allows five types of event handling:

Anchor events - associated with hyperlinks
Document events - associated with document loading and exiting
Element events - associated with elements
Form Events - associated with form events
Window Events - associated with multiple browser windows

You can visit the link http://docs.rinet.ru/Nt4Web/ch20.htm to know about JavaScript data type values, useful JavaScript operators, JavaScript expressions and JavaScript events.

back to top

The first script

Like HTML, JavaScript uses open and close tags. A bare bone script consists of only two tags -
<SCRIPT> and </SCRIPT>. The actual JavaScript code falls within this tag.

The opening tag should appear like this:

…………….JavaScript Code…………

</SCRIPT>

You can have as many <script> tags as you need throughout the body of your HTML document, as if it were a normal tag. However, don’t forget to close each tag as you go on. Also, if you are going to use JavaScript functions, you will need to place them inside <head> and </head> tags of your document. This helps in loading the functions before the page begins to display; you can also avoid all kinds of JavaScript errors.

For example,

<HEAD>
<TITLE>Univite Health Care</TITLE>

<SCRIPT language="JavaScript">

function compare()
{
JavaScript Stuff...
}

</SCRIPT>

</HEAD>

back to top

Form Validation with JavaScript

JavaScript is a strong tool for validating forms before sending the content or text of that form to the server. The following example shows how JavaScript does form validation from client side.

In the form displayed below, while providing information about password, if the value of Password field and Confirm Password field does not match, then you get a message - “Password confirmation failed”.

Javascript Example

The above validation is done using a simple function called Compare(). This function is included inside the script tag like this:

<HEAD>
<TITLE>Univite Health Care</TITLE>
<SCRIPT language="JavaScript">
function compare()
{
if(IsEmpty('document.all.txtRePassword','Please confirm password.','document.all.spnReqConfirmPassword'))
{ return false; }
else if(document.all.txtRePassword.value != document.all.txtPassword.value) { document.all.spnReqConfirmPassword.style.visibility='visible'; document.all.spnReqConfirmPassword.innerText='Password confirmation failed.';
return false; }
}
</SCRIPT>
</HEAD>

You can also add another script tag for checking if the password is of six characters or not. You only need to call the ChkValue() function to do this.

<HEAD>
<TITLE>Univite Health Care</TITLE>
<SCRIPT language="JavaScript">
function compare()
{
if(IsEmpty('document.all.txtRePassword','Please confirm password.','document.all.spnReqConfirmPassword'))
{ return false; }
else if(document.all.txtRePassword.value != document.all.txtPassword.value) { document.all.spnReqConfirmPassword.style.visibility='visible'; document.all.spnReqConfirmPassword.innerText='Password confirmation failed.';
return false; }
}
</SCRIPT>

<SCRIPT language=”JavaScript”>
function ChkValue()
{
if(trim(document.all.txtPassword.value).length < 6) { document.all.spnReqPassword.style.visibility='visible'; document.all.spnReqPassword.innerText='Minimum six characters long.';
return false;
}
}
</SCRIPT>
</HEAD>

This is how it is displayed when JavaScript checks the number of characters of password:

Javascript Example

There is no limit as to the number of scripts a page can contain. However, sometimes it happens that two working scripts are not working when put together. The reason is simple - script conflict. If there is any duplication in variable declaration, function name, or event handler access - the two scripts, or at least one becomes inoperative. However, though the possibilities are great, chances are not.

Many scripts are set to run after an event has occurred, such as the moving of mouse over a link or the completed loading of the document. The later is the most common, and takes the following two forms:

<body ONLOAD=”runscript()”>
window.onload=runscript //appears inside the script tag

back to top

Using External JavaScript files

If you have same JavaScript program appearing on several different web pages, using external files is the best option. All the pages can refer to the same script; you don’t need to write the same code again. In case you need to change the code, you only have to make changes in one place. Using external JavaScript files also keeps the size of your HTML file smaller and the code also appears neat and clean. Using an external file also makes maintenance to your site a breeze.

An external JavaScript file typically uses .js extension. This is how you can use an external file in JavaScript.

The external file includes only JavaScript statements. Here the name of the external file is script.js; HTML tags like <SCRIPT> or </SCRIPT> are not included in this external file. In the above example, it has been assumed that the script is located the script_files directory. Any page with the above tag can use any of the functions and variables listed in script.js file.

back to top

Benefits of Using JavaScript

Using JavaScript you can accomplish different types of tasks at the client side without interacting with a web server. Here are listed some of the significant benefits of using JavaScript.

Client side data validation
Managing browser objects (E.g. if a browser moves a mouse pointer over a hypertext link, the URL’s description is seen on the status bar of the browser)
Conserving bandwidth if used intelligently (JavaScript can validate data before any invalid data is sent to the web server for processing, and this saves bandwidth)
Conserving resources of the web server since JavaScript can perform various necessary operations that do not require access to information on a remote server

back to top

Limitations on JavaScript

Sometimes, JavaScript is not JavaScript. It turns out that different browsers deal with JavaScript differently. In fact, sometimes, different versions of the same browser handle JavaScript differently. Browsers prior to Netscape Navigator 2.0 do not support JavaScript; they do not recognize <script> tag. Rather than performing your JavaScript, they will display the text of your script, as if you meant it to be few lines of text on the screen. To avoid this problem, you can trick the browser into ignoring the text within the <script> tag. This can be done using HTML comment. The older browsers will ignore the text inside the comment while a JavaScript capable browser will go ahead and perform the tasks mentioned in the script.

This is how you can do this:

<!—Here you can provide your HTML comments that will hide the JavaScript from old browsers

......JavaScript Stuff.......

//--> This closes the comment section, the browser will not read the script and read on normally

</SCRIPT>

back to top

Website Hosting Guides - Using Javascript

Tutorials

Javascript - Overview

JavaScript