1. Information Organization Lab Berkeley School of Information, Fall 2011

2. "LAST" WEEK ON IO LAB Write your first Chrome Extension that does anything. Come with questions next class. Last Chance: – Complete the online skills assessment. – Join the i290-iolab@ischool mailing list. – Decide on an IDEA AND TEAM for Project 1. www.shouldiusetablesforlayout.com

3. HTML5 in 1 Slide Get started: http://www.alistapart.com/articles/previewofhtml5http://www.alistapart.com/articles/previewofhtml5 http://diveintohtml5.orghttp://diveintohtml5.org DOCTYPE: NEW TAGS (But IE 6,7--even IE 8!—doesn't support styling these tags.) AUDIO/VIDEO (But then the codecs need to work, sometimes ogg, sometimes mp3…) FEATURES localStorage New input types (great for mobile, see http://diveintohtml5.org/forms.html )http://diveintohtml5.org/forms.html Modernizr http://www.modernizr.comhttp://www.modernizr.com

4. Why are we so jQuery Crazy? There are alternatives! http://www.webappers.com/infographics/javascri pt-frameworks-jquery.html http://www.webappers.com/infographics/javascri pt-frameworks-jquery.html I didn't start with jQuery, I was a YUI guy. The "$" bugged me at first. I'm pretty agnostic. Consider each jQuery tip in a meta-sense.

5. Build your Swiss Army Knife http://jsfiddle.net - lots going on at once http://jsfiddle.net http://jshint.com "JSLint can suck it" http://jshint.com http://dummyimage.com - kitty one somewhere? http://dummyimage.com https://addons.mozilla.org/en- US/firefox/addon/web-developer/ - "Test local CSS/HTML" https://addons.mozilla.org/en- US/firefox/addon/web-developer/ More?

6. JavaScript and jQuery Nice, easy, consistent, flexible var myName = x; strings: "word" arrays: [ ] objects: { } if (condition) {... } while() {... } for() {... } var myFunct = function() {... } But then browsers go and mess things up createElement getElementById getElementsByTagName addEventListener or attachEvent XMLHttpRequest or ActiveXObject getAttribute getStyle innerHTML

7. jQuery = $ The dollar sign is a synonym for the jQuery function $(someElement) === jQuery(someElement)

8. jQuery: Events General Eventsready, load, scroll Mouse Events click, hover, mouseenter, mouseleave Keyboard Eventskeypress, keydown, keyup Forms Eventssubmit, focus, blur $('div').onHover(function(){ // JavaScript }); http://api.jquery.com/category/events/

9. jQuery: Live Events $('li').click(function(){ // meh. Ok. // Do something }); $('li').live('click', function(){ // VedyNice. // Do More Somethings }); http://api.jquery.com/category/events/ A normal event binding attaches to all matched elements when it is called. A live event calls the callback function when the event occurs on all matched element, current and future.

10. jQuery: Get and Set UC Berkeley $('a').text(); $('a').text('Hello world'); $('a').attr('href'); $('a').attr('href', 'http://google.com'); …but really you would do something more like $('#linkToUC')… explain why!

11. jQuery: Forms $('#name').val(); // Get $('#name').val('Mary'); // Set $('#name').attr('value'); // Another way to Get $('#name').attr('value', 'Mary'); // etc. (More fun when dealing with selects)

12. jQuery: CSS Hello world $('h1').css('color', 'red'); $('h1').addClass('important'); // not just CSS $('h1').hide(); $('h1').fadeIn();

13. “this” in JavaScript "This" is less easy to grok. Getting deeper into OOP. var person2 = { name: 'Mohit', sayHello: function(){ alert('Hello, ' + this.name); } Person.name

14. “this” in jQuery $('li').click(function(){ $('li').hide(); // smells funny. (what is a smell?) }); $('li').click(function(){ this // DOM element $(this) // jQuery object $(this).hide(); // Smells nice! });

15. What Makes Web 2.0 so not 1.0?

16. Huh? Asynchronous JavaScript and XmlHttpRequest (Because AJAJ sounds dumb and a bit… recursive)

17. What it can't do // Won't be very exciting. $.get( 'http://gmail.com?subject=ILLEGAL&send=true', function(xml){ console.log(xml); });

18. Same-Origin No cross-site scripting! Boo! Bad guys do it sometimes. http://en.wikipedia.org/wiki/Cross-site_scripting - worth a read. Easy for YOU to mess up. http://en.wikipedia.org/wiki/Cross-site_scripting

19. Sneaky Ways Around XSS JSON-P – "If something on some server really wants to volunteer to be called remotely, they can make it remove call friendly." – Kinda a hack. http://en.wikipedia.org/wiki/JSONPhttp://en.wikipedia.org/wiki/JSONP – New kid: CORS (no one cares yet) Proxy Server – "If you control the server, you can make a back-end call to wherever you want and serve it up locally."

20. Exercise! Sketch what you want to do Write the HTML Write the JavaScript

21. Team up for Assignment 1 Going to be smaller than you think Faster, KISS principle Make use of the skills your team has – next time for the "reverse roles" thing

22. GROUP UP 2 – 5 ppl 5 minutes to write what you WANT it to do. – Anything from basic javascript to fancy AJAX And do some HTML … and next 10 minutes hacking the jQuery And last 5 minutes of class forming groups of MIXED (but not too mixed) skill for Project 1 (which you shouldn't over-do). AND IS DUE…. NOT MONDAY. EMAIL ME YOUR GROUPS + IDEA