A Case Study of a Javascript and XHTML Website

The following is a case study of a project created by Anja Gusev for the Humber College Web Development program.

Please swipe to the left to go forward or to the right to go backward.

Javascript Home

A Case Study of a Javascript and XHTML Website

The Project

The project guidelines indicated that we needed to make a website in valid XHTML, utilizing Javascript for a number of features.

Those features included:

  • Creating a slideshow using only Javascript that:
    • Automatically changed on a set interval
    • That the visitor can navigate back and forth

  • A mock "blog" page where all the content was coming from an external Javascript page.

  • A contact form that was validated using Javascript that displayed a success message.

A Case Study of a Javascript and XHTML Website

The Slide Show

This assignment was given to us in our first semester, when we were just learning about arrays and loops. Nevertheless, it works! I have included the code below:

View Code

//variable that will increment through the images
var step=0;
//onload function that starts the slideshow
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return 
//this is here to show how, when you move var slideShow out of the slideit() function the slideShow.src = null
try{
var slideShow = document.getElementById('slide');
slideShow.src = photoArray[step];
}
catch(e)
{
  //alert(e);
}
if (step<3)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
timer = setTimeout(slideit,3000)
}
 var timer; 
 //next button for slideshow
function nextSlide()
{  
 clearTimeout(timer);
var slideShow = document.getElementById('slide');
  if (step > 3)
  {
    step=0;
    slideShow.src = photoArray[step];   
  }
  else
  {
  step++
  slideShow.src = photoArray[step];
  } 
  timer = setTimeout(slideit, 3000); 
}
//previous button for slideshow
function prevSlide()
{  
 clearTimeout(timer);
var slideShow = document.getElementById('slide');
  if (step < 0)
  {
    step=3;
    slideShow.src = photoArray[step];
  }
  else
  {
  step--;
  slideShow.src = photoArray[step];
  }  
  timer = setTimeout(slideit, 3000);
}
//image rolllover effect
function newImage( imgSrc ){

 var imgName = new Image();
 imgName.src = imgSrc;

 return imgName;
}
function change( imgName, imgLocation )
{
 document[imgName].src = imgLocation ;
}

Slide show

A Case Study of a Javascript and XHTML Website

This case study is still being developed.

In the meantime, feel free to head over to the javascript portfolio website to see it in action.