Presentation is loading. Please wait.

Presentation is loading. Please wait.

Information Organization Lab Berkeley School of Information, Fall 2011.

Similar presentations

Presentation on theme: "Information Organization Lab Berkeley School of Information, Fall 2011."— Presentation transcript:

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.

3 HTML5 in 1 Slide Get started: http://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 ) Modernizr http://www.modernizr.com

4 Why are we so jQuery Crazy? There are alternatives! pt-frameworks-jquery.html 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 - lots going on at once "JSLint can suck it" - kitty one somewhere? US/firefox/addon/web-developer/ - "Test local CSS/HTML" 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 });

9 jQuery: Live Events $('li').click(function(){ // meh. Ok. // Do something }); $('li').live('click', function(){ // VedyNice. // Do More Somethings }); 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', ''); …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, ' +; }

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( '', function(xml){ console.log(xml); });

18 Same-Origin No cross-site scripting! Boo! Bad guys do it sometimes. - worth a read. Easy for YOU to mess up.

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. – 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

Download ppt "Information Organization Lab Berkeley School of Information, Fall 2011."

Similar presentations

Ads by Google