Hafez Rouzati

Argon +
Web Programing
Hafez Rouzati

Event Handling
Overlay HTML
div.overlaystyle
{
width: 320px;
height: 50px;
position: relative;
}
]]>
#undecorated_style

Scope
// Global variables are global
var GLOBAL_VAR;
// anonymous / immediate function (code inside is called as soon as evaluated
(function(){
// local to inner scope
var local_to_function;
})();
init();
// object literal syntax
var dog = {
! name: "Lassie",
! getName : function () {
! ! return this.name;
! }
};
// Function “Object” syntax
function Person(params) {
! this.name = params.name;
! this.address = params.address;
! this.id = 1234567;
};
// Extending the Person prototype
Person.prototype.sayHi = function() {
! console.log("Hi my name is " + this.name);
};

External Scripts
// inline (asynchronous but order not guaranteed)
// adding async attribute allows us to use onload property (order
not guaranteed)
// create script element
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = onloadHandler;
document.body.appendChild(script);

External Scripts
//example of chaining loads to guarantee order
(function(){
! function load_script_async(url, onloadHandler)
! {
! console.log("Loading " + url);
! var script = document.createElement('script');
! script.type = 'text/javascript';
! script.src = url;
! script.onload = onloadHandler;
! document.body.appendChild(script);
! }
!
! function load_scripts(scriptUrlArray)
! {
! ! load_script_async(scriptUrlArray.shift(), function(){ if (scriptUrlArray.length > 0) load_scripts(scriptUrlArray)});
! }
!
! function load()
! {
! console.log("Loading Scripts...");
! ! load_scripts(["script1.js", "script2.js", "script3.js"]);
! }
})();

KHARMA
function locationChanged() {
! // accessing the KHARMA object
! var myLoc = KHARMA.getLocation();
! if(myLoc != null)
! {
! var lat = myLoc.latitude;
! var lon = myLoc.longitude;
! ! // do something with location
! }
}
document.addEventListener('locationChanged', function(event) { locationChanged();})

JSON
// key-value pair provides “dictionary” style behavior
var jsonInfo = { "key" : "value" };
// nested dictionaries
var multiJson = { "id" : "someString",
"userData" : { "name" : "Bob", "email" : "bob@bob.com" }};
// dictionaries as array elements
var jsonArray = [ { "first Item" : "value"},
{ "second item" : "someOtherValue" } ];

KHARMA JSON
// 1. JSON representation of a placemark with a balloon
var myFeatureJSON =!
{
balloonVisibility : "1",
description : "function balloon_relative_init(){console.debug('balloon
relative init'); folder_test()}; Example balloon relative to device",
iconVisibility : "1",
id : "balloon_relative",
labelVisibility : "0",
name : "Balloon Relative",
};
type : "placemark",
visibility : "1",
parent : "folder",
extendedData : {
id : "asfasfasdf",
type : "extendeddata",
data : [{ type : "data",
Data_name : "tag",
DisplayName : "the hash",
value : "aelatgt"},
{ type : "data",
Data_name : "value",
value : "2"
}]
},
geometry : [{
altitudeMode : "clampToGround",
id : "balloon3”,
location : {
altitude : "0",
id : "location_relative",
latitude : "6",
latitude_units : "meters",
longitude : "0",
type : "location",
parent : "balloon3”
},
locationMode : "relative",
locationMode_targetId : "clampToGround",
orientationMode : "clampToGround",
orientationMode_targetId : "clampToGround",
scaleMode : "clampToGround",
type : "balloon",
parent : "balloon_relative"
}]
// 2. use JSON to create dynamically create placemark
var myFeature = new KMLPlacemark(myFeatureJSON);
// 3. getting a handle to the object later
var myReference = KHARMA.getKMLElementByID("balloon_relative");

AJAX
var url = 'http://twitter.com/firehose';
var req = new XMLHttpRequest();
req.onReadyStateChange = function () {
! if (req.readyState === 4) {
! ! ! var data = req.responseText;
! ! ! // process the data
! ! }
}
req.open('GET', url, true);
req.send(null);

CSS Media Queries
/* iPhone 4/4s portrait */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}
/* iPhone 4/4s landscape */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}
/* iPhone portrait */
@media screen and (min-device-width: 320px) and (orientation: portrait) {
}
/* iPhone landscape */
@media screen and (min-device-width: 320px) and (orientation: landscape) {
}
/* iPad portrait */
@media screen and (min-device-width: 768px) and (orientation: portrait) {
}
/* iPad landscape */
@media only screen and (min-device-width: 768px) and (orientation: landscape)
{
}

Selectors
// get all the divs with class warning and notice
var elements = document.querySelectorAll('div.warning, div.notice');
// get all the a elements contained by div with id ‘menu’
var elements = document.querySelectorAll('#menu a');

Math3D JS
http://code.google.com/p/earth-api-samples/source/browse/trunk/lib/math3d.js

Zepto
http://zeptojs.com