Presentation

References

wikipedia

Versions

1.0
1.1: Persistent Connection

Methods

GET, PUT, POST, DELETE, HEAD, ...

Status Code

200: OK
404: NOT FOUND
301: MOVED PERMANENTLY
500: INTERNAL SERVER ERROR

HTTP is stateless
Cookie is a pair of name/value sent by web server

Usage

Authentication
Shopping Cart
Site Preferences

Example

Browser:

GET /index.html HTTP/1.1
Host: www.example.org

Server:

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value

(content of page)

Browser:

GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: name=value
Accept: */*

Expiry Date

Set-Cookie: RMID=732423sdfs73242; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/; domain=.example.net; HttpOnly

Safety

Can you use somebody else's cookie?

Alternatives

Hidden Fields
URL
IP

HyperText Markup Language

Sample

<html>

<head>
<div class="title"> Page Title </div>
<br/><script type="text/javascript" src="/CE40-327/js/presentation.js"></script>
<br/><link rel="stylesheet" type="text/css" media="screen" href="/CE40-327/css/main.css" />
</head>

<body>
<div>Salam</div>
</body>

Tags

<HTML>, <BODY>, <TABLE>, <TR>, <TD>, <DIV>, <SPAN>, <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, <P>, <BR>, <HR>, <!-->, <FORM>,

HTML 5

See these: 1, 2 , 3

Sample CSS

/* @group General */

body {
margin: 0 auto;
padding: 0;
font-family: tahoma;
font-size: 11px;
background:#0c608c url(../images/v4/main-bg-v4.gif) repeat-y center;
}

a {
text-decoration:none;
color:#386CA3;
}

blockquote {
color:#666;
background:transparent url(../images/v4/quote.gif) no-repeat top right;
margin:6px 6px 3px 6px;
padding:0px 12px 0 0;
}

img { border:0; }

form {
margin:0;
padding:0;
}

/* @end */

/* @group Page Layout */

#body-wrapper {
background:transparent url(../images/v4/top-main-bg-v4.gif) top center no-repeat;
}

.content {
width:930px;
margin: 0 auto;
padding: 0;
text-align: right;
direction: rtl;
}

#main-col {
float:right;
padding:0;
margin:0;
overflow:hidden;
background-color:white;
position: relative;
_position: normal;
}

.single-column { width:930px; }
.two-column {
width:670px;
_width:650px;
}
.three-column { width:570px; }

#sidebar {
width:360px;
float:right;
/* padding:15px 10px 0 0; */
}

.second-col {
width:180px;
float:right;

}

.third-col {
width:170px;
margin-right:180px;
}

.full-sidebar {
clear:both;
line-height:20px;
margin-top:10px;
}

/* @end */

/* @group Header */

#header {
height:85px;
margin: 0 auto;
padding:0;
width:930px;
position:relative;
}

#header h1 {
margin: 0;
padding:0;
}

#header h1 span { display: none; }

#header h1 a {
display:block;
position:relative;
height:50px;
width:175px;
top:20px;
right:-740px;
text-align:right;
text-decoration:none;
z-index: 100;
}

#flash-message {
position: absolute;
top:155px;
z-index: 1000;
background-color:white;
width:560px;
}

/* Top Menu */

#top-menu {
float:left;
margin:-32px 0pt 0pt -5px;
}

#top-menu ul {
margin: 0;
padding: 0 5px;
float: left;
list-style-type: none;
}

#top-menu li { float: left; }
#top-menu li.active { background: transparent url(../images/v4/top-menu-highlight-v4.gif) no-repeat center top; color:white; }

#top-menu ul li a {
display:block;
padding:5px 4px;
float:left;
width:50px;
color:Black;
font:11px/14px tahoma;
text-decoration:none;
text-align:center;
}

#top-menu ul li a:hover, #top-menu ul li a:active{
background:#6bacce url(../images/v4/top-menu-highlight-v4.png) no-repeat center top;
color: #FFF;
}

#top-menu ul li.active a:visited {color: #FFF;}

/* @end */

/* Buttons */

a.button{
background: transparent url('../images/v4/button-blue-left.gif') no-repeat top left;
display: block;
float: left;
font-weight:bold;
font-family:"Trebuchet MS";
line-height: 22px;
height: 30px;
padding-left: 8px;
text-decoration: none;
}

a:link.button, a:visited.button, a:hover.button, a:active.button{
color: #eee;
}

a:hover.button {
color: #333;
}

