Download presentation
Presentation is loading. Please wait.
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 mailing list. Decide on an IDEA AND TEAM for Project 1.
3
HTML5 in 1 Slide Get started: DOCTYPE: <!doctype html> NEW TAGS <header> <footer> <nav> <article> <section> <aside> (But IE 6,7--even IE 8!—doesn't support styling these tags.) AUDIO/VIDEO <audio> <video> (But then the codecs need to work, sometimes ogg, sometimes mp3…) FEATURES localStorage New input types (great for mobile, see ) Modernizr
4
Why are we so jQuery Crazy?
There are alternatives! 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? - "Test local CSS/HTML" 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 Last week (well, longer before) we learned about the core syntax of JavaScript. It’s pretty straight-forward. Quirks, but familiar structures if you have written programs before. JavaScript in the context of browsers. Web browsers add a lot of features. Complex and quirky, and differ across browsers. jQuery is a library, written in JavaScript, that makes it easier to deal with DOM-based JavaScript methods.
7
jQuery = $ The dollar sign is a synonym for the jQuery function
$(someElement) === jQuery(someElement) What does jQuery look like? Usually referenced using an alias, the dollar sign. Writing $(some element) is the same as writing jQuery(some element). An important thing to keep in mind is that whenever you are using jQuery, you are working with DOM elements.
8
jQuery: Events $('div').onHover(function(){ // JavaScript });
General Events ready, load, scroll Mouse Events click, hover, mouseenter, mouseleave Keyboard Events keypress, keydown, keyup Forms Events submit, focus, blur jQuery makes it easy to bind events to DOM elements. This is called event binding.
9
jQuery: Live Events $('li').click(function(){ // meh. Ok.
// Do something }); $('li').live('click', function(){ // VedyNice. // Do More Somethings What if you do it too early? Don't be premature. If you bind to an element in the page that isn't there yet… well, you're SOL. Better to use a live event. Never worry about the ordering, new ones being created, etc. 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 <a id="linkToUC" href=" Berkeley</a> $('a').text(); $('a').text('Hello world'); $('a').attr('href'); $('a').attr('href', ' …but really you would do something more like $('#linkToUC')… explain why! jQuery provides a wide variety of methods to get and set attributes from DOM elements. As you would hope, the get and set methods are very similar.
11
jQuery: Forms <input id="name" type="text" value="John"> $('#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) jQuery provides shortcuts for things you might commonly do, like get and set attributes from form elements. In particular, it is good with form elements.
12
jQuery: CSS <h1>Hello world</h1> $('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 “this” is a variable in JavaScript that is the current context or scope In this case it is a reference to the person object.
14
“this” in jQuery $('li').click(function(){ $('li').hide(); // smells funny. (what is a smell?) }); 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) Asynchronous – Don't know when it finishes, program won't just pause and wait. (PITA) JavaScript (Makes it go) And (you know what this means) XmlHttpRequest (Gimme XML over HTTP.
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 Proxy Server
"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
5 minutes to write what you WANT it to do. And do some HTML
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. ME YOUR GROUPS + IDEA
Similar presentations
