CS 155 Spring 2007
Section: Web Programming
Collin Jackson
1
Deadlines
2
HTML
Web publishing language
3
URLs
Global identifiers of network-retrievable documents
Example:
http://user:pass@stanford.edu:81/class?name=cs155#officehours
Protocol
Fragment
Username Hostname
Port Path
Query
Password
Another acronym, URI, is similar but slightly more general
Special characters are encoded as hex:
%0A = newline
%20 or + = space, %2B = + (special exception)
4
Example HTTP Request
GET / HTTP/1.0
Browser
Web
server
HTTP/1.1 200 OK
index.html
Title of page
Hello world!
Hello world!
5
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
6
More examples
Headings: This text will be large
Paragraphs: This paragraph has a margin
Page regions: Stop it!
Comments:
Tables:
Header1Header2
Data
Header1 Header2
Data1 Data2
7
Properties
Key=value 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
8
Frames
Embed HTML documents in other documents
This text is ignored by most browsers.
9
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
10
Forms
Provides a way to interact with server-side scripts
Use method=“GET” for queries that do not send state
Use method=“POST” for requests have side effects, or
passwords
Use target=“myframe” to avoid navigating away
11
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 tag+class */
12
JavaScript
Client-side scripting language
13
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
14
Invoking JavaScript
Tags: alert( „Hello world!‟ )
Links: javascript:alert( „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(javascript:alert( „Hello world!‟ ));
}
15
DOM Manipulation Examples
document.getElementByID(id)
document.getElementsByTagName(tag)
document.write(htmltext)
document.createElement(tagname)
document.body.appendChild(node)
document.forms[index].fieldname.value = …
document.formname.fieldname.value = …
frame.contentDocument.getElementById(id)
16
Arrays and Loops
Example: Change href of all links on a page
var links =
document.getElementsByTagName(„a‟);
for (var i = 0; i
17
Enumerating Properties
var myobj = { color: “red”, shape: “circle” };
for (var prop in myobj) {
alert(“The “ + prop + “ is “ + myobj[prop]);
}
Useful for inspecting DOM objects
18
Client-side Debugging Tools
Firefox JavaScript console Undefined =
Shows JavaScript errors No properties!
DOM Inspector
Advanced debugging:
Page structure
DOM properties
JavaScript properties
CSS style rules
Needs to be selected
during installation
19
Demo
http://www.google.com
http://scriptasylum.com/tutorials/encdec/encode-
decode.html
20
Other Useful Functions
Navigation
document.location
document.formname.submit()
document.forms[0].submitfield.click()
Delayed Events
node.addEventListener(eventname,
handler, useCapture)
node.removeEventListener(eventname,
handler, useCapture)
window.setTimeout(handler, milliseconds)
21
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 { visibility:hidden; }”);
22
PHP
Server-side scripting language
23
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, …
24
Dynamic Web Application
GET / HTTP/1.0
Browser
Web
server
HTTP/1.1 200 OK
index.php
Database
server
25
SQL
Widely used database query language
Fetch a set of records
SELECT * FROM Person WHERE Username=„grader‟
Add data to the table
INSERT INTO Person (Username, Zoobars)
VALUES („grader‟, 10)
Modify data
UPDATE Person SET Zoobars=42 WHERE PersonID=5
Query syntax (mostly) independent of vendor
26
Recommended Resources
w3schools.com
Tutorials on:
HTML
CSS
JavaScript
PHP
php.net
Searchable PHP reference
27
Next section: Project 2
Finding vulnerabilities
Crafting exploits
Sanitization
Validation
28