Javascript Basics

Xah Lee, 2009-01, 2010-02-28

This page is a brief, practical, tutorial of javascript language.

Running Javascript

To evaluate a piece of js code, you need to call it in a html file and view the file in browser.

Here's how to embed javascript into HTML. If you just have few lines of code, do:

<script type="text/javascript">
alert("hi ya!");
</script>

Note: to be technically correct, the type should be “type="application/javascript"”. However, it is not yet supported by many browser yet. (see Internet media type, rfc4329)

If you have more than a few lines of code, put them in a file, and call it like this:

<script type="text/javascript" src="mycode.js"></script>

Printing

To print, use “alert()” or “document.write()”.

/* this is comment */
// this is comment too.
document.write("<p>3<\/p>"); // prints 3 to browser
alert("3"); // popup a dialog

String

var s1 = "once upon a time";
var s2 = 'there are meat'; // single quote ok

// getting single char
s1.charAt(0); // return “o”

// getting substring
s1.substring(1,3); // return “nc”

// string join
var s3 = s1 + s2; // return  “once upon a timethere are meat”

Datatypes

typeof("abc"); // string

typeof(3);     // number
typeof(3.5);   // number
typeof(NaN);   // number

typeof(false); // boolean

typeof(null);  // object
typeof(undefined); // undefined

The “null” datatype is literal. You can assign it to a function or variable to undefine them. That is its only purpose.

When a variable has not been assigned, it is “undefined” datatype. “undefined” is also a literal that represent the undefined datatype.

True and False

In js, there are several built-in datatypes, including: “true”, “false”, and also “null”, “NaN”, “undefined”.

The following are considered false: false, empty string, 0, null, NaN, undefined. Everything else is true.

// the following all return “false”
Boolean(false);
Boolean(0);
Boolean("");
Boolean(null);
Boolean(NaN);
Boolean(undefined);

// everything else is considered true
Boolean(true);
Boolean(1);
Boolean(1.5);
Boolean(2);

Flow Control

“if”, “else”, “else if” are supported.

if (3 < 4) {alert("yes");};
if (3 <= 4) {alert("yes");} else {alert("no");}

var x = 3;
if (x == 1) {alert("is 1");}
else if (x == 2) {alert("is 2");}
else if (x == 3) {alert("is 3");}
else {alert("not found");}

Iteration

for (var i=0; i < 9; i++) { document.write(i); }

var x = 0;
while (x != 5) { document.write(x); x++;} // prints 0 to 4

var x = 0;
do { document.write(x); x++} while (x != 5) // prints 0 to 4

for (var myVal in someObject) { ... myVal ...}

“continue” exit the current iteration in a loop. (that is, start the next iteration at the beginning of loop)

List structure

A list structure in js is called a array. Example:

var myA = ["pa", "re", "ci"];
document.write(myA);

Example of assiging array items one at a time:

var myA = [];  // define a array
myA[0] = "one";         // assign values to elements
myA[1] = "two";
myA[3] = "more"; // out of bound reference automatically extend the array

document.write("<pre>");
document.write("myA is:" + myA + "\n");           // prints “myA is:one,two,,more”
document.write("length is:" + myA.length + "\n"); // show length
document.write("myA[3] is:" + myA[3] + "\n");     // access a element
document.write("</pre>");

Array can be nested.

var myA = ["pa", ["deep", [4,5]], 3];
document.write(myA[1][1][0]); // prints 4

Keyed list (hash, dictionary, associative array) example:

var names = {"mary":19, "jane":20, "john":25};
document.write(names["mary"]); // 19
document.write(names.mary); // Dot notation also works

Array and hash can be mixed and nested:

var x ={"a":19, "b":20, "c":[3,4]};
document.write( x["c"][0]); // prints 3

var y = [3,4];
x = {"a":19, "b":20, "c":y}; // eval var inside ok
document.write( x["c"][0] ); // prints 3

// complex nesting and get val ok
document.write( {"a":19, "b":20, "c":[3,4]} ["c"][0] ); // prints 3

Defining A Function

Example of defining a function:

function ff(firstName)
{ return "Dear " + firstName + ",";}

document.write(ff("Vicky")); // prints “Dear Vick,”

If the function does not have a “return” statement, its return value is not defined.

Objects

Here's a sample code of creating a object:

var myObj= new Object();   // creating a object
myObj.color1="red";       // creating a “property” of color1
myObj.color2="blue";

document.write(myObj.color1); // prints red

In the above code, myObj is a user created object, and it has color1 as one of its property. It is assigned the value “red”. One can create other properties by simply assiging it a value, such as “myObj.color2="blue"”.

Javascript's Object property is basically like a keyed list in most languages. (aka: dictionary, hash, associative list) You can also access properties like a list:

var myObj =  new Object();
myObj["color1"]="red";
document.write("Color is: " + myObj["color1"]); // prints “Color is: red”

You can define a prototype of a object. That is, a object with predefined “properties” (elements). Example:

// define a object prototype “person”, with properties: name, hair, height.
function person(a1,a2,a3)
{ this.name = a1; // creates a property named “name”
  this.hair = a2;
  this.height = a3;
}

// create several “person” objects
var mary = new person("Mary", "blonde", "150");
mary = new person("Mary", "blonde", "150");
jane = new person("Jane", "brunette", "156");
document.write("mary.namee is: " + mary.name); // prints “mary.namee is: Mary”

References:

Home

About

Advertise

2009-01