• Like
  • Save
Week3
Upcoming SlideShare
Loading in...5
×
 

Week3

on

  • 706 views

 

Statistics

Views

Total Views
706
Views on SlideShare
351
Embed Views
355

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 355

http://hackyale.com 291
http://www.hackyale.com 61
http://localhost 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Week3 Presentation Transcript

  • 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 of timeswhile • Execute some code an “indefinite” number of times
  • CONTROL FLOW: ifif ( condition_1) { [ DO SOME STUFF ]} else if ( condition_2 ) { [ DO SOME OTHER STUFF ]} else { [ DO DEFAULT STUFF ]}
  • 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// the condition is false
  • 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 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”
  • 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
  • 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
  • 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 }}
  • 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 “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
  • OBJECTS Javascript [data structures]
  • 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
  • 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
  • OBJECTSCan also use “javascript object notation” toget and set propertiesvar person = {};person[ ‘name’ ] = ‘will’; // Writevar name = person[ ‘name’ ]; // Read
  • 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
  • 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
  • “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’
  • 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
  • Document Object Model (DOM) [ how javascript interacts with page content ] Introduction
  • 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.lastChild x.nextSibling x.previousSiblingnot enough for ya? https://github.com/spicyj/jquery-genealogy
  • Problem: Not Sustainabledocument.firstChild.lastChild.previousSibling.firstChild.nextSibling.style.display = “none” VS. document.getElementById(“dummy”).style.display = “none”;
  • BUZZZZWORD SUSTAINABLE• Sustainable code retains its integrity and function over time.• It is invulnerable to external influence!
  • DOM Traversal: Attribute Selectionvar my_box = document.getElementById(“my-unique-id”);var my_links = document.getElementsByTagName(“A”);
  • 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/”);
  • 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