The Browser as Programmable Environment DOM, Javascript, Web 2'0 and Greasemonkey

1
(No Transcript)
2
The Browser as Programmable EnvironmentDOM,
Javascript, Web 2.0 and Greasemonkey
3
Browser
Python
4
Why

• Low response time
• Servers like to outsource

5

• Dynamic Documents
• Javascript Intro
• Javascript Reference
• Web 2.0
• Client-driven Javascript

6
Dynamic Documents

• Many techniques have come and sometimes gone
• ActiveX, Java, Shockwave, Flash

7
Mainstay Dynamic HTML

• Modify HTML pages,
• dynamically
• i.e., when in use

8
Document Layout
9
A different way of looking
10
tree datastructure
11
Document Element Layout
12
An example

• lthtmlgt
• ltheadgt
• lttitlegtMy titlelt/titlegt
• lt/headgt
• ltbodygt
• lta hrefgtMy linklt/agt
• lth1gtMy headerlt/h1gt
• lt/bodygt
• lt/htmlgt

13
DOM Tree for this HTML Document
14
Document Object Model
15
But...

• what about programming?

16
Event Driven Execution

• perform an action when something happens
• when the user interacts with a webpage
• when the page has finished loading
• when new data is available
• etc.

17
Event Driven Programming

• Write the program to execute
• Attach it to an event

18
Example

• Event if the user presses the left mousebutton
  over an element
• Action Change element color

19
Example

• Event if the user presses the left mousebutton
  over an element
• Action Change element color

20
Document Programming

• Javascript
• comes standard
• with most browsers
• (no downloading)?
• like stylesheets embed code in - or link to from
  webpages

21

• Dynamic Documents
• Javascript Intro
• Javascript Reference
• Web 2.0
• Client-driven Javascript

22
What's in a name?

• Mocha
• Javascript
• JScript
• ECMAScript

23
Not JavaTechnically, has nothing to do with it
24
Document Object Model

• Textual notation
• read tree from top to bottom
• objects, like python
• similar syntax
• x.y.z
• For instance
• document.forms0.elements1.value

25
Example hook and code

• lthtmlgt
• ltbodygt
• lth1 OnClickalert('Hello World')gt
• CLICK HERE
• lt/h1gt
• lt/bodygt
• lt/htmlgt

26
A bit like stylesheets...

• lthtmlgt
• ltheadgt
• ltscript typetext/javascriptgt
• function my_first()
• ....
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltp OnMouseOvermy_first()gtexamplelt/pgt lt/bodygt
  
• lt/htmlgt

27
Functions in Head or External

• ltheadgt
• ltscript typetext/javascriptgt
• function my_first()
• ....
• lt/scriptgt
• lt/headgt
• And/or
• ltheadgt
• ltscript srcexternal.jsgtlt/scriptgt
• lt/headgt

28
Example modify a page

• lthtmlgt
• ltheadgt
• lttitlegtOriginal Titlelt/titlegt
• lt/headgt
• ltbodygt
• lth1 OnClick"document.title 'One'"gt
• Click To Change Title To One
• lt/h1gt
• lth1 OnClick"document.title 'Two'"gt
• Click To Change Title To Two
• lt/h1gt
• lt/bodygt
• lt/htmlgt

29
(No Transcript)
30
(No Transcript)
31
Three concepts

• Data Document Object Model
• Events OnClick, OnLoad, ...
• Actions Javascript code
• may change data -gt

32

• Dynamic Documents
• Javascript Intro
• Javascript Reference
• Web 2.0
• Client-driven Javascript

33
Javascript

• Syntax
• Operators
• Control Flow
• Functions
• Structures
• Objects
• Similar to Python

34
Syntax

• Inspired by C, C, Java
• var a 3
• // this is a comment
• document.body.style.backgroundColor"blue"

35
explicit syntax, no indentation

• Javascript
• if (a gt 3)
• alert(larger)

Python if a gt 3 print larger
36
Operators

• Like Python
• except boolean , , !
• and you may see some others in tutorials
• i

37
Control Flow

• Like Python
• except for

38
CF Branching

• if (EXPR)
• ...
• else
• ...

39
CF for loop
OPTIONAL

• for (INITCODEBREAKCHECKRECURRENT)
• ...
• For instance
• for (var i0 i lt 5 i)?
• document.write(value of i is i ltbr/gt)

40
CF for .. in loop
Javascript elements document.getElementsByName(
myname) for (i in elements) document.write(
found a named element) Python elements
document.getElementsByname(myname)? for i in
elements document.write(found a named
element)?
41
CF while loop
Javascript var i 0 while (i lt 5)
document.write(value of i is i
ltbr/gt) i i 1 Python i 0 while i lt
5 document.write(value of I is i
ltbr/gt)? i i 1
42
Functions

