Javascript

Introduction

Loops

Objects

Arrays

Fade In and Out

Light Box Plugin

Animate

Collapsible Panels

Jquery Form

Jquery Gallery

Slide Up Nav

Objects

Okay so now we move onto a very large part of javascript and that is objects. An object is a piece of data that contains its own functions. so remember the document.write method, the document is an object and the write is function of that object that we can use.

Window Size

so lets have a look at how to change the window size

so first we need the following HTML

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

and then add the following javascript in

function run()
{
window.resizeTo(800,800);
}

there isn't much to this we just use the window object and use the resize method and pass in the width and height we want the window to be.

Re-direct

Okay so lets have a go at re-direct the page with a button

So lets have a look at how to do this, add the following HTML for the button

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

and then add the following javascript in

function run()
{
window.location = "http://www.google.co.uk";
}

Okay so we use the window object and just change the location so we get directed to a different web page.

Pop Up Window

So lets have a look at how to make a pop up window

so first we need to make a button to press to make a HTML file and put this in the body

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

and then add the following javascript in

function run()
{
window.open("http://www.google.com","NewWindow","status = 1, height= 800, width=800, resizable=0");
}

so lets break down the code, the first parameter is the web address we want to go to. Next is the window name, next is a massive string that has some settings inside of it so status is a boolean to state if we our going to display the status bar. Next is the hight and width which is the height and width of the window and lastly is resizable which is whether the user can re-size the window.

Form Validation

so lets have a look at how to validate a form using javascript like this

so first lets make a simple HTML form.

<form name="myForm" action="form.php" onsubmit="return go()" method="post">
First name: <input type="text" name="name">
<input type="submit" value="submit">

</form>

so here on the form tab we add a new attribute called onsubmit and in there we call the javascript function called go(). So when we click submit the javascript function will run. So lets have a look at the javascript.

function go()
{
var x=document.forms["myForm"]["name"].value
if (x==null || x=="")
{
alert("Please fill in the form");
return false;
}
}

First we declare x as the result of the field name in the form. Then we check if its null or empty and if so we use an alert box to tell the user.