Introduction

to JavaScript

Dennis Olsson

Today

Introduction

Basic Syntax

XHTML and
JavaScript
Introduction to JavaScript
Boolean
operators

Conditional
execution
Dennis Olsson
Loops

Objects

Arrays

Operators -
Lecture #7
Summary

Introducing
events

Summary
 Introduction
to JavaScript 1 Introduction
Dennis Olsson
2 Basic Syntax
Today

Introduction 3 XHTML and JavaScript

Basic Syntax

XHTML and
4 Boolean operators
JavaScript

Boolean 5 Conditional execution

operators

Conditional 6 Loops
execution

Loops
7 Objects
Objects

Arrays
8 Arrays
Operators -
Summary

Introducing
9 Operators - Summary
events

Summary 10 Introducing events

11 Summary
 Introduction
to JavaScript

Dennis Olsson
First of all
Today

Introduction

Basic Syntax

XHTML and
JavaScript
• JavaScript is NOT Java.
Boolean • Borrows some syntax from Java, which is similar to
operators
C/C++, PHP, etc.
Conditional
execution • Based on the implementation of ECMAScript in Netscape,
Loops
working name: Mocha.
Objects

Arrays This course will approach some things in JavaScript. the goal
Operators -
Summary
is to get you to try it out, and start experimenting. A lot of the
Introducing programming is done using some reference literature (physical
events
or electronical).
Summary
 Introduction
to JavaScript

Dennis Olsson
Structure
Today

Introduction

Basic Syntax A comment is either started by // and ended at the end of

XHTML and the line, or started with /* and ended with */.
JavaScript

Boolean
A statement is a single line of code. All statements:
operators

Conditional
• ends with semicolon and
execution
• can be replaced by a block
Loops

Objects A block is a group of zero or more statements and is started

Arrays
with { and ended with }. Block are formed to support
Operators -
Summary execution of several statements when there as default is only
Introducing support for one statement.
events

Summary
It’s recommended to always use a block for a loop or an
if-statement (introduced below).
 Introduction
to JavaScript

Dennis Olsson
Functions
Today

Introduction

Basic Syntax A function is a section of code isolated from the rest, but
XHTML and given a name. Anyone can call a function. It may or may not
JavaScript
take arguments, and may or may not return a value.
Boolean
operators

Conditional Code from example-simple function.html

execution

Loops function sayWelcome() {

Objects // A pop-up dialog with the text is shown
Arrays alert("Welcome, user!");
Operators - }
Summary

Introducing // Call the function

events
sayWelcome();
Summary
 Introduction
to JavaScript

Dennis Olsson
Example with arguments
Today

Introduction

Basic Syntax

XHTML and
JavaScript
Code from example-simple argumentfunction.html
Boolean
operators

Conditional
function sayWelcome(welcomeword, towho) {
execution // A pop-up dialog with the text is shown
Loops alert(welcomeword + ", " + towho + "!");
Objects }
Arrays
// Call the function
Operators -
Summary sayWelcome("Welcome", "user");
Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Example with return value
Today

Introduction

Basic Syntax
Code from example-simple returnfunction.html
XHTML and
JavaScript

Boolean function welcomeText(a, b) {

operators return a + ", " + b + "!";
Conditional }
execution

Loops
function sayWelcome(welcomeword, towho) {
Objects // A pop-up dialog with the text is shown
Arrays alert(welcomeText(welcomeword, towho));
Operators - }
Summary

Introducing // Call the function

events
sayWelcome("Welcome", "user");
Summary
 Introduction
to JavaScript

Dennis Olsson
Variables
Today

Introduction

Basic Syntax
A variable is a place to store information of some kind as:
XHTML and
JavaScript
• Strings – Contain zero or more characters
Boolean
operators • Floating Point numbers – A number with zero or more
Conditional
execution
decimals
Loops • Integer number – A number without decimals
Objects • Boolean – Either true or false
Arrays
• Object – An object (a lot more on this later)
Operators -
Summary