• Javascript
• function prod(a,b)?
• x a b
• return x
• Python
• def prod(a, b)
• x a b
• return x

43
Structures

• string object
• var txt"Hello world!"
• txt.length()
• document.print(txt.italics())
• array object
• var fruit new Array()
• fruits0 "Banana"
• fruits1 "Mango"

44
Document Object Model

• window
• .status
• .history
• .back()?
• .document
• .getElementsByName(STRING)?
• .formsi
• .location

45
A DOM Node its properties and methods

• node
• .nodeName
• .nodeValue
• .parentNode
• .childNodes
• .appendChild()?
• .removeChild()?
• Inheritance the document is a node,
• the body is a node
• every tag is an element... is a node
• etc.

46
DOM Node Selection

• getElementById()?
• select an element by its lt idmyidgt html
  attribute
• getElementsByName()?
• select a list of elements by their lt namegt
  html attributes

47
Exercise Play around!

• Create a webpage with code or
• or use
• www.w3schools.com/js/tryit.asp?filenametryjs_text

48
Some Common Events

• onload, onUnload
• onClick, onDblClick, onMouseOver, onMouseOut
• onMouseDown, onMouseUp
• onFocus, onBlur, onChange, onSubmit
• e.g., for text validation

49
Common use Input validation

• In a form, only allow submission of correct data
• e.g., in an emailaddress field, must be of the
  form
• a_at_b

50
Online Reference

• www.w3schools.com/jsref
• and tutorial at
• www.w3schools.com/js

51

• Dynamic Documents
• Javascript Intro
• Javascript Reference
• Web 2.0
• Client-driven Javascript

52
Web 2.0

• "the participatory Web"
• Bart Decrem
• www.flock.com/node/4500

53
vague term... hype?

• collaboration
• user generated content
• content combination
• content syndication (rss)?
• -gt dynamic, responsive web applications

54
Examples

• Video Sharing
• Music Exchange
• Social Networking

55
Examples

• Youtube
• Last.fm
• Facebook

56
Ajax

• Asynchronous Javascript And Xml
• Allow a javascript program to send a request to
• a server without replacing the page
• Fast

57
Why? Example
58
XMLHttpRequest

• Send HTTP request
• Handle response asynchronously,
• by implementin onreadystatechange() method

59
Ajax example (1/3)?
lthtmlgt ltbodygt ltscript type"text/javascript"gt
NB Will only work in firefox to keep the code
simple
60
Ajax example (2/3)?
function ajaxHandleReply()?
if(req.readyState4)?
document.myForm.time.valuereq.responseText
function ajaxFunction()? var req
reqnew XMLHttpRequest() req.onreadystatechange
ajaxHandleReply req.open("GET", "time.asp",
true) req.send(null)
61
Ajax example (3/3)?
lt/scriptgt ltform name"myForm"gt Name ltinput
type"text" onkeyup"ajaxFunction()"
name"username" /gt Time ltinput type"text"
name"time" /gt lt/formgt lt/bodygt lt/htmlgt
62
Mashups

• Combine data from multiple sources
• Example netvibes.com

63
(No Transcript)
64
Mashups

• Prefers a common dataformat
• Often XML, i.e. RSS Feeds

65

• Dynamic Documents
• Javascript Intro
• Javascript Reference
• Web 2.0
• Client-driven Javascript

66
Client-driven Javascript

• Not served by the webserver, but installed by the
  user

67
Greasemonkey

• Change the look of websites
• Remove annoying features
• Add functionality
• e.g., automatically fill in forms (bugmenot.org)?
• Online book diveintogreasemonkey.org

68
Greasemonkey

• Install the firefox extension
• https//addons.mozilla.org/en-US/firefox/addon/748

69
Greasemonkey

• Code not part of the webfile
• Additional hook say for which URLs
• a greasemonkey program should run

70
Greasemonkey Hello World

• // Hello World! example user script
• // UserScript
• // _at_name Hello World
• // _at_description example "Hello world!" script
• // _at_include http//www.example.com/
• // /UserScript
• alert('Hello world!')

71

• Dynamic Documents
• Javascript Intro
• Javascript Reference
• Web 2.0
• Client-driven Javascript

72
Internet Technology

• Internetworking
• World Wide Web
• Programming in Python
• Serverside Technology
• Clientside Technology

73
THE END
74
Hands on!

• Web Developer
• Python Programmer

75
(No Transcript)
76
Non-technical

• Tags
• Folksonomies