Lecture 3

In Class Example:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>JavaScript HTML Template</title>
		<script type="text/javascript">
		<!--
		-->
		</script>
        <style>
		#blueBox, #redBox {
			width:100px;
			height:100px;
			background-color:#036;
			color:#fff;
			cursor:pointer;
		}
		#redBox{
			background-color:#900;
		}
		</style>
	</head>
	<body>
    	<div id="blueBox"><b>asdfasdfasdf</b></div>
        <div id="redBox"></div>
 
		<script type="text/javascript">
		<!--
			var blueBox = document.getElementById('blueBox');
			var redBox = document.getElementById('redBox');
 
			blueBox.innerHTML = 'unclicked';
			redBox.innerHTML = 'unclicked';
 
			var clickHandler = function(ev){
				this.innerHTML = 'been clicked: '+ev;
			};
 
			blueBox.onmousedown = clickHandler;
			redBox.onmousedown = clickHandler;
 
 
		-->
		</script>
		<noscript>
		</noscript>
	</body>
</html>

Code Commenting

Every programming language needs a way for a programmer to comment on the code that is written. There are usually two kinds of comments:
Single line comments:
In JavaScript, PHP, C++, ActionScript, and most languages…

// this is a single line comment

In Perl

# this is a single line comment

Mult-line comments:
In JavaScript, PHP, C++, ActionScript, and most languages…

/*
this is a multi-line comment
and I can write how ever much I want
until I close the comment with the next
two characters
*/

In Perl there are no multi-line comments, you are forced to write something like this:

# this is a multi-line
# comment
# yay!

Documentation Standards

phpDocs

Sample

XML Comments

JavaScript Recap

Let’s go back over Lecture 2 and we’ll try some more practical JavaScript.

JavaScript Tutorial

W3Schools tutorial

JavaScript Libraries

ExtJS

This site is using an uncompressed version of ExtJS, one of the most comprehensive JavaScript libraries with out of the box graphical assets to compliment it’s tools.

JQuery

JQuery is one of the lightest and most extensible JavaScript libraries available. It has a massive support network and it’s simple to use.

Prototype

PrototypeJS is one of the original JavaScript frameworks.

MooTools

MooTools is a super lightweight JavaScript library.

moo.fx

“moo.fX is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.”

YUI

YUI is a global JavaScript and CSS library.

Script.aculo.us

script.aculo.us is used by Digg.com

MochiKit

Currently, MochiKit development is focused on code and documentation.

AJS

AJS is a ultra lightweight JavaScript library that is around 1 and half year old. It is hugely inspired by MochiKit, but differs by being small. The current version is only 33 KB (uncompressed), whereas MochiKit is over 100 KB.

Rico

Dojo

Single Purpose Scripts

PWC

The Prototype Window Class creates windows.

Nifty Corners Cube

Rounded corners without graphics!

curvyCorners

“curvyCorners is a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.”

SACK

If all you need is a Simple AJAX Code-Kit, SACK is it.

Lightbox

Lightbox is one of the slickest gallery tools out there–so much so that many spin-offs have been developed: GreyBox, Lytebox, TripTracker, etc…

JS Scrolling

For Scrolling text in divs

Intellectual Pirates