Javascript Factory

Javascript : Mathematical Methods

2009-10-19T23:32:00.000-07:00

In addition to the mathematical constants that can be accessed from the Math object there are also several methods available.

The following example uses the round() method of the Math object to round a number to the nearest integer:

document.write(Math.round(4.7));

The code above will result in the following output:

The following example uses the random() method of the Math object to return a random number between 0 and 1:

document.write(Math.random());

The code above can result in the following output:

0.6936874867631697

The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10:

document.write(Math.floor(Math.random()*11));

The code above can result in the following output:

Javascript : Mathematical Constants

2009-10-19T23:31:00.001-07:00

JavaScript provides eight mathematical constants that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E.

You may reference these constants from your JavaScript like this:

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Javascript Math Object

2009-10-19T23:30:00.001-07:00

The Math object allows you to perform mathematical tasks.

Math Object

The Math object allows you to perform mathematical tasks.

The Math object includes several mathematical constants and methods.

Syntax for using properties/methods of Math:

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(16);

Note: Math is not a constructor. All properties and methods of Math can be called by using Math as an object without creating it.

Javascript Boolean Object

2009-10-19T23:29:00.000-07:00

The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

The Boolean object represents two values: "true" or "false".

The following code creates a Boolean object called myBoolean:

var myBoolean=new Boolean();

Note: If the Boolean object has no initial value or if it is 0, -0, null, "", false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string "false")!

All the following lines of code create Boolean objects with an initial value of false:

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

And all the following lines of code create Boolean objects with an initial value of true:

var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard");

Javascript : Modify Values in an Array

2009-10-19T23:28:00.000-07:00

To modify a value in an existing array, just add a new value to the array with a specified index number:

myCars[0]="Opel";

Now, the following code line:

document.write(myCars[0]);

will result in the following output:

Opel

javascript : Access an Array

2009-10-19T23:27:00.000-07:00

You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0.

The following code line:

document.write(myCars[0]);

will result in the following output:

Saab

Javascript : Create an Array

2009-10-19T23:26:00.000-07:00

The following code creates an Array object called myCars:

var myCars=new Array();

There are two ways of adding values to an array (you can add as many values as you need to define as many variables you require).

var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

You could also pass an integer argument to control the array's size:

var myCars=new Array(3);
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW");

Note: If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string.

Javascript Array Object

2009-10-19T23:25:00.000-07:00

What is an Array?

An array is a special variable, which can hold more than one value, at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

cars1="Saab";
cars2="Volvo";
cars3="BMW";

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The best solution here is to use an array!

An array can hold all your variable values under a single name. And you can access the values by referring to the array name.

Each element in the array has its own ID so that it can be easily accessed.

Javascript : Date Object

2009-10-07T06:39:00.000-07:00

Create a Date Object

The Date object is used to work with dates and times.

The following code create a Date object called myDate:

var myDate=new Date()

Note: The Date object will automatically hold the current date and time as its initial value!

Set Dates

We can easily manipulate the date by using the methods available for the Date object.

In the example below we set a Date object to a specific date (14th January 2010):

var myDate=new Date();
myDate.setFullYear(2010,0,14);

And in the following example we set a Date object to be 5 days into the future:

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself!

Compare Two Dates

The Date object is also used to compare two dates.

The following example compares today's date with the 14th January 2010:

var myDate=new Date();
myDate.setFullYear(2010,0,14);
var today = new Date();

if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}

Javascript : String Object

2009-10-07T06:36:00.000-07:00

The String object is used to manipulate a stored piece of text.

Examples of use:

The following example uses the length property of the String object to find the length of a string:

var txt="Hello world!";
document.write(txt.length);

The code above will result in the following output:

The following example uses the toUpperCase() method of the String object to convert a string to uppercase letters:

var txt="Hello world!";
document.write(txt.toUpperCase());

The code above will result in the following output:

HELLO WORLD!

javascript : Methods

2009-10-07T06:34:00.000-07:00

Methods are the actions that can be performed on objects.

In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters:

The output of the code above will be:

HELLO WORLD!

Javascript : Properties

2009-10-07T06:32:00.000-07:00

Properties are the values associated with an object.

In the following example we are using the length property of the String object to return the number of characters in a string:

The output of the code above will be:

Javascript : Object Oriented Programming

2009-10-07T06:31:00.000-07:00

JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types.

However, creating your own objects will be explained later, in the Advanced JavaScript section. We will start by looking at the built-in JavaScript objects, and how they are used. The next pages will explain each built-in JavaScript object in detail.

Note that an object is just a special kind of data. An object has properties and methods.

JavaScript Objects Introduction

2009-10-07T06:30:00.001-07:00

JavaScript is an Object Oriented Programming (OOP) language.

An OOP language allows you to define your own objects and make your own variable types.

JavaScript Guidelines

2009-09-22T04:30:00.000-07:00

Some other important things to know when scripting with JavaScript.

JavaScript is Case Sensitive

A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar".

JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions.

White Space

JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent:

name="Hege";
name = "Hege";

Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed properly:

document.write("Hello \
World!")
However, you cannot break up a code line like this:
document.write \
("Hello World!");

JavaScript Special Characters

2009-09-22T04:28:00.000-07:00

In JavaScript you can add special characters to a text string by using the backslash sign.

Insert Special Characters

The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.

Look at the following JavaScript code:

var txt="We are the so-called "Vikings" from the north.";
document.write(txt);

In JavaScript, a string is started and stopped with either single or double quotes. This means that the string above will be chopped to: We are the so-called

To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal:

var txt="We are the so-called \"Vikings\" from the north.";
document.write(txt);

JavaScript will now output the proper text string: We are the so-called "Vikings" from the north.

Here is another example:

document.write ("You \& I are singing!");

The example above will produce the following output:

You & I are singing!

The table below lists other special characters that can be added to a text string with the backslash sign:

Code	Outputs
\'	single quote
\"	double quote
\&	ampersand
\\	backslash
\n	new line
\r	carriage return
\t	tab
\b	backspace
\f	form feed

JavaScript Throw Statement

2009-09-22T04:26:00.000-07:00

The throw statement allows you to create an exception.

The Throw Statement

The throw statement allows you to create an exception. If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages.

Syntax

throw(exception)

The exception can be a string, integer, Boolean or an object.

Note that throw is written in lowercase letters. Using uppercase letters will generate a JavaScript error!

Example

The example below determines the value of a variable called x. If the value of x is higher than 10, lower than 0, or not a number, we are going to throw an error. The error is then caught by the catch argument and the proper error message is displayed:

