This document provides an overview of JavaScript and the DOM (Document Object Model). It discusses JavaScript data types like numbers, strings, booleans, functions, and objects. It also covers JavaScript functions, control flow with if/else, for loops, and while loops. The document then explains JavaScript data structures like arrays and objects. It introduces the DOM and how JavaScript can interact with and modify page content by selecting elements and accessing/changing their properties.
6. CONTROL FLOW
if
• Execute some code if a certain condition pertains
for
• Execute some code a “definite” number of times
while
• Execute some code an “indefinite” number of times
7. CONTROL FLOW: if
if ( condition_1) {
[ DO SOME STUFF ]
} else if ( condition_2 ) {
[ DO SOME OTHER STUFF ]
} else {
[ DO DEFAULT STUFF ]
}
8. CONTROL FLOW: for
for ( var i = 0; i < 10; i++ ) {
[ DO SOME STUFF ]
}
// That stuff will happen 10 times
9. CONTROL FLOW: while
while ( [SOME CONDITION OBTAINS] ) {
[ KEEP DOING STUFF ]
}
// That stuff will keep happening until
// the condition is false
17. FUNCTIONS AS ARGUMENTS
In Javascript, functions can be passed as
arguments to other functions
• Relatedly, they can be returned by functions and stored as
variables
• This is a very special and valuable feature of the language
• One says that functions are “first class objects”
• Javascript, in this way, treats functions like data
var say_hi = function() {console.log(“hi”);};
say_hi(); // Prints “hi”
18. BUZZZZWORD
“First class objects”
• These are the “objects” in an “object-oriented” language (we will define
“object oriented” later) that can be (1) saved in variables, (2) passed as
arguments to functions, and (3) returned as values from functions
19. ANONYMOUS FUNCTIONS
Javascript conveniently allows you to define
functions “inline” without specifying a name
var kill_timeout = set_timeout(
function() {
console.log(“You are now 5 seconds older”);
}, 5000); // Javascript tells time in milliseconds
20. RECURSIVE FUNCTIONS
In Javascript, functions can call themselves
• This is called “recursion”
• It must “bottom out” at the “base case” or it will never end (and
you will run out of memory!)
function factorial(n) {
if ( n == 0 ) {
return 1; // Factorial of zero is one by definition
} else {
return n * factorial( n - 1 ); // Recursive step
}
}
23. ARRAYS
A data structure native to Javascript that
stores values in an ordered way
• Arrays contain an arbitrary number of “elements” which can be
accessed individually by “indexing” into the array
• Defined by comma separating values between brackets
• Arrays are “indexed” from zero (not from one)
var team = [‘ben’,‘jeff’,‘kam’];
team[0] // => ‘ben’
team[2] // => ‘kam’
team[3] // => undefined
25. BUZZZZWORD
“Object Oriented”
• A way of structuring programming languages invented in the early
90s
• Data and functions (“methods”) are grouped together in “objects”
• The outside world can interact with these objects only through a
rigidly defined interface
• Javascript is centered on objects, but not object oriented in the
traditional sense
26. OBJECTS
Objects are collections of “properties”
• Properties are key / value pairs
• Defined using braces
• Use “dot” notation to read and write
var person = {};
person.name = ‘will’; // Write
var name = person.name; // Read
27. OBJECTS
Can also use “javascript object notation” to
get and set properties
var person = {};
person[ ‘name’ ] = ‘will’; // Write
var name = person[ ‘name’ ]; // Read
28. OBJECTS
Everything in Javascript is an object
• Therefore everything can have properties
• Some values have “built in” properties
var name = ‘will’;
name.length; // => 4
var team = [‘ben’, ‘jeff’, ‘kam’];
team.length; // => 3
29. OBJECTS
Functions stored as properties are called
“methods”
var team = [‘ben’, ‘jeff’];
team.push( ‘kam’ ); // => team[2] == ‘kam’
// Push is an Array method that adds a value to the end of an array
30. “this”
“this” is used to refer to an object inside the
body of a method
var person = {};
person.name = ‘will’;
person.say_name = function() {
console.log( this.name );
}
person.say_name(); // => ‘will’
31. THEORY VS. PRACTICE
There is a fair amount of theory underlying
object orientation
For our practical purposes, at the moment
you need only understand what properties
are, and how to set (write) and get (read)
them
var obj = {};
obj.prop = ‘some_val’; // Setting
var val = obj.prop; // Getting
32. Document Object Model (DOM)
[ how javascript interacts with page content ]
Introduction
33. Document Object Model
• HTML documents have hierarchy
• every element has a parent
• every parent thus has children