You are here

Getting started with programming JavaScript

JavaScript is one of the primary web programming languages. It is the language used in Google Apps Scripting, and in HTML5 interactive documents. Chances are pretty good that most of the interactive features that you see in websites were coded in JavaScript.

Much of the power of JavaScript comes from its power to manipulate and modify HTML, which is the markup language that websites are written in. Therefore, if you want to learn JavaScript, you will sooner or later need to learn HTML (and CSS) as well.

You will want these things to get started:

  1. At least one web browser. This will be where you run your code. I recommend using Firefox with the extension Firebug installed. Firebug is incredibly useful for finding bugs in your code, and for debugging. Google Chrome is also useful for some simple debugging as well. Note: JavaScript does not always run the same in every browser, so one reason to have multiple browsers is to test that the code you write works in all of them.
  2. A good text editor. I recommend Programmer's Notepad for a PC, and TextWrangler for Mac, both of which are free.
  3. A language reference. I personally like Mozilla's reference here
  4. Some understanding of how web technologies work. This reference guide, again by Mozilla, is useful.
  5. A folder on your computer dedicated to your projects. It is a good idea to be organized from the beginning.
  6. Blocks of time in your schedule to spend working on programming. Programming is something that will take concentration and focus, and is hard to learn in 10 minute intervals.
  7. I also recommend buying a reference/tutorial book. I found JavaScript for Dummies helpful as a starting place, for example.
  8. A JavaScript library that professionals use (I recommend jQuery). This will allow you to create more interesting projects, while at the same time helping you develop an understanding of JavaScript ideas.
  9. An understanding of the design cycle is useful.

Once you have the things above, my recommendation is try to duplicate someone else's project. This will help you ensure that you have your development process set up correctly on your computer. Your JavaScript files are loaded by the HTML page you create, and so end up linked in it. Here is a sample template you can use for your JavaScript development. There are a lot of ideas that will want to unpack if you use this template.

Simple HTML template

My workflow for programming in JavaScript is to have the text files I am editing open in one program, and the output open in a browser. When I make changes to my code, and want to see the output, I simply save the changes, and then refresh the page that has my JavaScript in it.

In a future post, I will share a screen-cast of starting my own JavaScript project, and talk through the creation of this project.

About David

David is a Formative Assessment Specialist for Mathematics at New Visions for Public Schools in NYC. He has been teaching since 2002, and has worked in Brooklyn, London, Bangkok, and Vancouver before moving back to the United States. He has his Masters degree in Educational Technology from UBC, and is the co-author of a mathematics textbook. He has been published in ISTE's Leading and Learning, Educational Technology Solutions, The Software Developers Journal, The Bangkok Post and Edutopia. He blogs with the Cooperative Catalyst, and is the Assessment group facilitator for Edutopia. He has also helped organize the first Edcamp in Canada, and TEDxKIDS@BC.

Comments

Thanks! Greatly appreciated and will definitely be looking over this (once I get a moment!).

Add new comment

Subscribe via email

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
ITLDBAOITSCKTPL
Enter the word shown above.

Links

Subscribe Subscribe to my blog

Theme by Danetsoft and Danang Probo Sayekti inspired by Maksimer