Javascript

Introduction

Loops

Objects

Arrays

Fade In and Out

Light Box Plugin

Animate

Collapsible Panels

Jquery Form

Jquery Gallery

Slide Up Nav

Arrays

Now we come onto using arrays, now an arrays is like a variable that holds multiple values. So for an example lets have a look at one.

var people = new Array("bob","fred","george");

so we create a variable called people and set it as an array and we pass into it the values we want the array to have. So lets have a look at how we access these values.

document.write(people[0]);

so we use the document object to write to the screen and we use the people array and we use the 0 position in that array which is the first result and 1 would be the second result in that array.

Now if we wanted to change the value of something inside an array we would do this

people[1] = "fred2";

so this will change the second value in the array to the new value of "fred2".

Foreach Loop

so lets have a look at how to loop through data of an array so first lets make an array

var devices = new Array("tv","dvdplayer","xbox");

and to loop through them all we do this

for (var i in devices)
{
document.write(devices[i]);
}

the output of this will be all of the text strings inside of the array. i means index and we don't have to use i we can just call it anything but then we write the document write statement and pass in devices[i] which means the current device we are looping through.

Hover Over

The javascript hover is one of the most common basic javascript examples so here we go. Start by typing the following HTML.

<button type="button" onmouseover="run()">Click Me</button>

and add the javascript

function run()
{
alert("you have hovered over the button");
}

This works by using the onmouseover attribute to call the javascript function when the mouse is over the button.

Comments

so lets have a look at how to do comments in javascript

document.write("Hello World"); // this is a comment

Intermediate Javascript

In the advanced Jquery section we will be looking into making very nice website interface effects using the jquery framework.

Installing Jquery

To set up jquery and use it is very simple all we have to do is download the jquery file and include it in the head tag as an external .js file

Get the javascript file and just click file and save as and save it in the same directory as your web page.

To import it just use the following code in the head tag

now if you want to check that the jquery libary has been loaded then put this inside the head tag

this will then pop up an alert message based on whether the jquery was loaded or not.