Created
December 18, 2012 21:06
-
-
Save bpostlethwaite/4332013 to your computer and use it in GitHub Desktop.
Run this with a simple node.js http server + simple fileserver (just put the index.html in the public directory and fire it up --- should be similar to how we have it set up in hand-carved html... delete the requests for "filed" and "url" and delete the homespun routing logic.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * To start I would make sure the JQuery func print outs the height | |
| */ | |
| var result = document.getElementById('result'); | |
| $("#a").click(function () { | |
| var msg = $(this).height() | |
| result.appendChild( document.createTextNode(msg) ) | |
| }) | |
| // and make sure it prints the height to the browser, | |
| // change the height and do it again and make sure it makes sense. | |
| // Then reset the height of the div? | |
| $("#b").click(function () { | |
| var h = $(this).height() | |
| result.appendChild( document.createTextNode(h) ) | |
| $(this).height( h / 2 ) | |
| }) | |
| // notice that this will keep reducing the div height by two... | |
| // say we want a switch so it flicks back to full height than back again. | |
| // Notice that the JQuery click function takes a callback as its only | |
| // parameter. This function gets called everytime it gets a click event. | |
| // $("div").click( callback ) | |
| // It would be nice if there was some shared state between invocations | |
| // of the callback function, so it would know its last state, and could | |
| // increase in size or decrease accordingly. | |
| // One way is to set a global variable, and just flick it from inside | |
| // the callback. This is not good. There is a better and more resuable | |
| // way to do this using closures. | |
| // Lets build a function which outputs the callback function but first | |
| // creates some outer context space for a variable to be held, even | |
| // when the callback function returns. | |
| // Example: | |
| function buildCallback () { | |
| var tog = true // This variable can be seen by | |
| // functions inside closing scope. And because | |
| // we return the function, the context of the | |
| // outer function WILL NOT BE GARBAGE COLLECTED | |
| // and the returned inner function can always access | |
| // any variables (or other functions) you delcare | |
| // within here | |
| return function () { | |
| tog = !tog // tog is not tog. Flick from true to false | |
| result.appendChild( document.createTextNode(tog) ) | |
| } | |
| } | |
| $("#c").click( buildCallback() ) | |
| // Great it works! | |
| // So now we just need an if statement inside the callback to take | |
| // appropriate action depending on the toggle state. | |
| // By combining earlier logic in "b" with this closure pattern in "c" | |
| // we can do exactly what we want. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- | |
| This is an HTML page that contains a CSS and a Javascript file. | |
| Run this sample by clicking the 'Preview' button on top; | |
| a new tab will open with the current page open. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Hello world from Cloud9!</title> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| </head> | |
| <body> | |
| <button type="button" style="height: 120px;" id="a">a</button> | |
| <button type="button" style="height: 120px;" id="b">b</button> | |
| <button type="button" style="height: 120px;" id="c">c</button> | |
| <div id="result"></div> | |
| <script src="/closure.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment