CS490 – JS & Ajax

Advanced Web Development

Instructor: Scott Spetka, Ph.D.

Menu:

Hello World:

<html>
<head>
<title>Hello World</title>
<script type="text/javascript">
function show_alert()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button type="button" onclick="show_alert()">Press me!</button>
</body>
</html>

Back to Menu

Hello World Modified:

<html>
<head>
<title>Hello World Modified</title>
<script type="text/javascript">
var txt = "Hello World!"

function show_alert()
{
	alert(txt);
}

function tb_alert()
{
	document.forms["form1"].elements["tbdisp"].value = txt;
}

function tb_clear()
{
	 document.forms["form1"].elements["tbdisp"].value = "";
}

function alert_toggle()
{
	if (txt == "Hello World!")
		txt = "You Again!";
	else
		txt = "Hello World!";
}

</script>
</head>
<body>
<form name = "form1">
<button type="button" onclick="show_alert()">Press me!</button><br />
<button type="button" onclick="tb_alert()">Press me now!</button><br />
<input type="text" name="tbdisp"/><br />
<button type="button" onclick="tb_clear()">Clear</button>
<button type="button" onclick="alert_toggle()">Toggle Msg</button<br />

</form>
</body>
</html>

Back to Menu

Form Elements:

<html>
<head>
<title>Form Elements</title>
<script type="text/javascript">
function show_alert()
{
	var options = document.getElementById('menu')[document.getElementById('menu').selectedIndex].innerHTML;
	alert(options);
}

function tb_alert()
{
	var options = document.getElementById('menu')[document.getElementById('menu').selectedIndex].innerHTML;
	document.forms["form1"].elements["tbdisp"].value = options;
}

function tb_bw()
{
	var options = document.getElementById('menu')[document.getElementById('menu').selectedIndex].innerHTML;
	document.forms["form1"].elements["tbdisp"].value = options.split('').reverse().join('');

}

function tb_clear()
{
	 document.forms["form1"].elements["tbdisp"].value = "";
}

</script>
</head>
<body>
<form name = "form1">
<tr>
<th><SELECT NAME="menu" ID="menu">
<OPTION SELECTED VALUE="">Select...</OPTION>
<OPTION>Option 1</OPTION>
<OPTION>Option 2</OPTION>

<OPTION>Option 3</OPTION>
<OPTION>Option 4</OPTION>
<OPTION>Option 5</OPTION>
</SELECT></th>
<th><input type="text" name="tbdisp"/></th>
</tr><br /><br />

<tr>
<th><button type="button" onclick="show_alert()">Button 1</button></th>
<th><button type="button" onclick="tb_alert()">Button 2</button></th>
<th><button type="button" onclick="tb_bw()">Make it Backwards!</button></th>

<th><button type="button" onclick="tb_clear()">Clear</button></th>
</tr><br />

</form>
</body>
</html>

Back to Menu

Frames & DHTML:

frames.html

<html>
<head>
<title>Frames and DHTML</title>
<script type="text/javascript">

</script>

<frameset cols="50%, 50%" rows="50%, 50%" >
        <frame src="frame0.html" name="Frame0">
        <frame src="frame1.html" name="Frame1">
        <frame src="frame2.html" name="Frame2">
        <frame src="frame3.html" name="Frame3">
</frameset>
</head>
<body>
</body>
</html>

frame#.html

<html>
<head>
<script type="text/javascript">
var frameName = frames.name;
var randomNumber = Math.floor(Math.random()*4);
var alertMsg = "You pressed the wrong button!";

function showAlert()
{
        alert(alertMsg);
}

function showHere()
{
        var tmp = document.form.tbox.value;
        if(tmp == "HERE")
        {
                document.form.tbox.value='';
                parent.frames[randomNumber].document.form.tbox.value='HERE';
                randomNumber = Math.floor(Math.random()*4);
        }
        else
        {
                showAlert();
        }
}

function btnName()
{
        document.form.btn.value=frames.name;
}

window.onload=function()
{
        btnName();
}

</script>
</head>
<body>
<form name="form">
<input type="text" name="tbox" value="HERE" onload="document.form.tbox.setAttribute("readonly", "true")">
<input type="button" name="btn" onclick="showHere()">
</form>
</body>
</html>

Back to Menu

CSS:

html file

<html>
<head>
<h2>Shall I Compare Thee to a summers Day</h2>

<link href="hw5.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<span class=picture><img src="wmshakespear.jpg" HEIGHT=274 WIDTH=205></span>

<pre>
        <i>Sonnet 18</i>

        Shall I compare thee to a <span class=summer>summer&#8217;s</span> day?
        Thou art more lovely and more temperate:
        Rough winds do shake the darling buds of May,
        And summer's lease hath all too short a date:

        Sometime too hot the eye of heaven shines,
        And often is his gold complexion dimmed;
        And every fair from fair sometimes declines,
        By chance, or nature's changing course untrimmed;

        But thy eternal <span class=summer>summer</span> shall not fade,
        Nor lose possession of that fair thou owest;
        Nor shall Death brag thou wanderest in his shade
        When in eternal lines to time thou growest:

        So long as men can breathe, or eyes can see,
        So long lives this, and this gives life to thee.

        <h4><span class=sig>- Shakespeare</span></h4>

<a href ="http://www.allshakespeare.com/plays/sonnets/text/1-10.shtml" style="cursor: wait;">Link to All Shakespear's sonnets </a>
</p>
</pre>
</body>
</html>

CSS File

BODY {background-color: #E6E6FA;
font-family: Arial, Helvetica, sans-serif;
font-color: black;}

A:link {color: #FA8072;}
A:visited {color: #008000;}
A:active {color: #0000FF;}
A:hover {color: #FF0000;}

H1,H2,H3 {color: #000000;}

H4 {color: #FF0000;}

.sig {font-style: italic;
color: #000000;}

.summer {color: #FF0000;
font-style: italic;}

.picture {position:fixed;
top:50px;
left:500px;}

Back to Menu

DHTML & Image Caching CSS:

HTML File

<html>
<head>
<title>DHTML, Image Caching CSS</title>
<link href="hw6.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
var picId = 0;

function selectPic(id)
{
	if (picId > 0)
	{
		document.getElementById(picId).className = "idle";
	}

	document.getElementById(id).className = "selected";
	document.getElementById(0).src = document.getElementById(id).src;
	picId = id;
}

function loadStarter()
{
	selectPic(1);
}

function loadSelect(list)
{
	var selectBox = list.options[list.selectedIndex].value;
	selectPic(selectBox);
}

window.onload = loadStarter;

</script>
</head>
<body>
<h3>Click on a thumbnail to view the full image</h3>

<table border=0>
<tr>
<td valign=top>
<img id=1 class="idle" src="trees1.jpeg" height=90 width=90 onmouseover="selectPic(1)">
<br /><img id=2 class="idle" src="tress2.jpeg" height=90 width=90 onmouseover="selectPic(2)">

<br /><img id=3 class="idle" src="trees3.jpeg" height=90 width=90 onmouseover="selectPic(3)">
<br /><br />

<form name="form">
<select name="cached" onChange="loadSelect(this)">
	<option value="1">Trees 1
	<option value="2">Trees 2
	<option value="3">Trees 3
</select>
</form>

</td>
<td width=15> </td>
<td valign=top>
<img id=0 src="">

</td>
</tr>
</table>

</body>
</html>

CSS File

body {
background-color:#000000;
color:#EDEDED;
font-family:Verdana,Arial;
font-size:10pt;
}

.idle {
border:4px solid #000000;
}

.selected {
border:4px solid #ff0000;
}

Back to Menu

DHTML, Event Handling, CSS:

HTML File

<html>
<head>
<title>DHTML, Image Caching CSS</title>
<link href="hw7.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
var picId = 0;

function selectPic(id)
{
	if (picId > 0)
	{
		document.getElementById(picId).className = "idle";
	}

	document.getElementById(id).className = "selected";
	picId = id;
}

function loadStarter()
{
	document.getElementById(0).src = document.getElementById(1).src;
	//selectPic(1);
}

function loadSelect(list)
{
	var selectBox = list.options[list.selectedIndex].value;
	selectPic(selectBox);
}

function showPic(id)
{
	document.getElementById(0).src = document.getElementById(id).src;
}

window.onload = loadStarter;

</script>
</head>
<body>
<h3>Drag and drop a thumbnail in the bin to view the full image</h3>

<div id="dZone" style="position:absolute; top:85px; left:700; width:1000px;
    height:100px">
<img src="bin.jpg" height=90 width=90>

</div>

<pre id="debug"> </pre>

<table border=0>
<tr>
<td valign=top>
<img id=1 class="idle" src="trees1.jpeg" height=90 width=90 onmouseover="selectPic(1)" >
<br /><img id=2 class="idle" src="tress2.jpeg" height=90 width=90 onmouseover="selectPic(2)">
<br /><img id=3 class="idle" src="trees3.jpeg" height=90 width=90 onmouseover="selectPic(3)">
<br /><br />

<form name="form">
<select name="cached" onChange="loadSelect(this)">
	<option value="1">Trees 1
	<option value="2">Trees 2
	<option value="3">Trees 3

</select>
</form>

</td>
<td width=15> </td>
<td valign=top>
<img id=0 src="">
</td>
</tr>
</table>

<script language="JavaScript" type="text/javascript">
<!--

// Drag code implemented from:
// http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

function $(id)
{
	return document.getElementById(id);
}

//Variables
var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');		// makes life easier

InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	// IE is retarded and doesn't pass the event object
	if (e == null)
		e = window.event; 

	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;

	_debug.innerHTML = target.className == 'selected'
		? 'draggable element clicked'
		: 'NON-draggable element clicked';

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null ||
		e.button == 0) &&
		target.className == 'selected')
	{
		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;

		// grab the clicked element's position
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);

		// bring the clicked element to the front while it is being dragged
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;

		// we need to access the element in OnMouseMove
		_dragElement = target;

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;

		// cancel out any text selections
		document.body.focus();

		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };

		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);

	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null)
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
}

function OnMouseUp(e)
{
    	var dZone = document.getElementById("dZone"); 

    	if( e.clientX > dZone.offsetLeft &&
        e.clientX < (dZone.offsetLeft + dZone.offsetWidth) &&
        e.clientY > dZone.offsetTop &&
        e.clientY < (dZone.offsetTop + dZone.offsetHeight))
    	{
		// show alert
        	alert("You are in the drop zone!");

		// display large image
		document.getElementById(0).src = document.getElementById(picId).src;

		// hide thumbnail in basket
		document.getElementById(picId).style.visibility='hidden';

    	} 

	document.onmousemove = null;
	document.onselectstart = null;
	_dragElement.ondragstart = null;
	_debug.innerHTML = 'mouse up';

}
//-->
</script>

</body>

</html>

CSS File

body {
background-color:#000000;
color:#EDEDED;
font-family:Verdana,Arial;
font-size:10pt;
}

.idle {
border:4px solid #000000;
position:relative;
}

.selected {
border:4px solid #ff0000;
position:relative;
}

.drag {
position:relative;
}

Back to Menu

DHTML, Event Handling, CSS, DHTML continued:

HTML File

<html>
<head>
<title>DHTML, Image Caching CSS</title>
<link href="hw8.css" rel="stylesheet" type="text/css" media="screen" />
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer-wipe.js"></SCRIPT>
<script type="text/javascript">
var picId = 0;

function selectPic(id)
{
	if (picId > 0)
	{
		document.getElementById(picId).className = "idle";
	}

	document.getElementById(id).className = "selected";
	picId = id;
}

function loadStarter()
{
	document.getElementById(0).src = document.getElementById(1).src;
	//selectPic(1);
}

function loadSelect(list)
{
	var selectBox = list.options[list.selectedIndex].value;
	selectPic(selectBox);
}

function showPic(id)
{
	document.getElementById(0).src = document.getElementById(id).src;
}

window.onload = loadStarter;

</script>
</head>
<body>
<h3>Drag and drop a thumbnail in the bin to view the full image</h3>

<div id="dZone" style="position:absolute; top:85px; left:700; width:1000px;
    height:100px">

<img src="bin.jpg" height=90 width=90>

</div>

<pre id="debug"> </pre>

<table border=0>
<tr>
<td valign=top>
<img id=1 class="idle" src="trees1.jpeg" height=90 width=90 onmouseover="selectPic(1)" >
<br /><img id=2 class="idle" src="tress2.jpeg" height=90 width=90 onmouseover="selectPic(2)">
<br /><img id=3 class="idle" src="trees3.jpeg" height=90 width=90 onmouseover="selectPic(3)">
<br /><br />

<form name="form">
<select name="cached" onChange="loadSelect(this)">

	<option value="1">Trees 1
	<option value="2">Trees 2
	<option value="3">Trees 3
</select>
</form>

</td>
<td width=15> </td>
<td valign=top>
<img id=0 src="">
</td>
</tr>
</table>

<script language="JavaScript" type="text/javascript">
<!--

// Drag code implemented from:
// http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

function $(id)
{
	return document.getElementById(id);
}

//Variables
var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');		// makes life easier

InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	// IE is retarded and doesn't pass the event object
	if (e == null)
		e = window.event; 

	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;

	_debug.innerHTML = target.className == 'selected'
		? 'draggable element clicked'
		: 'NON-draggable element clicked';

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null ||
		e.button == 0) &&
		target.className == 'selected')
	{
		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;

		// grab the clicked element's position
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);

		// bring the clicked element to the front while it is being dragged
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;

		// we need to access the element in OnMouseMove
		_dragElement = target;

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;

		// cancel out any text selections
		document.body.focus();

		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };

		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);

	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null)
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
}

function OnMouseUp(e)
{
    	var dZone = document.getElementById("dZone"); 

    	if( e.clientX > dZone.offsetLeft &&
        e.clientX < (dZone.offsetLeft + dZone.offsetWidth) &&
        e.clientY > dZone.offsetTop &&
        e.clientY < (dZone.offsetTop + dZone.offsetHeight))
    	{
		// show alert
        	alert("You are in the drop zone!");

		// display large image
		document.getElementById(0).src = document.getElementById(picId).src;

		// hide thumbnail in basket
		document.getElementById(picId).style.visibility='hidden';

    	} 

	document.onmousemove = null;
	document.onselectstart = null;
	_dragElement.ondragstart = null;
	_debug.innerHTML = 'mouse up';

}
//-->
</script>

</body>
</html>

CSS File

body {
background-color:#000000;
color:#EDEDED;
font-family:Verdana,Arial;
font-size:10pt;
}

.idle {
border:4px solid #000000;
position:relative;
}

.selected {
border:4px solid #ff0000;
position:relative;
}

.drag {
position:relative;
}

Back to Menu