INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills...
-
Upload
eustace-hart -
Category
Documents
-
view
212 -
download
0
Transcript of INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills...
![Page 1: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/1.jpg)
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
![Page 2: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/2.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Information Organization Lab
![Page 3: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/3.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Delicious TrailmakerTake Two
![Page 4: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/4.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Lab LabScheduling.
![Page 5: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/5.jpg)
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>
![Page 6: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/6.jpg)
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
![Page 7: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/7.jpg)
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
![Page 8: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/8.jpg)
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>
![Page 9: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/9.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Common elementshead body
p a
ul ol
img li
form input
script link
div span
![Page 10: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/10.jpg)
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>
![Page 11: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/11.jpg)
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>
![Page 12: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/12.jpg)
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">
![Page 13: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/13.jpg)
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">
![Page 14: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/14.jpg)
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
![Page 15: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/15.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Cascading style sheets
![Page 16: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/16.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Rule Structure
From CSS: The Definitive Guide
![Page 17: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/17.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
SelectorsCSS HTML
Tag p <p>
Id #header id="header"
Class .author class="author"
Descendant div p <div><p>
![Page 18: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/18.jpg)
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.
![Page 19: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/19.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
CSS Resources
Available free for students at http://proquest.safaribooksonline.com.
![Page 20: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/20.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Javascript crash course
![Page 21: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/21.jpg)
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 /* */
![Page 22: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/22.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Variables
'Bob'29 true
['Bob', 'John', 'Coye', 'Deirdre']
{'name': 'Arnold', 'weight': 240}
Numbers Strings Boolean
Arrays
Objects
![Page 23: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/23.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Variables
var stateName = 'California';
![Page 24: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/24.jpg)
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
![Page 25: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/25.jpg)
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'];
![Page 26: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/26.jpg)
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'
![Page 27: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/27.jpg)
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;}
![Page 28: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/28.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Browser functions
alert('…')confirm('…')prompt('…')
console.log('…')
![Page 29: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/29.jpg)
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];};
![Page 30: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/30.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
jQueryCSS meets JavaScript
+
![Page 31: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/31.jpg)
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:
![Page 32: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/32.jpg)
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.
![Page 33: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/33.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
jQuery Hands-On
![Page 34: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/34.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Web Browser ExtensionsGreasemonkey and Chrome and bears, oh my!
![Page 35: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/35.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Extend What?
Browser chrome
Page content
Page style
Page behavior
![Page 36: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/36.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Mozilla Jetpack
Firefox Extensions
Chrome Extensions
Greasemonkey
![Page 37: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/37.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Good for the Browsers
GOOD FOR US
![Page 38: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/38.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Let’s Try itTo the browser / text editor!
![Page 39: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/39.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
?
![Page 40: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/40.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1Due September 21
![Page 41: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/41.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
![Page 42: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/42.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
![Page 43: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/43.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
![Page 44: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/44.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1
![Page 45: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/45.jpg)
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010
Project 1Due September 21
?
![Page 46: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.](https://reader030.fdocuments.us/reader030/viewer/2022032806/56649f0c5503460f94c1fe59/html5/thumbnails/46.jpg)
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/