Introducing
JavaScript is weakly typed language, meaning that a variable
events can contain any of the above values independently of previous
Summary
declarations.
 Introduction
to JavaScript

Dennis Olsson
Variables
Today
Declaring a variable with var will make it usable within the
Introduction
function. If var is omitted, the variable will be usable
Basic Syntax

XHTML and
throughout the whole document. Using var outside a function
JavaScript will will have no effect on the scope.
Boolean
operators
Code from example-variable scope.html
Conditional
execution

Loops function myFunction() {

Objects
var a = "a";
b = "b";
Arrays
alert("In function: " + a + " and " + b);
Operators -
Summary
}
Introducing
events // call the function
Summary myFunction();
alert(b);
alert(a); // Crash since a is undeclared
 Introduction
to JavaScript

Dennis Olsson
Adding to HTML-files
Today

Introduction

Basic Syntax
XHTML has a special tag for scripts: <script>
XHTML and
JavaScript Always add the attribute type="text/javascript".
Boolean
operators
Code from example-simple function.html
Conditional
execution

Loops <script type="text/javascript">

Objects
/* <![CDATA[ */
Arrays
// JavaScript code goes here!
Operators -
Summary

Introducing
/* ]]> */
events </script>
Summary
 Introduction
to JavaScript

Dennis Olsson
Use XML-comments?
Today

Introduction Some example code on the web, as well as some old schools
Basic Syntax recommend programmer to wrap the javascript inside
XHTML and
JavaScript
XML-comments, as:
Boolean
operators

Conditional
execution <script type="text/javascript">
Loops <!--
Objects // code
Arrays -->
Operators - </script>
Summary

Introducing
events

Summary This is however not recommended, since comments in XML

implies the browser not to parse the text. It still works in most
browsers though!
 Introduction
to JavaScript

Dennis Olsson
Including from XHTML-files
Today

Introduction

Basic Syntax To embed the JavaScript is however not recommended if it’s

XHTML and
JavaScript
more than a few functions, and will not be allowed in the
Boolean
assignments. Also, it’s a way to break the clean separation of
operators
content, presentational information and function wanted.
Conditional
execution Therefore, use:
Loops

Objects Code from example-simple include.html

Arrays

Operators - <script type="text/javascript"

Summary src="example-simple_include.js"></script>
Introducing
events

Summary
Firefox can’t parse <script ... /> correctly.
 Introduction
to JavaScript

Dennis Olsson
Including external .js-files
Today

Introduction

Basic Syntax An included .js-file containing JavaScripts need no extra tags.

XHTML and
JavaScript
The complete file named example-simple include.js is
Boolean
shown below.
operators

Conditional Code from example-simple include.js

execution

Loops
function sayWelcome() {
Objects // A pop-up dialog with the text is shown
Arrays alert("Welcome, user!");
Operators - }
Summary

Introducing // Call the function

events
sayWelcome();
Summary
 Introduction
to JavaScript

Dennis Olsson
About the examples
Today

Introduction

Basic Syntax

XHTML and
JavaScript

Boolean
operators
Many of the examples handed out will not use external
Conditional
JavaScripts. There are manly two reasons:
execution

Loops • Twice the amount of files to look at

Objects
• Since the source code of most examples fit in one screen
Arrays
it’s easier to get an overview of it.
Operators -
Summary

Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Comparing values
Today

Introduction

Basic Syntax There are basically three comparisons that can be done
XHTML and
JavaScript
between values:
Boolean
operators • a < b – true iff a is less than b
Conditional
execution
• a == b – true iff a is equal to b
Loops • a > b – true iff a is greater than b
Objects

Arrays There are two combinations and one negation of these:

Operators -
Summary • a <= b – true iff a is less than or equal to b
Introducing
events • a != b – true iff a is not equal to b
Summary • a >= b – true iff a is greater than or equal to b
 Introduction
to JavaScript

Dennis Olsson
Joined conditions
Today

Introduction

