Javascript

Introduction

Loops

Objects

Arrays

Fade In and Out

Light Box Plugin

Animate

Collapsible Panels

Jquery Form

Jquery Gallery

Slide Up Nav

Loops

loop statements are used to run chunks of code over and over again for how ever times we need it to run. There are a few different types of loop statements so lets go through some.

The first loop is the while loop and this runs the code inside wile the condition is met so lets have a look at it.

var number = 0;

while (number < 5)
{
document.write(number);
number++;
}

Okay so we create the variable number and give it the value of 0 then we check while the number is less than 5 run the code inside the loop. number++ means increment the number variable by 1 so this is ran multiple times until the number is not less than 5. So the number value will be shown on screen multiple times with a different value each time.

The second loop statement we will look into is called the for loop, this loop is a harder to understand than the while but its more dynamic.

var number2 = 5;

for (i=0;i<number2;i++)
{
document.write("random text");
document.write("<br />");
}

The for loop has 3 parts to it, the first part the declaration, the second part is the condition and the last part is the increment. So the first time this is run variable i is created then its tested so we are checking if its less than our number variable and if this is true increase i and run code inside and then check again and if the condition is not met the loop has ended.

Functions

A function is a chunk of code that we can run at any time so for example I could write a function to print text to the screen and then every time I call the function it will print the text. So here's an example of how that would look in javascript form.

function printText()
{
document.write("Hello World!");
document.write("Hello Again");
}
printText();

So lets now break this down and have a look at what's going on here. we create a function called printText and put 2 document write statements inside it. So when we call this function like this printText(); all the code inside the function is run.

Now remember functions must be declared in this format using the keyword function and the brackets, the brackets are for if we need to pass something into the function which we will be looking into later.

Events

Events are things that happen when something else has happened and this theory plays an important part in javascript because for example when a user clicks on a button something could happen and this is an event.
so for the event tutorial we are going to have a button that will change the colour of some text

So this is the code to do it

<button type="button" onclick="run()">Click Me</button>
<p id="text">to change me font color</p>

and the javascript

function run()
{
document.getElementById("text").style.color="red";
}

Okay so we create a button in HTML using the button tag and add an attribute called onlick and add in the name of the run function, so when we click on the button the javascript function will run. Next is the text and we put this in a paragraph tag.

Now the javascript code works by grabbing the element that's called text and changing the styling of it so we change the font colour to red.