Section: Web Programming

1
Section Web Programming
CS 155
Spring 2007

• Collin Jackson

2
Deadlines
3
HTML

• Web publishing language

4
URLs

• Global identifiers of network-retrievable
  documents
• Example
• http//userpass_at_stanford.edu81/class?namecs155
  officehours
• Another acronym, URI, is similar but slightly
  more general
• Special characters are encoded as hex
• 0A newline
• 20 or space, 2B (special exception)

Protocol
Fragment
Hostname
Username
Port
Path
Query
Password
5
Example HTTP Request
GET / HTTP/1.0
Browser
Web server
HTTP/1.1 200 OK
index.html
Title of
page Hello
world!
Hello world!
6
Tags

• Surrounded by angle brackets
• - wraps entire page
• - header information, not displayed
• - displayed at top of browser
• - content that will be displayed
• Normally come in pairs
• Optional for some older tags, e.g.
  
• Can also be self-closed
• Not case sensitive, but usually lower case

7
More examples

• Headings This text will be large
• Paragraphs This paragraph has a margin
• Page regions Stop it!
• Comments
• Tables
• Header1Header2
• Data

8
Properties

• Keyvalue pairs inside a tag
• Can represent URLs in different ways
• relative images/hamster.gif
• server-relative /images/hamster.gif
• absolute http//animals.com/images/hamster.gif
• Use relative where possible on Project 2
• Can delimit value with ' or " or nothing

9
Frames

• Embed HTML documents in other documents
• srchttp//www.google.com/
• This text is ignored by most browsers.

10
Anchor Tags

• Hyperlink navigates the browser to a URL when
  clicked
• link text
• Can set an anchor for a fragment
• My office hours are
• Can target a frame or new window

11
Forms

• Provides a way to interact with server-side
  scripts
• Use methodGET for queries that do not send
  state
• Use methodPOST for requests have side effects,
  or passwords
• Use targetmyframe to avoid navigating away

12
CSS Style Information

• Style information can be set as a property
• This will be red.
• Stylesheets set styles globally
• body margin-left 1em font-size 10pt /
  by tag /
• par3 font-size 14pt
  / by id /
• .conclusion font-weight bold /
  class only /
• p.conclusion display block / by
  tagclass /

13
JavaScript

• Client-side scripting language

14
JavaScript Overview

• Browser scripting language with C-like syntax
• Sandboxed, garbage collected
• Closures
• var x 3 var y function() alert(x)
  return y
• Encapsulation/objects
• function X() this.y 3 var z new X()
  alert(z.y)
• Can interpret data as code (eval)
• Browser-dependent

15
Invoking JavaScript

• Tags alert( Hello world! )
• Links javascriptalert( Hello world! )
• Wrap code in void if it has return value
• Beware, newlines in URIs require encoding
• Event handlers
• CSS (IE only)
• body background url(javascriptalert(
  Hello world! ))

16
DOM Manipulation Examples

• document.getElementByID(id)
• document.getElementsByTagName(tag)
• document.write(htmltext)
• document.createElement(tagname)
• document.body.appendChild(node)
• document.formsindex.fieldname.value
• document.formname.fieldname.value
• frame.contentDocument.getElementById(id)

17
Arrays and Loops

• Example Change href of all links on a page
• var links document.getElementsByTagName(a)
• for (var i 0 i
• var link linksi
• link.href javascriptalert(Sorry!)

18
Enumerating Properties

• var myobj color red, shape circle
• for (var prop in myobj)
• alert(The prop is myobjprop)
• Useful for inspecting DOM objects

19
Client-side Debugging Tools

• Firefox JavaScript console
• Shows JavaScript errors
• DOM Inspector
• Advanced debugging
• Page structure
• DOM properties
• JavaScript properties
• CSS style rules
• Needs to be selected during installation

Undefined No properties!
20
Demo

• http//www.google.com
• http//scriptasylum.com/tutorials/encdec/encode-de
  code.html

21
Other Useful Functions

• Navigation
• document.location
• document.formname.submit()
• document.forms0.submitfield.click()
• Delayed Events
• node.addEventListener(eventname, handler,
  useCapture)
• node.removeEventListener(eventname, handler,
  useCapture)
• window.setTimeout(handler, milliseconds)

22
Stealthy Styles

• var node document.getElementByID(mynodeid)
• node.style.display none // may not load at
  all
• node.style.visibility hidden // still takes
  up space
• node.style.position absolute // not included
  in flow
• document.write( // can also write CSS rules to
  page
• mynodeid visibilityhidden
  )

23
PHP

• Server-side scripting language

24
PHP Hypertext Preprocessor

• Server scripting language with C-like syntax
• Can intermingle static HTML and code
• Encapsulation/objects
• class X public y 3 z new X() echo
  z-y
• Can embed variables in double-quote strings
• user world echo Hello user!
• or user world echo Hello . user . !
• Form data in global arrays _GET, _POST,

25
Dynamic Web Application
GET / HTTP/1.0
Browser
Web server
HTTP/1.1 200 OK
index.php
Database server
26
SQL

• Widely used database query language
• Fetch a set of records
• SELECT FROM Person WHERE Usernamegrader
• Add data to the table
• INSERT INTO Person (Username, Zoobars)
• VALUES (grader, 10)
• Modify data
• UPDATE Person SET Zoobars42 WHERE PersonID5
• Query syntax (mostly) independent of vendor

27
Recommended Resources

• w3schools.com
• Tutorials on
• HTML
• CSS
• JavaScript
• PHP
• php.net
• Searchable PHP reference

28
Next section Project 2

• Finding vulnerabilities
• Crafting exploits
• Sanitization
• Validation