Design Tutorials
- Flash
- Web
- Maya
- Unity
- 3DS Max
- Photoshop
- Illustrator
- Design
- Design Research
- Other
Graduate Portfolios
- Portfolio Admin Login
GradEx'09
Podcasts
Design Competitions
EcoDesign
Contact Us

Intro to Javascript

Author: Bill Trikojus


	Javascript syntax

	The alert method

	Forms
	Windows


	Javascript syntax

	Javascript is a scripting language that is designed to add extra interactivity to your HTML pages. Whilst (like most web technologies) it cannot be 100% relied upon to always work, it IS supported by all the latest browsers. Having said that, some users choose to disabled javascript in their browser prefs (usually to try and stop popup banner ads). The most common uses I've found for Javascript are Opening and controlling custom browser windows Error checking a form before submitting the data to be processed Making forms more intuitive. There's lots of other things you can do in Javascript and you will see some of these in this tute. Javascript uses a dot syntax so if you've done any actionscript or PHP then it should look familiar to you. Like Flash, Javascript has built in objects such as 'window' that have different methods and properties you can call and set. Generally speaking you will put a javascript function into the head of your html page eg <head> <title>My page has javascript...yay</title> <script type="text/javascript"> function alertTheUser(){ alert("Hi I'm a Javascript alert and you will learn to love me"); } </script> </head> And then inside the body of your HTML page you would have a button (or link) that calls the javascript function. eg By the way the tag the makes this button looks like this: <body> <input type="button" value="I know you want to click me" onClick='alertTheUser()'> </body>


	The alert method

	So as you can see, buttons can react to the onClick javascript event and in this case we call the alertTheUser javascript function when the button is clicked. The alertTheUser function simply calls the javascript alert method. The alert method takes 1 parameter (the message that should be displayed in the alert box) and everybody in the world loves them. Data can be passed back and forth between elements on your page and the javascript functions in the head of your page. For example, if you changed the alertTheUser function to function alertTheUser(whoWasClicked){ alert("Hi I'm a Javascript alert and you clicked on the button called '"+whoWasClicked.name+"'"); } and then changed the line that makes the button to <input type="button" name="the cool button" value="I know you want to click me" onClick='alertTheUser2(this)'> You would end up with Click on the button and you will see that the button object is passed to our javascript function where we extract the 'name' property of our button and include it in the alert message. Try changing the alertTheUser function to function alertTheUser(whoWasClicked){ whoWasClicked.value="You shouldn't have done that"; } and the link that makes the button to <input type='button' name='toChange' value="C'mon I dare you" onClick='alertTheUser(this)'> (here's one I made for you)

Forms

So as you can see, our form elements can have their contents controlled from our javascript function. Let's use that for something useful. Here we the code for a basic form:

<form name='someForm' onSubmit='return validate()'>
Name:<input type='input' name='userName'><br>
Comments:<textarea name="userComment"></textarea><br>
<input type='submit' value='Submit this form now!' >
</form>

Paste that inside the body of your html page and then add this javascript function to the head of your HTML page (btw all javascript functions in the head must go inside the

and

</script>

tags)

and you should end up with something like:

Name:
Comments:

Click on submit a few times and you will see that if the name or comment are not entered then we put an error message in the field and set focus on the offending form element. Obviously this example falls apart pretty quickly (still submits if the error messages are left in the form elements) but it should give you an idea of what's possible with forms and javascript.


	Windows

	OK I'm sick of forms and I'm sure you are too...lets look at windows. You may or may not have been to a site recently and got stuck in a never ending cycle of popup windows...well that's javascript...and no I'm not going to show you how to do that as its extremely annoying. What I will do is show you how to open new windows with custom settings. ie no toolbar across the top, windows with a set size etc. Add this function to the head of html page function openwindow(url,w,h) { window.open(url,"my_new_window","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width="+w+", height="+h); } And now click here. As you can see, you can call javascript functions from regular html links. The code looks like this <a href="javascript:openwindow('http://swin.edu.au',200,400)"> In this case we are calling our 'openwindow' function. This function taks 3 parameters, the URL you want to open and the width and the height of the new window. Our function then inserts these parameters into the window.open method. You should be able to see in the openwindow function that there are a number of window.open settings that have been hard-coded (scrollbars, resizable etc) - you could make your function more flexible by accepting these values as parameters of your function. eg function openwindow(url,w,h,sbars,resize) { window.open(url,"my_new_window","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars="+sbars+", resizable="+resize+, width="+w+", height="+h); } and then your link would look like <a href="javascript:openwindow('http://swin.edu.au',200,400,'no','yes')"> You can also place your javascript inside the body tag using the syntax below. <body> I am some plain text<br> <script type="text/javascript"> var time = new Date(); if(time.getHours()>12){ document.write('Good afternoon'); }else{ document.write('Good morning'); } document.write('<br>'); </script> I am more plain text </body> or as a body tag attribute such as <body onLoad="javascript:openwindow('http://swin.edu.au',200,400,'no','yes')"> OK that's enough to get you started. For heaps more info on Javascript go here.