ppt - Courses
advertisement
Information Organization Lab
Berkeley School of Information, Fall 2011
"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
HTML5 in 1 Slide
Get started:
http://www.alistapart.com/articles/previewofhtml5 http://diveintohtml5.org
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 http://diveintohtml5.org/forms.html )
Modernizr http://www.modernizr.com
Why are we so jQuery Crazy?
• There are alternatives!
• 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.
Build your Swiss Army Knife
•
•
•
•
http://jsfiddle.net - lots going on at once
http://jshint.com "JSLint can suck it"
http://dummyimage.com - kitty one somewhere?
https://addons.mozilla.org/enUS/firefox/addon/web-developer/ - "Test local
CSS/HTML"
• More?
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
jQuery = $
The dollar sign is a synonym for the jQuery
function
$(someElement) === jQuery(someElement)
jQuery: Events
$('div').onHover(function(){
JavaScript });
General Events
Mouse Events
Keyboard Events
Forms Events
//
ready, load, scroll
click, hover, mouseenter,
mouseleave
keypress, keydown, keyup
submit, focus, blur
http://api.jquery.com/category/events/
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.
http://api.jquery.com/category/events/
jQuery: Get and Set
<a id="linkToUC" href="http://berkeley.edu">UC
Berkeley</a>
$('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!
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: CSS
<h1>Hello world</h1>
$('h1').css('color', 'red');
$('h1').addClass('important'); // not just CSS
$('h1').hide();
$('h1').fadeIn();
“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” 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!
});
What Makes Web 2.0 so not 1.0?
Huh?
Asynchronous
JavaScript
and
XmlHttpRequest
(Because AJAJ sounds dumb and a bit… recursive)
What it can't do
// Won't be very exciting.
$.get(
'http://gmail.com?subject=ILLEGAL&send=true',
function(xml){
console.log(xml);
});
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.
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/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."
Exercise!
• Sketch what you want to do
• Write the HTML
• Write the JavaScript
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
• 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
