Uploaded on

 

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
595
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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