Assignment: Final Project Brainstorming

Just think about your final project and get started on creating a file structure and place to host your project.

Reading

Book: CSS Mastery
Chapter: 6

Lecture Notes

Final File Structure

Create a folder called ‘final’ in your class site:

img/
css/
js/
   lib/
media/
   (pdf/)
   (mp3/)
   ...etc... (as needed)
index.html
robots.txt
favicon.ico

Cachbusting

You can add arbitrary query parameters to any kind of file that the browser requests. Typically, this is useful for versioning files as a cache-busting mechanism (much better than renaming and uploading new copies of files):

<link type="text/css" rel="stylesheet" href="css/main.css?v=1" />
<script type="text/javascript" src="js/common.js?v=1"></script>

<img src="img/logo.jpg?v=2" alt="logo" />

robots.txt

I typically just create a blank robots.txt so I can avoid 404 errors when spiders crawl and search for the file on my server. If you really don’t want your content indexed, don’t put it online (keep temp files and other files below your web root).

If you want more info on robots.txt and creating rules for spiders, you can get a lot of info from robotstxt.org.

jQuery JavaScript Library

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

– jquery.com

Google Ajax Libraries

Google hosts jQuery (as well as many other javascript libraries):
Get jQuery from Google

or paste the following right before your html close body tag:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

jQuery Tutorials

There are many easy to follow tutorials for getting started with jQuery.

Getting Started

Now that you have jQuery downloaded, let’s get it running with a tutorial by John Resig, the author of the jQuery library:
http://docs.jquery.com/Tutorials:How_jQuery_Works

Event Handlers

JavaScript is an event based language. Events are triggered when a user takes an action (e.g. click, mouseover, scrolling the page, focus on a text box, etc) or when the browser or page take actions (e.g. window load, element load, load error, etc). When events trigger, they fire a message to the browser, which checks the DOM to see if any functions have been applied as hooks to that event. If there is a function, it will run when the event triggers.

window.onload event vs. $(document).ready

The load event for the ‘window’ object will trigger when all of the markup, images, embedded links (css,js,icons,etc) are all downloaded.
The jQuery $(document).ready event triggers when the markup is ready for manipulation, which is usually much earlier in the page load than the window.onload event. This way, you can manipulate the DOM much sooner and suffer less delay in getting your actionable JavaScript effects to run on the page.

In Class: Playing with jQuery

<?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>jQuery</title>
	</head>
	<body>
 
    <p class="big">asdfadf  asd f a sd f asd f</p>
    <p>asdfadf  asd f a sd f asd f</p>
    <p>asdfadf  asd f a sd f asd f</p>
    <p>asdfadf  asd f a sd f asd f</p>
    <p><a href="#">click me</a>  asd f a sd f asd f</p>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
    <script type="text/javascript">
	// creating a named function in javascript
	var myFunc = function(){
	};
 
	myFunc(); // calling (running) a named function
 
	// once the document is ready (all the XHTML is loaded) we can run our javascript
	$(document).ready(
		function(){ // anonymous function
			//alert('hello \nworld');
			// get all <p> tags, hide them, then show them
			var p = $('p').hide('slow').show('slow');
			// get all <a> tags and add a click handler
			$('a').bind('click',function(){
				alert('you clicked me');
			});
		}
	);
	</script>
	</body>
</html>

Intellectual Pirates

Week 7