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.

2. LESSON THREE
Javascript and the DOM

3. Fast Review

4. Data Types in Javascript
• (1) Numbers
• (2) Strings
• (3) Booleans
• (4) Functions
• (5) Objects
• (6) Undefined

5. FUNCTIONS
The ultimate DRY
Encapsulate common functionality
function name( arg_1, ... arg_n ) {
[ FUNCTION BODY ]
}

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

10. Where do we code
our javascript?

11. 1. Webkit Console

12. 2. JS Fiddle

13. 3. In-line javascript

14. 4. Include a .js file

15. 5. In Node.js Terminal

16. JAVASCRIPT
[more on functions]

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
}
}

21. JAVASCRIPT
[data structures]

22. ARRAYS
Javascript
[data structures]

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

24. OBJECTS
Javascript
[data structures]

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

34. Document Object Model
The tree is made up of nodes and text

35. DOM Traversal: Node Links
x.childNodes x.parentNode
x.firstChild x.lastChild
x.nextSibling x.previousSibling
not enough for ya? https://github.com/spicyj/jquery-genealogy

36. Problem: Not Sustainable
document.firstChild.lastChild.previousSibling.firstChild.nextSibling.style.display = “none”
VS.
document.getElementById(“dummy”).style.display = “none”;

37. BUZZZZWORD
SUSTAINABLE
• Sustainable code retains its integrity and function over time.
• It is invulnerable to external influence!

38. DOM Traversal: Attribute Selection
var my_box = document.getElementById(“my-unique-id”);
var my_links = document.getElementsByTagName(“A”);

39. 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/”);

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

41. PUTTING IT ALL TOGETHER
Let’s put cats on stuff

42. QUESTIONS?
contact will_and_bay@hackyale.com