Hammer Consulting- Learn how to program (using JavaScript) -

Hammer Consulting was started a few years ago with the goal to teach programming to classes of a youth (13-18 years) evening school. The students attending these classes usually had little or no former knowlegde of programming and came out of curiosity to learn something about the topic.

After a few years the current form developed and was quite successful in keeping the youngsters interrested and also providing a fast track into the topic.

Usually the boys (only a few girls attended, unfortunately) wanted to create some games and being a rather tough issue, I figured we could get fairly long by a combination of HTML, CSS and JavaScript. This has proved to work well and the last 4 seasons we have started making things move on the screen after just 6-7 hours.

A usual course is split into 10 classes of 3 hours:

  1. Introduction to computers, internet (webservers & webclients/browsers), files and HTML. Writing the first HTML page.
  2. More about HTML and introduction to CSS. Writing the first styled web page. Introduction to Objects
  3. More about CSS and introduction to JavaScript. Change styles using JavaScript, manipulating the DOM. Introduction to variables, scope/block and functions.
  4. Making objects move, resize and fun like that. Introduction to multi-threading, call back methods, functions as objects.
  5. Getting a little more used to HTML, CSS and JavaScript. Deciding on what to make this and the following 5 times.
  6. Introduction of basic concepts in the selected topic. Start programming the game/program.
  7. Working with the selected topic.
  8. Working with the selected topic.
  9. Working with the selected topic.
  10. Working with the selected topic.

As I discovered how easy it actually is to create simple, yet funny, games using JavaScript in a web browser, we have created the following games:

No matter what you know already, I hope you will learn a few neat trick - or maybe even start getting interrested in programming in general. After completing these lessons, a natural step will be to explore Java or C#.

I hope you will have as much fun learning programming as I have had,

Christian Hammer

Let's play tag :-)

First, I will introduce you to HTML. While strictly not a programming language, just a markup language (a language to descripe how a web page look like), HTML is easy to get started with.

Hyper Text Markup Language is the official name for it. Hyper Text is simply the internet concept - one web page may link to one or more other pages essentially building a whole world of connected documents. Clicking on a link will lead you to the connected page.

Of course, this you already know.

Being more detailed a HTML page is actually just a piece of text with some special characters used to specify the markup. In HTML these special characters are '<' and '>'. Behind the scenes, the simplest web page looks loke this:

<html> <head></head> <body>Hello, WWW!</body> </html>

Probably this code looks a bit weird to you, a few recognisable words, the < and > I mentioned and then some other words between these. The word between < and > is called a tag and these tags always goes in pairs like brackets. As brackets go you can easily differentiate between an opening bracket '(' and the corresponding closing bracket ')'. To make a closing tag in HTML we write a slash '/' immediately after < - as you can see in the 'head' tag: <head></head>
As with ordinary brackes (you usually see this in math) we can have tags inside other tags to impose structure and specifiy a certain meaning/interpretation to the text.
Of course, these tags bear no meaning in themselves, they must encompas something sensible like with the body tag. Between the opening <body> and the closing </body> you find some text. This text is what will be written on your web page and is called the content of the body tag. Notice that the tags must be balanced. That is, writing the following HTML code is illegal as the head tag is closed inside the body tag.

<html> <head> <body> Hello, WWW! </head> </body> </html>

OK, that's enough theory. In $$progHTML02$$ we start programming.

Now, consider a normal document. A document consist of two major parts, the actual text and some information about the document itself. This information can be the title, the name of the author and maybe an ISBN and the publishers name.

In HTML terms the whole document (including document information) is packaged intside the <html> and </html>. Generic, non-visible document information is placed between the head tags and all that is visible is placed in between the body tags. Both of these are structured inside the html tag.
These three tags (<html>, <head>, <body>) and the shown structure is mandatory for any proper HTML page.

Now lets start programming :-)

First you should make a file named 'index.html'. It is very important, that your file is a plain text file. That is, you should use Notepad (Window) or TextEdit (Mac OS) or something similar to create and edit the file. Also pay attention to the file extension (the letters after the last dot) - in Windows the default is NOT to show file extensions and this has surprised my students a few times. Initially they created a text file that got called 'index.html.txt' because they could't see the ".txt" part.

Figure 1: TextEdit on Mac OS

After creating the index.html file you enter the shown code and save the file. Now you must find the file where you saved it adn double click on it to open it in your default web browser. If any program other than the browser open there is a problem with the file extension not being ".html" as required.

Figure 2: Your web page shown in Safari on Mac OS

In the next section $$progHTML03$$ I will tell more about the HEAD tag.

In this section I will present you to a handfull of other tags, the easiest to handle is the title tag.

<title> is only allowed inside the head tag and will give your web page the title you specify:

<html> <head> <title> My first web page. </title> </head> <body>Hello, WWW!</body> </html>
Figure 3: Title at the very top.

So, what ever text you put inside <title> will appear in the title. Notice that only text is allowed inside this tag.

<meta> is a tag that also appear inside the head tag. This tag is ONLY to set some information for the web page. One widely used meta tag is:

<meta name='author' content='Hammer Consulting, Christian Hammer, 2011' />
Some programs, like Google search, is able to read this information and use it for various purposes.
Two questions should come to your mind when you see this:

Well, some tags are not allowed to have any content (no text between the opening and the closing tag). One of these is the meta tag, but several others exist.
Programmers are a lazy lot and instead of writing

<meta name='author' content='Hammer Consulting, Christian Hammer, 2011'></meta>
we abbreviate this to the above skipping the end tag but placing a slash immediately before the last >. The two ways are otherwise identical - you are welcome to use the one you favor the most.

