Scripting: Scripts are programs that are imbedded within web documents and run by the browser. Scripting is one of the essential components of Dynamic HTML. JavaScript is currently the most popular scripting lanuage. VBScript is another scripting language based on Visual Basic.

JavaScript: JavaScript is a client-side scripting language that adds interactivity and conditional behavior to web pages. JavaScript is an interpreted language widely supported by browsers.

Standards: JavaScript implementations for each browser differ. Navigator develops and uses JavaScript. Explorer has a version called JScript. The European Computer Manufacturers Association (ECMA) in Geneva Switzerland attempted to develop an official standard called ECMAScript in 1998. However the dependence of JavaScript on proprietary browsers means different versions exit.

history info

 

Java vs. JavaScript: Despite the similarities in name, Java and JavaScript are different. Java is a compiled programming language. Java programs are contained in separate binary files. JavaScript is an interpreted language. JavaScript code is placed as text directly in an HTML document. A browser must contain a JavaScript interpreter to run scripts.

Uses of JavaScript: JavaScript greatly increases the functionality of web pages. With JavaScript, web pages can be programmed to perform many interactive and dynamic tasks:

Basics: Javascript applications have two parts: the functions that tell the browser what to do and references to these functions. The functions (JavaScript code) are defined within the <SCRIPT> tag usually in the document header <HEAD>. The references to them are included with the HTML in the document body <BODY>. JavaScripts placed within the body directly affect the web page.

script 1 script 2 script 3

 

Syntax: Javascript programs are placed inside the <SCRIPT> tag. The LANGUAGE attribute specifies the scripting language (e.g. JavaScript, VBScript). The entire contents is typically placed within HTML comment tags so that browsers that can't handle JavaScript will not display the code. A function may take arguments that affect the way it runs. A function consists of a declaration (name and arguments) and the code (between curly brackets). Comments are placed within scripts after a double slash (//). JavaScript is case sensitive. The <NOSCRIPT> element is used for browsers that don't use scripts.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
  //comment giving description of function
  function fname(arguments){
     -----
     -----
  }
//-->
</SCRIPT>

</HEAD>

<BODY>

<A HREF="javascript:fname(argvalues);">linkname</A>

<NOSCRIPT>
Your browser doesn't support JavaScript.
</NOSCRIPT>

</BODY>

JavaScript Objects, Methods and Properties: JavaScript is an object-based language. This means that it comes with a number of predefined objects that can be operated on, for example "document," "window," "frame" and "form" are some objects. Other objects can be created. Methods are the means to act on objects. They are appended to an object's name following a dot. For example document.write writes text to the current document and window.open opens a new browser window. Properties hold settings of objects. For example document.bgcolor is the background color of the current document and window.location holds the URL of the current page.

<SCRIPT LANGUAGE="JavaScript">
<!--

//writes to current document
//a JavaScript method
function printname(name){
    document.write(name);
}

//sets background color of current document
//a JavaScript property
function backcolor(color) {
    document.bgColor=color;
}

//-->
</SCRIPT>

JavaScript Events: JavaScript uses events, such as mouse clicks, to know when a user action requiring a response has occurred. Events include onMouseDown, onMouseOver, onMouseUp, onClick, onLoad, onResize.

event1 event 2

 

JavaScript Language: JavaScript, like any programming language, has a variety of structures including functions, looping (e.g. do..while and for ...), conditionals (e.g. if ... else ... ), variables, data structures (e.g. arrays) and operators (e.g. arithmetic, relational, logical).

Some Examples: Following are a few examples of JavaScript.

Writing to Status Bar: A simple use of JavaScript is to write a message to the browser's status bar. This is useful for displaying information when the mouse moves over a link or clicks on an element.

<form>
  <input type="button" name="sbar" value="status bar"
  onClick="window.status='This is how you write to the status bar by clicking on a button';return true">
</form>

<img src="images/malevich4.gif" width="60" height="115"
  onMouseOut="window.status=' ';return true"
  onMouseOver="window.status='This is how you write to the status bar
  by moving over an image'; return true">

Rollovers: JavaScript can be used to create interactive or rollover buttons that change as the cursor is moved over them. Rollovers are used to add visual effects to links or to pop up graphics with additional information.

<a href="javascript.htm#rollover" onMouseOut="MM_swapImgRestore()"
  onMouseOver="MM_swapImage('malevich1','','images/malevich1.gif',1)">
<img name="malevich1" border="0" src="images/malevich2.gif" width="60" height="115">
</a>

 

rollovers

 

Opening a New Window: JavaScript can be used to open new windows with specific parameters such as size, location, scrollbars, status bar.

function openWindow(theURL,winName,features) {
    window.open(theURL,winName,features);
}

<a href = "javascript:openWindow('images/kandinsky.gif','kandinsky1',
  'width=235,height=215,scrollbars=no')">
kandinsky1
</a>

<a href = "javascript:openWindow('images/kandinsky.gif','kandinsky2',
  'width=235,height=215,scrollbars=no,left=300,top=200,status=yes,
  toolbar=yes,menubar=yes,resizable=yes')">
kandinsky2
</a>

kandinsky1 kandinsky2 and closing

 

Managing Frames: JavaScript can be used to load content into frames. It is especially useful for loading several frames at once.

function loadFrames (leftURL, mainURL) {
    parent.left.location.href=leftURL;
    parent.main.location.href=maintURL;
}

<a href="javascript:loadFrames('newleft.html','newmain.html');">linkname</a>

Clocks: JavaScript clocks.

simple clock digital clock

 

Getting and Displaying Information: JavaScript can be used to obtain information from users and systems and display it in browser.

prompt client info

 

Basic javascript: A few examples of the javascript language.

conditional value for loop