FireworksColdFusionDreamweaverFreehandFlashMXHome
Latest New Content

Latest Free Content
View All
Free Content
Accessibility
CMX Learning Guides
Hosted by enterhost

JavaScript 101 - Part 1: The Basics

By: Rob Williams

Page 1 of 4

Set for printing

Next

The most important goal of good web development is the user experience. You can find all kinds of lengthy and in depth discussions about what a "web experience" is, why it's important, and how it relates to your bottom line, but in the end it all boils down to one simple fact: the better experience your users have in visiting your site, the better off your site will be. That's it, plain and simple. There are many factors that combine to produce a strong user experience. Branding and design, consistency, accessibility — I refer more to the ability of users to find and access the information they are looking for, but accessibility for users with disabilities can also be very important — etc. One of the most important and often least well implemented or understood though is interactivity. How the user interacts with your site along with the type of feedback they receive from those interactions can have a dramatic impact on how effective and memorable your site is to that user — arguably even more so than design and layout.

One of my favourite examples of this is Google Maps. Certainly the simplified "Googlesque" layout has an impact on the popularity of this site, but the major draw has been the type of interactivity. Find the least web-savvy person that you know (Grandma, your Father, whoever), open up both Google Maps and Mapquest (or any of the other first-generation mapping applications), and ask them to figure out how to get from their house to somewhere far, far away. When they've finished (and it'll probably take a while, be patient!) ask them which site they liked better and why."That Googlie one" (or something along those lines) is the overwhelming response because it reacts exactly as they'd expect. They find a point on the map, scroll around the map to follow the roads, and find the point they were looking for in realtime, just as they would with a real map.

How does all of this tie into JavaScript though, you might ask? The primary purpose of JavaScript is to provide additional interactivity for web sites. Thus the simple conclusion is that if you want to develop a more interactive site (and thus improve your user experience) then you'll probably need at least some basic JavaScript to do it.

It's important to note that all web browsers provide at least some very basic interactivity. Links that when clicked automatically direct the user to a new page, etc; thus JavaScript is usually used to provide additional interactivity, not all interactivity in general.

Why JavaScript?

At this point it's probably safe to assume that you have at least some desire or have made some commitment to learn JavaScript (you are reading this article after all), but it's always beneficial to have a little bit of background as to why JavaScript is important and especially why you should bother to learn it.

As we discussed in the introduction of this article, JavaScript is most often used to add or enhance the interactivity (and thus user experience) of a web site. Of course it's not the only such tool/technology that allows you to do so. The biggest "competing" example, of course, is Flash. Contrary to popular belief though (and even what a lot of those Flash developers will say), JavaScript and Flash really are not competing technologies. In fact they're actually quite the opposite, as a lot of the interactivity that can be achieved in Flash relies upon ActionScript, which in reality is simply JavaScript that runs within the Flash player. So even if you have absolutely no desire to deploy JavaScript within your web pages the language and syntax are still well worth learning as they'll help you in other applications (like Flash)!

Flash is only one of the many applications that has adapted "JavaScript" to suit its own internal needs. Adobe, for example, has had a JavaScript interface in Acrobat for years, and the introduction of CS 2 adds JavaScript support to Photoshop, Illustrator, InDesign and GoLive.

What is JavaScript?

Officially JavaScript is a fairly simple Object Oriented scripting language. Non-technical translation: a language that allows you to create and control various objects (i.e. elements on a web page, etc) using concepts that are familiar to other programming languages. If you've never done any programming/scripting before, then that last bit doesn't really mean a lot to you, but it's still important because it means that the concepts that you're going to learn (and most of the syntax) can be applied directly to other programming languages. Okay, you'll probably never want to go and learn C++ (a programming language) but you might at some point want to get into one of the many server-side scripting languages.

JavaScript, despite its name, actually has almost nothing to do with Java. Java is another programming language by the way... if you were thinking coffee, then yes, JavaScript has even less to do with that. In fact, the only reason that the language is called JavaScript instead of the original "liveScript" is because when it was first developed (think Netscape 2.0 days!) Netscape (the people who were making it) and Sun (the people who came up with Java) struck an agreement that allowed "liveScript" to communicate with embedded"Java applets". The fact that "liveScript" vaguely resembled Java syntax was merely an added bonus; thus "JavaScript" was born.

Over the years there have been a great number of changes and developments to the original JavaScript language — including standardization under the title "ECMAScript" — but because we'll be dealing strictly with base syntax and concepts here most of those changes don't have a big impact on us. The sequel series to this one, DOM: Scripting to the Standard, will go into more detail about this history and how it affects the objects and methods available to the language in modern browsers today.

Page 1 of 4 1 2 3 4 Next


download
Download Support Files


Keywords
JavaScript, Object Oriented Programming, Introduction, Basic, 101, learning, beginner, JS, string, parameter, variable, script, interpreted language, interpretted language, comment