First steps programming

The next section of the book, we’ll be discussing what geeks mean when they use the term data. It is a relatively abstract topic, which is likely to lose people who are more practically inclined. We will be taking our first steps with programming by interacting with real web pages. This may sound daunting, but you will be fine. We are trying to get an appreciation for what programming can offer us.

Step 1: Open a web browser

You will need to use a laptop or desktop machine, rather than a tablet or mobile device. That is because the mobile versions of browsers have fewer options for developers.

I recommend using a recent version of Firefox or Chrome.

If you do not have access to one of these browsers, you should install a browser extension called Firebug Lite. Firebug will enable you to follow along, but it might take a few minutes to set up. When you open its web page, click on the big red button on the top right.

Step 2: Open its web developer console

Internet browsers come built with several tools that make it easy for web developers to make sense of what is going on with a browser. One of them is an interactive console that allows us to do programming right there in the browser.

If you hunt aroung in the tools menu, you’ll find it.

If things have worked correctly, a sub-window will pop up from the bottom of the page. What you are interested in is a greater than sign (>).

Step 3: Begin to code

Let’s demonstrate that computers can count. Type 1 + 1 and push Enter. The computer should respond with 2.

> 1 + 1
2

If that worked, I would like you to give you a small taste of some of the power you have at your fingertips.

You are not going to hurt the computer by making mistakes. One of the good things about JavaScript in the browser, is that nothing you do can affect the system that is running the browser. The browser acts as a shield as well as an enabler.

Visit http://www.nzherald.co.nz. If your web console is still open, you may see a bunch of garbage appear in front of you. Ignore all of that. Click on a news story headline. Once you are inside an article, enter the following line into the > prompt and push Enter:

> $("#articleBody p").text()

All going well, you will see a large block of text appear. The formatting is terrible, but you should be able to make out the content. I hope this has given you a taste of some of the really complex things you will be able to achieve by working through the book.

What have we just done? We have sucked out the paragraph tags from the HTML element with the id articleBody and then asked for the text from those p elements to be returned to us.

Some pointers for the inquisitive:

• Perhaps think of the dollar sign as shorthand for the word “select”. As I mentioned in the first chapter, programmers like to simplify at the expense of ease of learning.
• The brackets (parentheses, for non-New Zealanders), ask JavaScript to execute the command to the left. When something appears within the brackets, we are providing context. In the case of the $ command, we are providing "#articleBody p" as context. The double-quotes are significant here, as they tell JavaScript to treat these characters as a single string of characters. Formally, this extra context is known as providing arguments to functions, although we have only provided a single argument to $.
• Once a function returns a value, we can ask the value to provide commands. $("#articleBody p") returns a list of HTML elements. Those elements understand the text function, which is called with zero arguments by just using empty brackets ().
• We call functions on return values by connecting them with a dot.