Upcoming SlideShare
×

# Week3

879 views

Published on

Published in: Education, Technology
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
879
On SlideShare
0
From Embeds
0
Number of Embeds
371
Actions
Shares
0
0
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 “deﬁnite” number of timeswhile • Execute some code an “indeﬁnite” 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 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
18. 18. ANONYMOUS FUNCTIONSJavascript conveniently allows you to deﬁnefunctions “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 deﬁnition } 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 • 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
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 deﬁned 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 • Deﬁned 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.ﬁrstChild x.lastChild x.nextSibling x.previousSiblingnot enough for ya? https://github.com/spicyj/jquery-genealogy
35. 35. Problem: Not Sustainabledocument.ﬁrstChild.lastChild.previousSibling.ﬁrstChild.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 inﬂuence!
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