JAVASCRIPT CODES

JAVASCRIPT CODING

Different methods of declaring JavaScript variables

// declaring one javascript variable
var firstName;

// declaring multiple javascript variables
var firstName, lastName;

// declaring and assigning one javascript variable
var firstName = 'Homer';

// declaring and assigning multiple javascript variables
var firstName = 'Homer', lastName = 'Simpson';

Using JavaScript variables

Although there are many uses for JavaScript variables, here is a quick and dirty

Example:

<*script language="javascript" type="text/javascript" >

<*!-- hide me
var firstName = prompt("What's your first name?", "");
// end hide -->

<*!-- hide me
document.write(firstName);
// end hide -->

<*/script>

PLEASE Remove Firstly All Asterics *

Rules for JavaScript Variables

* Can contain any letter of the alphabet, digits 0-9, and the underscore character.
* No spaces
* No punctuation characters (eg comma, full stop, etc)
* The first character of a variable name cannot be a digit.
* JavaScript variables' names are case-sensitive. For example firstName and
FirstName are two different variables.

Writing a function in JavaScript

It's not that hard to write a function in JavaScript. Here's an example of a JavaScript function.

<*script type="text/javascript">
<*!--
function displayMessage(firstName) {
alert("Hello " + firstName + ", hope you like JavaScript functions!")
}
//-->
<*/script>

Call the function:

<*form>
First name:
<*input type="input" name="yourName" />
<*input
type="button"
onclick="displayMessage(form.yourName.value)"
value="Display Message" />
<*/form>

PLEASE Remove Firstly All Asterics *

Results:

Call the function:

Example If statement:

<*script type="text/javascript">
<*!--
var myColor = "Blue";

if (myColor == "Blue") {
document.write("Just like the sky!");
}
//-->
<*/script>

PLEASE Remove Firstly All Asterics *

Results:

Just like the sky!

Example If Else statement:

<*script type="text/javascript">
<*!--
var myColor = "Red";

if (myColor == "Blue") {document.write("Just like the sky!");}
else {document.write("Didn't pick blue huh?");}
//-->
<*/script>

PLEASE Remove Firstly All Asterics *

Results:

Didn't pick blue huh?

Example If Else If statement:

<*script type="text/javascript">
<*!--
var myColor = "Red";

if (myColor == "Blue") {document.write("Just like the sky!");}
else if (myColor = "Red") {
document.write("Just like shiraz!");}
else {document.write("Suit yourself then...");}//-->
<*/script>

PLEASE Remove Firstly All Asterics *

Results:

Just like shiraz!

Example For statement:

<*script type="text/javascript">
<*!--var myBankBalance = 0;
for (myBankBalance = 0; myBankBalance <= 10; myBankBalance++)
{
document.write("My bank balance is $" + myBankBalance + "");}//-->
<*/script>

PLEASE Remove Firstly All Asterics *

Results:

My bank balance is $0
My bank balance is $1
My bank balance is $2
My bank balance is $3
My bank balance is $4
My bank balance is $5
My bank balance is $6
My bank balance is $7
My bank balance is $8
My bank balance is $9
My bank balance is $10

Example of void(0):

We have a link that should only do something (i.e. display a message) upon two clicks (i.e. a double click). If you click once, nothing should happen. We can specify the double click code by using JavaScript's "ondblclick" method. To prevent the page reloading upon a single click, we can use "JavaScript:void(0);" within the anchor link.

<*a href="JavaScript:void(0);" ondblclick="alert('Well done!')">Double Click Me!<*/a>

PLEASE Remove Firstly All Asterics *

Results:

Double Click Me!

Same Example, but without void(0):

Look at what would happen if we didn't use "JavaScript:void(0);" within the anchor link...

<*a href="" ondblclick="alert('Well done!')">Double Click Me!<*/a>

PLEASE Remove Firstly All Asterics *

Results:

Double Click Me!

Code with a Try... Catch statement:

<*script type="text/javascript">
<*!--
try
{
document.write("My bank balance is $" + myBankBalance);
}
catch(err)
{
document.write("Sorry, an error has occurred");
document.write("...but hey, don't let that stop you!");
}
//-->
<*/script>

PLEASE Remove Firstly All Asterics *

Results:

Sorry, an error has occurred...but hey, don't let that stop you!

THANK YOU

Monday, July 4, 2011