How to install JavaScrips…

Here is some more information about JavaScripts and how to install them.

Getting your Web page to respond or react directly to user interaction with form elements is the main purpose of a JavaScript-program.

“Why JavaScript?” - you say.
“I have powerful CGI and PHP scripts on my server!”.

Well…

Why JavaScript?

Do you need to open a PopUp or PopUnder window when your website visitor enters or leaves your site?

Do you need to validate a form before it’s submitted to a server?

Only a JavaScript-program can help you in this cases.

Only a JavaScript-program can detect user activity and react with tasks you need. CGI and PHP scripts cannot.

Only a JavaScript-program can recognize your web page loading and open a PopUp or PopUnder window. CGI and PHP scripts cannot.

A JavaScript-program has the ability to process many other events such as a selection of list-items or filling out forms. CGI or PHP can do neither of these things.

Also, JavaScript is suitable for form validation before sending the information gathered to server. CGI or PHP can only do this after.

What makes JavaScript so special?

JavaScript-programs can function from within the content of the HTML pages it’s placed within. This sets it apart from applets or CGI and PHP scripts which only operate from outside of the HTML of the page.

So where within an HTML-document should your JavaScript code be placed?

Where should your JavaScript code be placed?

Any time you include JavaScript code in an HTML-document you must enclose the code within a <script>...</script> tag pair. In most cases JavaScripts already have these in place for you.

JavaScripts can occupy any of place within an HTML-document with the exception of event-handlers. (An event-handler can control events such as a button click, a completed form submission, a page loading etc.)

The main part of JavaScript-program is placed inside the <head>...</head> tag pair in the HTML of your page. This is because the HEAD-section of a document is read first whilst the page loading.

By doing this, all JavaScript functions will be loaded at the moment the BODY-section of the HTML page starts loading.

Although it’s better to place JavaScript code inside the <head>...</head> tag pair, JavaScript code can be placed anywhere inside the HTML where it’s needed.

Here’s an example of a JavaScript-program in action within an HTML document…

<html>
  <head>
    <script language="JavaScript" type="text/javascript">
    <!--
      function myFunction() {
        alert("Hello world!");
      }
    //-->
    </script>
  </head>
  <body>
    Page content.

    The instant script here:
    <script type="text/javascript">myFunction()</script>

    Footer of the page.
  </body>
</html>

The first thing a web browser will seen when looking at this page is this… language="JavaScript" at the script-tag.

This attribute is used for browsers compatibility.

Then after this the HTML-comment <!-- ... //--> tag pair is used.

Here’s another way JavaScript can be used to help speed up the load time of your HTML documents.

Save your JavaScript in a separate file

You can save your JavaScript in a separate file and use it with as many pages as you like.

The file which contains the JavaScript must have a .js extension.

In order to link to the external JavaScript file use a src-attribute like this…

<script type="text/javascript" src="external.js"></script>

You can even use a script-file on another server like this…

<script src="http://ShareDomain.com/scripts/shareScript.js">
</script>

 

Here’s a more detailed explanation on how JavaScript works…

Event-Handlers

You can connect the occurrence of an event to some function that carries out tasks for that event. Events are said to be bound to an element. You instruct an element to be on the lookout for an event of a particular type that comes its way. For example, you can instruct a button to respond to a mouse click on it, while all surrounding elements ignore clicks on them.

Syntax for event binding takes on many forms, but the basic task for the scripter is to assign a function to a particular event of a particular element. The assignment statement is called an event handler. Thus, when the user clicks on a button that has pre-assigned the handleClick( ) function to the click event, that event handler function runs whenever the user clicks on the button.

Each HTML-tag has a predefined number of events. When you refer to an event in your scripting, you typically use a one-word reference that is the name of the event preceded by on. Therefore, when a button receives a click event, it looks to see if it has an onclick event handler assigned to it; if so, the event handler function starts executing immediately.

<input type="button" value="ClickMe!" onclick="myFunction()">

<img src="grayDot.gif"
  onmouseover="this.src=redDot.gif"
  onmouseout="this.src=grayDot.gif">

Form Validation

A traditional HTML form submits its data to a program running on the server. Client-side form validation is a helpful service that speeds the correction of potential errors in forms before they ever reach the server.

That is not meant to imply that client-side validation can replace server-side validation, far from it.

But, like most JavaScript programs, client-side validation helps your users be more efficient when filling out complex forms.

JavaScript helps you to catch any missed or passed text boxes with a validation right before the form gets submitted. This offers a last-chance review of data before sending it to the server.

A JavaScript routine is used by the validation triggered by the onsubmit event of the form object.

Submission is aborted if the event handler evaluates to return false.

Include the return statement in the event handler assignment, and let the validation function supply the Boolean value based on its findings:

<form ... onsubmit="return validateForm(this)">
  <input name="name">
  <input name="email">
</form>
<script language="JavaScript" type="text/javascript">
<!--
  function validateForm(theForm) {
    if (theForm.name == "" || theForm.email == "") {
      alert("Please fill all fields out.");
      return false;
    }
    else
      return true;
  }
//-->
</script>

Page Loading

When a new page loads into the browser, you want to execute script statements to open your PopUp window.

The onload event of the window object fires after all content and processes coded in the HTML have finished loading and self-initializing. Use this event to trigger your function.

All scriptable browsers support the following syntax:

<html>
<head>
  <script language="JavaScript" type="text/javascript">
  <!--
    function myPopupFunction() {
      window.open("Popup.html", "popup",
        "menubar=no,resizable=no");
    }
  //-->
  </script>
</head>
<body onload="myPopupFunction( )">
...
</body>
</html>
by Michel Komarov, © Copyright 2004. iCoder.com

 

Share in social bookmarking:These icons link to social bookmarking sites where readers can share and discover new web pages.  digg del.icio.us BlinkList Reddit NewsVine YahooMyWeb co.mments

Got a question?   Leave a Reply

You must be logged in to post a comment.