JavaScript ↩

Time to start building something exciting. We'll make a simple project that will introduce you to JavaScript syntax, and pave the way for making things with data from external sources.

Table of contents

1. Slides
2. Learning some more in your own time
3. Programs vs markup
4. jQuery
5. My likes project
6. artybollocks inspired project
7. Debugging
8. Syntax

Slides

PDF version of the slides for this session can be found here.

Learning some more in your own time

CodeAcademy has some good sets of exercises that can help you practice JavaScript. You can do them in small chunks and save your progress.

Programs vs markup

If you’re still unsure as to what is the difference between a programming language and a markup language, perhaps this article by J. Korpela will help explain that.

jQuery

jQuery is a library that simplifies some of the common things people do with web pages and JavaScript (and fixes for you some of the inconsistencies resulting from browser bugs etc). It might be a little bit confusing to know which things you learn that are part of it, and which ones are vanilla JavaScript – that’s okay. You’ll get there in time.

Look up jQuery documentation here.

My likes project

We wrote a quick project together that introduced the JavaScript syntax. Have a look at the sample file we’ve created during the session.

Be sure to view code source rather than just see the result in the browser.

artybollocks inspired project

We’re going to be making a little program inspired by artybollocks generator - a random statement generator, so you can get familliar with the syntax before we move onto the next thing. Have a look at the sample file we’ve created together.

Debugging

Things always go wrong: you forget to add a bracket, mistype a variable name, or eat a closing semicolon. A good text editor with syntax highlighting can help a great deal, but these things will still happen. I have wasted many days of my life hunting down bugs which later turned out to be one character typos.

Using the console

When your bugs aren’t syntax bugs, but logic bugs, tools like JS Hint won’t be of much help. luckily there are other things you can do to figure out what went wrong.

For example, you can print out value of variables, function results etc. into the JavaScript console so you can inspect them. To open up the console, go to the View menu, then Developer > JavaScript Console.

You can then use console.log(value) in your code, like this:

1 <script>
2 	console.log('hello there');
3 </script>

Which results in this:

Inspecting variables:

1 <script>
2 	var greeting = "hello there";
3 	console.log(greeting);
4 </script>

Notice that the output comes from a different line number, because we’ve added an extra line to define the contents of the variable.

You can observe how variables change after you modify them:

1 <script>
2 	var number = 1;
3 	console.log(number);
4 	number = number + 1;
5 	console.log(number);
6 </script>

You can also use console.warn(), console.error() and console.info() for printing out different types of messages for yourself.

But beware! This won’t work in tools such as JS Bin.

To see the shortcuts for bringing up the console and other developer tools see this StackOverflow answer.

JS Hint

To pick all the little errors up (big ones too), you can use JS Hint. Paste your code in and it will suggest improvements, find missing brackets etc. You can customise what you want it to warn you about. Remember to select the options “Development” and “jQuery” so it doesn’t by accident highlight correct code.

You can use JS Hint in your code editor if you’re using Sublime Text 2. To do this, you will need to install Sublime Package Control, and then follow instructions under Install JSHint with Package Control in Sublime Text 2. Erroneous lines will be highlighted, and once your cursor is over them hints will appear in the bottom status bar.

Asking questions

StackOverflow is a Q&A site dedicated to programming. Most questions you will need to ask have already been asked and answered before. It’s one of the sites I have always open when I code.

Good questions and answers are rewarded, so even fairly basic questions are answered in a helpful manner.

Other

For other useful debugging suggestions have a look through the .net magazine tutorial.

Syntax

Comprehensive JavaScript syntax guide can be found on Wikipedia, though you are already familiar with DocHub which might be more useful.

jQuery has it’s own set of rules and methods, which you can look up on the project’s documentation page if you are using it.