<html>

<body>

var x=prompt("Enter a number between 0 and 10:","");

try

{

if(x>10)

{

throw "Err1";

}

else if(x<0)

{

throw "Err2";

}

else if(isNaN(x))

{

throw "Err3";

}

catch(er)

{

if(er=="Err1")

{

alert("Error! The value is too high");

}

if(er=="Err2")

{

alert("Error! The value is too low");

}

if(er=="Err3")

{

alert("Error! The value is not a number");

}

</script>

</body>

</html>

Javascript : The try...catch Statement : Example

2009-09-22T04:24:00.001-07:00

The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does nothing:

<html>

<head>

var txt=""

function message()

{

try

{

adddlert("Welcome guest!");

}

catch(err)

{

txt="There was an error on this page.\n\n";

txt+="Click OK to continue viewing this page,\n";

txt+="or Cancel to return to the home page.\n\n";

if(!confirm(txt))

{

document.location.href="http://www.w3schools.com/";

}

</script>

</head>

<body>

</body>

</html>

Javascript : The try...catch Statement

2009-09-22T04:23:00.000-07:00

The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.

Syntax

try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!

Example

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.description + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

JavaScript - Catching Errors

2009-09-22T04:21:00.000-07:00

When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.

The try...catch statement allows you to test a block of code for errors.

Javascript : onMouseOver and onMouseOut Events

2009-09-22T04:20:00.000-07:00

onMouseOver and onMouseOut are often used to create "animated" buttons.

Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected:

<a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');return false"><img src="w3s.gif" alt="W3Schools" /></a>

Javascript : onSubmit Event

2009-09-22T04:19:00.000-07:00

The onSubmit event is used to validate ALL form fields before submitting it.

Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

Javascript : onFocus, onBlur and onChange events

2009-09-22T04:17:00.000-07:00

The onFocus, onBlur and onChange events are often used in combination with validation of form fields.

Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:

<input type="text" size="30" id="email" onchange="checkEmail()">

Javascript onLoad and onUnload Events

2009-09-22T04:16:00.000-07:00

The onLoad and onUnload events are triggered when the user enters or leaves the page.

The onLoad event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.

Both the onLoad and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".

JavaScript Events

2009-09-22T03:28:00.000-07:00

Events are actions that can be detected by JavaScript.

Events

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.

Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A keystroke

Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs!

JavaScript For...In Statement

2009-09-22T03:25:00.000-07:00

The for...in statement loops through the elements of an array or through the properties of an object.

Syntax

for (variable in object)
{
code to be executed
}

Note: The code in the body of the for...in loop is executed once for each element/property.

Note: The variable argument can be a named variable, an array element, or a property of an object.

Example

Use the for...in statement to loop through an array:

Example

<html>
<body>

<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (x in mycars)
  {
  document.write(mycars[x] + "<br />");
  }
</script>

</body>
</html>

Javascript continue Statement

2009-09-22T03:23:00.001-07:00

The continue statement will break the current loop and continue with the next value

Example

<html>

<body>

var i=0

for (i=0;i<=10;i++)

{

if (i==3)

{

continue;

}

document.write("The number is " + i);

document.write("<br />");

}

</script>

</body>

</html>

Javascript break Statement

2009-09-22T03:22:00.000-07:00

The break statement will break the loop and continue executing the code that follows after the loop (if any).

Example

<html>

<body>

var i=0;

for (i=0;i<=10;i++)

{

if (i==3)

{

break;

}

document.write("The number is " + i);

document.write("<br />");

}

</script>

</body>

</html>

How To Load And Parse XML Data Without ActiveX

2009-09-16T07:57:00.000-07:00

A little known but cool feature of Internet Explorer is its support for XML data islands. Basically, you can embed some XML data in a page like this:

<html>
 <head>
  <xml>
   <root>Some dataroot>
  xml>
 head>

Even cooler, you can reference an external data source:

<xml src="data.xml">xml>

The classic “Ajax” way to load XML data involves a couple of ActiveX objects:

var http = new ActiveXObject("Microsoft.XMLHTTP");
http.open("GET", "data.xml", false);
http.send(null);
var xmlDocument = http.responseXML;

responseXML is a tricky beast, on most platforms it refers to an XML document. This means you can do things like access the root node through the documentElement property. Unfortunately this does not work on Internet Explorer:

alert(xmlDocument.documentElement);
// ==> [object Element] for Mozilla
// ==> null             for Internet Explorer

To create a true XML document for Internet Explorer you must use the responseText property and another ActiveX object to parse it:

var xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
xmlDocument.loadXML(http.responseText);

An easier way to achieve the same result without ActiveX is this:

var xml = document.createElement("xml");
xml.src = "data.xml";
document.body.appendChild(xml);
var xmlDocument = xml.XMLDocument;
document.body.removeChild(xml);

The code above will load and parse an external XML file. The resulting object is a true XMLresponseXML returned by the XMLHttpRequest document which can be treated the same as the object on other platforms.
The above code will only work on a local file system. When dealing with remote data you check the readyState property to ensure that the data has been fully loaded. You can also trap the onreadystatechange event as you would for the XMLHttpRequest object.

Enum : Enumerating JavaScript Objects

2009-09-16T07:46:00.000-07:00

Enumeration lies at the heart of DOM Scripting:

var lists = document.getElementsByTagName("UL");
for (var i = 0; i < lists.length; i++) {
  lists[i].className = "menu";
}

for (var i = 0; i < array.length; i++) {
  print(array[i]);
}

for (var key in object) {
  print(object[key]);
}

Us JavaScripters are forever writing loops like these. To ease the strain on our keyboards Mozilla recently introduced a handy forEach method for arrays:

array.forEach(print);

If you don’t understand the code above then go and read the documentation.

That’s fine for arrays but what about DOM node lists? That’s where most of our loop writing is concentrated. Fortunately, the clever Mozilla developers provide generic array methods to help us:

var lists = document.getElementsByTagName("UL");
Array.forEach(lists, function(list) {
  list.className = "menu";
});

Cool huh? The Array.forEach method treats any object passed to it as if it were an array. So long as that object has a length property then we are OK.

We can easily implement this method for non-Mozilla browsers:

// array-like enumeration
if (!Array.forEach) { // mozilla already supports this
  Array.forEach = function(object, block, context) {
    for (var i = 0; i < object.length; i++) {
      block.call(context, object[i], i, object);
    }
  };
}

I’ve been using this technique for enumeration quite a lot recently and I decided to extend the idea:

// generic enumeration
Function.prototype.forEach = function(object, block, context) {
  for (var key in object) {
    if (typeof this.prototype[key] == "undefined") {
      block.call(context, object[key], key, object);
    }
  }
};


// globally resolve forEach enumeration

var forEach = function(object, block, context) {
  if (object) {
    var resolve = Object; // default
    if (object instanceof Function) {
      // functions have a "length" property
      resolve = Function;
    } else if (object.forEach instanceof Function) {
      // the object implements a custom forEach method so use that
      object.forEach(block, context);
      return;
    } else if (typeof object.length == "number") {
      // the object is array-like
      resolve = Array;
    }
    resolve.forEach(object, block, context);
  }
};

This allows me to write loops without knowing what kind of object I’m dealing with:

function printAll() {
  forEach (arguments, function(object) {
    forEach (object, print); 
  });
};
// or
forEach (document.links, function(link) {
  link.className = "super-link";
});
// or
forEach ([1, 2, 3], print);
forEach ({a: 1, b: 2, c: 3}}, print);
// etc

Explanation

The global forEach function allows us to enumerate any object according to its type. If the object is array-like (has a length property) then we enumerate it like an array. All other objects are enumerated using the standard for var x in y mechanism.

When enumerating over objects, the discovered keys are compared against Object.prototype. If the key is defined on the Object object then it is not enumerated. That means that you cannot enumerate the built-in methods like toString and valueOf.

The global forEach function will delegate the enumeration of functions to Function.forEach. So, if you choose to enumerate over a Function object you will skip the built-in methods there too.

The Kick-Ass Bit

Although I’ve defined a forEach method on Function.prototype this is never called by the global forEach function (except when you are enumerating functions).

I’ve provided this as a bonus feature. Basically, by calling the forEach method on a function you can enumerate an object and compare the keys with that function’s prototype. That means that you will only enumerate custom properties of the object. An example is required:

// create a class
function Person(name, age) {
  this.name = name || "";
  this.age = age || 0;
};
Person.prototype = new Person;

// instantiate the class
var fred = new Person("Fred", 38);

// add some custom properties
fred.language = "English";
fred.wife = "Wilma";

Enumerate using the standard forEach method:

forEach (fred, print);
// => name: Fred
// => age: 38
// => language: English
// => wife: Wilma

Enumerate using the Person.forEach method:

Person.forEach (fred, print);
// => language: English
// => wife: Wilma

Note that the properties defined on the prototype are not enumerated in the second example.

AJAX : Introduction

2009-09-16T07:34:00.000-07:00

Asynchronous JavaScript + XML, is not a new technology or a new programming language. It is a term coined in 2005 by Jesse James Garrett, which describes a “new” approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and the XMLHttpRequest object. It is a new technique for creating better, faster, and more interactive web applications.

When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions. With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX is about better Internet-applications

Internet-applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop. However, Internet-applications are not always as “rich” and user-friendly as traditional desktop applications and most Web applications are slow and tedious. In the traditional Web application, the interaction between the customer and the server goes like this:

1. Customer accesses Web application

2. Server processes request and sends data to the browser while the customer waits

3.Customer clicks on a link or interacts with the application

4.Server processes request and sends data back to the browser
while the customer waits

5. etc…. There is a lot of customer waiting. It’s a model adapted from the Web’s original use as a hypertext medium.

How Ajax is Different

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something

Ajax Acts as an Intermediary

The Ajax engine works within the Web browser (through JavaScript and the DOM) to render the Web application and handle any requests that the customer might have of the Web server. The beauty of it is that because the Ajax engine is handling the requests, it can hold most information in the engine itself, while allowing the interaction with the application and the customer to happen asynchronously and independently of any interaction with the server.

Asynchronous

This is the key. In standard Web applications, the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back. With Ajax, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.

Improving HTML forms with Javascript

2009-09-16T07:16:00.001-07:00

Custom checkbox elements

This idea came about from AOL's use of image checkboxes in the recently launched version of their WebMail product as a means of selecting email messages rather than standard checkboxes. The images you see are inserted after each input element who's type attribute is "checkbox" for every form found in the document. The original checkbox has its display set to "none" and all events that are assigned to that checkbox are then assigned to the image. The images are given alt attributes that describe their current status as well.

Scrollable checklists

An alternative to the select element with enabled multiple attribute. Enjoy scrollable checklists without all the hassle of worrying about deselecting previously-selected options.
This script is compatible with: IE 5.0+, Firefox 0.8+ for Win32 platform and Safari 1.2+, IE 5.2, Camino 8.2+, Netscape 7+, OmniWeb 4.1+, iCab 3.0+ for Apple Macintosh platform.

JotForm

JotForm is web based WYSIWYG form builder. You can design forms to use somewhere else or design forms and let this service collect the data for you as well. Solution is completely free. JotForm requires a javascript and cookies enabled browser. Currently it is completely tested on Firefox and Internet Explorer.
DESCR

Styled Form Controls

Typically, textareas, buttons and text fields have been easy enough to style and the functionality to use images as buttons is inherant to HTML. The styled form controls needed to be dynamically inserted into the page using a javascript. No javascript, no change.
formStyle has been tested in the following browsers: Internet Explorer 7 (Beta 1), 100% Compatibility, some cosmetic flicker issues when toggling controls. Mozilla Firefox 1.0.6 - Full compatibility. Netscape Navigator 7.2 - Full compatibility. Netscape 6.0 - Full compatibility. Minor CSS-styling fault in BigOrb example. Opera Browser 8.0 - Full compatibility.

CRIR: Checkbox & Radio Input Replacement

This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = "crirHiddenJS", an id, and a proper label tag.
This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. If javascript is disabled no inputs will be hidden and the form is still be fully functional.

wForms - A Javascript Extension to Web Forms

wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.

Niceforms

Since normal input fields (including radio buttons, checkboxes, textareas, etc) can only be styled to a small degree, we'll just go ahead and hide them while replacing their visual appearance with our own custom look.
It works great in Mozilla(Win) and IE6. There are some display issues on IE5.x and Opera that can be corrected in the next version.

Really easy field validation with Prototype

Robust javascript validation library that is simple to implement and didn't require do any extra work other than creating the form. It is easy with Prototype.

Multi-threaded execution of code. Javascript threads.

2009-09-16T07:14:00.001-07:00

Narrative JavaScript
Narrative JavaScript is a small extension to the JavaScript language that enables blocking capabilities for asynchronous event callbacks. This makes asynchronous code refreshingly readable and comprehensible.

Javascript With Advanced Continuation Support
Asynchronous operations written in a synchronous style: Traditional Ajax applications require the programmer to either write a maze of event handlers, or to provide only extremely simple and idempotent operations. Jwacs provides library functions that make asynchronous operations such as an XMLHttpRequest appear synchronous.

JsLINB - Javascript framework of LINB
LINB(Lazy Internet and Browser) is designed to allow developers coding in a more targetable, clearly, and efficiently way, which is platform-independent, language-independent, and C/S, B/S, RIA compatible.
Thread feature: javascript thread implementation that can control the sequence of asyn functions.

Concurrent XML Queries with AJAX
Solution that would reduce the wait time, but second reduce the amount of data shown to the user, as it is mostly similar data consolidating and filtering the data before returning it to the user is essential. Some sort of threaded model similar to the observer/observable model, where each XML query is launched on its own 'thread'.

Javascript Autosuggest and Autocomplete Examples

2009-09-16T07:12:00.001-07:00

AutoComplete from phpguru.org

A Javascript library which provides an autocomplete dropdown which you can attach to one or more form inputs (typically text inputs, or textareas). It functions the same as the Internet Explorer autocomplete dropdown, and works on MSIE, and Firefox (tested on IE6, 5.5 & 5 and Firefox 1.0.1).

WICK AutoComplete

This is WICK, the Web Input Completion Kit, an evolving framework that leverages web standards such as JavaScript, DOM and CSS to facilitate textual input in form UI elements assisted by local and remote data sources. This framework strives to remain unobtrusive and preserve a form's semantics and accessibility.

Script.aculo.us Autocompleter

Easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. It's an add-on to the Prototype framework. Autocompleting text fields with this library is very easy.

BComplete Autosuggest Script

BComplete is an autocomplete (or auto-suggest, perhaps) script for web applications, similar to what Google and Yahoo employ in some of their online programs.

Autocompletition by Wiseguysonly

Ajax autocompletion for the impatient. Making input fields that attempt to second guess what your user is typing based on live data. This is the PHP mix, but it is presented out-of-depth enough to make it easily extensible into the language of your choice (e.g. ASP, ColdFusion, Perl, Ruby etc).

Autocomplete control from Momche

To use this script the INPUT field's tag, which will be autocompleted should have an attribute autocomplete. Tested with: IE 5+, Mozilla (NS 6,7)

AutoSuggest: An AJAX auto-complete text field

The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).

Ajax dynamic list

This script shows you a list of options based on what you type into a text input. Example: Type in "A" and Ajax will get you a list of all contries starting with "A".

AutoSuggest

An attempt at a simple method for javascript-based suggestion dropdowns for autocompletion. Text input fields with customized automatic completion have lots of great uses. This script is an attempt at providing a solution to the problem that is clear and modular enough to be easily hacked up and modified for other uses.

XMLHttpRequest Autocomplete
Type the first few letters of an english word in the text field and pause for a second. You can use the arrow keys and mouse to navigate the list of suggestions. Tab, enter, or clicking will replace the contents of the text field with the selected entry from the list.

GMail-style text completion for text input elements
This implementation works for recent versions of Mozilla, Firefox and Internet Explorer. Simply type a character or two. After a (customisable) delay, a remote database will be queried for suitable completions, these completions will be presented to you in a drop-down style box. Make your selection with the Up/Down keys followed by Enter.

Nitobi AJAX components demo
The Ultimate Ajax-powered Autocomplete Solution. Featuring six unique search modes with support for multiple platforms and browsers. Perform paging, suggestive searching, and fuzzy-searching in an easy-to-implement interface.

Capxous framework

The most elegant AJAX autocomplete component in community User types in text field. JavaScript makes the retrieval URL then sends an AJAX request. JavaScript shows suggestion list received from the server side.

Javascript Calendars

2009-09-16T07:09:00.000-07:00

JS Calendar from Dynarch

Open-source javaScript calendar. Look is customizable through external CSS; translated into many languages; allows multiple days selection. Fast and very easy to setup.

jCalendar by Ted Serbinsky

Inline dynamic calendar built with jQuery. It originally started off based on the great jQuery date picker by Kelvin Luck but has quickly morphed into its own code base. jCalendar v0.5 can be used with 3 form selects (one for day, month, and year) to visually select a specific date for input.

jQuery UI Datepicker

Project gained traction in late 2006, when it was first released. Now the project has well over 35 customization options and counting. The datepicker is also in around 30 languages, showing its adoption worldwide.

jQuery date picker plug-in

A flexible unobtrusive calendar component for jQuery. Change the date format and first day of the week displayed for the date picker, select multiply dates, control the look and behaviour of the rendered calendar. You can also use this script as two date pickers together so that the date selected in one influences the dates that can be selected in the other. More than 10 demos available for this script.

Epoch DHTML Calendar

Change the date format and first day of the week displayed for the date picker, select multiply dates, control the look and behaviour of the rendered calendar. You can also use this script as two date pickers together so that the date selected in one influences the dates that can be selected in the other.

Dynamic Date Selector

A visually attractive dynamic date selector for form input fields. When the user clicks on a input field, the calendar will pop to let the user easily select a date value to enter. Script tested and works on Firefox, Internet Explorer, Netscape, Opera.

Events Calendar

An Events Calendar script that, along with the current month calendar, displays important events for specific dates. Click on a relevant date, and a description of the event associated with it is shown. The events are stored in an external .js file. This script is compatible in both IE and Firebox.

Popup date picker

Make it easy for your visitors to fill out the date/time field(s) of your form, by selecting this info from a popup calendar.

Form button calendar

This is an elaborate calendar script that uses form buttons to constuct each date entry. Works in all browsers, even NS6.

Calender script with today time

The below script will display a calender showing the date and time of today. Simple cut&paste install with one portion of code.

CalendarXP

Good-looking, if not the best, javascript calendar or datepicker without the pain of javascript. Simple to start with, while powerful enough to meet any sophisticated requirement, even driven by XML. All-purpose and extremely perfect for plain HTML, ASP, ASP.Net, JSP, PHP and ColdFusion.

Zapatec Javascript Calendar

The Zapatec Javascript Calendar is a feature-full, cross browser compatible, calendar. Use the calendar in pop-up mode, as a date picker, or in flat mode to display different events.

Rich Calendar

Cross-browser, 100% JavaScript calendar script implementing the appropriate functionality with many advanced options widely extending fields of its applications. Rich Calendar works in IE, Mozilla-based browsers such as Firefox, Opera 9+, and Safari 3.0. Integrated with Smart Grid (Ajax-based table editing tool).

NoGray Calendar Component

There are tons of features in this calendar package, such as: create any numbers of months per calendar; set the weekend, days off, holidays (dates off), start day of the week; start and end date; multi selection with limits or without; skinnable (using CSS); can have any number of calendars in any page; optimized for best performance.

DatePickerControl by Hugo Ortega-Hernandez

Layered calendar, without annoying pop-up windows, compatible with any server-side language. Supports mouse and keyboard navigation. LGPL License.

Javascript calendar widget from Codetale

This calendar can be used as a date picker or date display. Can be used in as many instances as you want, with some handy options. In strict mode, the calendar has the date selection limited, to a certain period defined in days. In loose mode, the calendar has the date selection unlimited. You can choose the returned date format, as well as how the date should be filled back: full date in one input, or multiple inputs.

Javascript Datepicker control

The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it's always correct. Allowed input formats are: American mm/dd/yyyy (12/31/2003), European dd.mm.yyyy (31.12.2003) and ISO yyyy-mm-dd (2003-12-31). Supports skins, the style and colors can be highly customized by color names and/or css classes.

Tigra Calendar

Tigra Calendar is a free JavaScript Calendar control that makes it easy for the website users to fill out the date/time fields by selecting the date from a popup calendar. Script saves the time for those internet/intranet developers who need intuitive, easy to use cross-browser client-side date or timestamp input control. Tigra Calendar works with any browser that supports DOM (Document Object Model). The script is free for any applications.

Simple Calendar Widget by Anthony Garrett

This flexible, simple pop-up calendar is written to work across browsers. It's fully commented and customisable for language, colours and date format. The pop-up displays a month at a time from a specified range of years. The optional input date determines the initial month displayed. The year can be in two or four digits while the month can be digits or a month name abbreviation that can easily be set up for any language. Any date or day of the week can be disabled (and re-enabled) using JavaScript on the calling page. This is ideal for combination with server-side technologies to produce a professional application.

Javascript Event Calendar

Javascript only, runs on any website and is cross browser compatable. Object oriented with property based design. Customizable CSS based layouts and themes, with over a dozen themes provided for you. You can quickly create recurring, holiday and special events. Supports XML data format events. Includes an event editor to assist creating events.

CodeThatCalendar

CodeThat's Java Script date and time selectable calendar control helps making such a date or time selection the interactive process also helps making the design of the calendar to be the part of the web site appearance. You can select one of three work modes:
1. The calendar appears in a separate window that is being shown when user clicks the button or performs another action.
2. The calendar is displayed on the page as part of its design.
3. iFrame calendar mode (pull down calendar). Calendar is dropped down within the frame on the window.

Basic Calender from Brian Gosselin

This is just a basic calender which simply sits on your page. Adjust the month and year by clicking the arrow buttons. All the settings such as colors and fonts are controlled entirely by cascading stylesheets, so you can easily adopt it to any webpage.

DHTML Calender from Brian Gosselin

Input for the calender is taken from a text box and output from the calender goes to the text box when the user clicks the desired date. If there is no text in the text box, or the text is in incorrect format, the calender will start with today's date, and will display a brief message at the bottom of the calender.

Perpetual Calender from Brian Gosselin

Just what you see. Simple calendar with navigation buttons available.

Dynamic Calendar from Constantin Kuznetsov Jr.

Looks handsome, but allows you to dynamically look up the calendar for any particular month/year. Just another dhtml calendar :)

Dynamic Calendar from Jason Moon

An extremely versatile DHTML calendar that's functional in IE4+ and NS6+.

Popup Calendar from Sev Kotchnev

Visual and interactive way of selecting and inputting date, rendering the job of your visitor reaching for a physical calendar to find out the date (whether for today's or otherwise) obsolete. Very practical use of DHTML.

Xin Calendar 2

Xin Calendar 2 is a package of the In-Page and Popup-Window DHTML calendar scripts as well as some plug-in scripts for extra features. Provides plug-in features via mod scripts, including: dropdown lists to pick month and year, date ranges, open links from dates, styles for special dates, display date info, date tooltip and image tile background.

Jason's Date Input Calendar

Small and simple calendar with some customization options.

Javascript Calendar Date Picker

JavaScript Calendar Date Picker control makes it easy to fill out the date/time fields for the website users by selecting the date and time from a popup calendar. All you'll need is just to add the date picker into your web application and it will work. No configuration is needed. It also gives you all the ability you need for developing the most complex modules.

Yahoo! UI Library: Calendar

The Calendar component is a UI control that enables users to choose one or more dates from a graphical calendar presented in a single month or multi month interface. Calendars are generated entirely via script and can be navigated without any page refreshes. You'll find the Calendar Control to be a useful and easy-to-implement enhancement to any date-selection interaction; you may also find that the Calendar's foundation classes are a good place to start for more complex interfaces that visually organize date-tagged information (like appointments, photos, events, etc.).

Date Picker Calendar from SixSide

This date picker code is free to use on your own website, the only requirement is that you add a link back to SixSide.com somewhere on your website. W3C compliant XHTML and CSS, works for various countries date formats, cross browser compatible.

Calendar class for Mootools

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. Features: style-able and semantic XHTML, future/past calendar restrictions, highly configurable use of inputs and selects, multi-calendar support, multi-lingual and fancy date formatting.

Swazz Javascript Calendar

Free javascript calendar, made as lightweight (only 6kb in size!) widget which shows a calendar for use in picking dates on form fields.

Start to Finish component

A Component to ease user experience in selecting a date range. Prototype framework usage needed.

Vista-like Ajax Calendar

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

Unobtrusive Date-Picker Widget

DatePicker is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml. It’s free to use, even commercially. 16 languages currently available for this calender.

Ajax enabled online calendar

An Ajax enabled online calendar. Drag and drop events to change dates, drag the start/end of an event to create multi-day events, create and edit events without refreshing the page, all with an iCal style interface. This release now works in all major browsers (Firefox, Opera, Safari, and Internet Explorer). Monket Calendar is one of the only web based calendars can displays multi-day events spanning accross the days on which they occur.

The do...while Loop

2009-09-15T03:31:00.000-07:00

The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE, and then it will repeat the loop as long as the specified condition is true.

Syntax

do
{
code to be executed
}
while (var<=endvalue);

Example

The example below uses a do...while loop. The do...while loop will always be executed at least once, even if the condition is false, because the statements are executed before the condition is tested:

<html>

<body>

var i=0;

{

document.write("The number is " + i);

document.write("<br />");

i++;

}

while (i<=5);

</script>

</body>

</html>

The while Loop

2009-09-15T03:30:00.000-07:00

The while loop loops through a block of code while a specified condition is true.

Syntax

while (var<=endvalue)
{
code to be executed
}

Note: The <= could be any comparing statement.

Example

The example below defines a loop that starts with i=0. The loop will continue to run as long as ii will increase by 1 each time the loop runs: is less than, or equal to 5.

<html>

<body>

var i=0;

while (i<=5)

{

document.write("The number is " + i);

document.write("<br />");

i++;

}

</script>

</body>

</html>

The for Loop

2009-09-15T03:28:00.000-07:00

The for loop is used when you know in advance how many times the script should run.

Syntax

for (var=startvalue;var<=endvalue;var=var+increment)

{

code to be executed

}

Example

The example below defines a loop that starts with i=0. The loop will continue to run as long as ii will increase by 1 each time the loop runs. is less than, or equal to 5.

Note: The increment parameter could also be negative, and the <= could be any comparing statement.

<html>

<body>

var i=0;

for (i=0;i<=5;i++)

{

document.write("The number is " + i);

document.write("<br />");

}

</script>

</body>

</html>

JavaScript Loops

2009-09-15T03:26:00.001-07:00

Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.

In JavaScript, there are two different kind of loops:

for - loops through a block of code a specified number of times
while - loops through a block of code while a specified condition is true

The Lifetime of JavaScript Variables

2009-09-15T03:25:00.001-07:00

If you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared.

If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.

The return Statement

2009-09-15T03:24:00.000-07:00

The return statement is used to specify the value that is returned from the function.

So, functions that are going to return a value must use the return statement.

The example below returns the product of two numbers (a and b):

Example

<html>

<head>

function product(a,b)

{

return a*b;

}

</script>

</head>

<body>

document.write(product(4,3));

</script>

</body>

</html>

JavaScript Function Example

2009-09-15T03:22:00.000-07:00

<html>

<head>

function displaymessage()

{

alert("Hello World!");

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

If the line: alert("Hello world!!") in the example above had not been put within a function, it would have been executed as soon as the line was loaded. Now, the script is not executed before a user hits the input button. The function displaymessage() will be executed if the input button is clicked.

How to Define a Function

2009-09-15T03:21:00.000-07:00

Syntax

function functionname(var1,var2,...,varX)
{
some code
}

The parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function.

Note: A function with no parameters must include the parentheses () after the function name.

Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in lowercase letters, otherwise a JavaScript error occurs! Also note that you must call a function with the exact same capitals as in the function name.

JavaScript Functions

2009-09-15T03:19:00.001-07:00

To keep the browser from executing a script when the page loads, you can put your script into a function.

A function contains code that will be executed by an event or by a call to the function.

You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file).

Functions can be defined both in the and in the section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the section.

JavaScript Popup Boxes : Prompt Box

2009-09-15T03:18:00.000-07:00

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax

prompt("sometext","defaultvalue");

Example

<html>

<head>

function show_prompt()

{

var name=prompt("Please enter your name","Harry Potter");

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?");

}

</script>

</head>

<body>

</body>

</html>

JavaScript Popup Boxes : Confirm Box

2009-09-15T03:17:00.000-07:00

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax

confirm("sometext");

Example

<html>

<head>

function show_confirm()

{

var r=confirm("Press a button");

if (r==true)

{

document.write("You pressed OK!");

}

else

{

document.write("You pressed Cancel!");

}

</script>

</head>

<body>

</body>

</html>

JavaScript Popup Boxes : Alert Box

2009-09-15T03:15:00.000-07:00

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax

alert("sometext");

Example

<html>

<head>

function show_alert()

{

alert("I am an alert box!");

}

</script>

</head>

<body>

</body>

</html>

JavaScript Switch Statement

2009-09-15T03:11:00.000-07:00

Use the switch statement to select one of many blocks of code to be executed.

Syntax

switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.

Example

If...else if...else Statement

2009-09-15T03:09:00.000-07:00

Use the if....else if...else statement to select one of several blocks of code to be executed.

Syntax

if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and condition2 are not true
}

Example

If...else Statement

2009-09-15T03:08:00.000-07:00

Use the if....else statement to execute some code if a condition is true and another code if the condition is not true.

Syntax

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Example

Triple equals in JavaScript

2009-09-14T23:15:00.000-07:00

I think I'm a pretty decent javascript programmer, so it's always refreshing to learn something new in a language I'm so familiar with! I recently had some time to watch those great lectures from Doug Crockford at YUI Theatre, and noticed lots of === in the code.

That's right, it's not a typo, but 3 equal signs, and it means equality without type coersion. In other words, if using the triple equals, the values must be equal in type as well.

e.g.

0==false   // true
0===false  // false, because they are of a different type
1=="1"     // true, auto type coersion
1==="1"    // false, because they are of a different type

Another handy tool in my javascript bag of tricks, as recommended by Mr father of javascript himself!

If Statement

2009-09-06T23:14:00.000-07:00

Use the if statement to execute some code only if a specified condition is true.

Syntax

if (condition)
{
code to be executed if condition is true
}

Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!

Example

JavaScript Conditional Statements

2009-09-06T23:13:00.000-07:00

Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

if statement - use this statement to execute some code only if a specified condition is true
if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false
if...else if....else statement - use this statement to select one of many blocks of code to be executed
switch statement - use this statement to select one of many blocks of code to be executed

Conditional Operator

2009-09-06T23:12:00.000-07:00

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax

variablename=(condition)?value1:value2

Example

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President " else it will be assigned "Dear".

Logical Operators

2009-09-06T23:11:00.002-07:00

Logical operators are used to determine the logic between variables or values.

Given that x=6 and y=3, the table below explains the logical operators:

Operator	Description	Example
&&	and	(x < 10 && y > 1) is true
\|\|	or	(x==5 \|\| y==5) is false
!	not	!(x==y) is true

Example of using comparison operator

2009-09-06T23:11:00.001-07:00

Comparison operators can be used in conditional statements to compare values and take action depending on the result:

if (age<18) document.write("Too young");

Comparison Operators

2009-09-06T22:57:00.000-07:00

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Given that x=5, the table below explains the comparison operators:

Operator	Description	Example
==	is equal to	x==8 is false
===	is exactly equal to (value and type)	x===5 is true x==="5" is false
!=	is not equal	x!=8 is true
>	is greater than	x>8 is false
<	is less than	x<8
>=	is greater than or equal to	x>=8 is false
<=	is less than or equal to	x<=8 is true

Adding Strings and Numbers

2009-09-06T22:56:00.000-07:00

The rule is: If you add a number and a string, the result will be a string!

Example

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

The + Operator Used on Strings

2009-09-06T22:55:00.000-07:00

The + operator can also be used to add string variables or text values together.

To add two or more string variables together, use the + operator.

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

After the execution of the statements above, the variable txt3 contains "What a verynice day".

To add a space between the two strings, insert a space into one of the strings:

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

or insert a space into the expression:

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

After the execution of the statements above, the variable txt3 contains:

"What a very nice day"

JavaScript Assignment Operators

2009-09-06T22:54:00.000-07:00

Assignment operators are used to assign values to JavaScript variables.

Given that x=10 and y=5, the table below explains the assignment operators:

Operator	Example	Same As	Result
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

JavaScript Arithmetic Operators

2009-09-06T22:53:00.000-07:00

Arithmetic operators are used to perform arithmetic between variables and/or values.

Given that y=5, the table below explains the arithmetic operators:

Operator	Description	Example	Result
+	Addition	x=y+2	x=7
-	Subtraction	x=y-2	x=3
*	Multiplication	x=y*2	x=10
/	Division	x=y/2	x=2.5
%	Modulus (division remainder)	x=y%2	x=1
++	Increment	x=++y	x=6
--	Decrement	x=--y	x=4

JavaScript Operators

2009-09-06T22:52:00.002-07:00

= is used to assign values.

+ is used to add values.

The assignment operator = is used to assign values to JavaScript variables.

The arithmetic operator + is used to add values together.

y=5;
z=2;
x=y+z;

The value of x, after the execution of the statements above is 7.

JavaScript Arithmetic

2009-09-06T22:52:00.001-07:00

As with algebra, you can do arithmetic operations with JavaScript variables:

y=x-5;
z=y+5;

Redeclaring JavaScript Variables

2009-09-06T22:51:00.002-07:00

If you redeclare a JavaScript variable, it will not lose its original value.

var x=5;
var x;

After the execution of the statements above, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it.

Assigning Values to Undeclared JavaScript Variables

2009-09-06T22:51:00.001-07:00

If you assign values to variables that have not yet been declared, the variables will automatically be declared.

These statements:

x=5;
carname="Volvo";

have the same effect as:

var x=5;
var carname="Volvo";

Declaring (Creating) JavaScript Variables

2009-09-06T22:50:00.000-07:00

Creating variables in JavaScript is most often referred to as "declaring" variables.

You can declare JavaScript variables with the var statement:

var x;
var carname;

After the declaration shown above, the variables are empty (they have no values yet).

However, you can also assign values to the variables when you declare them:

var x=5;
var carname="Volvo";

After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value Volvo.

Note: When you assign a text value to a variable, use quotes around the value.

JavaScript Variables

2009-09-06T22:49:00.002-07:00

As with algebra, JavaScript variables are used to hold values or expressions.

A variable can have a short name, like x, or a more descriptive name, like carname.

Rules for JavaScript variable names:

Variable names are case sensitive (y and Y are two different variables)
Variable names must begin with a letter or the underscore character

Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

Do You Remember Algebra From School?

2009-09-06T22:49:00.001-07:00

Do you remember algebra from school? x=5, y=6, z=x+y

Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the information above to calculate the value of z to be 11?

These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y).

Redeclaring JavaScript Variables

2009-08-28T06:51:00.000-07:00

If you redeclare a JavaScript variable, it will not lose its original value.

var x=5;
var x;

After the execution of the statements above, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it.

Assigning Values to Undeclared JavaScript Variables

2009-08-28T06:50:00.000-07:00

If you assign values to variables that have not yet been declared, the variables will automatically be declared.

These statements:

x=5;
carname="Volvo";

have the same effect as:

var x=5;
var carname="Volvo";

Declaring (Creating) JavaScript Variables

2009-08-28T06:49:00.002-07:00

Creating variables in JavaScript is most often referred to as "declaring" variables.

You can declare JavaScript variables with the var statement:

var x;
var carname;

After the declaration shown above, the variables are empty (they have no values yet).

However, you can also assign values to the variables when you declare them:

var x=5;
var carname="Volvo";

After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value Volvo.

Note: When you assign a text value to a variable, use quotes around the value.

JavaScript Variables

2009-08-28T06:49:00.001-07:00

As with algebra, JavaScript variables are used to hold values or expressions.

A variable can have a short name, like x, or a more descriptive name, like carname.

Rules for JavaScript variable names:

Variable names are case sensitive (y and Y are two different variables)
Variable names must begin with a letter or the underscore character

Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

Do You Remember Algebra From School?

2009-08-28T06:48:00.000-07:00

Do you remember algebra from school? x=5, y=6, z=x+y

Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the information above to calculate the value of z to be 11?

These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y).