Basic Syntax
Sometimes there’s a need to compare several values at once,
XHTML and
JavaScript and make sure they have a certain pattern concerning their
Boolean boolean values. To do this, it’s possible to use a set of binary1
operators
operators.
Conditional
execution
• a && b – true iff both a and b are true.
Loops

Objects • a || b – true iff either one of a and b is true.

Arrays
Finally, there’s a unary operator for boolean expressions,
Operators -
Summary namely:
Introducing
events • ! – negate the following condition
Summary

1
As in: takes two arguments
 Introduction
to JavaScript

Dennis Olsson
Example conditions
Today

Introduction

Basic Syntax

XHTML and
JavaScript

Boolean
true | | false → true
operators
true && false → false
Conditional
execution
true && !false → true
Loops

Objects

Arrays false | | ( true && ( false | | false ) ) → false

Operators -
Summary false | | ( true && ( false | | !false ) ) → true
Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
if
Today

Introduction

Basic Syntax
We need a way to test if a condition is true. Some pieces of
XHTML and
JavaScript code should only be executed if one or more criterias are
Boolean fulfilled. For this we have if.
operators

Conditional Code from example-tiny examples.js

execution

Loops
function example_if() {
Objects
if ( true )
Arrays
alert("true it is");
Operators - if ( false )
Summary
alert("false it is");
Introducing
events }
Summary
 Introduction
to JavaScript

Dennis Olsson
if – else
Today

Introduction

Basic Syntax There is also a need to fall back on a block of code if a

XHTML and condition was false. The previous example, for instance,
JavaScript

Boolean
demanded two comparisons. It can be released with:
operators

Conditional Code from example-tiny examples.js

execution

Loops
function example_if_else() {
Objects if ( true )
Arrays alert("true it is");
Operators - else
Summary alert("false it is");
Introducing }
events

Summary
 Introduction
to JavaScript

Dennis Olsson
if – else if
Today

Introduction

Basic Syntax If we need to test several conditions independently, and want to

XHTML and stop at the first, we can nestle the if-statements.
JavaScript

Boolean
operators Code from example-tiny examples.js
Conditional
execution
function example_if_else_if() {
Loops if ( false )
Objects alert("false it is");
Arrays else if ( true )
Operators -
alert("true it is");
Summary else
Introducing alert("it was neither true or false");
events }
Summary
 Introduction
to JavaScript

Dennis Olsson
switch
Today If there’s a lot of values to compare with, the if – else
Introduction
if-way will become hard to edit during development. The aid
Basic Syntax
is named switch.
XHTML and
JavaScript
Code from example-tiny examples.js
Boolean
operators
function example_if_else_if() {
Conditional
execution var value = 3;
Loops
switch (value) {
case 2:
Objects
alert("Two, that’s the value of the variable.");
Arrays
break;
Operators - case 1:
Summary
case 3:
Introducing
events alert("Almost two, that’s the value of the variable.");
Summary
break;
default:
alert("Variable out of scope");
}
}
 Introduction
to JavaScript

Dennis Olsson
while
Today

Introduction
There is often need for a code block to be executed several
Basic Syntax

XHTML and
times in a row. Often the number of executions can be
JavaScript determined by a condition. The most basic loop is while,
Boolean
operators
which executes code zero or more times.
Conditional
execution Code from example-tiny examples.js
Loops

Objects function example_while() {

Arrays
var value = 0;
while(value < 3) {
Operators -
Summary alert("Value is: " + value);
Introducing value = value + 1;
events }
Summary }
 Introduction
to JavaScript

Dennis Olsson
for
Today

Introduction
The above scheme with definition - comparison - increasing is
Basic Syntax

XHTML and
often used, and there is a way to write this a whole lot shorter
JavaScript using for.
Boolean
operators
Code from example-tiny examples.js
Conditional
execution

Loops function example_for() {

Objects
for ( var value = 0 ; value < 3 ; value = value + 1 )
alert("Value is: " + value);
Arrays
}
Operators -
Summary

