IT Connect

Information technology tools and resources at the UW

What is Javascript? – Javascript Tutorial

What is JavaScript?

This tutorial assumes beginner knowledge of HTML, and CSS.

JavaScript is the scripting language of the web. If you have ever wanted to add simple interactivity to web pages beyond links and without complicated server languages you will want to learn JavaScript. It is supported by all modern browsers and is as ubiquitous as HTML and CSS. This tutorial will teach you more about the language and how to use it to create the interactive user experiences that people have come to expect from the modern web.

Tools

In order to walk through the curriculum you will need to setup some tools on your computer. These tools are free.

Komodo Edit– Runs on Mac OS X, Windows, Linux 
Allows us to write code much more efficiently by highlighting the syntax we will discuss throughout the curriculum.

Chrome – Runs on Mac OS X, Windows, Linux 
Modern web browser that will allow us to preview and debug our content

Tutorial

This tutorial was created and is maintained by the W3 organization which manages HTML, CSS, JavaScript and many other web standards. It is arranged by how we teach the content in our workshops, but the material listed can be followed by individuals looking to learn more. We recommend the following order for ease of learning, and because later tutorials reference material in earlier tutorials.

Workshop 1

  1. What can you do with JavaScript? 
  2. First look at the JavaScriptExternal Link
  3. Programming – The Real Basics
  4. JavaScript Functions

Workshop 2

  1. Objects in JavaScript 
  2. Traversing the DOM 
  3. Dynamic Style – Manipulating CSS with JavaScript
  4. Handling Events with JavaScript

Frequently Asked Questions

These questions are meant help you solve specific but common problems that may pop up when using this language. They are meant to be read after you have gone through the tutorial and begin actual development.

Why does my website run in a modern up to date browser, but not an older version of Internet Explorer?

Older versions of web browsers do not implement the most current features of the web languages, and in several instances forgo web standards in favor of proprietary solutions. You can never be sure that your website will run in all browsers without testing to see if your website works consistently. If you cannot test your website in multiple browsers online resources such as Can I UseExternal Link allow you to look up what a browser supports.

When should we avoid JavaScript?

Despite the fact that JavaScript is a widely implemented and standardized language amongst web browsers you should always check to see if what you are trying to accomplish can be done in HTML, CSS, or (in some cases) a server side language first. This is because several older or low powered devices such as mobile phones have difficulties handling JavaScript. Also computers with higher security needs often disable JavaScript due to potential flaws. JavaScript is a very powerful tool, but remember to use it sparingly and look for alternative solutions.

Are there any other languages for programming client side on the web besides JavaScript?

Due to the fact that client side programming languages require the cooperation of all browser makers, JavaScript is the only language for client side web development. However several languages can be rewritten by a computer, via a process known as compilation, into JavaScript. A list of such programming languages is maintained by JashKenas.

Supplementary Resources

In no particular order these external resources supplement the tutorial by providing shortcuts to commonly used information and further learning.

The Principles of Unobtrusive JavaScript – In depth breakdown of how and why to develop JavaScript that is separated from the structure of HTML similar to the separation of HTML and CSS.
 
JavaScript Best Practices – Walkthrough of the best way to develop JavaScript. Essential read for professional JavaScript development or large scale web application development with JavaScript.
 
Graceful Degradation Versus Progressive Enhancement – In depth look at a prevailing theory in JavaScript development concerning when to use JavaScript in your pages and when not. Great for understanding how adding JavaScript to a website will effect user experience and when to decide on using JavaScript.
 
A Short History of JavaScript – Interesting and brief read about how JavaScript came to be.