Post on 04-Jan-2016
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Install Chrome or Firebug.
Complete the online skills assessment and lab Doodle.
Join the iolab@ischool mailing list.
LAST WEEK ON IO LABIf you haven’t done these things already, please do them before we
begin today’s lecture
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Information Organization Lab
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Delicious TrailmakerTake Two
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Lab LabScheduling.
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML
<p>This is a paragraph.</p>
<img src="http://site.com/a.png">
<ol> <li>Item One</li> <li>Item Two</li></ol>
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML
<p>This is a paragraph.</p>element
<img src="http://site.com/a.png">
<ol> <li>Item One</li> <li>Item Two</li></ol>
nested elements
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML
<p>This is a paragraph.</p>
<img src="http://site.com/a.png">
<ol> <li>Item One</li> <li>Item Two</li></ol>
tagclosing
tag
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML
<p>This is a paragraph.</p>
<img src="http://site.com/a.png">
attribute
<ol> <li>Item One</li> <li>Item Two</li></ol>
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Common elementshead body
p a
ul ol
img li
form input
script link
div span
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML
<body> <p>This is <font face="Papyrus" size="+3">hideous!</font> <form onsubmit="validateForm();"> <input type="submit"> </form></body>
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML
<body> <p>This is <font face="Papyrus" size="+3">hideous!</font> <form onsubmit="validateForm();"> <input type="submit"> </form></body>
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!DOCTYPE html>
<html lang="en">
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
HTML5
<img src="http://berkeley.edu/logo.png">
<img src="http://berkeley.edu/logo.png"/>
<img src="http://berkeley.edu/logo.png">
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Document Object Model<html><body><div id="header"> <h1>Document Object Model</h1></div><div id="content"> <p>This is my first paragraph</p> <p>My second paragraph has a list: <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> </p> <p>This is the third paragraph</p></div></body></html>
body
divheader
divcontent
p p p
ul
li li li
h1
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Cascading style sheets
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Rule Structure
From CSS: The Definitive Guide
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
SelectorsCSS HTML
Tag p <p>
Id #header id="header"
Class .author class="author"
Descendant div p <div><p>
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Common Properties
font-family color border display
margin font-size width padding
background position text-align float
See http://htmldog.com/reference/cssproperties/ for a good list of CSS2 properties.
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
CSS Resources
Available free for students at http://proquest.safaribooksonline.com.
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Javascript crash course
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
First Things First
JavaScript is a high-level, object-oriented language used most often in web browsers.
A semi-colon goes at the end of every statement.
You can write comments in your code with // or /* */
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Variables
'Bob'29 true
['Bob', 'John', 'Coye', 'Deirdre']
{'name': 'Arnold', 'weight': 240}
Numbers Strings Boolean
Arrays
Objects
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Variables
var stateName = 'California';
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
StringsA sequence of characters.
Use single- or double-quotes to indicate a string.
Examplesvar myName = "Larry";
myName → "Larry"myName.length → 5
myName.toUpperCase() → "LARRY"myName.indexOf('a') → 1
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
ArraysAn ordered collection of elements.
Use square brackets to indicate an array.
Examplesvar myArray = ['dog', 'fish', 'cat'];
myArray.length → 3myArray[0] → ['dog']
myArray.push('horse') → myArray == ['dog', 'fish', 'cat', 'horse']myArray.indexOf('fish') → 1
myArray.sort() → ['cat', 'dog', 'fish'];
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
ObjectsA collection of key-value pairs or named properties.
Use braces to indicate an object.
Examplesvar person = {'name': 'Arnold', 'weight': 240, 'height': 6.2 }
person.name → "Arnold"person.height → 6.2
person.wife = 'Maria';person.wife → 'Maria'
person['wife'] → 'Maria'
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Functionsfunction add(x, y) { return x + y;}add(2,4) → 6
var add = function(x, y) { return x + y;}
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Browser functions
alert('…')confirm('…')prompt('…')
console.log('…')
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Control structures
if (3 > 2) { alert('3 is greater than 2');}
for (var i=0; i < myArray.length; i++) { myArray[i];};
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
jQueryCSS meets JavaScript
+
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
jQuery
• Selects objects from the DOM using CSS selectors.
• Do something with the selected elements.
Using jQuery involves two steps:
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Main jQuery operations
• Events: Attaching functions to events in the browser.
• Attributes: Changing existing elements: CSS styles, HTML attributes.
• Manipulating: Inserting or removing elements.
• Traversing: Moving from selected elements in the DOM to others.
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
jQuery Hands-On
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Web Browser ExtensionsGreasemonkey and Chrome and bears, oh my!
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Extend What?
Browser chrome
Page content
Page style
Page behavior
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Mozilla Jetpack
Firefox Extensions
Chrome Extensions
Greasemonkey
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Good for the Browsers
GOOD FOR US
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Let’s Try itTo the browser / text editor!
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
?
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1Due September 21
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1Due September 21
?
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
For Next Week
Write your first Chrome Extension that does anything. Come with questions next class.
Decide on an idea for Project 1.
You can find links to help with all of these on the course website athttp://courses.ischool.berkeley.edu/i290-iol/f10/