Neverside

[Article] Using Javascript With Your Web Pages

Using Javascript With Your Web Pages
Before there was Flash the only real effective way to deliver a trully dynamic experience to your web page was with javascript. Of course there is also Java, but that is something totally seperate and well, I haven't really seen it used in years. Javascript is a programming language which allows your web page to adapt and interact with a visitor live, without ever having to send anything back to the server. But it is also dependant on your visitor's broswer for its effectiveness, which gives it some limitations in terms of use if you wish to maximize your site's accesibility. However, javascript can still be a very useful and fun tool for web designers and their site's audience.

When to Use It
Since your visitor may not have some javascript capabilities or may have them disabled, it shouldn't be used in areas necessary for your page to display or function properly. If a critical area of your page such as a form does depend on javascript, you should provide an alternative solution for visitors who do not have the needed capabilities. This way, they can also view and navigate your site while only missing out on conviences and effects generated by javascript. Gmail would be a good example. They provide a javascript enriched inbox as well as a plain HTML version so that visitors may use their services regardless of their browser's javascript capabilities. Sure, javascript users would get a smoother experience but all can enjoy the site.

How to Use It
Javascript can be written in any plain text editor and either saved as an external *.js file to be linked to your document, or placed directly into your HTML code. A script tag is used to (1)link an external Javascript file and is usually placed in the head of a document. When placed directly in your HTML file, javascript code goes (2)inside the script element or within an (3)event attribute of an HTML element (event attributes always start with an "on" i.e. onclick). Below are examples of each use:

1) External Javascript File

Code:

<script type="text/javascript" src="http://path/to/javascript/file.js"></script>

2) Within a Script Tag

Code:

<script type="text/javascript">
//< ![CDATA[

// this is a one line JS comment with some variables below
var name = "Sally";
var age = 25;

/* This is a multiple line JS
comment block with a
function beneath it */

function whodat() {
var string = "Hello world! "+name+" is "+age+" years old.";
alert(string); // this will alert - Hello world! Sally is 25 years old.
}

//]]>
</script>

3) Inline Event Attribute

Code:

<button onclick="whodat();">Click Me!</button>

Notice the script element always has the type attribute "text/javascript" when used with javascript. In the third example, the button, when clicked would exectue the javascript within its onclick attribute, which happens to be a call to the "whodat" function. If we didn't define the function before the button was clicked, it would cause a javascript error instead, which is usually a turnoff for visitors. And don't worry too much about the line with "CDATA" or the brackets on the end, but they should always enclose your javascript in XHTML documents.

How to Code It
As there are standards in XHTML and CSS, they are also present in Javascript. And as in similar issues with CSS, each browser's unique interpretation of your code makes hacks and seperate versions of code necessary to get your script working correctly in as many of those broswers as possible. Internet Explorer, once again, will likely be the bane of your standard compliant code but it won't be as much of a worry as with CSS.

In most web design cases, javascript will be used to alter or read certain elements of the page. For example, we may want to check what a user has entered into a form field and respond accordingly, a preauthentication of sorts. Well, the best way to access ANY element on your page is to first give it an ID and then use the DOM function getElementById() to retreive a reference to the element that javascript can use to manipulate it. Once we have the reference we can alter the elements content, attributes, even CSS styles. The DOM, or Document Object Model is a subject for an entire set of aticles so I won't really go into that, but it is where you will find most of javascript's practical use in web design. I will leave the nitty gritty details of those procedures for another time.

Awww, That's It?
The use of javascript goes much deeper than what I covered here but you should now have a better idea of how and when to use it in your own web documents. You'll find that other programmers have discovered many creative and helpful uses of javascript so don't be affraid to look around and learn from there examples. Good luck!
------------------------------------------------------------------------

Well, I thought we could use some more javascript tutorials so I wrote this one up real quick. Yeah, it should need some more revision and I'm not totally sure I like the order of "when" and "how". And the headings suck but, its an article, kinda.

___________________

It's a nice article for people who are new on javascript. Good job, I like this one...

This one is perfect, great work. You get a gold star for this one.

___________________

Neversidian, your staff is broken.

Should also cover what is appropriate use of js and what isn't, ie js based rollovers etc.

___________________

angelessme, antagonising neverside members, staff and administration since 2001.

Originally posted by angelessme:

Should also cover what is appropriate use of js and what isn't, ie js based rollovers etc.

Maybe in another article, this is a 'getting your feet' wet type of Article. Good job Riah!

___________________

The Audoptic Weblog. It's where the magic happens.

Thanks everyone, glad to contribute. Yeah angelessme, there could be a proper use type article in the future though I might be able to add a line about that to the "when to use" paragraph.

___________________