information organization lab september 14, 2010 overview of html, css, javascript, and jquery....
TRANSCRIPT
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
Overview of HTML, CSS, JavaScript, and jQuery.
Introduction to browser extensions.
Details about Project 1, Delicious Memex, which is due next Tuesday at noon.
LAST WEEK ON IO LAB<html>
<style>
<script>
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
JavaS
crip
tJavaScript and jQuery
Core Language
var myName = x;strings: “word”
arrays: [ ]objects: { }
if (condition) { … }while() { … }
for() { … }function() { … }
Browser Additions
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
jQuery = $The dollar sign is a synonym for the jQuery
function
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
jQuery: Events
General Events ready, load, scroll
Mouse Eventsclick, hover, mouseenter,
mouseleave
Keyboard Eventskeypress, keydown,
keyupForms Events submit, focus, blur
Complete list at http://api.jquery.com/category/events/
$(element).eventType(function(){ // JavaScript});
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
jQuery: Live Events
$(‘li’).live(‘click’, function(){ // Do Something});
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.
$(‘li’).click(function(){ // Do something});
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
jQuery: Get and Set
Complete list at http://api.jquery.com/category/attributes/
$(‘a’).text();
$(‘a’).text(‘Hello world’);
<a href="http://berkeley.edu">UC Berkeley</a>
$(‘a’).attr(‘href’);
$(‘a’).attr(‘href’, ‘http://google.com’);
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
jQuery: Forms
Complete list at http://api.jquery.com/category/forms/See the documentation for .val() in particular: http://api.jquery.com/val/
$(‘#name’).val();
$(‘#name’).val(‘Mary’);
<input id="name" type="text" value="John">
$(‘#name’).attr(‘value’);
$(‘#name’).attr(‘value’, ‘Mary’);
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
jQuery: CSS
Complete list at http://api.jquery.com/category/css/
$(‘h1’).css(‘color’, ‘red’);
$(‘h1’).addClass(‘important’);
<h1>Hello world</h1>
$(‘h1’).hide();
$(‘h1’).fadeIn();
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
“this” in JavaScript
var person = { name: 'Mohit', sayHello: function(){ alert('Hello, ' + this.name); }}
this is a special variable.It is the object in the current context.
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
$('li').click(function(){ this // DOM element $(this) // jQuery object});
“this” in jQuery
$('li').click(function(){ $('li').hide();});
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
AJAX What?
Asynchronous
Javascript
and
XmlHttpRequest
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
AJAX What?
$.get('http://gmail.com', function(xml){ console.log(xml); });
INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010
Workarounds(Cross-site scripting, yay!)
• Proxy server• JSONP
• Trusted contexts