JavaScript -

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 2 months ago)



An Introduction

What is JavaScript?

JavaScript adds “dynamic” behavior to
HTML pages, adding programming

JavaScript is a predominantly "client side"
scripting language used for a large variety
of tasks, such as form validation, image
rollovers and fly
out menus.

JavaScript was created by Netscape, and
is now the “official” client side language.

Where Does JavaScript Go?

JavaScript code belongs inside HTML


Inside the

tags, the rules of
JavaScript apply. No HTML can go
directly inside the script tag.

JavaScript is embedded directly into the
HTML page, usually in the


What Does JavaScript Look Like?

The format of a typical JavaScript looks like this:

<script type=“text/javascript”>

//Code goes here


Notice the comment tag (
//Code goes here
inserted in the text. The double slashes indicate
no code will be executed beyond that point on
the line.

Client Side vs. Server Side

Server side scripting is used for interaction with
the user, and is frequently used to create
dynamic pages by interacting with a database.

Client side scripting is designed to run on the
user's machine, and as such is cut off from the
server while it is running.

Any work that can be done on the client is best
done there, as any processing there takes a
load off a busy server.

JavaScript Statements

JavaScript expects us to speak to it in
lines of code it understands, called

Each JavaScript statement should go on
the same “line” of text, and most end with
a semi

var myAnswer = 2 + 2;

Browser Differences

There are differences in how browsers are
designed, and therefore differences in how
JavaScript is processed.

One such difference appears in how the
document object model (DOM) is handled.

The DOM allows us to navigate an HTML
document, and make changes to the page,
without reloading the page.

No Errors Shown, By Design

Because JavaScript errors are so common
and disruptive to a user’s experience,
most browsers elect NOT to display any
JavaScript errors, by default

In order to troubleshoot scripting errors,
we use a browser like Firefox, which gives
feedback on errors by selecting:

Tools >> Error Console

Overly Sensitive

JavaScript is case sensitive, some say
“overly” so.

If you use a JavaScript function or variable
and get even one letter in the wrong case,
JavaScript will either show you an error, or
will give you unexpected results

Data Types

Numerical data is entered in JavaScript without
quotations around it, while alphanumeric data
(hereafter called string data) needs to be
inserted with quotes.

There are 3 basic types of data in JavaScript,


While the JavaScript engine is processing, it will
give it's best guess as to the data type involved.
In general, any number that can be used in a
calculation is considered numerical. An address
number, like a zip code, would be a string.

Numerical Data

While strings must be quoted, numbers
must not be, if they are to be calculated.

JavaScript treats most numbers
automatically, meaning there is one
numerical data type

Strings Of Data

In JavaScript, user data, like names or
HTML look like “strings” of data that is
NOT specifically meaningful to JavaScript.

This data type is called a “string” because
it is alphanumeric data that is “strung”
together like beads on a chain

Strings are required to be in quotes, either
single or double quotes, but not both


Variables are programming constructs that
have contents inside them that ‘vary’

Variables allow us to tailor our code to the

var myAnswer = 2 + 2;

In the above code, a variable named

’ is declared, and it is assigned
a value, the sum of 2 and 2.


Concatenation is a programmer’s word for

When we use variables, we ‘concatenate’
data into meaningful statements:

myVar = ‘The Year is: ‘;

myVar += myDate.getFullYear();


JavaScript uses “operators” which allow us to make
mathematical calculations, and also to concatenate
strings of data:

var myVar = 2 + 2;

In the above example the “plus” sign is the operator that
allows us to add 2 and 2. The same operator is used to
concatenate strings:

var myName = “Bill ” + “Newman”;

Note the “space” left after the first name. This is there so
that the two words have a space between them, once
they are concatenated.


Keywords are words that have special meaning
in JavaScript. These words must be used in
accordance to JavaScript rules and can't be
used as variable or function names.

Some common keywords are
break, do, else,
for, this, true, false, if, var, void, null, return,
while, function, in


If we are tempted to use a word that logically is
very close to a keyword, the suggestion is to
attach the prefix

to it, ie:

Read Right To Left

Isn’t it odd that the statements read right to

var myVar = 2 + 2;

This is because the most important part of
the statement (the sum, if it’s math) is
easier to scan this way in a long program.

JavaScript Functions

JavaScript has several built in “functions”
which allow us to perform actions
automatically by calling the name of the
function, and supplying some data. Here
is a very common function, called “

alert(‘Here is a message that pops up!’);

Note the function includes a “string” of
data, that is a message to a user

Anatomy Of A Function

For a function to “function” certain rules
must be followed:



require parenthesis:

alert(“message here”);

Sometimes they require “data” inserted
inside the parenthesis. In this case, the
“string” of text saying, “
message here


Boolean data gets its name from the
Mathematician George Boole

Boolean data consists of
types. For
us, that would be the values




Boolean data, like numerical data, does
NOT use quotation marks

Booleans (true or false) are always lower

If(x == true){alert(“It’s true!!”);}

Equal? NOT!

An important operator, often associated
with Booleans, is the NOT operator,
symbolized by the exclamation mark

The “
” operator is used with the equal
sign to create “
not equal
”, which is the
same as false:

If(x != true){alert(“That would be false!”);}

Late Binding

JavaScript reads and processes
statements one at a time.

JavaScript makes assumptions about the
code it sees, since it processes data on
the fly.

If it sees numbers that are not quoted, it
tries to calculate them.

If it sees numbers that are quoted, it tries
to connect, or concatenate them

Curly Braces

Curly braces (the

and the

signs) are
required to let JavaScript know where to
start and stop.

These are required when you build your
own functions, and for if statements, for

if(x == y){alert(“x equals y!”);}


JavaScript allows us to do different things
according to different circumstances

We do this as people, when we say:

If it rains, bring an umbrella. Otherwise,
bring shorts.

A ‘conditional’ is a statement that allows
us to determine what happens

something occurs

If Statement

Here is a sample ‘If’ statement:

If(x == y)


alert(“I guess x equals y!”);


The “double equal” is the operator that
checks for equality. If the variables x and
y are equivalent, then the alert displays

Assignment vs. Comparison

The “equals” sign carries special significance in

To “compare” data, we need to use the “double” equal:

if(x == y){alert(“x equals y!”);}

To “assign” data, we use a single equal sign:

var myVar = 2 + 2;

var myName = “Bill “ + “Newman”;

Both of these examples “assign” data to the variable on
the left.

Custom Message Based On Date

The sample below accesses the date object
on the user’s machine, and displays an
“alert()” message, if it’s noon, or later:

var myDate = new Date();

If(myDate.getHour() > 12)


alert(‘It’s after Noon!’);


JavaScript Objects

JavaScript uses “objects” to allow us to access
resources like the “date” on the system clock of
the user’s machine:

var myDate = new Date();

We need to create an ‘instance’ (example) of a
date object in order to use it further. This allows
us to work with different date objects at once.

The Date Object

Users come to our website from different
parts of the world

Accessing the user’s system clock is
useful for tailoring a user’s experience to
their time of day

What if you wanted to show a custom
image or message based on the time of
day of the user? JavaScript does this.

Document Object Model (DOM)

Document Object Model:

The elements that
make up an HTML document can be put to
various purposes by JavaScript.

The way that an HTML document is navigated is
by a structure called the Document Object Model

The DOM allows us to read down to a part of an
HTML document and either read or change

You can call out the object by it's exact name, or
by climbing the DOM "tree" elements

The Navigator Object

JavaScript can determine information
about what browser is being used. This is
useful for tailoring HTML for a specific

var myBrowser = navigator.appName();

alert(“Your browser is: “ + myBrowser);

Event Handlers

Events are occurrences on an HTML page, like
a “page load” or the actions by the user, like
mouse clicks and mouse hovers, etc.

Events can be “captured” and used as a trigger
for actions taken by JavaScript.

The mouse clicks and mouse hovers, etc. are
called "
", and the JavaScript "
" or
reacts to the actions of the user, hence the
"event handler"


The most common kind of event handler is a “rollover",
where an image is "swapped out" (changed) when a
user hovers the mouse over an image.

The simple "mouse over" example code below simply
(although inefficiently) handles a mouse over event:

<a href="mypage.htm"

<img src="images/on.gif" name="myImage"><a/>

The above example uses the “document” object model to
identify an object by name, in this case an image named