LESSON THREEJavascript and the DOM
Fast Review
Data Types in Javascript•   (1) Numbers•   (2) Strings•   (3) Booleans•   (4) Functions•   (5) Objects•   (6) Undefined
FUNCTIONSThe ultimate DRYEncapsulate common functionalityfunction name( arg_1, ... arg_n ) {    [ FUNCTION BODY ]}
CONTROL FLOWif     •   Execute some code if a certain condition pertainsfor     •   Execute some code a “definite” number o...
CONTROL FLOW: ifif ( condition_1) {    [ DO SOME STUFF ]} else if ( condition_2 ) {    [ DO SOME OTHER STUFF ]} else {    ...
CONTROL FLOW: forfor ( var i = 0; i < 10; i++ ) {    [ DO SOME STUFF ]}// That stuff will happen 10 times
CONTROL FLOW: whilewhile ( [SOME CONDITION OBTAINS] ) {    [ KEEP DOING STUFF ]}// That stuff will keep happening until// ...
Where do we code  our javascript?
1. Webkit Console
2. JS Fiddle
3. In-line javascript
4. Include a .js file
5. In Node.js Terminal
JAVASCRIPT[more on functions]
FUNCTIONS AS ARGUMENTSIn Javascript, functions can be passed asarguments to other functions  •   Relatedly, they can be re...
BUZZZZWORD    “First class objects”•    These are the “objects” in an “object-oriented” language (we will define     “objec...
ANONYMOUS FUNCTIONSJavascript conveniently allows you to definefunctions “inline” without specifying a namevar kill_timeout...
RECURSIVE FUNCTIONSIn Javascript, functions can call themselves •   This is called “recursion” •   It must “bottom out” at...
JAVASCRIPT[data structures]
ARRAYS   Javascript  [data structures]
ARRAYSA data structure native to Javascript thatstores values in an ordered way •   Arrays contain an arbitrary number of ...
OBJECTS    Javascript   [data structures]
BUZZZZWORD“Object Oriented”•   A way of structuring programming languages invented in the early    90s•   Data and functio...
OBJECTSObjects are collections of “properties” •   Properties are key / value pairs •   Defined using braces •   Use “dot” ...
OBJECTSCan also use “javascript object notation” toget and set propertiesvar person = {};person[ ‘name’ ] = ‘will’; // Wri...
OBJECTSEverything in Javascript is an object •   Therefore everything can have properties •   Some values have “built in” ...
OBJECTSFunctions stored as properties are called“methods”var team = [‘ben’, ‘jeff’];team.push( ‘kam’ ); // => team[2] == ‘...
“this”“this” is used to refer to an object inside thebody of a methodvar person = {};person.name = ‘will’;person.say_name ...
THEORY VS. PRACTICEThere is a fair amount of theory underlyingobject orientationFor our practical purposes, at the momenty...
Document Object Model (DOM)   [ how javascript interacts with page content ]                                             I...
Document Object Model•   HTML documents have hierarchy•   every element has a parent•   every parent thus has children
Document Object ModelThe tree is made up of nodes and text
DOM Traversal: Node Links             x.childNodes             x.parentNode             x.firstChild             x.lastChil...
Problem: Not Sustainabledocument.firstChild.lastChild.previousSibling.firstChild.nextSibling.style.display = “none”         ...
BUZZZZWORD    SUSTAINABLE•    Sustainable code retains its integrity and function over time.•    It is invulnerable to ext...
DOM Traversal: Attribute Selectionvar my_box = document.getElementById(“my-unique-id”);var my_links = document.getElements...
Important Propertiesx.innerHTML   document.innerHTML(“<p> oh no! </p>”);x.style   document.body.style.marginTop(“30px”);x....
The ‘document’ ObjectThe document is a special object, with it’smethods and properties.
PUTTING IT ALL TOGETHERLet’s put cats on stuff
QUESTIONS?contact will_and_bay@hackyale.com
Week3
Upcoming SlideShare
Loading in...5
×

Week3

665

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
665
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Week3

    1. 1. LESSON THREEJavascript and the DOM
    2. 2. Fast Review
    3. 3. Data Types in Javascript• (1) Numbers• (2) Strings• (3) Booleans• (4) Functions• (5) Objects• (6) Undefined
    4. 4. FUNCTIONSThe ultimate DRYEncapsulate common functionalityfunction name( arg_1, ... arg_n ) { [ FUNCTION BODY ]}
    5. 5. CONTROL FLOWif • Execute some code if a certain condition pertainsfor • Execute some code a “definite” number of timeswhile • Execute some code an “indefinite” number of times
    6. 6. CONTROL FLOW: ifif ( condition_1) { [ DO SOME STUFF ]} else if ( condition_2 ) { [ DO SOME OTHER STUFF ]} else { [ DO DEFAULT STUFF ]}
    7. 7. CONTROL FLOW: forfor ( var i = 0; i < 10; i++ ) { [ DO SOME STUFF ]}// That stuff will happen 10 times
    8. 8. CONTROL FLOW: whilewhile ( [SOME CONDITION OBTAINS] ) { [ KEEP DOING STUFF ]}// That stuff will keep happening until// the condition is false
    9. 9. Where do we code our javascript?
    10. 10. 1. Webkit Console
    11. 11. 2. JS Fiddle
    12. 12. 3. In-line javascript
    13. 13. 4. Include a .js file
    14. 14. 5. In Node.js Terminal
    15. 15. JAVASCRIPT[more on functions]
    16. 16. FUNCTIONS AS ARGUMENTSIn Javascript, functions can be passed asarguments 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 datavar say_hi = function() {console.log(“hi”);};say_hi(); // Prints “hi”
    17. 17. 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
    18. 18. ANONYMOUS FUNCTIONSJavascript conveniently allows you to definefunctions “inline” without specifying a namevar kill_timeout = set_timeout( function() { console.log(“You are now 5 seconds older”); }, 5000); // Javascript tells time in milliseconds
    19. 19. RECURSIVE FUNCTIONSIn 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 }}
    20. 20. JAVASCRIPT[data structures]
    21. 21. ARRAYS Javascript [data structures]
    22. 22. ARRAYSA data structure native to Javascript thatstores 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
    23. 23. OBJECTS Javascript [data structures]
    24. 24. 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
    25. 25. OBJECTSObjects are collections of “properties” • Properties are key / value pairs • Defined using braces • Use “dot” notation to read and writevar person = {};person.name = ‘will’; // Writevar name = person.name; // Read
    26. 26. OBJECTSCan also use “javascript object notation” toget and set propertiesvar person = {};person[ ‘name’ ] = ‘will’; // Writevar name = person[ ‘name’ ]; // Read
    27. 27. OBJECTSEverything in Javascript is an object • Therefore everything can have properties • Some values have “built in” propertiesvar name = ‘will’;name.length; // => 4var team = [‘ben’, ‘jeff’, ‘kam’];team.length; // => 3
    28. 28. OBJECTSFunctions 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
    29. 29. “this”“this” is used to refer to an object inside thebody of a methodvar person = {};person.name = ‘will’;person.say_name = function() { console.log( this.name );}person.say_name(); // => ‘will’
    30. 30. THEORY VS. PRACTICEThere is a fair amount of theory underlyingobject orientationFor our practical purposes, at the momentyou need only understand what propertiesare, and how to set (write) and get (read)themvar obj = {};obj.prop = ‘some_val’; // Settingvar val = obj.prop; // Getting
    31. 31. Document Object Model (DOM) [ how javascript interacts with page content ] Introduction
    32. 32. Document Object Model• HTML documents have hierarchy• every element has a parent• every parent thus has children
    33. 33. Document Object ModelThe tree is made up of nodes and text
    34. 34. DOM Traversal: Node Links x.childNodes x.parentNode x.firstChild x.lastChild x.nextSibling x.previousSiblingnot enough for ya? https://github.com/spicyj/jquery-genealogy
    35. 35. Problem: Not Sustainabledocument.firstChild.lastChild.previousSibling.firstChild.nextSibling.style.display = “none” VS. document.getElementById(“dummy”).style.display = “none”;
    36. 36. BUZZZZWORD SUSTAINABLE• Sustainable code retains its integrity and function over time.• It is invulnerable to external influence!
    37. 37. DOM Traversal: Attribute Selectionvar my_box = document.getElementById(“my-unique-id”);var my_links = document.getElementsByTagName(“A”);
    38. 38. Important Propertiesx.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/”);
    39. 39. The ‘document’ ObjectThe document is a special object, with it’smethods and properties.
    40. 40. PUTTING IT ALL TOGETHERLet’s put cats on stuff
    41. 41. QUESTIONS?contact will_and_bay@hackyale.com

    ×