By act of the 111th Congress, this is CS Education Week.
House resolution 1560, passed by the 111th congress on 23 September 2010, decrees the week containing 9 December of each year It is not clear that this was intended to be an ongoing resolution and may only have applied to 2010; but Computing in the Core, CSTA, the ACM, and many others seem convinced it is ongoing…. to be “National Computer Science Education Week.”
I thought perhaps, as a computer science educator, I might spend a little time walking through how a language works from top to bottom. I’ll start with one of the most common languages I know: Javascript. I’ll refer to my Unlocking Programming series as I go.
In any language, we need to learn about how it handles things or data; actions or procedures or methods; and interaction or input/output.
For the most part, in Javascript there are just four types of things: Numbers, Strings, Objects, and Functions.
Numbers are much as you’d expect, things like 2 and 34.5.
They can be positive or negative, as large as 10308 or as small as 10-323,
and can have up to 16 significant digits.
They are stored in binary, not decimal,
so numbers like 0.1 are only stored approximately as 0.09999999999999998223…,
but this can usually be ignored in practice.
Strings are ordered sequences of characters.
They are written between straight double quotes, like "a string".
In some cases (noted next) the quotes can be omitted.
Objects are associative arrays: mappings between keys (usually strings) and values. You can think of them like telephone books, with names as keys and telephone numbers as values.
Functions are descriptions of how to do something. Functions are organized as lists of simple statements, with some “arguments” or set of things provided as input and some “return” or single thing provided as output.
There are a few basic kinds of actions in Javascript. More complicated actions can be created by defining functions from these basic parts.
The simplest actions are mathematical and logical operators
like - and ^:
the former subtracts numbers, while the latter does what’s known as a “bit-wise exclusive or”.
Usually simple arithmetic and comparisons (e.g., >= for ≥, etc.) are sufficient.
Next is assignment and lookup of variables.
Assignment is done with an equals sign,
where the thing on the left is a name and the thing on the right a value
(order always matters).
So x = 3 associates the value 3 with the variable name x.
To get back that value, simply use the name again, like x + 7 to mean 10.
Things get a little complicated
because you can actually have several variables with the same name
in different parts of a program
and sometimes you’ll see something like var x = 3
to mean “I want a new variable called x even if there is another one available somewhere”
but these nuances can be ignored for now.
Third is lookup of things inside an object.
If x is an object, x[34] means “the value corresponding to key 34 in object x”.
You can use lookups the same way you can variables,
such as x[34] = 7 + x["cat"].
If the key is a string that starts with a letter and has not spaces inside it,
you can write x.cat instead of x["cat"];
these have slightly different meanings, but are mostly interchangeable.
Fourth, we have function invocation.
If x is a function (a description of how to do something)
then x() means “go do the thing x describes”.
You can also put things in the parentheses as input to the function,
like cos(30) or f(x, y)
and the entire invocation is replaced by its result,
so you could write, e.g., z = cos(x) + 1.
And last but not least are control constructs.
x = z means change x to have the same value z has,
but if (z > 5) { x = z } means only change x if z is big enough.
In addition to if there’s else, while, do, and for;
more on which later.
Javascript is designed to interact with webpages,
which is done through some objects and functions
that are implemented by a browser and describe how web pages are built.
The most basic part of this is the document variable
that refers to an object that describes the current page.
Inside the document are functions like document.createElement
for adding new parts to a webpage
and values like document.body that is itself an object describing the main part of a webpage,
containing further objects inside itself.
The rather large set of objects and functions used is called the HTML Document Object Model or simply the DOM. It is big and not that interesting most of the time. Any time I need some part of it I look that part up.
A handy function to know is alert which creates a popup window with a message.
Often if you are confused by what’s going on, an alert can help you figure it out.
A less intrusive way is through the console object’s log function
(e.g., console.log or console["log"])
which puts messages in a normally-hidden area
you can access via “Shift+Ctrl+J” in most browsers.
Next: putting it all together in an example program.
Looking for comments…