Kasia kaaes

kaaes / that_self_ex.js

Created May 19, 2011 14:54

Example of that/self workaround

	var JSobj = function(id) {
	var that = this;
	var date = new Date();

	that.id = 'JSnode_' + id;
	that.element = document.getElementById(id);
	that.createdAt = date.getTime();

	that.element.addEventListener('click', clickCallback, false);

kaaes / bind_ex.js

Created May 19, 2011 14:59

bind() example

	function sum () {
	var s = 0;
	for (var i = 0, len = arguments. length; i < len; i++) {
	s += arguments[i];
	}
	return s;
	}

	// execute function and
	// return 6, context is window

kaaes / simple_this_ex.js

Created May 19, 2011 15:02

basic example of this object

	var a, b, c, d, e;

	a = function(obj) {
	return this;
	}


	// when you call the function in 'function form' 'this' is window object

	a(); // window

kaaes / context_pitfall_ex.js

Created May 19, 2011 15:06

Watch out for context part 1

	// create Logger constructor with few properties
	var Logger = function(id) {
	this.container = document.getElementById(id);
	this.counter = 0;
	}

	// add functionalities with prototype
	Logger.prototype.log = function(msg) {
	this.container.innerHTML = msg ;
	this.counter++;

kaaes / context_pitfall_ex2.js

Created May 19, 2011 15:09

Watch out for context part 2

	var el = document.getElementById('showCounterTrigger');
	el.onclick = logger.getCounter

kaaes / context_pitfall_ex3.js

Created May 19, 2011 15:10

Watch out for context part 3

	var el = document.getElementById('showCounterTrigger');
	el.onclick = function(evt) { logger.getCounter() }

	// if you're operating in ECMA5 environment (webkit or gecko)
	// you can also use bind() (more about bind below)

	el.onclick = logger.getCounter.bind(logger);

	// just remember that every event callback has an event object
	// passed as a first parameter, so be careful when reusing methods

kaaes / context_pitfall_ex4.js

Created May 19, 2011 15:11

Watch out for context part 4

	el.onclick = function(evt) {
	this.style.backgroundColor = '#f00';
	this.style.borderBottom = 'solid 2px blue';
	}

	el2.onclick = function(evt) {
	this.style.backgroundColor = '#ff0';
	this.style.borderBottom = 'dotted 1px green';
	}

kaaes / apply_call_ex.js

Created May 19, 2011 15:14

apply and call example

	el.onclick = function(evt) {
	addStyle.call(this, '#f00', 'solid 2px blue');
	}

	// both will have identical effect

	el.onclick = function(evt) {
	addStyle.apply(this, ['#f00', 'solid 2px blue']);
	}

kaaes / event-loop-example.html

Created June 8, 2011 22:13

JS event loop example - uncomment alerts to see how blocking can stop whole app even if it is asynchronous & event based

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8" type="text/javascript">
	</script>
	<title>Event Loop</title>
	<style type="text/css">
	div {height: 5px; margin-bottom: 3px;}
	</style>

kaaes / add-event-listener.js

Created June 24, 2011 12:50

Event delegation blog post gists

	interface EventTarget {
	void addEventListener(in DOMString type,
	in EventListener listener,
	in boolean useCapture);
	};

	var link = document.getElementById('#myLink');

	// use bubbling:
	link.addEventListener('click', callbackFnForClick, false);