Introduction to JavaScript / Basic features of JavaScript

Variables

variables are containers for values (either strings, numbers, or booleans [true|false])
variable names are case sensitive and must begin with a letter or the underscore character
variables created in a function (see below) only exist while the function is running; variables created outside functions exist as long as the page exists

Code Examples

var a = 4;
a = 4;
myString = "Welcome to my world."

Arrays

arrays are complex variables that contain sets of values
the index can either be numerical (starting at 0) or nominal
arrays are useful for looping through a set of values

[return to top]

Code Examples

var myArray = new Array();
myArray[0] = "red";
myArray[1] = "white";
myArray[2] = "blue";
numbersArray = new Array(0,1,2,3,4,5,6,7,8,9);
nominalArray = new Array();
nominalArray["favcolor"] = "green";
nominalArray["favfood"]  = "pizza";

Objects

Objects represent collections of values
Arrays are a type of object, an ordered collection of values
Objects can also contain unordered collections of values
An object’s properties (values) can be accessed using “dot” notation: object.property
e.g., car.color = "green"
A Web page is made up of dozens of objects called the “Document Object Model” (DOM). Each element of the DOM has predefined properties with values derived from how that particular page was coded.

[return to top]

Code Examples

var workshop = new Object();
workshop.title = "Introduction to JavaScript";
alert("Welcome to " + workshop.title);

Methods

methods are like built-in functions
particular types of objects are associated with particular methods (e.g., string objects have associated methods for string manipulations such as searching or making all of the letters lowercase)

[return to top]

Code Examples

alert("Hello world!");
bodyObject = document.getElementById("bodyDiv");
lowercaseString = myString.toLowerCase();

Conditional statements

conditional statements allow you to execute different sets of code depending on the inputs
the most common conditional statement is the if … else …

[return to top]

Code Examples

if (name == "Andrew") alert("Hello, Andrew!");

if (name == "Andrew")
{
   alert("Hello, Andrew!");
}
else
{
   alert("Hello, world!");
}

Loops

loops are used to repeat an action on a set of values or a set number of times
the most common type of loop is the for … loop

[return to top]

Code Examples

namesArray = new Array("Dan","Rob","Kim");
for (i = 0; i < namesArray.length; i++)
{
   alert("Hello, " + namesArray[i] + "!");
}

Comments

comments allow you to insert notes within your script
this is helpful as a way to remind yourself how the script works when you return to it later
there are two ways to insert comments, // and /* */

[return to top]

Code Examples

// this is a one line comment

/*
this is a comment that 
is on more than one line
*/

Event handlers

event handlers trigger functions based on user initiated events or on time
event handlers can be attached to certain HTML elements or to the page itself
the most common event handlers are: onclick, onload, onmouseover, and onmouseout

[return to top]

Code Examples

<body onload="showAlert()">
<a href="#" onclick="window.open('popup.html','myPopUp')">
<a href="#" onmouseover="swapImage('cat_active')"
            onmouseout="swapImage('cat_inactive')">

Get excited because it’s time for another quiz!

Basic features of JavaScript

Sections

Code Examples

Code Examples

Code Examples

Code Examples

Code Examples

Code Examples

Code Examples

Code Examples