JavaScript 101: Week One


So… this is the first of my posts on learning basic JavaScript with the fine people at P2PU - an excellent online educational resource that promises “Learning for everyone, by everyone, about almost anything.”

You might have caught my earlier post on the same topic, written and posted as part of the course sign-up process. As is probably clear, I was very out of my depth, trying to get to grips with an introduction to JavaScript intended for an audience of experienced programmers, and the result was an extended “OMGWTFwaaah…?” of a post. Happy to say, I wasn’t alone in my reaction, and it seems the facilitators have decided to add a second “lite” track to the course, for people like me ;)

The lite track will be using an excellent free interactive textbook called Eloquent JavaScript. Bonus: using Eloquent Javascript will probably make this whole exercise slightly more interesting to those less techy who’d like to follow my posts.

The assigned topic for this week’s blog post was to summarise a number of topics from chapters 2 and 3 of Eloquent Javascript, as simply as possible. I’m pushing deadline here, so I’ve attempted that below, and will write another post again in the next day or two, with some more reflection on the first chapters.

Eloquent JavaScript (“EJ” from now on) is written by one Marijn Haverbeke, and so far I’m finding it a pretty excellent book. Haverbeke takes an approachable style, without seeming to patronise. There’s a wry humor that shines through, now and then, and it’s clear that he cares about the art of programming and not just the science or application of it. Always nice when the author is passionate about their subject.

Chapter 1 of EJ is a brief intro to Javascript and to programming in general. It’s written better than I could ever summarise it, and you can read it here if you like.

Chapter 2 is where the author gets down to business, and starts explaining the essential nuts & bolts of programming, and how they apply to JavaScript.

Values: are basically little chunks of data. A computer knows and understands nothing but data and how to manipulate it; values are the pieces of data that get shuffled around. A lot of different things can be values: numbers, words or chunks of text (called “strings” in programming-speak), even the tools (aka. “functions”) used in the program for doing things to other values are values themselves.

Variables: basically a name that you use to keep track of a particular value. Some people use a box or container metaphor, EJ’s author suggests imagining tentacles (am I the only person who doesn’t like to imagine tentacles this close to bedtime?) - I’d almost suggest thinking of variables as pins on a corkboard, with little printed label-cards glued to the pinheads.

When you create a label-pin (ie. a variable), you just type the command var and give it a name. You don’t have to give it a value - you can just stick it on the pinboard with nothing pinned to it. Probably, though, you’ll want to stick it to something (a value) right away. Which you do using a “=”. When you want them to, variables can be reassigned and stuck to something new. More than one variable can also be stuck to the same thing on the board.

Control flow: essentially means the order in which the computer reads through the program and follows the instructions you’ve given it. For the most part, this is simply top to bottom.

You can change this, though - for starters, the programmer can tell the computer to perform certain bits of the program if particular things are true using if, else if, and else conditions. These three aren’t hard to understand - they’re tests that you can subject a value to, and tell the program to act differently according to the results.

See if you can follow this sample logic: if a particular thing (you get to choose; “three is greater than two” for example) is true, one action gets performed, else if some other chosen condition is true a different action is done, else… well, if none of your chosen conditions is the case, then the program performs whatever other action you’ve thought of for this scenario.

A program can also be instructed to loop: to perform the same set of instructions, over and over, for as long as your chosen condition applies, using while. This is again fairly self-explanatory: your desired actions get looped while the condition applies, and stop looping once it doesn’t. You can also use for to loop, which is a little more complicated, but can work differently: you need to create a “counter” variable, tell the loop when to stop (eg. when the counter reaches a certain count), and how to update the counter each time (eg. count by 1 each time, or 2 each time, etc.)

Whether you’re testing a condition with an if statement, or creating a loop, under javascript the condition that you’re testing MUST be written inside () brackets aka. parentheses. Having had my programs for this week fail many times because of this simple mistake, I can testify to this.

In Chapter 3, Haverbeke describes functions. Functions are like tools, that either come standard with JavaScript, or can be tools that you’ve created for yourself. By creating or using a function, you can use the same useful piece of program many times, without needing to write it anew each time. Functions can be complex, or they can be simple. They can even contain other functions within themselves. When you use a function, you generally give it an argument: a value that you want the function to work on. When it’s done, the function returns another value, generally the result of whatever instructions it performed.

As an example of a useful set of instructions for which you might want to create a function: imagine a program for writing people’s name and personal details into a database. You want to store peoples’ first and last names as separate values in the database, but because of a mistake in building your website, when entering their details some or all of the people responding have typed in their first and last name in the same field, first name first, separated by a space. A function could be created that takes the single string with the first and last name as its argument, and returns them as separate values. This function could be called again every time a name was found to be entered as one field. 

This has admittedly been a hurried and incomplete blog post, in order to make deadline in a busy week. I’ve completed the exercises in the first 3 chapters of EJ, and intend to post them here in the next day or two, along with reflections on some of things that gave me difficulty in this first week.

Tag for the course aggregator: /*#p2pu-Jan2011-javascript101*/