Using Comments at the End of a Line

2009-08-28T06:47:00.000-07:00

In the following example the comment is placed at the end of a code line:
Example
<script type="text/javascript">
document.write("Hello"); // Write "Hello"
document.write(" Dolly!"); // Write " Dolly!"
</script>

Using Comments to Prevent Execution

2009-08-28T06:45:00.000-07:00

In the following example the comment is used to prevent the execution of a single code line (can be suitable for debugging):
Example
<script type="text/javascript">
//document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

In the following example the comment is used to prevent the execution of a code block (can be suitable for debugging):
Example
<script type="text/javascript">
/*
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
*/
</script>

JavaScript Multi-Line Comments

2009-08-28T06:44:00.001-07:00

Multi line comments start with /* and end with */.

The following example uses a multi line comment to explain the code:
Example
<script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Comments

2009-08-28T06:43:00.001-07:00

Comments can be added to explain the JavaScript, or to make the code more readable.

Single line comments start with //.

The following example uses single line comments to explain the code:
Example
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Blocks

2009-08-28T06:41:00.000-07:00

JavaScript statements can be grouped together in blocks.

Blocks start with a left curly bracket {, and ends with a right curly bracket }.

The purpose of a block is to make the sequence of statements execute together.

This example will write a heading and two paragraphs to a web page:
Example
<script type="text/javascript">
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>

