Introduction to JavaScript

Notes Home

JavaScript is a scripting language, a lightweight programming language, specifically designed for programming the elements of web pages. Today we are going to look at some basic concepts in JavaScript and computer science in general which will allow us to interact with the browser and begin making dynamic designs. When we talk about dynamic design we mean making a design which changes given various inputs and interactions. The power of writing code is that we can build designs that react and change to various input, whether it is time, user interaction, data or other sources.

First, an introduction by Douglas Crockford, a well known JavaScript architect and text book writer. We'll start this but I recommend watching the rest on your own.

Let's go ahead and open the JavaScript console (in Google Chrome).

CAj

We're going to add a series of commands and see what happens.

Start by typing document into the console.

Look familiar? This is our HTML document, interpreted as a node structure by the Document Object Model.

Document object model

  • DOM
  • DOM Examples

    • Okay, let's try a couple more lines: 

     document.body
 document.body.style
 document.body.style.color = "purple";

    Try this:

     document.write("Hello world!");

    Oops!

    We could write our entire HTML document this way, but its easier to write some HTML and then modify it with JavaScript.

     var elem = document.createElement("h1");
 elem.innerHTML = "JavaScript is kewl!";	
 document.body.appendChild(elem);

    But wait, what is that var thing, and what are those functions??

    In Javascript, every variable is declared as var, unlike Processing or other languages you have probably seen things like int or string. JavaScript only works with a few basic variable types: numbers, strings and booleans (along with arrays and objects and functions, which can all be declared with var. Its confusing and we'll get into it next week).

    Variables in JavaScript are more easily converted into each other. This is called type coercion and we'll talk about that more next week as well.

    For now, let's write some variables and then keep going.

    var on MDN

     var x

    (Oh, btw, semicolons are "optional in JavaScript", but it's usually better to use them.)

     x = 10;
 x++; // (Hmm... type x again)
 x += 10;
 x = x + 10;
 x = "ten";
 x = "10";
 x++; // (er... type x again)
 x = false;
 typeof x;

    Okay, that was weird...

    But actually, very useful in someways and of course easy to write!

    Tricky, but useful...

    Operators

    The = sign is used to assign data to variables, like var img = "mycat.jpg"; or var i = 0;. You can also use + to add variables, - for subtraction, * for multiplication, / for division, ++ to increment by one, -- to decrease a value by one, += to add a value to the current value, or -= to subtract that value. You can also use *= and /=. Modulus, % will give you the remainder from a division, ie 5%4 = 1, which is useful for cyclical logic, and can also be used as %=. These operations are done primarily on numbers, but you can do addition with strings, and add strings to numbers.

    Try a few operations in the console:

    n = x + 1
n += 1
"Hello" + "World"
"7" + 7

    The == is used to compare two variables or values, along with <, >, <=, >= or != (not equal).

    "hello" == true
var i = 10; i < 11;
6 != "six"

    The === is used to determine that two values are the same type

    7 === 7
"7" === 7

    Resources