Introducing
events Any of these fields can be omitted. For example
Summary for(; condition ;) is exactly the same as
while( condition ).
 Introduction
to JavaScript

Dennis Olsson
do – while
Today

Introduction

Basic Syntax

XHTML and
JavaScript There is another loop that is a modified version of while,
Boolean namely the do – while.
operators

Conditional
See the example below.
execution

Loops
do {
Objects

Arrays
// execute this first once
Operators -
// and then over - and - over, until the condition b
Summary } while ( condition );
Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
break and continue
Today

Introduction

Basic Syntax

XHTML and
JavaScript We may choose to break out of a loop, or instruct it to start
Boolean over again without finishing the current iteration. Using break
operators
will cause the execution to continue after the loop, while
Conditional
execution continue will cause the execution to continue at the very end
Loops of the block.
Objects
The very end means that, in a for-loop, the value will be
Arrays
incremented before the execution continues at the top. The
Operators -
Summary keyword continue is in short “continue with the next lap, if
Introducing any”.
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Objects - introduction/summary
Today

Introduction

Basic Syntax

XHTML and
JavaScript

Boolean
Learning an object oriented language is out of the scope of this
operators
course. However, a basic understanding of the meaning is
Conditional
execution needed.
Loops In 19 words: An object is a chunk of organized data, and a set
Objects
of methods (≈ functions) to work on that data.
Arrays

Operators -
A deeper understanding in objects will be gained during the
Summary next lecture.
Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Array
Today

Introduction
An array is a chunk of data, and is handled like an object. It’s
Basic Syntax
therefore created using the keyword new. The values can then
XHTML and
JavaScript be accessed using an index starting at 0.
Boolean
operators An interesting attribute (≈sub-value) of an array is length,
Conditional which will return the highest index in the array + 1.
execution

Loops
Code from example-tiny examples.js
Objects

Arrays function example_array() {

Operators - var arr = new Array("This", "is", "an", "array");
Summary
arr[5] = "a late string";
Introducing
events
for ( var i = 0 ; i < arr.length ; i = i + 1 )
alert("Value is: " + arr[i]);
Summary
}
 Introduction
to JavaScript

Dennis Olsson
for – in
Today

Introduction

Basic Syntax There is a much easier way to access all elements without
XHTML and
JavaScript
knowing the number of elements, using for - in.
Boolean This will also skip holes in the array.
operators

Conditional
execution Code from example-tiny examples.js
Loops

Objects function example_for_in() {

Arrays
var arr = new Array("This", "is", "an", "array");
arr[5] = "a late string";
Operators -
Summary for ( var i in arr )
Introducing
alert("Value is: " + arr[i]);
events }
Summary
 Introduction
to JavaScript

Dennis Olsson
Arithmetic Operators
Today

Introduction

Basic Syntax

XHTML and
In all examples, a and b are variables or constants.
JavaScript
a + b → Add a and b
Boolean
operators a – b → Subtract b from a
Conditional a * b → Multiply a and b
execution
a / b → Divide a with b
Loops
a % b → Get the remainder when a is divided by b
Objects

Arrays

Operators -
a ++ → Increase a after it’s read
Summary ++ b → Increase b after it’s read
Introducing
events
a –– → Decrease a after it’s read
Summary –– b → Decrease b after it’s read
 Introduction
to JavaScript

Dennis Olsson
Assignment Operators
Today

Introduction

Basic Syntax

XHTML and
JavaScript

Boolean
In all examples, a is a variable, and b is a variable or constant.
operators
a = b → a = b
Conditional
execution a += b → a = a +b
Loops a –= b → a = a –b
Objects a *= b → a = a *b
Arrays
a /= b → a = a /b
Operators -
Summary a %= b → a = a %b
Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Comparison Operators
Today

Introduction

Basic Syntax

XHTML and
JavaScript In all examples, a and b are variables or constants.
Boolean
operators
True when
Conditional
a == b → a has the same value as b
execution
a === b → a has the same value and type as b
Loops
a != b → a has another value than b
Objects
a > b → a is greater than b
Arrays
a < b → a is less than b
Operators -
Summary a >= b → a is greater than or equal to b
Introducing a <= b → a is less than or equal to b
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Logical Operators
Today

