DEVELOPER FORAY: get a system going for having a library of ubuntu and win7 machines in virtualbox | 4.5
added 15 hours ago
get a system going for having a library of ubuntu and win7 machines in virtualbox
- goal: to make it easy to save states of virtual machines, move them, etc.
- opening and changing current ubuntu
- made a file and saved with window open
- closed machine
- I can't change the machine while saved (like vmware)
- found the virtual disk image at: C:\Users\Edward\VirtualBox VMs\Ubuntu\Ubuntu.vdi
- copying it over to external drive
- creating new machine
- when adding the virtual drive on F:, it says that it can't read it, but then I continued and it worked
- make screenshot...
ZEND BOOK NOTES: Beginning Zend Framework (2009) | 4.9
added 15 hours ago
Beginning Zend Framework (2009)
- chap1,goals: setup apache, mysql, php 5.2.4 or later, and zend 1.8, does windows and mac installs, mamp, getting php and apache to talk, turn on .htaccess, Zend_Tool, creates controllers, actions, etc. , .htaccess lowers performance, php unit in test;4.9
- chap2, the application, creates an mp3 application, just talks about pages, mysql;3.1
- chap3, writing controllers, extend Zend_Controller_Action, transforming urls to controllers/actions, hmm, not a lot of code,
- chap4,
- chap5,
- chap6,
- chap7,
- chap8,
- chap9,
JAVASCRIPT BOOK NOTES: Backbone.js Applications (April 2012) | 5.0
added 16 hours ago
Backbone.js Applications (April 2012)
- chap1, deep talk about mvc, history of it, var buildPhotoView = function( photoModel, photoController ){ , backbone, spine, then mvp,
- quote: the benefit of MVP over MVC is that it increases testability and provides cleaner separation between view and model, however, MVP lacks data binding support
- quote: use MVP if you have complex views with a great deal of user interaction since solving this in MVC may mean spreading this logic over many controllers
- quote: since in MVP presenters communicate with views through interfaces, developers can create presenters before designers have created the views
- quote: there's quite a difference between opting for MVP for a JavaScript project over one for say, ASP.NET
- quote: JavaScript developers don't view MVC and MVP as being mutually exclusive
- quote: some developers feel that Backbone.js better fits the description of MVP than MVC
- quote: the V in MVC and the P in MVP can both be accomplished by Backbone.View
- fc: name three javascript mvc frameworks; Ember.js, JavaScriptMVC, and of course Backbone.js
- quote: In Backbone, controller logic is shared between Backbone.View and Backbone.Router.
- fc: what is the difference between mvc and mvp?;
- quote: Backbone is maintained by a number of contributors, most notably: Jeremy Ashkenas, creator of CoffeeScript, Docco and Underscore.js.
- chap2, the basics, Model.get(), Listening for changes to your model, talks about el, Collections are sets of Models, routers, Backbone.history, namespacing, scaffolding,
- fc: what are the top contenders for javascript templating?;Mustache, jQuery-tmpl (also look at handlebar.js as alternative to mustache)
- chap3,
- chap4,
- chap5,
- chap6,
- chap7,
JQUERY CODE EXAMPLE: Simple JavaScript to show time counting with setTimeout() 
added 4 days ago
Simple JavaScript to show time counting with setTimeout()
Simplest code to loop continuously calling a function which shows the time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>show time with timeout</title>
<script type="text/javascript">
window.onload = function() {
displayQuote();
startTimer();
};
function displayQuote() {
var quoteElem = document.getElementById('quote');
var dt = new Date();
quoteElem += quoteElem.innerHTML = dt.toTimeString();
startTimer();
}
function startTimer() {
var t = setTimeout(displayQuote, 1000);
}
</script>
</head>
<body>
--<div id="quote"></div>--
</body>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>show time with timeout</title>
<script type="text/javascript">
window.onload = function() {
displayQuote();
startTimer();
};
function displayQuote() {
var quoteElem = document.getElementById('quote');
var dt = new Date();
quoteElem += quoteElem.innerHTML = dt.toTimeString();
startTimer();
}
function startTimer() {
var t = setTimeout(displayQuote, 1000);
}
</script>
</head>
<body>
--<div id="quote"></div>--
</body>
HTML5 BOOK NOTES: HTML5 Developer's Cookbook (Dec 2011) | 5.0
added 4 days ago
HTML5 Developer's Cookbook (Dec 2011)
- intro, WHATWG worked on web forms 2.0 and web applications 1.0 which merged to form html5, in 2006 W3C left xhtml and picked up on html5 and called it "html 5", whatwg is much faster than w3c, in 2009 w3c stopped xthml, now html5 is primarily developed by whatwg and w3c reviews it, html5 backward compatible, html5 tells browsers to handle errors, very few recipes use third-party libraries, but they use standard javascript
- fc: what is html5; umbrella term for: html, css, javascript apis and events
- fc: name 12 html5 features: semantics, forms, canvas, drag/drop, local storage, page-to-page messaging, desktop notifications, video/audio, web sockets, geolocation (not technically part html5), history, microdata
- fc: is css3 part of html5?; no, it's just new and cool like html5
- quote: HTML5, the cornerstone for modern web applications
- quote: grab yourself a text editor, a handful of browsers, and get on with HTML5
- checkout: html5doctor.com
- chap1, 20 new elements, doctype, charset, , js and css links, google analyzed class names to get new elements, header, does not have to be at top, multiple per page, hgroup, article and section, aside, footer, example as news page,
- quote: HTML5 is not just about interactive voodoo with JavaScript APIs and video coolness
- quote: We come from XHTML backgrounds, so we will close all tags, use lowercase, and use quotation marks around attributes.
- quote: the HTML5 specification suggests that author information is more suited to the footer element
- question: what about backwards compabitility?
- quote: There is a big accessibility win when using the nav element.
- quote: A section can contain article elements, and article elements can have their content split into sections.
- quote: A common mistake in early HTML5 uptake is using a section to wrap entire sites.
- quote: The HTML5 specification says the footer element can include links to related documents.
- recon: tryout HTML5 outliner extension plugin for chrome: http://code.google.com/p/h5o/;3.7;15m
- codex: page 23, example article using new html5 elements;4.5;20m
- chap2,grouping, figure/figcaption, time element, address, details, mark (highlight), s element (inaccurate or irrelevant), ol has been redefined (interesting), now has reversed, the dl element, small for e.g. copyright info, i means "alternative voice or mood", now only abbr (not acronym), hr is now a "break after a paragraph", applet is gone, in HTML5 you can wrap a number of elements in the anchor element, %%here
- quote: The i element was, in HTML 4, for styling text in italics. Now, though, it represents text that is in an alternative voice or mood.
- fc: what are the 5 HTML5 microdata attributes; itemid, itemprop, itemref, itemscope, and itemtype
- quote: You can actually combine Microdata with Microformats, and although Microdata is the emerging standard, Microformats is currently more popular.
- fc: what does WAI-ARIA stand for; Web Accessibility Initiatives Accessible Rich Internet Applications
- chap3,
- chap4,
- chap5,
- chap6,
- chap7,
- chap8,
- chap9,
- chap10,
- chap11,
- chap12,
- chap13,
- chap14,
- chap15,
JQUERY CODE EXAMPLE: Minimal start page for HTML5/JQuery 
added 4 days ago
Minimal start page for HTML5/JQuery
This zip file has an html page, local jquery, a main.js, plus two css files, a good starter template for HTML5 with JQuery.
main.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 minimal start page</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<p>text has no borders from reset.css</p>
<p>is blue from main.css</p>
<p>is bold from jquery</p>
</body>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 minimal start page</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<p>text has no borders from reset.css</p>
<p>is blue from main.css</p>
<p>is bold from jquery</p>
</body>
reset.css
* {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
main.css
p {
color: blue;
}
color: blue;
}
main.js
$(init);
function init() {
$('p').css('font-weight', 'bold');
}
function init() {
$('p').css('font-weight', 'bold');
}
JAVASCRIPT BOOK NOTES: Little Book on CoffeeScript (Jan 2012) | 4.8
added 5 days ago
Little Book on CoffeeScript (Jan 2012)
- preface, you can use it in node.js;3.2
- quote: CoffeeScript tends to run as fast or faster than handwritten JavaScript.
- quote: Now is definitely the time to jump on the CoffeeScript train.
- raid: coffeescript.org
- recon: j2coffee
- codex: browser-based coffeescript tag
- chap1, syntax, whitespace, function and var aren't permitted, function becomes arrow, inspect, new array features, range;4.4
- recon: coffeescript on windows, if not, on ubuntu vms
- quote: checking to see if a value exists inside an array is always a bore in JavaScript
- chap2, class keyword, fat arrows, has "extends", nice, mixins, ;4.9
- quote: JavaScript classes have the same effect on some people that garlic has on Dracula
- quote: it turns out that classes are just as useful in JavaScript as they are in other languages and CoffeeScript provides a great abstraction
- quote: Mixins are not supported natively by CoffeeScript, for the good reason that they can be trivially implemented yourself.
- quote: Mixins are pretty neat, but they're not very object oriented.
- chap3,
- chap4,
- chap5,
- chap6,
JAVASCRIPT CODE EXAMPLE: How to use prototype to add a method to a function/object 
added 5 days ago
How to use prototype to add a method to a function/object
This code shows how JavaScript differs from C#/Java/etc. in that you can define a function (like a class), then instantiate an "object" of that function, then with the prototype keyword add a method to the function which is immediately present in the object which you just instantiated.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(init);
function init() {
function Book(title, numberOfPages) {
this.title = title;
this.numberOfPages = numberOfPages;
}
book = new Book('JS Book', 234);
console.log(book.title);
Book.prototype.display = function() {
return this.title + '('+this.numberOfPages+' pages)';
};
console.log(book.display());
}
</script>
<title>test singleton</title>
</head>
<body>
<p>test</p>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(init);
function init() {
function Book(title, numberOfPages) {
this.title = title;
this.numberOfPages = numberOfPages;
}
book = new Book('JS Book', 234);
console.log(book.title);
Book.prototype.display = function() {
return this.title + '('+this.numberOfPages+' pages)';
};
console.log(book.display());
}
</script>
<title>test singleton</title>
</head>
<body>
<p>test</p>
</body>
</html>
JAVASCRIPT BOOK NOTES: JavaScript Patterns (2010) | 5.0
added 6 days ago
JavaScript Patterns (2010)
- chap1,patterns, oop, no classes, prototypes, one way to reuse code, ECMAScript 5 (dec 2009), console;2.1
- foray: jslint
- quote: JSLint will hurt your feelings, but only in the beginning.
- chap2, essentials, lots of tips that experienced javascript developers know, the problem with globals, don't forget var, access to global, single var pattern, hoisting (multiple vars), avoid eval(), not on parseInt() with radix number, white space, indentation, jslint;4.4
- quote: Using a single var statement at the top of your functions is a useful pattern to adopt.
- quote: it's also a good practice initialize the variable with an initial value at the time you declare it
- quote: Technically, you can also use for-in to loop over arrays, but it's not recommended.
- quote: So it's preferable to use normal for loops with arrays and for-in loops for objects.
- quote: It's tempting to augment prototypes of built-in constructors such as Object(), Array(), or Function(), but it can seriously hurt maintainability.
- recon: http://code.google.com/p/jsdoc-toolkit
- fc: two documentation tools for javascript: jsdoc, yuidoc
- chap3,literals and constructors, two ways to create same object, the new keyword (no reason to use it), shows the that pattern to enforce new, another solution: self-involing constructor, two ways to make arrays;4.7
- quote: when you forget new, this inside the constructor will point to the global object, JSON, regex, literal and primitives,
- quote: ECMAScript 5 defines a new method Array.isArray()
- fc: name javascript's primitive types;there are 5: number, string, boolean, null, undefined (the first three have primitive wrapper objects)
- chap4, functions, named and anonymous functions, functional hoisting, callbacks, return a function (closure), self-defining function (lazy function definition), parameters to immediate functions, configuration objects, curry (talks about apply), or without an array, currying (partial list of arguments),
- quote: Using the Function() constructor is as bad as eval()
- codex: do callback example, page 63;4.8
- quote: an immediate function allows you wrap an amount of work you want to do without leaving any global variables behind
- chap5, object creation patterns, shows how to avoid globals, namespaces, upfront declaration of variables in functions, private/public methods, priveleged prototype method,
- chap6,
- chap7,
- chap8,
JAVASCRIPT BOOK NOTES: Oreilly Learning JavaScript Design Patterns (May 2012) | 5.0
added on May 19, 2012
Oreilly Learning JavaScript Design Patterns (May 2012)
You can skip to chapter 9 where the patterns start.
- chap1, intro, short;0.1;done
- chap2, what is pattern; 0.1;done
- chap3, more on what it is; 0.1;done
- chap4, structure; 0.1;done
- chap5, how to write them; 0.1;done
- chap6, antipatterns, eval(); 0.1;done
- chap7, categories, short;0.1;done
- chap8, categorization, emulating classes, lists all classic patterns;3.2
- chap9, many design patterns: creator, constructor, constructor with prototype, singleton, module, talks about how implemented by dojo, extjs, yui, jquery, observer, more patterns, html templates, comparisons: mediator vs. observer, mediate vs. facade, prototype pattern, command pattern, facade, factory, mixins, decorator, interfaces, decorators in jquery;5.0
- chap10, flyweight, used when code is using a lot of memory, flyweight and data layer, factory;4.1
- chap11, mvc for javascript, models, views, controllers, how implemented in spine.js and backbone.js, also MVP (allows you to mock views in unit tests), MVP uses a passive view (a very dumb view), mvp or mvc?, also talks about MVVM in KnockoutJS, Kendo MVVM and Knockback.js, compares them all, Backbone.js Vs. KnockoutJS, namespacing patterns ; 5.0
- chap12, patterns in jquery, module, lazy initialization, composite, adapter, facade, obverver with trigger/unbind, etc., interator, strategy (family of algorithms), proxy, builder, prototype (templates);4.5
- chap13, decoupling your apps, AMD plugins (Asynchronous Module Definition), from dojo, AMD is a format for writing modular javascript, define(), require(), loading amd modules using requirejs, commonJS (group that is standardizing javascript APIs);2.9
- chap14, jquery plugin design patterns, namespacing, pub/sub, jQuery UI Widget Factory Bridge, a lot more about plugins;3.1
CSS3 CODE EXAMPLE: How to use :nth-child(3n+1) 
added on May 19, 2012
How to use :nth-child(3n+1)
If you change the 3 to 4 it is every fourth line, if you change the 1 to 2 it starts at "line number 2" instead of "line number 1".
<html>
<head>
<style type="text/css">
p {
margin: 0;
}
div#content > p:nth-child(3n+1) {
color:red;
}
div#content > *:last-child {
border-bottom: 1px solid red;
background-color: yellow;
}
div#content > div.comment:first-of-type {
color: blue;
font-weight: bold;
}
p:enabled {
}
</style>
</head>
<body>
<div id="content">
<?php
for($x=1; $x <=15; $x++) {
echo '<p>this is line number '.$x.'</p>';
echo '<div class="comment">this is a comment</div>';
}
?>
</div>
</body>
</html>
<head>
<style type="text/css">
p {
margin: 0;
}
div#content > p:nth-child(3n+1) {
color:red;
}
div#content > *:last-child {
border-bottom: 1px solid red;
background-color: yellow;
}
div#content > div.comment:first-of-type {
color: blue;
font-weight: bold;
}
p:enabled {
}
</style>
</head>
<body>
<div id="content">
<?php
for($x=1; $x <=15; $x++) {
echo '<p>this is line number '.$x.'</p>';
echo '<div class="comment">this is a comment</div>';
}
?>
</div>
</body>
</html>
JQUERY CODE EXAMPLE: How to allow user to press keys to affect objects on screen 
added on May 18, 2012
How to allow user to press keys to affect objects on screen
The user can press the 1, 2, and 3 keys to make the divs slid up and back into view.
<!DOCTYPE html>
<html>
<head>
<title>alt key</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).keydown(function(event) {
switch(event.which) {
case 49:
$('div:first').slideToggle('slow');
return false;
break;
case 50:
$('div:last').slideToggle('slow');
return false;
break;
case 51:
$('div').slideToggle('slow');
return false;
break;
}
});
});
</script>
<style type="text/css">
div {
border: 1px solid #DDDDDD;
height: 200px;
width: 200px;
padding: 10px;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<div>
press 1 to toggle
</div>
<div>
press 2 to toggle
</div>
<p style="clear: both">
</p>
<p>
press 3 to toggle both
</p>
</body>
</html>
<html>
<head>
<title>alt key</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).keydown(function(event) {
switch(event.which) {
case 49:
$('div:first').slideToggle('slow');
return false;
break;
case 50:
$('div:last').slideToggle('slow');
return false;
break;
case 51:
$('div').slideToggle('slow');
return false;
break;
}
});
});
</script>
<style type="text/css">
div {
border: 1px solid #DDDDDD;
height: 200px;
width: 200px;
padding: 10px;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<div>
press 1 to toggle
</div>
<div>
press 2 to toggle
</div>
<p style="clear: both">
</p>
<p>
press 3 to toggle both
</p>
</body>
</html>
JQUERY CODE EXAMPLE: How to determine how long JQuery various selectors take to process 
added on May 18, 2012
How to determine how long JQuery various selectors take to process
This shows a simple way to compare how long various selectors take to process, we see here that (in Firefox 11.0), it takes :first almost ten times as long as .first() to process.
<!DOCTYPE html>
<html>
<head>
<title>lasksdjf</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var i, time = +new Date;
for( i = 0; i < 10000; i++) {
$('div:first');
}
console.log((+new Date) - time);
time = +new Date;
for( i = 0; i < 10000; i++) {
$('div').first();
}
console.log((+new Date) - time);
});
</script>
</head>
<body>
<div>
111
</div>
<div>
222
</div>
<div>
333
</div>
</body>
</html>
<html>
<head>
<title>lasksdjf</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var i, time = +new Date;
for( i = 0; i < 10000; i++) {
$('div:first');
}
console.log((+new Date) - time);
time = +new Date;
for( i = 0; i < 10000; i++) {
$('div').first();
}
console.log((+new Date) - time);
});
</script>
</head>
<body>
<div>
111
</div>
<div>
222
</div>
<div>
333
</div>
</body>
</html>
JQUERY CODE EXAMPLE: Basic template code for JQuery using an init() function 
added on May 18, 2012
Basic template code for JQuery using an init() function
There are many ways to get JQuery loaded and started in an HTML page, this example uses an init function.
<!DOCTYPE html>
<html>
<head>
<title>jqstart2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(init);
function init() {
$('p#message').css('color','yellow');
$('p#message').css('background-color','#ccc');
}
</script>
</head>
<body>
<p id="message">this is the message</p>
</body>
</html>
<html>
<head>
<title>jqstart2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(init);
function init() {
$('p#message').css('color','yellow');
$('p#message').css('background-color','#ccc');
}
</script>
</head>
<body>
<p id="message">this is the message</p>
</body>
</html>
JAVASCRIPT CODE EXAMPLE: Basic template code for HTML/JavaScript using the onload attribute in BODY 
added on May 18, 2012
Basic template code for HTML/JavaScript using the onload attribute in BODY
There are many ways to get JavaScript working in an HTML page, this example calls an init function from the body element.
<!DOCTYPE html>
<html>
<head>
<title>javascript start 2</title>
<script type="text/javascript">
function init() {
var elemMessage = document.getElementById('message');
elemMessage.style.color = 'navy';
elemMessage.style.backgroundColor = 'orange';
}
</script>
</head>
<body onload="init();">
<p id="message">this was changed in init</p>
</body>
</html>
<html>
<head>
<title>javascript start 2</title>
<script type="text/javascript">
function init() {
var elemMessage = document.getElementById('message');
elemMessage.style.color = 'navy';
elemMessage.style.backgroundColor = 'orange';
}
</script>
</head>
<body onload="init();">
<p id="message">this was changed in init</p>
</body>
</html>
JAVASCRIPT CODE EXAMPLE: Basic template code for HTML/JavaScript using window.onload 
added on May 18, 2012
Basic template code for HTML/JavaScript using window.onload
This code shows how to assign an element to a variable and change its color.
<!DOCTYPE html>
<html>
<head>
<title>lasksdjf</title>
<script type="text/javascript">
window.onload = function() {
var title = document.getElementById('title');
title.style.color = 'blue';
};
</script>
</head>
<body>
<div id="title">this is the title</div>
</body>
</html>
<html>
<head>
<title>lasksdjf</title>
<script type="text/javascript">
window.onload = function() {
var title = document.getElementById('title');
title.style.color = 'blue';
};
</script>
</head>
<body>
<div id="title">this is the title</div>
</body>
</html>
JQUERY CODE EXAMPLE: Basic template code to load JQuery remotely with setOnLoadCallback 
<!DOCTYPE html>
<html>
<head>
<title>jquery load</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.7.1');
google.setOnLoadCallback(function() {
$('p#message').addClass('highlight');
});
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="message">This is the message</p>
</body>
</html>
added on May 18, 2012
Basic template code to load JQuery remotely with setOnLoadCallback
The latest version at the time was 1.7.2 but this couldn't load it, but could load 1.7.1.
<!DOCTYPE html>
<html>
<head>
<title>jquery load</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.7.1');
google.setOnLoadCallback(function() {
$('p#message').addClass('highlight');
});
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="message">This is the message</p>
</body>
</html>
HTML5 CODE EXAMPLE: Basic example of using canvas in HTML5 
added on May 18, 2012
Basic example of using canvas in HTML5
This creates a canvas that is embedded in a page and upon it with two for loops we draw squares.
<!DOCTYPE html>
<html>
<head>
<title>the test</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
drawIt('rgb(100,100,12)');
$('canvas#stage').click(function() {
drawIt('rgb(200,23,200)');
});
});
function drawIt(theColor) {
var stage = $('canvas#stage')[0].getContext('2d');
for( y = 1; y <= 200; y = y + 12) {
for( x = 1; x <= 200; x = x + 12) {
stage.fillStyle = theColor;
stage.fillRect(x, y, 10, 10);
}
}
}
</script>
<style type="text/css">
body {
background-color: #ddd;
}
canvas#stage {
border: 1px solid #aaa;
cursor: pointer;
cursor: hand;
margin: 7px 0 0 0;
}
div {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>click on the graphic</div>
<canvas id="stage" width="204" height="204"></canvas>
<div>so that the color changes</div>
</body>
</html>
<html>
<head>
<title>the test</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
drawIt('rgb(100,100,12)');
$('canvas#stage').click(function() {
drawIt('rgb(200,23,200)');
});
});
function drawIt(theColor) {
var stage = $('canvas#stage')[0].getContext('2d');
for( y = 1; y <= 200; y = y + 12) {
for( x = 1; x <= 200; x = x + 12) {
stage.fillStyle = theColor;
stage.fillRect(x, y, 10, 10);
}
}
}
</script>
<style type="text/css">
body {
background-color: #ddd;
}
canvas#stage {
border: 1px solid #aaa;
cursor: pointer;
cursor: hand;
margin: 7px 0 0 0;
}
div {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>click on the graphic</div>
<canvas id="stage" width="204" height="204"></canvas>
<div>so that the color changes</div>
</body>
</html>
JQUERY CODE EXAMPLE: How to make a simple interactive shooter game 
added on May 18, 2012
How to make a simple interactive shooter game
This is the minimal code to make shooter/invader game interaction. There is a ship, you can move the shooter with the arrow keys, and the up arrow shoots. If the laser hits the ship, it disappears.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var winWidth = $(document).width();
var duration = 1000;
$(document).keydown(function(e) {
var keyCode = e.keyCode || e.which;
var keyMap = {left: 37, up: 38, right: 39, down:40};
switch(keyCode) {
case keyMap.left:
$('img#shooter').animate({
left: '-=50'
}, 200);
break;
case keyMap.right:
$('img#shooter').animate({
left: '+=50'
}, 200);
break;
case keyMap.up:
var shooterLeft = $('img#shooter').offset().left;
var shooterTop = $('img#shooter').offset().top;
$('div#laser').offset({left: shooterLeft+12, top: shooterTop-30});
$('div#laser').show();
$('div#laser').animate({top: 10}, 1000, function() {
var laserLeft = $('div#laser').offset().left;
var shipLeft = $('img#ship').offset().left;
if(laserLeft > shipLeft && laserLeft < shipLeft+80) {
$('img#ship').hide();
}
$('div#laser').offset({left:0, top:0});
$('div#laser').hide();
});
break;
}
});
});
</script>
<style type="text/css">
body {
background-color: #bbb;
}
img#ship {
position: absolute;
top: 10px;
left: 200px;
}
img#shooter {
position: absolute;
top: 90%;
left: 20%;
}
div#laser {
position: absolute;
width: 3px;
height: 30px;
background-color: orange;
display: none;
}
p#instructions {
position: absolute;
top: 92%;
color: #777;
}
</style>
</head>
<body>
<p id="instructions">use arrows to move and shoot</p>
<img id="ship" src="images/ship.png" alt=""/>
<img id="shooter" src="images/shooter.png" alt=""/>
<div id="laser"></div>
</body>
</html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var winWidth = $(document).width();
var duration = 1000;
$(document).keydown(function(e) {
var keyCode = e.keyCode || e.which;
var keyMap = {left: 37, up: 38, right: 39, down:40};
switch(keyCode) {
case keyMap.left:
$('img#shooter').animate({
left: '-=50'
}, 200);
break;
case keyMap.right:
$('img#shooter').animate({
left: '+=50'
}, 200);
break;
case keyMap.up:
var shooterLeft = $('img#shooter').offset().left;
var shooterTop = $('img#shooter').offset().top;
$('div#laser').offset({left: shooterLeft+12, top: shooterTop-30});
$('div#laser').show();
$('div#laser').animate({top: 10}, 1000, function() {
var laserLeft = $('div#laser').offset().left;
var shipLeft = $('img#ship').offset().left;
if(laserLeft > shipLeft && laserLeft < shipLeft+80) {
$('img#ship').hide();
}
$('div#laser').offset({left:0, top:0});
$('div#laser').hide();
});
break;
}
});
});
</script>
<style type="text/css">
body {
background-color: #bbb;
}
img#ship {
position: absolute;
top: 10px;
left: 200px;
}
img#shooter {
position: absolute;
top: 90%;
left: 20%;
}
div#laser {
position: absolute;
width: 3px;
height: 30px;
background-color: orange;
display: none;
}
p#instructions {
position: absolute;
top: 92%;
color: #777;
}
</style>
</head>
<body>
<p id="instructions">use arrows to move and shoot</p>
<img id="ship" src="images/ship.png" alt=""/>
<img id="shooter" src="images/shooter.png" alt=""/>
<div id="laser"></div>
</body>
</html>
JQUERY CODE EXAMPLE: How to make a click park an image in the corner by using .animate() 
added on May 18, 2012
How to make a click park an image in the corner by using .animate()
When you click the page, the image animates on width, height and opacity, and a function is called on completion.
<!DOCTYPE html>
<html>
<head>
<title>how to park a graphic with .animate()</title>
<style type="text/css">
img#alien {
position: relative;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var winWidth = $(document).width();
var duration = 500;
$(document).click(function(event) {
$("#player").animate({
opacity : .1,
width : 100,
height : 100
}, duration, function() {
$('body').css('background-color', 'beige');
$('p#message').html('parked.')
});
});
});
</script>
</head>
<body>
<p id="message">
click anywhere to park the graphic
</p>
<img alt="" id="player" src="images/code.png" style="width: 200px; height: 200px">
</body>
</html>
<html>
<head>
<title>how to park a graphic with .animate()</title>
<style type="text/css">
img#alien {
position: relative;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var winWidth = $(document).width();
var duration = 500;
$(document).click(function(event) {
$("#player").animate({
opacity : .1,
width : 100,
height : 100
}, duration, function() {
$('body').css('background-color', 'beige');
$('p#message').html('parked.')
});
});
});
</script>
</head>
<body>
<p id="message">
click anywhere to park the graphic
</p>
<img alt="" id="player" src="images/code.png" style="width: 200px; height: 200px">
</body>
</html>
JQUERY CODE EXAMPLE: How to display a mouseover message which when clicked disappears 
added on May 18, 2012
How to display a mouseover message which when clicked disappears
This example shows a bar on the top, you click it to make it disappear, then click anywhere to make it reappear. There is also a mouseover effect.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#message').click(function(e) {
e.stopPropagation();
$('div#message').fadeOut('fast');
});
$('div#message').mouseover(function(e) {
e.stopPropagation();
$('div#message').css('color', '#999');
$('div#message').css('background-color', '#ccc');
});
$('div#message').mouseout(function(e) {
e.stopPropagation();
$('div#message').css('color', 'black');
$('div#message').css('background-color', 'orange');
});
$(document).click(function(e) {
$('div#message').fadeIn('fast');
});
});
</script>
<style type="text/css">
div#message {
background-color: orange;
width: 100%;
text-align: center;
font-size: xx-large;
cursor: hand;
cursor: pointer;
}
</style>
</head>
<body>
<div id="message">This is the message.</div>
</body>
</html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#message').click(function(e) {
e.stopPropagation();
$('div#message').fadeOut('fast');
});
$('div#message').mouseover(function(e) {
e.stopPropagation();
$('div#message').css('color', '#999');
$('div#message').css('background-color', '#ccc');
});
$('div#message').mouseout(function(e) {
e.stopPropagation();
$('div#message').css('color', 'black');
$('div#message').css('background-color', 'orange');
});
$(document).click(function(e) {
$('div#message').fadeIn('fast');
});
});
</script>
<style type="text/css">
div#message {
background-color: orange;
width: 100%;
text-align: center;
font-size: xx-large;
cursor: hand;
cursor: pointer;
}
</style>
</head>
<body>
<div id="message">This is the message.</div>
</body>
</html>
JQUERY CODE EXAMPLE: Basic template code with (document).ready syntax 
added on May 18, 2012
Basic template code with (document).ready syntax
This is one way to load JQuery code (ajax.googleapis.com).
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').css('font-size', '45pt');
});
</script>
</head>
<body>
<p>test of document ready</p>
</body>
</html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').css('font-size', '45pt');
});
</script>
</head>
<body>
<p>test of document ready</p>
</body>
</html>
JQUERY CODE EXAMPLE: How to save values on a function 
added on May 18, 2012
How to save values on a function
Functions are like objects in JavaScript, you can save properties on them as shown here:
<html>
<head>
<title>skdfj</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('p').css('color', 'green');
var fct = function(){};
console.log(typeof fct);
fct.whatever = 'ok';
console.log(fct);
console.log(fct.whatever);
});
</script>
</head>
<body>
<p>alskdfj</p>
</body>
</html>
<head>
<title>skdfj</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('p').css('color', 'green');
var fct = function(){};
console.log(typeof fct);
fct.whatever = 'ok';
console.log(fct);
console.log(fct.whatever);
});
</script>
</head>
<body>
<p>alskdfj</p>
</body>
</html>
JQUERY CODE EXAMPLE: How to move a DIV to the right when you click it 
added on May 18, 2012
How to move a DIV to the right when you click it
Each time you click the DIV, it reads its left position and moves itself to the right.
<!DOCTYPE html>
<html>
<head>
<title>text </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).click(function() {
var position_x = $('div#player').css('left');
position_x = parseInt(position_x);
$('div#player').css('left', position_x + 10);
});
</script>
<style type="text/css">
div#player {
position: absolute;
width: 50px;
height: 50px;
background-color: lightgreen;
cursor: pointer;
}
</style>
</head>
<body>
<div id="player"></div>
</body>
</html>
<html>
<head>
<title>text </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).click(function() {
var position_x = $('div#player').css('left');
position_x = parseInt(position_x);
$('div#player').css('left', position_x + 10);
});
</script>
<style type="text/css">
div#player {
position: absolute;
width: 50px;
height: 50px;
background-color: lightgreen;
cursor: pointer;
}
</style>
</head>
<body>
<div id="player"></div>
</body>
</html>
CSS CODE EXAMPLE: How to create colored div icons with text centered vertically and horizontally 
added on May 18, 2012
How to create colored div icons with text centered vertically and horizontally
If you want to have different colored icons with dynamic text in the middle, this code will get you started.
<html>
<head>
<style type="text/css">
body {
width: 400px;
}
div.item {
margin: 0 0 20px 0;
}
div.iconArea {
float: left;
margin: 0 5px 0 0;
width: 70px;
height: 70px;
font-size: 10pt;
position: relative;
}
div.iconArea div.iconText {
height: 20px;
position: relative;
top: 50%;
text-align: center;
margin: -10px auto 0 auto;
}
div.infoArea {
margin: 0 0 0 75px;
}
div.infoArea div.title {
font-weight: bold;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div class="item">
<div class="iconArea" style="background-color:pink"><div class="iconText" style="color:purple">Info</div></div>
<div class="infoArea">
<div class="title">This is an Info</div>
<div>This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
</div>
<div class="clear"></div>
</div>
</div>
<div class="item">
<div class="iconArea" style="background-color:lightgreen"><div class="iconText" style="color:brown">Flashcard</div></div>
<div class="infoArea">
<div class="title">This is a Flashcard</div>
<div>This is the description which will be wrapping around2. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
</div>
<div class="clear"></div>
</div>
</div>
<div class="item">
<div class="iconArea" style="background-color:navy"><div class="iconText" style="color:yellow">Question</div></div>
<div class="infoArea">
<div class="title">This is a Question</div>
<div>This is the description which will be wrapping around2. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
body {
width: 400px;
}
div.item {
margin: 0 0 20px 0;
}
div.iconArea {
float: left;
margin: 0 5px 0 0;
width: 70px;
height: 70px;
font-size: 10pt;
position: relative;
}
div.iconArea div.iconText {
height: 20px;
position: relative;
top: 50%;
text-align: center;
margin: -10px auto 0 auto;
}
div.infoArea {
margin: 0 0 0 75px;
}
div.infoArea div.title {
font-weight: bold;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div class="item">
<div class="iconArea" style="background-color:pink"><div class="iconText" style="color:purple">Info</div></div>
<div class="infoArea">
<div class="title">This is an Info</div>
<div>This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
</div>
<div class="clear"></div>
</div>
</div>
<div class="item">
<div class="iconArea" style="background-color:lightgreen"><div class="iconText" style="color:brown">Flashcard</div></div>
<div class="infoArea">
<div class="title">This is a Flashcard</div>
<div>This is the description which will be wrapping around2. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
</div>
<div class="clear"></div>
</div>
</div>
<div class="item">
<div class="iconArea" style="background-color:navy"><div class="iconText" style="color:yellow">Question</div></div>
<div class="infoArea">
<div class="title">This is a Question</div>
<div>This is the description which will be wrapping around2. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
JAVASCRIPT CODE EXAMPLE: How to write a recursive function 
added on May 18, 2012
How to write a recursive function
This is a simple example of a function calling itself to calculate a value.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function() {
function calculate(num) {
if(num == 0) {
return 1;
} else {
return num * calculate(num - 1);
}
}
console.log(calculate(0));
console.log(calculate(1));
console.log(calculate(2));
console.log(calculate(3));
console.log(calculate(4));
}
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function() {
function calculate(num) {
if(num == 0) {
return 1;
} else {
return num * calculate(num - 1);
}
}
console.log(calculate(0));
console.log(calculate(1));
console.log(calculate(2));
console.log(calculate(3));
console.log(calculate(4));
}
</script>
</head>
<body>
</body>
</html>
JQUERY CODE EXAMPLE: How to use the .addClass() method in jQuery 
added on May 18, 2012
How to use the .addClass() method in jQuery
When the user clicks on the vocabulary term, the class changes.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('span.vocabulary').click(function() {
$(this).addClass('highlight');
});
});
</script>
<style type="text/css">
span.vocabulary {
cursor: pointer;
cursor: hand;
color: green;
border-bottom: 1px dashed #555;
}
span.highlight {
background-color: yellow;
font-size: 18pt;
color: navy;
border-bottom: none;
}
</style>
</head>
<body>
<p>The staff no longer has to work with complex and <span class="vocabulary">unwieldy</span> control flags.</p>
</body>
</html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('span.vocabulary').click(function() {
$(this).addClass('highlight');
});
});
</script>
<style type="text/css">
span.vocabulary {
cursor: pointer;
cursor: hand;
color: green;
border-bottom: 1px dashed #555;
}
span.highlight {
background-color: yellow;
font-size: 18pt;
color: navy;
border-bottom: none;
}
</style>
</head>
<body>
<p>The staff no longer has to work with complex and <span class="vocabulary">unwieldy</span> control flags.</p>
</body>
</html>
JQUERY CODE EXAMPLE: How to put JavaScript/JQuery at end of Body 
added on May 18, 2012
How to put JavaScript/JQuery at end of Body
If you put the JavaScript block at the end of the body element, then you don't have to use the $(document).ready() function, which makes your code simpler. And in most browsers, the user will have a faster loading experience especially on large pages.
<!DOCTYPE html>
<html>
<head>
<title>Test: JavaScript at end of Body Element</title>
</head>
<body>
<p>test</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('p').css('color','red');
</script>
</body>
</html>
<html>
<head>
<title>Test: JavaScript at end of Body Element</title>
</head>
<body>
<p>test</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('p').css('color','red');
</script>
</body>
</html>
JQUERY CODE EXAMPLE: How to use insertBefore(), .length, and .filter() 
added on May 18, 2012
How to use insertBefore(), .length, and .filter()
Note also that you select within a context with a second parameter like this: $('p', 'div#specialArea').length.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlight {
color: navy;
font-weight: bold;
font-size: 18pt;
}
</style>
</head>
<body>
<p>one</p>
<p class="highlight">two</p>
<p>three</p>
<div id="contentMarker"/>
<div id="messageMarker"/>
<div id="specialArea">
<p>new1</p>
<p class="highlight">new2</p>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$('<p>four</p>').insertBefore('div#contentMarker');
$("<div>There are " + $('p').length + " paragraph elements</div>").insertBefore('div#messageMarker');
$('<p>five</p>').insertBefore('div#contentMarker');
$("<div>And there are now " + $('p').length + " paragraph elements</div>").insertBefore('div#messageMarker');
$("<div>there are " + $('p', 'div#specialArea').length + " in the special area</div>").insertBefore('div#messageMarker');
var paragraphs = $('p');
$("<div>there are now " + paragraphs.length + " paragraphs</div>").insertBefore('div#messageMarker');
$("<div>but there are only " + paragraphs.filter('.highlight').length + " highlighted paragraphs</div>").insertBefore('div#messageMarker');
</script>
</body>
</html>
<html>
<head>
<style type="text/css">
.highlight {
color: navy;
font-weight: bold;
font-size: 18pt;
}
</style>
</head>
<body>
<p>one</p>
<p class="highlight">two</p>
<p>three</p>
<div id="contentMarker"/>
<div id="messageMarker"/>
<div id="specialArea">
<p>new1</p>
<p class="highlight">new2</p>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$('<p>four</p>').insertBefore('div#contentMarker');
$("<div>There are " + $('p').length + " paragraph elements</div>").insertBefore('div#messageMarker');
$('<p>five</p>').insertBefore('div#contentMarker');
$("<div>And there are now " + $('p').length + " paragraph elements</div>").insertBefore('div#messageMarker');
$("<div>there are " + $('p', 'div#specialArea').length + " in the special area</div>").insertBefore('div#messageMarker');
var paragraphs = $('p');
$("<div>there are now " + paragraphs.length + " paragraphs</div>").insertBefore('div#messageMarker');
$("<div>but there are only " + paragraphs.filter('.highlight').length + " highlighted paragraphs</div>").insertBefore('div#messageMarker');
</script>
</body>
</html>
JQUERY BOOK NOTES: Wrox Professional jQuery (April 2012) | 4.1
added on May 18, 2012
Wrox Professional jQuery (April 2012)
- chap1, getting started: some useful tools;1.1
- chap2, javascript primer;2.6
- basics, scope, applying modules, prototype, best practicies, ajax post
- chap3, jquery core;2.3
- structure, basics, utility functions: isFunction, noop, makeArray(),map() like each(), unobstrusive javascript, anonymous functions, chaining,how jquery is more consise, looks into jquery code, looks how $.ready() works, using jquery with other libraries, nice url reference at end
-lookup: cody lindley
- chap4, DOM Element Selection and Manipulation;2.2
- shows how jquery is quicker, $ and JQuery, uses html5 doctype, has easier selection: http://code.jquery.com/jquery-1.7.1.js, selecting elements by class, ancestor decendent, var allDivs = $('div[id^="area"]');, also $("[attributeName*='value']");, selecting by position, shows :input, and all those like :checked, etc., and p:contains, also var allDivs = $('div:contains("ok")');, shows :has(), and :parent, even white space is considered children, custom user selectors, how to use find:, shows var secondEl = listElements.get(2);, shows index(), shows toArray(), good example with fitler/end, shows andSelf(), shows text() which combines text of all elements, text() works with both XML and HTML, and html() only first matched element, removeAttr(), and appendTo().
- chap5, Event Handling;3.4
- good history of DOM level 0, 2, and IE model, netscape navigator 2, stopPropagation() and such, microsoft did bubbling different, shows bind(), you can also use live() (if element does not exist), live() cannot be chained, also unbind(), die(), undelegate(), for clicking only once one(), shows that bind and click can do same thing, good example of fadin, fadout, has form example, $(function(){...); as you'll recall is equivalent to using .ready(), good example of .each building a LI list, new event api with 1.7, instead of .bind() and .unbind(), .live() and .die() and set .click() and .blur(), you have .on() and .off(), two ways to use on()
- chap6, html forms;5.0
- data, and ajax: jQuery's .data() method, which stores arbitrary data for an element with a meaningful key, shows setField, talks about microsoft's three technologies, shows how to use modernizr, shows control types URL, email, telephone, etc. in HTML5, jquery place holder prjoect, this is also a focus example, shows raw ajax, then shows .ajax (we used .post), shows how to parse a document coming via ajax, also shows how to do it with getJSON, there is unfortunately no postJSON(), shows how .get(...) is shorthand for .ajax(), and .post() which is what I use in my language apps, also .load() is useful and is attached to element, then does form with placeholder="First Name" and required as attributes, modernizr makes sure they are present which is an example for load.
- chap7, animations and effects;4.8
- shows how to animate a box moving right on click, then shows offset(), talks about hide() and show(), talks about slideDown, slideUp, has example of this, uses height() and width() so that the px does not come with it, shows how to animate with animate, has a little space invader game, talks about canvas, recommended http://diveintohtml5.info/canvas.html.
- chap8, jquery UI making look slick;4.2
- shows how to setup jqueryui, prettier buttons, tabs, accordian, but doesn't really tell how to set them up, autocomplete, datepicker, lots of parameters, dialog, progressbar, slider
- foray: try to get all jqueryui examples to work here; 3.2
- chap9, jquery UI mouse interactions;4.1
- dragging and dropping, has example, sorting with example, you can resizing with example, selectable wiht example,
- foray: try to get all jqueryui examples to work here; 3.1
- chap10, writing effective jquery code;2.9
- best practices, minimize dom updates (reflows and repaints), has speed test (tables/rows), leverage dom hyperspace (do all in javascript), careful with $.each, use Array.ForEach(), caching objects, document.querySelectorAll is fast, careful of jquery-unique selectors e.g. :file, give selectors a context, skip jquery selectors and simply use e.g. document.getElementById('baz').href, Don't Repeate Yourself, use e.g. javascript singleton, ***code in framework structure, code for "dashbaord module", using html5 data attributes instead of css classes and ids, use $.data(), something about data API
- todo: do number of examples with $.each();4.3
- todo: do code example with .this and .that and learn background;3.2
- todo: learn hasClass();4.5
- read: https://developer.mozilla.org/en/Writing_Efficient_CSS; classic article on efficient css;2.1
- todo: do code example of all jquery selectors e.g. ":file", ":odd", etc.; 4.3
- todo: do code examples of javascript patters e.g. singleton;4.3
- todo: set up simple framework as in this chapter, page 209;4.5
- foray: get old framwork code, set it up again and get into github;2.3
- foray: crack github get project in, fork, etc.;4.9
- foray: learn module pattern and record as code example: http://www.yuiblog.com/blog/2007/06/12/module-pattern;4.3
- foray: get example with $.data() going;4.2
- chap11, jquery templates;2.1
- mentions template engines Freemarker or Mustache, this looks like a good chapter on a good pattern for jquery development, jquery templates started out in march 2010, as of april 2011, activity on the jquery template plugin stopped, leaving it permanently in that beta state, mentions Templating, Data Link, and Globalization, seems work has stopped but "it's therefore sensible to leverage the existing plugin until the newer effort is mature enough to supplant it", uses
- foray: spend 30 minutes with http://freemarker.sourceforge.net;2.9
- question: what is the sense or a use case for javascript/jquery templates?;4.3
- chap12, writing jquery plugins;3.1
- naming convention jquery.pluginName.js, two patterns to extend: jquery.fn and jQuery.extend(), jquery ui widget factory, $ should point to jquery, return jquery object whenever possible, best practices, provide public access, widget factory again,
- quote: to do a basic version doesn't mean it's easy to do it right;3.1
- todo: spend 1 hour looking through the jquery source and take notes;3.6
- quote: semicolons are your friend;javascript;4.1
- quote: Relying on implicit insertion can cause subtle, hard to debug problems. Don't do it. You're better than that.;38;javascript
- foray: create a jquery plugin (just do the one on page 259 here);4.3
- chap13, advanced asynchronous programming with jquery deferred;1.1
- $.deferred, introduced in version 1.5, is a chainable utility object that provides ? ne-tuned control over the way callback functions are handled, a promise is a proxy for the result of an action, has example, gets quick complicated
- chap14, unit testing;2.1
- introduces qunit, differences between xunit and qunit, asynchronous tests, using Using asyncTest, mocking ajax requests, has good example of test suite
- foray: get qunit up and running: http://docs.jquery.com/QUnit;3.6
- fc: two unit testing apps for jquery;xunit and qunit;3.1e
- todo: do test suite here page 300;3.1
EXTJS CODE EXAMPLE: Mimimum extjs4 application 
added on May 16, 2012
Mimimum extjs4 application
This is the minimum application for extJS4 after taking out as many directories as I could, still 2000+ files to upload to FTP (see jsbuilder) and it runs slowly, need to resolve that. But for local development, this would be the code to start with.
app.js
var title1 = 'Spanish';
var content1 = "<ul class='list'>\
<li>uno</li>\
<li>dos</li>\
<li>tres</li>\
</ul>";
var title2 = 'French';
var content2 = "<ul class='list'>\
<li>un</li>\
<li>deux</li>\
<li>troiss</li>\
</ul>";
Ext.application({
name: 'HelloExt',
launch: function() {
var childPanel1 = Ext.create('Ext.panel.Panel', {
title: title1,
html: content1,
bodyStyle: 'padding: 10px'
});
var childPanel2 = Ext.create('Ext.panel.Panel', {
title: title2,
html: content2,
bodyStyle: 'padding: 10px'
});
Ext.create('Ext.container.Viewport', {
items: [ childPanel1, childPanel2 ]
});
}
});
var content1 = "<ul class='list'>\
<li>uno</li>\
<li>dos</li>\
<li>tres</li>\
</ul>";
var title2 = 'French';
var content2 = "<ul class='list'>\
<li>un</li>\
<li>deux</li>\
<li>troiss</li>\
</ul>";
Ext.application({
name: 'HelloExt',
launch: function() {
var childPanel1 = Ext.create('Ext.panel.Panel', {
title: title1,
html: content1,
bodyStyle: 'padding: 10px'
});
var childPanel2 = Ext.create('Ext.panel.Panel', {
title: title2,
html: content2,
bodyStyle: 'padding: 10px'
});
Ext.create('Ext.container.Viewport', {
items: [ childPanel1, childPanel2 ]
});
}
});
index.htm
<html>
<head>
<title>extjs test1</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
ul.list li {
color: navy;
list-style: disc;
margin: 0 0 0 30px;
}
</style>
</head>
<body></body>
</html>
<head>
<title>extjs test1</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
ul.list li {
color: navy;
list-style: disc;
margin: 0 0 0 30px;
}
</style>
</head>
<body></body>
</html>
JQUERY BOOK NOTES: Oreilly jQuery Cookbook (Nov 2009) | 4.8
added on May 16, 2012
Oreilly jQuery Cookbook (Nov 2009)
- chap1, where to put jquery, the $(document).ready() event, lots of selectors, filter, end(), andSelf(), next(), prev(), parent(), remove() but they stay as well, replaceWith(), clone(),
- quote: Any obstacle that I've encountered during my development by placing JavaScript at the bottom of the page has been easily overcome and well worth the optimization gains.
- learn: end()
- try: $('ul#test li')
- try: replace a href with .attr(), page 29-30
- todo: record 1.17: avoid global conflicts
- chap2, direct descendent (>), .children(), .siblings(), nextAll(), also the tilda, index selectors (eq, lt, etc.), hmm, adding class "even" for css, nice, :animated, :contains(), :not
- try: example with :animated
- code: page 42, filter with regex
- code: :hidden()
- code: match attribute, also :checkbox, :password
- code: 2.10
- chap3, looping, eq(), get() not get, get the index, finds query
- code: page 61 example;4.6
- code: do 3.4 with getting index;4.5
- code: 3.5 with .map();4.7
- code: 3.6 with .wrap();4.6
- code: do 3.7 nonconflict with prototype;2.9
- code: 3.8 plugin;4.9
- chap4, jquery.support, in 1.3, isFunction,
- code: 4.2 iterating over arrays; 4.7
- code: 4.3 jquery.grep;4.6
- code: 4.4 map;4.6
- code: 4.5 merge;4.2
- code: 4.6 unique;4.2
- code: 4.8 trim;3.9
- code: 4.9 using data as code practice;4.8
- chap5, plugin for external function, custom iterator, profiling, caching objects, #foo is faster than .foo, loading tables faster, for loops faster than each, never use a for..in loop to iterate over a jquery object or an array of any type, tips to increase speed, innerHtml faster than html(), use uncompressed jquery code and step in, minimize number of http requests, support javascript off,
- code: try with setTimeOut, 5.2;4.2
- code: 5.3 redundent repetition pattern;4.5
- code: 5.7 toggle attribute;3.5
- foray: get the # URL updater to work in jquery;4.9
- code: with focus again;4.3
- chap6, width/height of window, of element, also the offset, with .position() and .offset(), scrolling the window, determining if elemnt is in view port, changing relative to absolute, positining reltaive to another,
- code: centering in viewport, 6.6;4.5
- code: 8.6 switching stylesheets based on browser width;3.7
- chap7, simultaneous sliding/fading, determine if elements are being animated, stopping and restarting animations,
- code: sliding and fading 7.1;4.5
- code: 7.2 slide up;4.5
- code: 7.3 horizontal accordian;4.5
- code: 7.8 custom easing effects;4.5
- chap8, events, event.stopPropagation, e.preventDefault, event.target, avoid multiple hover,
- code: 8.1 and 8.2 pattern: attach many events to one handler (pass e);4.2
- code: 8.4 figure out the namespace thing;4.1
- code: 8.5 pass extra data to handlers;4.1
- code: 8.6 accessing before document load;3.9
- chap9, advanced events,
- code: 9.2 understand global event triggering;3.5
- code: 9.3 create you own events;4.9
- code: 9.5 event driven plugins;4.3
- code: 9.6 understand broadcast;4.0
- chap10, html form enhancements,
- code: 10.1 focus quick;5.0
- code: 10.3 radio buttons;4.5
- code: 10.4 and 10.5 checkboxes;4.5
- code: 10.5 adding/removing select options;4.8
- code: 10.7 autotabbing;4.1
- code: 10.8 display character count (uses bind);4.9
- code: 10.9 constraining to specific characters;4.7
- code: 10.10 ajax form (see if different);4.4
- code: 10.11 validating forms;4.5
- chap11, form enhancements with plugins, spinner widget,
- code: 11.1 validating forms;4.6
- code: 11.2 masked input fields;4.5
- code: 11.3 autocomplete text fields with jquery UI;5.0
- code: 11.4 range of values, with jquery UI;4.8
- code: 11.6 uploading files in background;4.9
- code: 11.7 max length;4.8
- code: check out 11.8;4.2
- code: datepicker 11.10, get working with standard date syntax e.g. 2012-05-09;5.0
- chap12, plugins, search and install, when to write, private functions in plugin, metadata plugin, static function
- foray: search and install plugins from various sources;4.7
- code: write pluging 12.3;4.8
- code: passing options to custom plugin 12.4;4.6
- chap13, interface components
- code: custom tool tip13.1;5.0
- code: filetree expander 13.2;3.5
- code: according 13.3;4.8
- code: 13.4 tabbing;4.7
- code: 13.5 modal window;4.6
- code: 13.6 drop down menus;4.6
- code: 13.7 crossfading roating images (for run site);5.0
- code: 13.8 sliding panels;4.8
- chap14, user interfaces, jquery plugins settings, jqueryUI events, etc.
- code: include jquery ui entire;4.8
- code: include one jqueryUI component;4.9
- code: audio plaer 14.10, built into flashcards, etc.;5.0
- chap15, jqueryui theming, long explanation, theme roller, overriding, mulitple themes on one page,
- chap16, data formats and ajax, .ajaxSetup,
- code: 16.1 jquery ajax;5.0
- code: 16.3 user feedback while processing, see if same;4.7
- code: 16.4, 16.5 json/html;4.5
- code: 16.6 converting XML to DOM;4.9
- code: 16.7, 16.8 creating/parsing JSON, see if same;4.6
- code: 16.9, JSONP get to work with two dpod sites;5.0
- chap17, large projects, queuing requests
- code: 17.1 client-side storage, try it;4.9
- code: 17.2 saving application state;4.5
- code: 17.4 understand javascript templating engine;4.8
- code: 17.6 get example with back button;4.4
- chap18, unit testing, keylogger, keeping test atomic, grouping,
JAVASCRIPT CODE EXAMPLE: JavaScript example of simple arrays and interating through arrays and object properties 
added on May 16, 2012
JavaScript example of simple arrays and interating through arrays and object properties
Notice how to define multiple line variables with '\' at the end of the line.
index.htm
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
div#content {
width: 300px;
background-color: #eee;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
div.firstLine {
padding: 0 0 5px 0;
}
div.line {
padding: 0 0 5px 0;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
//insert text in element
var message = 'hello';
displayIt('first line', 'firstLine');
//simple arrays
var names = [ 'jim', 'joe', 'john' ];
displayIt('and the names are ' + names.join(', '));
displayIt('the second name is ' + names[1] + ' and there are ' + names.length + ' names');
//iteration
displayIt('the names are listed here:');
for(var i = 0; i <names.length; i++) {
displayIt(names[i]);
}
//array object
names_object = {
0 : 'hal',
1 : 'hank',
2 : 'howard'
}
displayIt(names_object[1]);
for(var key in names_object) {
var obj = names_object[key];
displayIt(key + '/' + obj);
}
function displayIt(text, className) {
var text = arguments.length < 1 ? '(default text)' : text;
var className = arguments.length < 2 ? 'line' : className;
var elContent = document.getElementById('content');
elContent.innerHTML += '<div class="'+className+'">' + text + '</div>';
}
</script>
</body>
</html>
<html>
<head>
<title>test</title>
<style type="text/css">
div#content {
width: 300px;
background-color: #eee;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
div.firstLine {
padding: 0 0 5px 0;
}
div.line {
padding: 0 0 5px 0;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
//insert text in element
var message = 'hello';
displayIt('first line', 'firstLine');
//simple arrays
var names = [ 'jim', 'joe', 'john' ];
displayIt('and the names are ' + names.join(', '));
displayIt('the second name is ' + names[1] + ' and there are ' + names.length + ' names');
//iteration
displayIt('the names are listed here:');
for(var i = 0; i <names.length; i++) {
displayIt(names[i]);
}
//array object
names_object = {
0 : 'hal',
1 : 'hank',
2 : 'howard'
}
displayIt(names_object[1]);
for(var key in names_object) {
var obj = names_object[key];
displayIt(key + '/' + obj);
}
function displayIt(text, className) {
var text = arguments.length < 1 ? '(default text)' : text;
var className = arguments.length < 2 ? 'line' : className;
var elContent = document.getElementById('content');
elContent.innerHTML += '<div class="'+className+'">' + text + '</div>';
}
</script>
</body>
</html>
PHP BOOK NOTES: Smarty (2006) | 3.5
added on May 15, 2012
Smarty (2006)
- chap1,
- chap2,
- chap3,
- chap4,
- chap5,
- chap6,
- chap7,
- chap8,
- chap9,
- chap10,
- chap11,
- chap12,
JAVASCRIPT BOOK NOTES: Packtpub ExtJS4 First Look (Jan 2012) | 3.9
added on May 15, 2012
Packtpub ExtJS4 First Look (Jan 2012)
- chap1, biggest overhaul, namespaces, extjs3 namespace compatible, shows base code, has jsbuilder in it, ok but not in mine, talks about all files, class system more object oriented, backward compatible, Ext.extend is deprecated, much more like classes, config so you can use getTitle, nice, has statics so don't need to instantiate, sandboxed means it runs next to extjs3, new features: forms, grids, layouts;3.5
- lookup: http://loianegroner.com, author site
- lookup: http://neiliscoding.blogspot.com, reviwer site
- lookup: reviewer site, french: http://www.papdevis.fr and http://olivierpons.fr
- chap2, new data package, model class, data package shared with sencha touch, 3 was record, 4 is model, 4 does not support record class, shows how to create an object, talks about types, you can save with .save() but where is it saved? extjs4 three new proxies, nice: proxytype: local storage, ie7 says localstorage not available, sessionStorage proxy, connects to datasource, nice, ajaxProxy is the most-used proxy, properties become attributes in the rest url line, sorters, you have to decode it on the server side, you can write a filter to change the way the URL is created, the syntax, rest proxy (type: 'rest'), jsonp proxy, readers decode data from server, writers send data to server, JsonWriter, sorting, filtering (like WHERE);4.1
- fc: what are the proxies in extjs4?;
- chap3, layouts, improved in 4, autolayout, anchor layout (resizing), absolute layout, hbox layout, vbox layout, accordian, table, column, fit, card, border, components, dock;3.2
- chap4,
- chap5,
- chap6,
- chap7,
DEVELOPER BOOK NOTES: Version Control for Web Developers (Mar 2012) | 3.8
added on May 7, 2012
Version Control for Web Developers (Mar 2012)
- chap1, wamp server 2, how to set up, windows, mac, uses mamp, mamp pro $59, also shows ubuntu;4.8
- chap2, explains version control, history sccs 72, rcs 82, branches, pvcs 85, cvs 1990, clearcase 92, vss 94, perforce, accurev, bitkeeper;2.6
- chap3, SVN, Git, Mercurial (current players), svn 2000, mercurial 2005, git 2005, talks about compiling, explains svn, windows, mac, xcode, also homebrew for mac, then ubuntu, gets svnX, then explains mercurial, how to compile it, sude make install clean, create new repository, explain mercurial: windows, mac, ubuntu, how git is different: git used to be hard on windows but not msysgit, on mac, ubuntu and compiling from source;4.9
- chap4, mentions ways of doing version control: dropbox, external drives, etc., ability to work on different machines, history, clients will want past versions, comments, merging, branching, bridging (between svn and git);3.8
- chap5, non command line options: tortoisesvn, much about it, revert, etc., Syncro SVN client, Versions (for Mac), blame, cornerstone, UNIX: RabbitVCS, then Mercurial: TortoiseHg, Hg Workbench, Mac: MacHg, SourceTree, Git GUI is not the best, windows, no automatic change detection, TortoiseGit, GitHub for Mac, tower, mentions stash
- chap6, version control not for all files, zovo.co not free, amazon cloud drive, also dropbox, sharepoint, magnet svn for office docs,
- try: zovo.co, cloud storage;2.7
- try: amazon cloud drive, free 5GB;4.8
- try: zumodrive.com;3.3
- lookup: pixelnovel, photoshop, adobe drive 3 ;3.8
- try: evolphin.com, version control for other files;3.9
- chap7, svn with notepad++, visual studio, textmate and svn, Coda, BBEdit on mac, neither eclipse nor aptana have version control by default, latest version of aptana comes with git support baked in, can install mercurial manually, netbeans, sublime text 2,
- lookup: Coda;3.1
- foray: setup SVN on Netbeans;4.4
- chap8, shows how to deal with conflicts in all three apps
- chap9, vi and nano on mac and linux, how to do everything on command line, good chapter, lots of detail; 4.6
- foray: setup ubuntu in virtual machine;4.9
- chap10,
- chap11,
- chap12,
- chap13,
- chap14,
- chap15,
JQUERY BOOK NOTES: jQuery Mobile Up and Running (Feb 2012) | 4.1
added on May 7, 2012
jQuery Mobile Up and Running (Feb 2012)
- chap1, why mobile platform, myths, it's a UI layer on top, don't need javascript necessarily, comparable to jqueryUI on the desktop side, five categories of mobile devices: mobile phones (no web), low-end mobile devices (very basic web), social devices (gisis phone), smartphones (android/iphone), tablets, lists various OSs and browers, shows compatibility, good
- foray;get jquery mobile app up and running;4.7
- link;http://mobilehtml5.org;html5 compatibility for mobile browsers
- foray;get base mobile jquery code to work on page 16;
- chap2,
- chap3,
- chap4,
- chap5,
- chap6,
- chap7,
- chap8,
- chap9,
- chap10,
- chap11,