a.button span{
background: transparent url('../images/v4/button-blue-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px;
}

a:hover.button{
text-decoration: none;
}

.buttonwrapper{
overflow: hidden;
}

/* @group Main Menu and Sub-Menu */
/* Main Menu */
.main-menu {
background:transparent;
height:30px;
margin:0px;
}
.main-menu ul {
margin:1px 0px 0px;
padding:2px 13px 0px 2px;
list-style-type:none;
font-size:14px;
}
.main-menu li {
margin:0px 2px 0px 0px;
padding:0px 5px 0px 0px;
background:#d8d8d8 url(../images/v4/tab-back-v4.png) repeat scroll 100% -100px;
float:right;
font:bold 14px Trebuchet MS;
}

References

W3C reference: http://www.w3schools.com/js/default.asp

How to include

Syntax

variable declaration
statements
Functions
Loops

Objects:

String
Date
Array
Boolean
Map

popup Windows

alert
confirm
prompt

Events

onChange, onKeydown, onKeyup, onMouseOver

Reference

W3C's DOM reference: http://www.w3schools.com/htmldom/dom_reference.asp

Properties

* x.innerHTML - the inner text value of x (a HTML element)
* x.nodeName - the name of x
* x.nodeValue - the value of x
* x.parentNode - the parent node of x
* x.childNodes - the child nodes of x
* x.attributes - the attributes nodes of x

Methods

* x.getElementByID(id) - get the element with a specified id
* x.getElementsByTagName(name) - get all elements with a specified tag name
* x.appendChild(node) - insert a child node to x
* x.removeChild(node) - remove a child node from x

References

Scriptaculous

Website

What we need?

Prototype
Scriptaculous
and a bit of creativity

Step 1: index.html

Approach #1

Simple usage of hide/show functions!
could be improved by effects!

Approach #2

Positioning combined with effects.

What?

JS code

// from http://www.webreference.com/programming/javascript/gr/column5/3.html
function AutoCompleteDB()
{
// set the initial values.
this.bEnd = false;
this.nCount = 0;
this.aStr = new Object;
}

AutoCompleteDB.prototype.add = function(str)
{
// increment the count value.
this.aStr[this.nCount] = new String();
this.aStr[this.nCount] = str;
this.nCount++;
}

AutoCompleteDB.prototype.getCount = function(str, bExact)
{
return 1;
var cnt = 0;
this.nCount = this.inputar.length;
for (i=0; i < this.nCount; i++){
var txt = this.inputar[i][0] + ' ' + this.inputar[i][1];
var re1 = new RegExp(str, 'i');

if (txt.match(rel))
cnt++;
}
return cnt;
}

AutoCompleteDB.prototype.getStrings = function(str , outStr)
{
str = str.split(/,/i);
window.status = str.length;
str = str[str.length-1].replace(/(\n)/i, '');

if (str == "")
return;
var cnt = 0;
this.nCount = this.inputar.length;
for (i=0; i < this.nCount; i++){
var txt = ''+this.inputar[i][0] + ' ' + this.inputar[i][1];
var rel = new RegExp(str, 'i');

if (txt.match(rel)){
cnt++;
if (cnt > 25)
return;
var re = new RegExp('('+str+')', 'ig');
txt = txt.replace(re, '<b>$1</b>');
//outStr.push(this.inputar[i][0]);
outStr.push(txt);

};
}

}

function AutoComplete(oText, oDiv, nMaxSize, inputar)
{
// preprocess the texts for fast access
this.db = new AutoCompleteDB();
eval('this.db.inputar = ' + inputar + ';');
//alert(this.inputar.length);
// initialize member variables
this.oText = oText;
this.oDiv = oDiv;
this.nMaxSize = nMaxSize;
this.nStrings = 0;
if ($(oText)) $(oText).Autocomplete = false;

var i;

// attach handlers to the text-box
oText.AutoComplete = this;
oText.onkeyup = AutoComplete.prototype.onTextChange;
oText.onblur = AutoComplete.prototype.onTextBlur;
oText.onkeydown = AutoComplete.prototype.onKeydown;

}

AutoComplete.prototype.onTextBlur = function()
{
this.AutoComplete.onblur();
}

AutoComplete.prototype.onblur = function()
{
this.oDiv.style.visibility = "hidden";
}

AutoComplete.prototype.onKeydown = function(e){

var key;
if (!e)
var e = window.event;
if (e.keyCode)
key = e.keyCode;
else
if (e.which)
key = e.which;
if (keyCode(e) == 13)
e.preventDefault();
return this.AutoComplete.onkeydown(key);
}

function keyCode(e){
var key;
if (!e)
var e = window.event;
if (e.keyCode)
key = e.keyCode;
else
if (e.which)
key = e.which;

return key;
}

AutoComplete.prototype.onTextChange = function(e)
{
var key;
if (!e)
var e = window.event;
if (e.keyCode)
key = e.keyCode;
else
if (e.which)
key = e.which;

return this.AutoComplete.onchange(key);
}

AutoComplete.prototype.onDivMouseDown = function()
{
var str = this.AutoComplete.oText.value.split(/,/);
if (str.length == 1)
str = '';
else{
var str2 = '';
for (var i=0; i < str.length-1; i++)
str2 += str[i] + ',';
str = str2;
}
var re1 = new RegExp('<b>', 'ig');
var re2 = new RegExp('</b>', 'ig');
var reg = /([^\s]*@[^\s]*)/i;
var val = this.innerHTML.replace(re1, '').replace(re2, '');
val = val.split(' ')[0];
//var ar = reg.exec(val);
//val = ar[1];

this.AutoComplete.oText.value = str + val;
//this.AutoComplete.oText.value = str + val + ',';
}

AutoComplete.prototype.onDivMouseOver = function()
{
this.className = "suggesthighlight";
this.getAttribute('p').activeString = this.id;

}

AutoComplete.prototype.onDivMouseOut = function()
{
this.className = "AutoCompleteBackground";
}

AutoComplete.prototype.onkeydown = function (key){

if (key=='13'){ //Return Key
document.getElementById(this.activeDiv).onmousedown();
this.oDiv.style.visibility = "hidden";
return;
};

if (key=='40'){ //Move-Down Key
var i = this.activeDiv;
if (i < this.nStrings -1 ){
j = i+1;
document.getElementById(i).onmouseout();
document.getElementById(j).onmouseover();
this.activeDiv= j;
};
return;
};

if (key=='38'){//Move-Up Key
var i = this.activeDiv;
if (i > 0 ){
j = i-1;
document.getElementById(i).onmouseout();
document.getElementById(j).onmouseover();
this.activeDiv= j;
};
return;
};

}

AutoComplete.prototype.onchange = function(key)
{
if ( (key == 38) || (key == 40) || (key == 13) )
return;
var txt = this.oText.value;

//new Effect.Move (this.oDiv,{ x: findPosX(this.oText), y: findPosY(this.oText) + this.oText.offsetHeight, mode: 'absolute'});
this.oDiv.style.top = findPosY(this.oText) + this.oText.offsetHeight+ "px";
var x = findPosX(this.oText);
/*
if (x + 300 > document.viewport.getWidth()){
x = document.viewport.getWidth() - 300 - 10;
}
*/
this.oDiv.style.left = x+ "px";
// count the number of strings that match the text-box value
var nCount = this.db.getCount(txt, true);

// if a suitable number then show the popup-div
if ( (this.nMaxSize == -1 ) || ((nCount < this.nMaxSize) && (nCount > 0)) )
{
// clear the popup-div.
while ( this.oDiv.hasChildNodes() )
this.oDiv.removeChild(this.oDiv.firstChild);

// get all the matching strings from the AutoCompleteDB
var aStr = new Array();
this.db.getStrings(txt, aStr);

// add each string to the popup-div
var i, n = aStr.length;
if (n == 0){
this.oDiv.innerHTML = "";
this.oDiv.style.visibility = "hidden";
return;
}

this.nStrings = n;
this.activeDiv = 0;

for ( i = 0; i < n; i++ )
{
var oDiv = document.createElement('div');
oDiv.setAttribute('p', this);
this.oDiv.appendChild(oDiv);
oDiv.innerHTML = aStr[i];
oDiv.id = i;
oDiv.onmousedown = AutoComplete.prototype.onDivMouseDown;
oDiv.onmouseover = AutoComplete.prototype.onDivMouseOver;
oDiv.onmouseout = AutoComplete.prototype.onDivMouseOut;
oDiv.AutoComplete = this;
}
this.oDiv.style.visibility = "visible";
var obj = document.getElementById(0);
if (obj) obj.onmouseover();
}
else // hide the popup-div
{
this.oDiv.innerHTML = "";
this.oDiv.style.visibility = "hidden";
}

}

What's that?

In place editor
In place rich editor

Where?

website