JavaScript Code

2009-08-28T06:40:00.000-07:00

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.

Each statement is executed by the browser in the sequence they are written.

This example will write a heading and two paragraphs to a web page:
Example
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Statements

2009-08-28T06:39:00.000-07:00

A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do.

This JavaScript statement tells the browser to write "Hello Dolly" to the web page:

document.write("Hello Dolly");

It is normal to add a semicolon at the end of each executable statement. Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web.

The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Because of this you will often see examples without the semicolon at the end.

Note: Using semicolons makes it possible to write multiple statements on one line.

JavaScript is Case Sensitive

2009-08-28T06:38:00.000-07:00

Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions.

Where to Put the JavaScript

2009-08-28T06:24:00.000-07:00

JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in <head>

Scripts to be executed when they are called, or when an event is triggered, go in the head section.

If you place a script in the head section, you will ensure that the script is loaded before anyone uses it.
Example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
</body>
</html>

Scripts in <body>

Scripts to be executed when the page loads go in the body section.

If you place a script in the body section, it generates the content of a page.
Example
<html>
<head>
</head>

<body>
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>

</html>

Scripts in <head> and <body>

You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Using an External JavaScript

If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file.

Save the external JavaScript file with a .js file extension.

Note: The external script cannot contain the <script> tag!

To use the external script, point to the .js file in the "src" attribute of the <script> tag:
Example
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>

