A quick introduction to JavaScript

Will Little

I've opened this series of web & mobile development tutorials with a quick look at HTML and CSS. Now it's time to dive into a scripting language that can be used for all kinds of things from running web servers, video games, and robots, to doing things in web browsers like validating forms before sending data to your back-end server (wooohooo! exciting, I know. Stay in your seat and let's do this).

[Author's note: I wrote the first couple dozen tutorials in this series a few years ago and I'm in the process of updating the content to reflect the evolution of best practices in the industry. Please comment if you see anything I missed that should be updated. Thanks!]

Before we continue it's important to note that JavaScript is different than Java, which is primarily a “back-end” language, which means it's used to do work (usually much heavier work) on the server side of things. JavaScript, on the other hand, is primarily a “front-end” language rendered by web browsers meant to do (relatively) lighter things like respond to mouse or keyboard events, add/remove/change HTML elements, grab data from servers behind the scenes, etc…

In fact, do you want to try something crazy? Open your web browser's “JavaScript Console” — which is usually in the “view” -> “developer” section of your menu (Mac + Chrome users can press alt+command+j). When it's open, type this in:

window.alert(document.URL);

Did it work? Sweet!

Go ahead back into your JavaScript console, press the up key (which will pre-populate your console line with your last entered command) and experiment by changing document.URL to something like “hello world” (including the quotes).

Anyway, the main thing I want to tell you about JavaScript for now — before I send you off to go learn some of it yourself — is that it is often used in an “object-oriented” way. This means that the window object that you played around with above — the one that had the alert “method” (aka “function”) defined for it — is one of the main “objects” that JavaScript usually works with. You sent a string parameter to that function in the form of document.URL, which is itself an object with a URL method that returns a string (i.e your current URL).

The cool part about this is that if you've followed along in the tutorials thus far, you've already learned that HTML is meant to markup a “document” — CSS styles it up — and now JavaScript is meant to interact with user behavior and/or change the markup or CSS on-the-fly. Make sense? In other words, your “document” object will be filled up with all sorts of things, including HTML tags that have CSS styling applied to them — and JavaScript's purpose is to give you, the developer, a way to develop dynamic web browser experiences for users.

OK, now it's time to go actually write a bit of code before I teach you about jQuery (a neat JavaScript framework). For now, head over at Codecademy and take their free JS tutorial. Enjoy!

- — -

Next Post: jQuery Introduction. Previous Post: CSS Introduction