Creating a Cookie
<script>
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
userName = ""
if (document.cookie != "") {
userName = document.cookie.split("=")[1]
}
function setCookie() {
userName = document.myForm.nameField.value
document.cookie = "userName="+userName+";expires=" + expireDate.toGMTString()
}
</script>
<body onload="document.myForm.nameField.value = userName">
<form name="myForm" action="#">
<h1>Enter your name: <input type="text" name="nameField" onblur="setCookie()"></h1>
</form>
</body>
Reading a Cookie
<body>
<h1>
<script>
if (document.cookie != "") {
document.write("Hello, "+ document.cookie.split("=")[1])
}
</script>
</h1>
</body>
Listing Cookies
<body bgcolor="#FFFFFF">
<h2>
<script>
if (document.cookie == "") {
document.write("There are no cookies here")
}
else {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
document.write("Cookie name is '"+thisCookie[i].split("=")[0])
document.write("', and the value is '"+thisCookie[i].split("=")[1]+"'<br>")
}
}
</script>
</h2>
</body>
Using Cookies as a Counter
<script>
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
hitCt = parseInt(cookieVal("pageHit"))
hitCt++
document.cookie = "pageHit="+hitCt+";expires=" + expireDate.toGMTString()
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1]
}
}
return 0
}
</script>
<body bgcolor="#FFFFFF">
<h2>
<script>
document.write("You have visited this page " + hitCt
+ " times.")
</script>
</h2>
</body>
Deleting Cookies
<body bgcolor="#FFFFFF">
<script >
if (document.cookie != "") {
if (confirm("Do you want to delete the cookies?")) {
thisCookie = document.cookie.split("; ")
expireDate = new Date
expireDate.setDate(expireDate.getDate()-1)
for (i=0; i<thisCookie.length; i++) {
cookieName = thisCookie[i].split("=")[0]
document.cookie = cookieName + "=;expires=" + expireDate.toGMTString()
}
document.write("<h1>Number of cookies deleted: " + thisCookie.length
+ "<\/h1>")
}
}
</script>
</body>
</html>
Handling Mulitple Cookies
<html >
<script >
now = new Date
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
hitCt = parseInt(cookieVal("pageHit"))
hitCt++
lastVisit = cookieVal("pageVisit")
if (lastVisit == 0) {
lastVisit = ""
}
document.cookie = "pageHit="+hitCt+";expires=" + expireDate.toGMTString()
document.cookie = "pageVisit="+now+";expires=" + expireDate.toGMTString()
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1]
}
}
return 0
}
</script>
<body bgcolor="#FFFFFF">
<h2>
<script>
document.write("You have visited this page " + hitCt + " times.")
if (lastVisit != "") {
document.write("<br>Your last visit was " + lastVisit)
}
</script>
</h2>
</body>
</html>
A page with no Style
<body bgcolor="#FFFFFF">
<blockquote>
<em>Enter KATHARINA</em>
</blockquote>
PETRUCHIO
<blockquote>
Good morrow, Kate; for that's your name, I hear.
</blockquote>
KATHARINA
<blockquote>
Well have you heard, but something hard of hearing:
They call me Katharina that do talk of me.
</blockquote>
PETRUCHIO
<blockquote>
You lie, in faith; for you are call'd plain Kate,<br>
And bonny Kate and sometimes Kate the curst;<br>
But Kate, the prettiest Kate in Christendom<br>
Kate of Kate Hall, my super-dainty Kate,<br>
For dainties are all Kates, and therefore, Kate,<br>
Take this of me, Kate of my consolation;<br>
Hearing thy mildness praised in every town,<br>
Thy virtues spoke of, and thy beauty sounded,<br>
Yet not so deeply as to thee belongs,<br>
Myself am moved to woo thee for my wife.
</blockquote>
KATHARINA
<blockquote>
Moved! in good time: let him that moved you hither<br>
Remove you hence: I knew you at the first<br>
You were a moveable.
</blockquote>
</body>
Adding Style
<head>
<style type="text/css">
body {font-weight: bold}
blockquote {font-weight: normal}
</style>
</head>
Using Class
<head>
<title>Taming of the Shrew</title>
<style type="text/css">
body {margin-left: 3em}
.character {font-weight: bold; margin-left: -2em; margin-bottom: 1em; margin-top:
1.5em}
.directions {font-style:italic}
</style>
</head>
<body bgcolor="#FFFFFF">
<div class="directions">
Enter KATHARINA
</div>
<div class="character">
PETRUCHIO
</div>
Good morrow, Kate; for that's your name, I hear.
<div class="character">
KATHARINA
</div>
Well have you heard, but something hard of hearing:<br>
They call me Katharina that do talk of me.
<div class="character">
PETRUCHIO
</div>
You lie, in faith; for you are call'd plain Kate,<br>
And bonny Kate and sometimes Kate the curst;<br>
But Kate, the prettiest Kate in Christendom<br>
Kate of Kate Hall, my super-dainty Kate,<br>
For dainties are all Kates, and therefore, Kate,<br>
Take this of me, Kate of my consolation;<br>
Hearing thy mildness praised in every town,<br>
Thy virtues spoke of, and thy beauty sounded,<br>
Yet not so deeply as to thee belongs,<br>
Myself am moved to woo thee for my wife.
<div class="character">
KATHARINA
</div>
Moved! in good time: let him that moved you hither<br>
Remove you hence: I knew you at the first<br>
You were a moveable.
</body>
</html>
Changing Fonts
<style type="text/css">
body {font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt;
margin-left: 3em}
.character {font-weight: bold; margin-left: -2em; margin-bottom: 1em; margin-top:
1.5em}
.directions {font-style:italic}
</style>
Using ID
<style type="text/css">
body {font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt;
margin-left: 3em}
.character {font-weight: bold; margin-left: -2em; margin-bottom: 1em; margin-top:
1.5em}
.directions {font-style:italic}
#week2 {background-color: #FFFF00}
</style>
<div class="character" id="week2">
KATHARINA
</div>
Using Span
<style type="text/css">
body {font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt;
margin-left: 3em}
.character {font-weight: bold; margin-left: -2em; margin-bottom: 1em; margin-top:
1.5em}
.directions {font-style:italic}
.gloss {background-color: #00FFFF}
</style>
You lie, in faith; for you are call'd plain Kate,<br>
And bonny Kate and <span class="gloss">sometimes</span> Kate
the curst;<br>
Using Hover
<style type="text/css">
body {font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt;
margin-left: 3em}
.character {font-weight: bold; margin-left: -2em; margin-bottom: 1em; margin-top:
1.5em}
.directions {font-style:italic}
a {text-decoration: none}
a:visited {color: #000000}
a:hover {color: #FF0000; font-size:12pt}
</style>
<a href=#>Click Here!</a>
|
623.845.3000 
