Your SlideShare is downloading. ×
Week3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Week3

630
views

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
630
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. LESSON THREEJavascript and the DOM
    • 2. Fast Review
    • 3. Data Types in Javascript• (1) Numbers• (2) Strings• (3) Booleans• (4) Functions• (5) Objects• (6) Undefined
    • 4. FUNCTIONSThe ultimate DRYEncapsulate common functionalityfunction name( arg_1, ... arg_n ) { [ FUNCTION BODY ]}
    • 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. CONTROL FLOW: ifif ( condition_1) { [ DO SOME STUFF ]} else if ( condition_2 ) { [ DO SOME OTHER STUFF ]} else { [ DO DEFAULT STUFF ]}
    • 7. CONTROL FLOW: forfor ( var i = 0; i < 10; i++ ) { [ DO SOME STUFF ]}// That stuff will happen 10 times
    • 8. CONTROL FLOW: whilewhile ( [SOME CONDITION OBTAINS] ) { [ KEEP DOING STUFF ]}// That stuff will keep happening until// the condition is false
    • 9. Where do we code our javascript?
    • 10. 1. Webkit Console
    • 11. 2. JS Fiddle
    • 12. 3. In-line javascript
    • 13. 4. Include a .js file
    • 14. 5. In Node.js Terminal
    • 15. JAVASCRIPT[more on functions]
    • 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. 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. 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. 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. JAVASCRIPT[data structures]
    • 21. ARRAYS Javascript [data structures]
    • 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. OBJECTS Javascript [data structures]
    • 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. 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. OBJECTSCan also use “javascript object notation” toget and set propertiesvar person = {};person[ ‘name’ ] = ‘will’; // Writevar name = person[ ‘name’ ]; // Read
    • 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. 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. “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. 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. Document Object Model (DOM) [ how javascript interacts with page content ] Introduction
    • 32. Document Object Model• HTML documents have hierarchy• every element has a parent• every parent thus has children
    • 33. Document Object ModelThe tree is made up of nodes and text
    • 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. Problem: Not Sustainabledocument.firstChild.lastChild.previousSibling.firstChild.nextSibling.style.display = “none” VS. document.getElementById(“dummy”).style.display = “none”;
    • 36. BUZZZZWORD SUSTAINABLE• Sustainable code retains its integrity and function over time.• It is invulnerable to external influence!
    • 37. DOM Traversal: Attribute Selectionvar my_box = document.getElementById(“my-unique-id”);var my_links = document.getElementsByTagName(“A”);
    • 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. The ‘document’ ObjectThe document is a special object, with it’smethods and properties.
    • 40. PUTTING IT ALL TOGETHERLet’s put cats on stuff
    • 41. QUESTIONS?contact will_and_bay@hackyale.com