Introduction to JavaScript

So far, our study of programming concepts has involved

Now we’re going to round it off with a bit of actual code (computer instructions), using the JavaScript programming language.

Separation

Although JavaScript was originally designed to add spice to web pages, and it is still used mainly to enhance web pages (although it has begun to be used more and more for other applications), our approach is to separate JavaScript from HTML. Just as a pianist learning a new piece of music will first practice the right hand part alone, and then the left hand part alone (or maybe left then right, but the point is: each hand separately), and finally put both parts together, we believe that the best approach is to learn HTML by itself, and JavaScript by itself, before you try to put them together. Besides, our objective is not for you to make fancy web pages, but to learn programming concepts. We are not going to teach you anything in this course about putting JavaScript together with HTML, but if you want to learn about that, there is plenty of information about it in Chapters 17–21 of the textbook by Lawrence Snyder, Fluency with Information Technology.

Tutorial

Also, instead of giving you a long series of lectures about JavaScript, we are going to turn you over to a highly interactive computer tutorial. Just as you don’t learn to play the piano or the flute by reading or hearing about it, but by doing it, so also you will learn best about programming by doing it. So, I’m going to just make a few introductory remarks, and then turn you over to the tutorial.

Syntax

As we go from visual programming and pseudocode to actual JavaScript programming (or any other text-based programming language, i.e., the way programming is normally done), the biggest difference is that you have to be very careful and precise with syntax—that is, the grammatical rules of a language. With the Hour of Code, you couldn’t make syntax errors: the visual programming user interface didn’t let you. With pseudocode algorithms, you could make grammatical errors, but it wouldn’t matter so much, because human beings are interpreting your algorithm. But now you can make syntactical errors that matter. Misspell a word, forget to capitalize something that needs to be capitalized, or put in the wrong punctuation, and the computer will simply not know what you mean, and it will tell you so. You’ve got to remember that with a few exceptions like Watson and Deep Blue, computers are very, very stupid and literal-minded machines. Your task is to describe how to solve a problem in a way that an idiot can understand it.

Don’t worry, though: the tutorial is very helpful when you make errors. If you get something wrong, it will often make a suggestion about how to fix it, and you can always ask it for a hint as well. But if you do get stuck, please send an Oncourse Message to “Instructor Role”, and include a copy/paste or screenshot of the code you’re having trouble with.

Okay, that’s the biggie: you have to say things just right, because you’re giving instructions to an idiot; but there is a semi-intelligent helper there (the tutor) to give you hints and advice; and we, your instructors, the really intelligent helpers, as we like to think, are available as backup.

Let me just highlight a few other differences and similarities between JavaScript and what we’ve done before:

Functions

We said earlier, following the textbook, that a function is “an operation that the agent already knows how to perform” (Snyder, p. 301). Functions are built into spreadsheet programs, for example. But it turns out that in JavaScript, as in most programming languages, we can create new functions, thereby giving the agent new operations that it knows how to perform.

This is a powerful tool for solving problems, because it helps us to break down complex problems into manageable parts. We think of a high-level algorithm to solve the problem, but that algorithm refers to certain functions that don’t exist. So then we direct our attention to the design of algorithms for each of those functions. We split the problem into parts, dividing and conquering.

To put it another way, the ability to create functions allows us to extend our programming language, making it more powerful.

In the second part of the tutorial, you will learn how to define (create) new functions in JavaScript.

Memories

In writing algorithms, we need to be attentive to what the agent remembers. In JavaScript, these memories are called variables. The tutorial will teach you about “declaring” and using variables. To declare the variable is to create the memory. After it’s created, you can store information in it and retrieve it.

If/Else

The if and if/else are fundamental programming structures. We use these in JavaScript; we use the same words (“if” and “else”), only there is a little bit of punctuation that must be added. Syntax.

Repetition

We learned about two forms of repetition:

  1. repeat N times (repeating some instructions a fixed number of times)
  2. repeat until CONDITION (repeating some instructions until CONDITION becomes true: the CONDITION is a goal we are trying to achieve).

In JavaScript, the repeat N times is done with the for statement. It’s the same idea, but the way it is written is very different. Syntax, again. We usually use the for statement when we want to do something a fixed, or definite, number of times.

With the repeat until CONDITION structure, we’re repeating some instructions an indefinite number of times—that is, we usually don’t know in advance how many times it needs to be done—instead, we’re trying to achieve a goal of making CONDITION true: repeat until there is a pig here, for example.

In JavaScript, the statement that repeats instructions an indefinite number of times is called the while statement, but in one respect, it’s very different from repeat until: it repeats until the condition becomes false.

So it reverses the sense of repeat until. Instead of saying repeat until goal is satisfied, you have to say while goal is not satisfied. For example, instead of

repeat until there is a pig here
   forward

you have to say

while there is not a pig here
    forward

Handoff

And now, I turn you over to Codecademy’s JavaScript tutorial.