The Internet Classroom: Javascript notes

Javascript notes

2007/07/11 09:42:45 PDT by kass

Javascript lecture

The difference between Javascript and Java

Where to put Javascript

<script type="text/javascript">
	document.write("Hello World!");
</script>

"script" tags contain the javascript
can also link to javascript, via a link tag, much like CSS:
```
<script type="text/javascript" src="site.js"></script>
```

What is a function / what is a variable
- document.write( blah blah blah );
- Proper syntax: curly braces, semi-colons, case sensitive!, etc.
- Calling the function in your HTML ... javascript:functionName(parameters)

2007/07/11 09:43:11 PDT by kass
Edited by aqhong at 2007/07/14 17:05:11 PDT

DOM Menu toggling

<script type="text/javascript">
function toggle(idName) {
	varName = document.getElementById(idName);
	if (varName.style.display != 'block') {
		varName.style.display='block';
	}
	else {
		varName.style.display='none';
	}
}
</script>

<p><a href="javascript:toggle('div1')">Show div1</a>
<a href="javascript:toggle('div2')">Show div1</a></p>

<div id="div1">
	<p>this is a link</p>
	<p>this is a link</p>
	<p>this is a link</p>
</div>

<div id="div2">
	<p>this is another link</p>
	<p>this is another link</p>
	<p>this is another link</p>
</div>

2007/07/11 09:43:28 PDT by kass
Edited at 2007/07/11 15:59:33 PDT

Image rollovers

<script type="text/javascript">

function handleOver(imgName) { 
	imgOn = new Image();
	imgOn.src = imgName + "_on.gif";
	document.getElementById(imgName).src = imgOn.src;
}

function handleOut(imgName) {
	imgOff = new Image();
	imgOff.src = imgName + "_off.gif";
	document.getElementById(imgName).src = imgOff.src;
}

</script>

<img src="image1_off.gif" id="image1" alt="" onmouseover="javascript:handleOver('image1');"
onmouseout="javascript:handleOut('image1');" />

<img src="image2_off.gif" id="image2" alt=""  onmouseover="javascript:handleOver('image2');"
onmouseout="javascript:handleOut('image2');" />

Things to know...

You must have a uniform method for naming your images. (e.g. all the "on" images are named "imagename_on.gif", "image2name_on.gif" and same with the "off" images.)
Change the javascript apporpriately if you are using something other than _on.gif/_off.gif
The parameter that you pass in when you call the function (javascript:handleOver('_PARAMETER_'); is the base name of the image that you want to be changing for that link. So if your images are "cat_on.jpg" and "cat_off.jpg" ... the base name is "cat", so you should be calling handleOut like so -- javascript:handleOut('cat');
Need to have a unique ID on the image itself that matches the base name of the image