information organization lab september 14, 2010 overview of html, css, javascript, and jquery....

19
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 LAST WEEK ON IO LAB <html> <style> <script>

Upload: edwin-shannon-randall

Post on 02-Jan-2016

214 views

Category:

Documents


0 download

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

Information Organization Lab

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 and Cross-site ScriptingWeb 2.0 FTW

INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010

The History of AJAXWeb 2.0 FTW

HTML DHTML AJAX

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

same-origin policy(Alas, no cross-site scripting!)

INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010

Workarounds(Cross-site scripting, yay!)

• Proxy server• JSONP

• Trusted contexts

INFORMATION ORGANIZATION LAB SEPTEMBER 14, 2010

In-Class ExerciseRound One

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.