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

2. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 Information Organization Lab

3. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 JavaScript JavaScript and jQuery Core Language var myName = x; strings: “word” arrays: [ ] objects: { } if (condition) { … } while() { … } for() { … } function() { … } Browser Additions

4. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 jQuery = $ The dollar sign is a synonym for the jQuery function

5. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 jQuery: Events General Eventsready, load, scroll Mouse Events click, hover, mouseenter, mouseleave Keyboard Eventskeypress, keydown, keyup Forms Eventssubmit, focus, blur Complete list at http://api.jquery.com/category/events/ $(element).eventType(function(){ // JavaScript });

6. 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 });

7. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 jQuery: Get and Set Complete list at http://api.jquery.com/category/attributes/http://api.jquery.com/category/attributes/ $(‘a’).text(); $(‘a’).text(‘Hello world’); UC Berkeley $(‘a’).attr(‘href’); $(‘a’).attr(‘href’, ‘http://google.com’);http://google.com

8. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 jQuery: Forms Complete list at http://api.jquery.com/category/forms/http://api.jquery.com/category/forms/ See the documentation for.val() in particular: http://api.jquery.com/val/ $(‘#name’).val(); $(‘#name’).val(‘Mary’); $(‘#name’).attr(‘value’); $(‘#name’).attr(‘value’, ‘Mary’);

9. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 jQuery: CSS Complete list at http://api.jquery.com/category/css/http://api.jquery.com/category/css/ $(‘h1’).css(‘color’, ‘red’); $(‘h1’).addClass(‘important’); Hello world $(‘h1’).hide(); $(‘h1’).fadeIn();

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

11. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 $('li').click(function(){ this // DOM element $(this) // jQuery object }); “this” in jQuery $('li').click(function(){ $('li').hide(); });

12. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 AJAX and Cross-site Scripting Web 2.0 FTW

13. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 The History of AJAX Web 2.0 FTW HTMLDHTML AJA X

14. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 AJAX What? Asynchronous Javascript and XmlHttpRequest

15. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 AJAX What? $.get('http://gmail.com', function(xml){ console.log(xml); });

16. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 same-origin policy (Alas, no cross-site scripting!)

17. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 Workarounds (Cross-site scripting, yay!) Proxy server JSONP Trusted contexts

18. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 Evil.com Normal WebpageAJAX

19. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 In-Class Exercise Round One

20. INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010 FOR NEXT WEEK Project 1, Delicious Memex, is due by noon, Tuesday, September 21st. Email your project (or a link where we can access your project) to npdoty@ and ryan@. Include a brief description of the concept and implementation.