The other question is answered in the next section: $$progHTML04$$.
<meta name='author' content='Hammer Consulting, Christian Hammer, 2011' />

This is the last HTML code line mentioned in $$progHTML03$$ and it does look a bit odd viewed in the light of what I have already told you.

However, this is still (just) a 'meta' tag! But in this case we have added some more text before the >.
If we split the code by every space we get three parts:

  1. meta
  2. name='author'
  3. content='Hammer Consulting, Christian Hammer, 2011'

The first one simply being the tag name. The other two are called attributes and have different meaning according to which tag the are for. As in our physical world attributes are the properties of something. In the HTML world attributes are used to enhance or specialse the tags and are widely used.

As you can see both attributes are composed of three parts. First we have a name, then an equal sign followed by some text in quotes.
The first attribute is named 'name' and is said to "have a value of 'author'", while the other is named 'conent' and have e little longer value.

Essentially, that's it for attributes!

NAME='VALUE'

Notice you can place spaces around the equal sign and even line breaks and tabs, making it look rather different

<
meta
name = 'author'
content = 'Hammer Consulting, Christian Hammer, 2011'
/>

Your browser will display the two formats in exactly the same way.

In the next section $$progHTML05$$ we start using some of the attributes for the web page.

 The web page we have mad this far, is rather boring having black text on a white background. It is easy to change this, so lets do that.

<html> <head> <title>Colors</title> <style type='text/css'>
BODY {
background-color: red;
color: white; } </style> </head> <body>Hello, WWW!</body> </html>
Figure 4: Adding colors.

I have omitted the meta tag in Figure 4 to focus on the color details.

Go back to your index.html file and edit it. Insert the code in yellow above. Save your file and either double click on the index.html file or refresh you browser window (In most browsers you'll find a button formed as a circular arrow. This is the refresh/reload button.)
The final result should be a white text on a red background.

Let's have a look on the new code.
First the tag name is 'style' signifying that it's some style we want to change. The style tag has one attribute named 'type' and some funny-looking value 'text/css'.

To some CSS is considered a programming language but as with HTML it does really not qualify completely as you will see when we start to program for real in $$progOOP$$.

The type attribute designates a particular interpretation of the style tag. In this case it tell your browser to read everything between <style type='text/css'> and </style> as 'text' and more details as 'css' text. The last (css) is an abbreviation of Cascaded Style Sheets aka CSS which is simply a way to assign and change various styles on things inside the web page.

The actual text inside require a little elaboration which will be done in $$progHTML06$$

 Coming soon.

Many programming languages are based on the concept of objects, also termed Object Oriented Programming (or OOP for short). This concept is actually just as simple as you working with everyday objects, like your remote control for the TV.

Let's take an object oriented view on the remote control and connect the programming terms to this.

Properties
or Attributes		 Properties are exactly what you expect - though you can name a multitude of properties of a remote control, a few of the most obvious are
  • Color
  • Material
  • Size
  • Weight
In fact, most of these properties are properties of all objects in our physical world.
Objects in OOP are just that and as with physical world objects the properties of an object can be changed. You could paint your TV remote control red. Thereby changing its Color property (to "red").
Actions
or Methods
or Functions		 Actions (formally known as Methods or Functions) are what you can do to the object - the actions you can perform on it. Obviously, your TV remote control can perfom these actions (for you):
  • Turn TV On
  • Turn TV Off
  • Change program
  • Adjust loudness
  • Adjust brigthness
Of course, you can perform many other actions as well, among these I guess that "throwing" is one of the more well known.
Less obvious is that changing color of the remote actually is an action performed on the remote.
Interfaces When you hold a physical object in your hand (or when you are touching it) the actions you can perfom on the object can be grouped according to "kind of action". If we broaden our perspective away from the TV remote to include other remote controls, we typically find some actions we can perform on all and some we can perform only on some kind of objects. The remote for your DVD player, for instance, also have "Turn On" and "Turn Off". But it is not possible to "Adjust brightness" as on the TV.
Also, if we broaden our perspective even more, the lamps in your room also have the actions "Turn On" and "Turn Off" but ofen can do no more that that.
This set of 'available' actions are called the interface. More about interfaces in $$progInterfaces$$.
Classes Most likely you are now sitting on a chair reading this. That particular chair is a specific object - no surprises here. In you home you also have other chairs, I guess. Each chair is a specific object in its own right. Now, all these chairs (objects) can easily be labelled as belonging to a group we call "Chair" (the use of singular is intended).
All chairs are also part (member) of another larger group "Furniture", not all of them good for sitting on.
Going a little academic we can replace the term "group" with "class" and get a bit closer to the terms used in Object Oriented Programming.
"Chair" is a class that is also a class called "Furniture" and all are part of the broadest possible class "Object".
As you can see the classification is hierarcical and we say that eg. "Chair" is a specialisation of "Furniture" again a specialisation of "Object".
Classes are an easy way to talk "generic" about something and we use it all the time, when we don't need to talk about specific objects.
In $$progClasses$$ I will detail this a bit further.

If we split the term 'interface' to 'inter' (meaning between) and 'face' we avctually get a pretty good idea what this term cover.

So, an inter-face is the 'face' between one thing (you, object) and another thing (me, another object). That is, what can you see, hear and feel about me or some other object.

So let's try to make a formalised (but short) description of an interface

e-mail:


Address:

Hammer Consulting
Lynghøjvej 13
DK-3390 Hundested
Denmark