Skip to Content

Intro to Javascript

Posted on 5 mins read

A very basic introduction, from old CS 111 notes…

This is a very basic introduction to Javascript. If you get “hooked”, I’d suggest buying a book or at least doing a lot of online studying and experimentation.

Functions

The code we write in a Javascript program is simply a collection of functions. Think of each function as the Snap equivalent of a script definition of a new block. Just like a new block, we have to give the function a name, declare its parameters, and define the code that makes up its behavior. A Javascript function looks like:

function myFunction (param1, param2, ...)
{
   all the statements that make up the behavior;
   optional "return" statement to return a value;
}

“function” is a Javascript keyword that introduces the definition of a new function. We can name our function almost anything. We can also name our parameters anything – but for all names in a program we really should work hard to pick meaningful names (just like Snap blocks have clear, meaningful names). If your function has no parameters you still need to have the parentheses after the function name.

We do two things with functions: one, in our HTML code we connect a function to a user event on the web page: a mouse click, a keypress, mouse movement, essentially anything the user can do on or to the web page. For example, the HTML code:

<button onClick="myFunction(10,20)">Do This</button>;

would produce a button on the web page labeled “Do This”, and when the user pressed the button, our Javascript function “myFunction” would be executed, with the parameter values of 10 and 20. How do you know what HTML entities produce events, and which events are they? Just READ! There’s no shortcut. Find tutorials on the web or read books.

Variables

Just as in Snap, in Javascript we need places to store values that we need to use in our computations. These are variables. In Snap we had two kinds of variables: “global” variables available to all scripts, and created with the “make a variable” button, and “script variables” that were “local” to a single script. Virtually all programming languages have similar concepts, and Javascript does, too.

To create a variable in Javascript we do:

var myVariableName, myOtherVariable, anotherOne;

“var” is a keyword in Javascript that means “make variables” – each of the names that follows (one or more) becomes a new variable.

Important: if the “var” command is outside of ALL functions, these variables are global, and are available in the whole Javascript program. If the var command is inside a function, these variables are “local”, and exist only within that function.

What kind of values can Javascript variables hold?

  • numbers, either integers like 42 or real numbers like 3.14159;
  • strings, like “hello world”; and
  • objects, which are complex values that contain their own sub-variables (sometimes called properties) and sub-functions (sometimes called methods).

The most important statement in Javascript is the assignment statement, which looks like:

variable = expression;

This is common in virtually all programming languages, and is equivalent to the “set” block in Snap. When the program runs, the expression on the right-hand side is evaluated and results in a value (a number, string, or object), and then the variable is updated to hold that new value; whatever previous value the variable held is thrown away (there is no memory of it!).

The expression can be complicated, or it can be as simple as a constant value, like 42 or 79.46 or a string like “the quick brown fox” or “#00F05C” (and HTML color code string).

The variable can be a simply variable that we have created, or it can be one of those “sub-variables” of an object, so in some code already we saw something like:

panel.innerHTML = "<p>My message!</p>";

In this case, our variable “panel” held an object value that has a property (sub-variable) called “innerHTML”, and I am setting that property variable to hold the value of the given string;

Objects

When we have a variable that contains an object, we can do many things with it. Since it has sub-variables (properties) and sub-functions (methods), we can set its properties to new values, and we can invoke some behavior or computation that its methods have.

In full Javascript you can create your own new kinds of objects, but we won’t talk about that. Rather, all of our objects will be predefined objects that represent some portion of our web page. Almost every element of the web page can be accessed in Javascript through a corresponding object. The typical mechanism that is used to get the object is document.getElementById("idstring"), as in our function setMessage:

function setMessage(message)
{
   var panel = document.getElementById("messagePanel");
   panel.innerHTML = "<p><b>"+message+"</b></p>";
}

This corresponds to the “division” in our web page that was declared as:

<div id="messagePanel">
This is my static HTML.
</div>

We can give an “id” attribute to almost any piece of our HTML, and then access it in Javascript through the object obtained from the document.getElementById() function. What can you do with the object? Well, it depends on what HTML element it represents, and to learn this you just have to go READ. For example, I know that I can use the “div” tag in HTML to create a page division in which I can replace the HTML in it in my Javascript by assigning a new value to the “innerHTML” property. This means that my “setMessage” function can change the message that is displayed on that portion of my web page!

Arrays

Every programming language has some mechanism to store and manipulate collections of values; in Snap this was the list. In Javascript it is the idea of an array. We create an array one of two ways:

var myValues = new Array();      OR

var myValues = [];

Javascript arrays are lots like Snap lists – they essentially hold a sequence, or list, of values. But instead of using a block named “item i of list” to get each item, we use the square brackets with the item index inside the brackets, like:

myValues[20]

Important: In Snap the first value in a list was called “item 1”, but in Javascript the first item is at index 0! So the above line references the 21st item in the array, not the 20th!