Will Script For Food

Before you can start writing javascript, you must understand javascript syntax. The best way to learn javascript syntax thoroughly is to just begin coding javascript. But, in order to begin, you need a starting point, so I’ll give you a few ground rules.

Javascript Syntax Ground Rules:

1) Locations: You can write javascript in several different locations, but you can only write in these locations. If you write javascript anywhere else, it will not work. Four locations–in a .js file (referenced from your HTML page), between <script type=”text/javascript”>*javascript here without stars*</script> tags, in event handlers, and in functions (which are already in a .js file or between the script tags).

2) Commands: End all javascript commands with a semicolon. Most programmers write new commands on new lines like so:

alert(’hi’);
alert(’hello’);

But you can also write commands on the same line (separated by a semicolon) like so:

alert(’hi’); alert(’hello’);

3) Variables: My own experience has taught me that you should declare variables (let’s say ‘x’) like this:

var x = ‘this equals x’;

Prefix your variable with a var declaration. My experience has been that some browsers require the declaration. When you refer to the same variable later, you can just use the variable by itself, like this:

var john = x;

The above command would set a new variable equal to x or in this case specifically ‘this equals x’. So, if you alerted john like this–alert(john);–the alert would say ‘this equals x’. Notice that the x has no quotes around it. Which leads us into our next ground rule.

4) Strings: Quotes should surround strings not variables. Often, we set variables to a certain string value. Example:

‘this is a string’
var x = ‘this is a string’;

Quotes should not surround variables. Example:

x     <== x is a variable (if this were on the same page as the above script, x would be equal to ‘this is a string’)
var another_var = x;     <== another_var is set to x (again, assuming this were on the same page as the above script, now another_var would be equal to ‘this is a string’)

Now, you have a little groundwork, start coding!

Did I leave something out? Leave a comment.

The term ‘javascript event handlers’ is a loose term. The more appropriate term would be ‘event handlers’. These event handlers can activate javascript when coded into your HTML. Through the event handlers, you can either code the javascript right into the event handler or call a function from the event handler.

Here’s an example:

onclick=”alert(’clicked on’);” <==========one example (javascript right into the event handler)

onclick=”clicked();” <==========second example (function call in the event handler)

The function for the second example would look something like this:

function clicked(){
alert(’clicked on’);
}

The above function would of course be written into your .js file (referenced in the header of your HTML page) or written between <script type=”text/javascript”>*write function here without the stars*</script> tags in your HTML page.

Here is a list of some possible event handlers:
onabort
onblur
onchange
onclick
ondblclick
onerror
onfocus
onhelp
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmove
onreset
onresize
onsubmit
onunload

And to give credit where credit is due, I snagged this full list from daaq.net. This list and all descriptions of the event handlers, what they apply to, and when to use them are all on this site. Great list guys.

The javascript alert is beneficial to the javascript programmer for several different reasons. The javascript alert can give feedback on variables within your script, let your site visitor know what they should do next or why they cannot proceed, and the alert can also let you know when your script is breaking.

This post assumes that you have read the javascript intro I posted a couple of days ago. To write javascript code in your page, you must be writing the javascript between script tags, in a .js file, or even (and I did not mention this on my last post) in an event handler.

To script an alert in your code, this is the appropriate syntax:

alert(’You just clicked a button!’);

And here is an example (click on the button below):

This alert was called through an ‘onclick’ event handler. The html syntax for this button is below:

<input type=”button” name=”mybutton” value=”Click Me!” onclick=”alert(’You just clicked a button!’);” />

Like this tutorial? Stay tuned for more.

To be able to program in javascript on your web page, you can do a couple of different things. One, you can include a javascript source reference in your web page. Or two, you can include javascript tags and begin typing javascript right into the web page.

To accomplish the first of the two options I suggested, you can code this line into your page:

<script type=”text/javascript” src=”whatever.js”></script>

This line assumes that you have a separate file from your webpage stored in the same directory called ‘whatever.js’. Within this file, you can simply write javascript syntax–no need for opening or closing tags–just straight javascript. Although you can nest this line into your code at any point (within reason–so your html can still be parsed) into your page, the best place to write this would be in the <head…></head> tags of your page so that all your functions and scripts will be loaded before a javascript dependent object on your web page is activated by an event handler.

To accomplish the second of the two options I suggested, you can code this line into your page:

<script type=”text/javascript”></script>

Once you do this, you can code your javascript scripts and functions right into your page. In this case, your code would be placed between the <script…></script> tags, like so:

<script type=”text/javascript”>alert(’hi’);</script>

This simple code would generate a javascript alert, with an ‘OK’ button, that says ‘hi’. And, yes, you can code multiple ‘<script…></script>’ tags into your page.

There are two immediately obvious down sides to taking the second of the two options that I gave you. One down side to coding your javascript right into your web page is that this can easily cause HTML errors. Remember, the more HTML errors that you have on your page, the harder it is for search engine spiders to crawl your page, and, in turn, the harder it is for your web page(s) and/or site to get indexed. The second immediately obvious down side to coding your javascript right into your web page is that if you get used to using multiple script tags on your page, your javascript will not be in one all inclusive easy to manage place.

My suggestion is that you take the first of the two options I suggested and write all of your javascript in one included easy to manage file.