Ukieweb

Class Notes

Notes for Students

Javascript (JS)

Javascript (JS) is a another, different programming language used in collaboration with HTML. Javascript allows us to interactely change the page for the user. It also enables us to perform basic animations.

Javascript can be included in a separate file (like CSS) or put directly in the page. In this example we will be putting in the page directly.

Due to the complexity of javascript, I will not be providing a tutorial on how to write it but rather just be providing some examples that you can take and use as you wish.

Example 1: Photo slide show

This slide show allows the user to cycle through a number of photos (listed in the code itself).

<script type="text/javascript">
    var images  = new Array();
    images[0]   = "http://ed-moore.net/html/assets/slideshow0.jpg";
    images[1]   = "http://ed-moore.net/html/assets/slideshow1.jpg";
    images[2]   = "http://ed-moore.net/html/assets/slideshow2.jpg";
    images[3]   = "http://ed-moore.net/html/assets/slideshow3.jpg";
    var current = 0;

    function changeImage(inc) {
        current += inc;
        document.getElementById("target").src = images[Math.abs(current)%images.length];
    }
</script>

<img src="http://ed-moore.net/html/assets/slideshow0.jpg" id="target" />
<a href="javascript:changeImage(-1);">Previous Image</a>
<a href="javascript:changeImage(1);">Next Image</a>
Previous Image Next Image

Example 2: Hover Effect

This code allows the us to change the image when the mouse rolls over it.

<script>
	function onHover()
	{
	    document.getElementById("change").src = 'http://ed-moore.net/html/assets/pig2.png';
	}

	function offHover()
	{
	    document.getElementById("change").src = 'http://ed-moore.net/html/assets/pig.png';
	}
</script>

<img src="http://ed-moore.net/html/assets/pig.png" id="change" onMouseEnter="onHover();" onMouseLeave="offHover();" width="100px" />

Example 3: Back Button

This example simply returns the user to the page they came from.

<input type="button" value="Go Back!" onclick="history.back(-1)" />