Week3

LESSON THREE
Javascript and the DOM

Data Types in Javascript

• (1) Numbers

• (2) Strings

• (3) Booleans

• (4) Functions

• (5) Objects

• (6) Undefined

FUNCTIONS

The ultimate DRY

Encapsulate common functionality
function name( arg_1, ... arg_n ) {

[ FUNCTION BODY ]

}

CONTROL FLOW

if
• Execute some code if a certain condition pertains

for
• Execute some code a “deﬁnite” number of times

while
• Execute some code an “indeﬁnite” number of times

CONTROL FLOW: if

if ( condition_1) {
[ DO SOME STUFF ]
} else if ( condition_2 ) {
[ DO SOME OTHER STUFF ]
} else {
[ DO DEFAULT STUFF ]
}

CONTROL FLOW: for

for ( var i = 0; i < 10; i++ ) {
[ DO SOME STUFF ]
}
// That stuff will happen 10 times

CONTROL FLOW: while

while ( [SOME CONDITION OBTAINS] ) {
[ KEEP DOING STUFF ]
}
// That stuff will keep happening until
// the condition is false

Where do we code
our javascript?

JAVASCRIPT
[more on functions]

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”

BUZZZZWORD

“First class objects”
• These are the “objects” in an “object-oriented” language (we will deﬁne
“object oriented” later) that can be (1) saved in variables, (2) passed as
arguments to functions, and (3) returned as values from functions

ANONYMOUS FUNCTIONS

Javascript conveniently allows you to deﬁne
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

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 deﬁnition
} else {
return n * factorial( n - 1 ); // Recursive step
}
}

ARRAYS

Javascript
[data structures]

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

• Deﬁned 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] // => undeﬁned

OBJECTS

Javascript
[data structures]

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 deﬁned interface

• Javascript is centered on objects, but not object oriented in the
traditional sense

OBJECTS

Objects are collections of “properties”
• Properties are key / value pairs

• Deﬁned using braces

• Use “dot” notation to read and write

var person = {};

person.name = ‘will’; // Write

var name = person.name; // Read

OBJECTS

Can also use “javascript object notation” to
get and set properties
var person = {};

person[ ‘name’ ] = ‘will’; // Write

var name = person[ ‘name’ ]; // Read

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

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

“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’

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

Document Object Model (DOM)
[ how javascript interacts with page content ]

Introduction

Document Object Model

• HTML documents have hierarchy

• every element has a parent

• every parent thus has children

Document Object Model

The tree is made up of nodes and text

DOM Traversal: Node Links

x.childNodes x.parentNode
x.ﬁrstChild x.lastChild
x.nextSibling x.previousSibling

not enough for ya? https://github.com/spicyj/jquery-genealogy

Problem: Not Sustainable

document.ﬁrstChild.lastChild.previousSibling.ﬁrstChild.nextSibling.style.display = “none”

VS.

document.getElementById(“dummy”).style.display = “none”;

BUZZZZWORD

SUSTAINABLE
• Sustainable code retains its integrity and function over time.

• It is invulnerable to external inﬂuence!

DOM Traversal: Attribute Selection

var my_box = document.getElementById(“my-unique-id”);

var my_links = document.getElementsByTagName(“A”);

Important Properties

x.innerHTML

document.innerHTML(“<p> oh no! </p>”);
x.style

document.body.style.marginTop(“30px”);
x.getAttribute(name)

my_link.getAttribute(“href”); // => “http://www.hackyale.com”
x.setAttribute(name, value)

my_link.setAttribute(“href”, “http://www.20b.org/”);

The ‘document’ Object

The document is a special object, with it’s
methods and properties.

PUTTING IT ALL TOGETHER

Let’s put cats on stuff

QUESTIONS?
contact will_and_bay@hackyale.com

Week3

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Week3 (20)

Recently uploaded (20)

Week3

Editor's Notes