Put a JavaScript into an HTML page

2009-08-28T04:31:00.000-07:00

The example below shows how to use JavaSript to write text on a web page:

Example


<html>
<body>
<script type=" text/javascript">
document.write(" Hello World!");
</script>
</body>
</html>

The example below shows how to add HTML tags to the JavaScript:

Example


<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>

To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the type attribute to define the scripting language.

So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

The document.write command is a standard JavaScript command for writing output to a page.

By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

The Real Name is ECMAScript

2009-08-26T23:19:00.000-07:00

JavaScript's official name is ECMAScript.

ECMAScript is developed and maintained by the ECMA organization.

ECMA-262 is the official JavaScript standard.

The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.

The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997.

The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.

The development of the standard is still in progress.

What can a JavaScript do?

2009-08-26T23:17:00.000-07:00

JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("
" + name + "
") can write a variable text into an HTML page
JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

Are Java and JavaScript the same?

2009-08-26T23:16:00.000-07:00

NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

Few doubts that you could have !!!

2009-08-26T04:56:00.000-07:00

What exactly is Javascript?:
Javascript is a programming language that is used to make web pages interactive. It runs on your visitor's computer and so does not require constant downloads from your web site.

Are Javascript and Java the same?:
No, they are two completely different computer languages. Only their names are similar.

What do I need to run Javascript?:
Javascript support is built right into web browsers. Provided that the visitors to your site are using web browsers that support Javascript (most do) and have Javascript enabled (it is by default) then your Javascript will run.

Do I need to learn Javascript to be able to use it?:
No. There are plenty of Javascripts that have already been written that people have made available for you to plug straight into your web page. All you need to know to be able to use such scripts is how to paste the supplied code into the required places in your web page.

What do I need to write Javascript?:
Javascript is an interpreted language and so no special program is required to be able to create usable code. Any plain text editor such as Notepad is quite satisfactory for being able to write Javascript. That said, an editor which colourizes the code to make it easier to see what is what makes it easier to find your mistakes but then my Javascript Formatter can reformat your script to make errors even easier to spot.

Can I use HTML instead of Javascript?:
No. HTML and Javascript are two completely different things. HTML is a markup language designed for defining static web page content. Javascript is a programming language designed for performing dynamic tasks.

Can I use PHP or some other server side language instead of Javascript?:
Perhaps, it depends on where the code needs to run. If it can run before the page loads you can use a server side language. If it has to run after the page has loaded then you must use Javascript as this is the only scripting language supported by all web browsers that support client side scripting.

Does the Javascript go in the same file as the HTML?:
It can but your scripts will be more easily reused on multiple pages of your site if you place them in separate files (using a .js extension helps identify them as Javascript). You then just link the Javascript to your HTML by inserting a

More than you might want to know !

2009-08-26T04:53:00.000-07:00

JavaScript is a scripting language, ideal for small programs used only from within Web browsers. A JavaScript script can't run alone, without the browser, the way a Java program does.

JScript is Microsoft's implementation of JavaScript.

A Little History...
In typical Web fashion, the evolutionary process of JavaScript has taken a somewhat lumpy path. When JavaScript started out life at Netscape, it was called LiveScript and its goal was to allow dynamic ("live") changes of Web pages and communication between the Web browser and plug-in applications ... such as Java. Java was hot and marketable, so in late 1995 Netscape got permission from Sun, the creators of Java, to use the word "Java" and Livescript became the *catchier* JavaScript.

But along the way, JavaScript took on a life of its own. It was easier for non-programmers to learn than Java. It could add a lot of interactivity with little overhead. Like HTML code, JavaScript is contained within the HTML text file, so it can be easily added and modified. It became hot itself. And so now there's a move afoot to standardize JavaScript.

More Than You Might Want to Know, But...
Within the Web environment, the most common use of Java is to build applets, small programs that launch automatically from within a Web page. When the Web page loads, these applets are launched and begin to run on your local computer. While the applet runs, your browser sits quietly by.

On the plus side, running a Java applet doesn't consume server time. It makes it possible for small, self-contained programs to be delivered via the Web, but run locally on individual computers. However, downloading Java applets has some people concerned about security; in corporate environments, Information Systems departments sometimes set up procedures to screen out external Java applets and prevent them from being downloaded. These IS managers fear (rightly or wrongly) that the applet could infect the system or be, in some way, a threat to the network.

JavaScript, on the other hand, is attractive to Web developers because it is a scripting language rather than a self-executing program. The code is typically placed directly in the Web page—in fact, it requires a Web browser in order to run and it is designed to be fully-integrated with the browser. Because the JavaScript is physically located within the Web page, firewalls can't screen it out (although individual browsers can be configured to turn off JavaScript).

What is Javascript ?

2009-08-26T04:48:00.000-07:00

JavaScript is an object-oriented scripting language that lets you build interactions between page content, the state of the browser, and the actions of the reader.

In other words, JavaScript is a language that lets you make your pages interact with your readers and respond to what they do.

It is a programming language that can make your pages feel more dynamic and give feedback to your user. This is a good argument for learning and incorporating it into your web techniques basket.

It is a programming language that also has a learning curve in order for you to use it well. But don't let this scare you away from it—if you aren't a programmer, you can start out by learning a few basic concepts and then adapt existing JavaScript scripts for your needs.

If you don't want to tackle JavaScript, that's OK too. You can still make attractive pages that your readers will like, using standard HTML. Don't let the "flavor of the month" mentality convince you that only programmers or big budget outfits can have a Web page. But take a look through this section—you might surprise yourself by knowing more about scripting than you think.

What is JavaScript?

JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
Everyone can use JavaScript without purchasing a license

What You Should Already Know

Before you continue you should have a basic understanding of the following:

HTML / XHTML