Introduction

Basic Syntax

XHTML and
JavaScript

Boolean
operators In all examples, a and b are variables or constants.
Conditional
execution True when
Loops a && b → Both a and a are true
Objects a | | b → At least one of a and a is true
Arrays ! b → The negation of b
Operators -
Summary

Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Events
Today

Introduction

Basic Syntax

XHTML and
JavaScript

Boolean
Events is happening when the user takes an action like clicking
operators on a link, when the browser changes state (as when the page
Conditional
execution
has loaded), or when the source code itself triggers an event
Loops
(for example by using a timer).
Objects Events will be brought up later during the course, but to
Arrays
understand the examples, and be able to do the assignment,
Operators -
Summary
they will be introduced here.
Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
OnClick–Events
Today

Introduction

Basic Syntax

XHTML and
JavaScript The events handlers can be set as attributes to a tag in
Boolean XHTML. A simple example would be the following
operators

Conditional
execution
Code from example-tiny examples.html
Loops

Objects
<a href="#" onclick="example_if();">The function example_if</a>
Arrays

Operators -
Summary This will run the JavaScript function example if() when the
Introducing link is clicked.
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Hierarchy
Today

Introduction

Basic Syntax
When a link is clicked, the link is owned by, among others, the
XHTML and
JavaScript body. The event will propagate up through this hierarchy. To
Boolean show this propagation, study the example below.
operators

Conditional
execution
Code from example-onclickevent.html
Loops

Objects
<body onclick="alert(’Event caught by the body’);">
<p onclick="alert(’Event catches by the paragraph’);">
Arrays
<a href="#" onclick="alert(’Event caught by the link’);">
Operators -
Summary
Click me to see who catches the event</a>
</p>
Introducing
events </body>
Summary
 Introduction
to JavaScript

Dennis Olsson
OnLoad–Events
Today

Introduction

Basic Syntax

XHTML and
JavaScript An OnLoad–event is triggered when the loading is complete.
Boolean This means that the OnLoad for a document is triggered when
operators
all elements in it are available.
Conditional
execution
This can also be set as a attribute to a XHTML-tag, like:
Loops

Objects Code from example-onloadevent.html

Arrays

Operators - <body onload="alert(’Welcome, user!’);">

Summary

Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
OnLoad continued
Today

Introduction

Basic Syntax
To set the onload as an attribute is however a way to mix
XHTML and
JavaScript function and content, something we want to avoid. Instead,
Boolean the following should be used.
operators

Conditional Code from example-onloadevent2.html

execution

Loops
function loadMeWhenPageLoads() {
Objects
alert("Welcome, user!");
Arrays
}
Operators - window.onload = loadMeWhenPageLoads;
Summary

Introducing
events

Summary Do not include the parenthesis after the function name.

 Introduction
to JavaScript

Dennis Olsson
Events vs. Separation
Today

Introduction

Basic Syntax

XHTML and
JavaScript

Boolean
operators
To separate the function from the content, we need to be able
Conditional
execution to set the attributes when the page is loaded, not written by
Loops the web designer.
Objects
We will look at this during the next lecture.
Arrays

Operators -
Summary

Introducing
events

Summary
 Introduction
to JavaScript

Dennis Olsson
Summary
Today

Introduction

Basic Syntax

XHTML and
JavaScript • Basic syntax – blocks, functions, parameters, variables
Boolean
operators
• XHTML and JS – the script-tag, external files, CDATA
Conditional • Boolean Operators – AND, OR, NOT, etc.
execution

Loops
• Conditional execution – if – else, switch – case – default
Objects • Loops – while, for, do – while, break / continue
Arrays
• Arrays – arrays, for – in
Operators -
Summary • Operators – Arithmetic, Assignment, Comparison, Logical
Introducing
events • Events – onclick, onload
Summary