Learning Web Design: Basic JavaScript

JavaScript is the most popular language in the world [citation]. It is the modern way to add dynamic behavior and interactivity to web pages. This article assumes you know nothing about JavaScript. This article is a precursor to the Intro to JavaScript lesson in my Web Design 1 class at Parsons New School for Design. I will be covering a few fundamental aspects of JavaScript and then promptly recommending that you just use jQuery (at least to start).

At the end of this article you should have at least an elementary understanding of:

  • What is JavaScript
  • How to use JavaScript on your website
  • Why you should just use jQuery

What is JavaScript?

JavaScript is an object-oriented, interpreted programming language that runs in the browser[1]. It contains all the standard features of a programming language such as variables, functions, if/then conditionals, loops, etc.

There are many unique parts of JavaScript (good parts and bad parts). The bad parts mostly are at fault for its old reputation of being an amateur, and annoying toy language. To be sure, JavaScript can be very elegant and quite capable.

One interesting component of the language that you'll need to know is that it relies heavily on the environment in which it runs. I mentioned it "runs in the browser" which means, the browser parses it by opening your JavaScript like a text file, and translating it line by line into instructions that do things on the page like animations and rollovers. This is interesting because JavaScript itself can't do much without the presence of the Document Object Model (DOM). The DOM is the object representation of the HTML file the browser had to parse before executing your JavaScript.

JavaScript's interactions with the DOM are event-based, which means that your script can listen to what the browser is doing (and also what the user is doing on the browser, like clicking links, etc.)

An example of the event-based nature of JavaScript is how most well-constructed scripts will wait until the HTML has been fully parsed and the DOM has been fully built before running. This prevents errors like if your script depends on a certain part of the DOM being available (like a footer) and it has not been built at the time the script runs because you put your script in the <head> section of your site (before that footer loaded).

The code might look something like this:

window.onload = function () {
  alert('page is loaded!');

Waiting until the page loads to execute JavaScript.

What's happening is that window is referring to the page's root object. The root object is always the "window" object, and everything is a child of it. When the browser finishes loading the window object, it calls the onload method which we have assigned our function to.

In plan English our script reads like this:

"When the window finishes loading, run this function."

How to use JavaScript on your website?

JavaScript can be included on your website in several ways.

It can be included via an external file,

<script type='text/javascript' src='scriptName.js'></script>

or by an embedded script block,

<script type='text/javascript'>
//...script body here...

or attached to HTML elements via inline event handlers,

<a href='link.html' onclick='alert("hello!");return false;'></a>

or injected into the href attribute of an anchor tag,

<a href='javascript:alert("oh yeah");return false;'></a>

It is important to understand how the browser parses JavaScript in order to know how to include it correctly. As soon as the browser parser encounters any JavaScript, everything else stops until it is finished executing. This means if you include an external file at the top of the HTML document (e.g., in the head), none of the rest of the page will finish loading and you will see a blank white page until it is finished. This could potentially end up being quite a long time depending on how many scripts you've included, and how large the files are.

The best practice is based both on form and function. By 'form', I mean that the user is primarily concerned with the time it takes from pressing 'enter' and being able to interact with the page. This is referred to as 'time to interaction.' If we don't block the page from rendering by putting script includes at the top of the page, the page will both appear to load more quickly and be partially interactive quicker. By 'function', I mean that if a script relies on certain parts of the HTML to be available, and at the time the script executes they have not loaded and thus are not available, the script will fail.

Because of those two reasons, the best practice for including JavaScript on your site is to simply include it at the bottom of the page immediately before the </body> tag.

Why you should just use jQuery

JavaScript is itself an insanely confusing and technically daunting language. There are many ways to perform the same task, and there are components of the language that are just plain dangerous (e.g., eval). Because of these things, it turns most traditional developers away. Not to mention the myriad variations of browser implementations of the specification.

Fortunately, jQuery alleviates most if not all of these problems and more. jQuery is a library written in JavaScript that makes JavaScript infinitely easier and more enjoyable to write. Let's look at an example.

Core JavaScript:

var header = document.getElementById('header');

...vs. jQuery:

var header = $('#header');

Not impressed? How about another example.

Core JavaScript:

var header = document.getElementById('header');

for (var x = 100; x--;) {
  header.setAttribute('opacity', x/100);

...vs. jQuery:


Yea, I thought that last one would catch your eye - and that's a super simple example. Don't even get me started about doing event delegation or cross browser Ajax calls in core JavaScript. jQuery reduces the amount of code you have to write to almost nothing. The caveat here is that you don't have to understand what's happening behind the scenes in order to use jQuery.

So why would I recommend learning JavaScript by using a library that you can use without having to actually understand core JavaScript? Because it lowers the barrier to entry for inexperienced developers and makes using JavaScript approachable and fun. From there on in hopefully you get hooked and then don't realize what a slippery slope you've landed on before it's too late.

Seriously though, I don't like unapproachable languages and I found myself more interested in learning about core JavaScript once I felt comfortable with jQuery. If that method doesn't work for you, then by all means dive head first into the 624,000,000 Google search results for "javascript."

In closing

To be sure, there is a lot to learn about the language including syntax, data types, scoping, events, the DOM API and many more. I will be writing more articles about JavaScript and jQuery but for the time being, I would recommend getting acquainted with the three links listed below.

Thanks for reading!

Helpful Articles

Douglas Crockford's Javascript
Quirksmode - General [JavaScript] Introduction
w3schools.com - JavaScript Introduction

Related Books

[1] JavaScript can also be run on the server.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>