Very raw notes while building my JS slides - structure, sample materials, notes from blogs and slides, and so on

gistfile1.js

JS Notes Duo


JavaScript:

SO
WPSE
Forums
Koop session
Slideshare


http://snook.ca/archives/javascript/global_variable
http://javascript.about.com/od/reference/a/error.htm
http://rochakchauhan.com/blog/2008/09/25/most-common-javascript-mistakes/
http://demosthenes.info/blog/289/The-Six-Most-Common-Mistakes-Made-In-Writing-JavaScript
http://www.dyn-web.com/tutorials/js_errors.php
http://www.netmechanic.com/news/vol4/javascript_no23.htm
http://corporate.tuenti.com/en/dev/blog/top-13-javascript-mistakes
http://www.rachelappel.com/common-javascript-mistakes-and-pitfalls-you-can-avoid
http://www.webreference.com/programming/javascript/rg31/index.html
http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/
http://net.tutsplus.com/tutorials/javascript-ajax/the-10-javascript-mistakes-youre-making/
http://www.ifadey.com/2011/05/javascript-mistakes-you-must-avoid/
http://christianheilmann.com/2008/02/27/most-common-javascript-mistakes-paul-boag-grilled-me-for-the-boagworld-podcast/
http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/
http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/
http://www.standardista.com/javascript/15-common-javascript-gotchas/
http://programmers.stackexchange.com/questions/88840/common-javascript-mistakes-that-severely-affect-performance
http://net.tutsplus.com/articles/interviews/an-interview-with-david-walsh/
http://www.dynamicsitesolutions.com/javascript/mistakes/
http://www.sitepoint.com/top-10-web-development-mistakes/
http://www.crockford.com/javascript/javascript.html






function outer() {
  var x = 10;
	return function inner() {
		console.log(x);
	}
}

var returnedFunction = outer(); // oddly
returnedFunction(); // output 10

-----------------


Data types:

*number
*string
*boolean
*object
*NaN
*null
*undefined




wp_enqueue_script
Included libraries (like datepicker)
future - http://core.trac.wordpress.org/ticket/21170
They deregister the version of jQuery that ships with WordPress
var vs. globals (globals are in the window object)
functions are objects, global (if not vared) and nestable
jQuery and noConflict:

(function($) { ...
...
... })(jQuery);

WordPress and AJAX

SCRIPT_DEBUG

delegation

namespaces


// hint: caching, speed

The admin_enqueue_scripts passes a $hook argument to the callback function that indicates the page on which the function is being called. This makes it easy to conditionally include the script for a given page.


The second way to do this is to use get_current_screen. This function returns an object that includes information about each page that allows us to retrieve a variety of information about the page that we’re on.


http://codex.wordpress.org/Function_Reference/wp_localize_script

add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}


define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

add_action( "admin_print_scripts-$mypage", 'myplugin_admin_head' );

JavaScript Objects vs. Java Classes
How to instantiate objects
Prototypal vs. Classical Inheritance
Dynamic nature of objects
JavaScript Functions
Functions are Objects
Intro to JSON format
What AJAX means

function are objects!

var f = function(a, b) { return a*b; }
f(2, 3); // 6
f.length // 2

f.call(null, 2, 3) // context, args... null === window, this is THIS :)
f.apply(null, [3, 4]) // context, array of args

function f() { console.log(this.a); }
undefined
f.apply({a:'hello'},[])
hello


// cant have it in PHP either :(
function a() { return 1 }
function a(x) {return x } // second overrides
a(5)
5
a()
undefined
function b(x) { return x; }
undefined
function b() { return 1 } // second overrides
undefined
b(5)
1
b()
1





function Person(name) {
    this.name = name;
    this.get = function () { return this.name }
}

function Hunter(name, weapon) {
    this.weapon = weapon;
    var parent = new Person(name);
    this.get = function() { return parent.get() + "brings to the house " + this.weapon; }
}

var o = new Hunter('John', 'Knife');
o.get()


[21:15:41.002] var t = new Date().getTime(); for (var i=0; i<10000000; i++) ; new Date().getTime() - t;
[21:15:42.069] 1057
[21:15:45.594] var t = new Date().getTime(); for (var i=0; i<10000000; i+=1) ; new Date().getTime() - t;
[21:15:46.492] 885


var collection = document.getElementsByTagName('a');
for ( var i=0, l=collection.length; i<l; i+=1 ) ;


/**
* the only way to create a constructor
*/
function MyClass() {
  this.p = 123; // public, when this is there!
  x = 234; // private, cause X is a G and is not this'ed
//  this.get = function() { return _get() }; // _get context is window!!!!!!!!!!!!!
  this.get = function() { return _get.apply(this); }; // send the proper context to a private fun!
  function _get() { return this.p; } // private function, not this'ed
}
var c = new MyClass(); c.get();

function MyClass(a) {
	
}



function MClass() {
    this.pub = "public";
    priv = "private";
    this.get = function() { return _get(); }
    function _get() { return this.pub; }
}





new Object(); // {} equals

[1,2,3];
new Array(1,2,3);
new Array(5); // b***h please ! 5 empty values

['value1', 'value2', 'value3'].indexOf( value ) > -1 // niiiiiice

if ( execute ) {
	execute();
}
execute && execute();

var myvar = 123;
$('a').on('click', function (myvar) {
	this.rel = myvar;
}.bind(null, [myvar]));

JS constructor

function Dog( name ) {
this.name = name;
this.getName = function () {
   return this.name;
};
|
var f = new Dog('F');
f.getName();

Number('a') === Number('a') // false, NaN != NaN
'' == 0 // false
0 == '' // true
0 == '0' // true
false == 0 // true
null == undefined // true


constructors are functions returning this



globals are accessible in a window. 

3 global:
NaN
Infinity
undefined

global Function, RegEx, Array, String, Number...

testing - Google Chrome, NodeJS/cscript, jsc, rhino

JavaScript was introduced by Netscape in 1995



Array.prototype.slice.call(arguments)

// arguments is not a real array, it's a b***h
function test() {
var arr = Array.prototype.slice.call(arguments);
arr.push(4);
return arr;
}
test(1,2,3);


$('#test').on('click', function () {
	if ( $(this).parent().hasClass('tesdt') {
		$(this).parent().removeClass('tesdt');
	}
});

$('#test').on('click', function () {
	var $this = $(this),
		parent = $this.parent();
	if ( $(this).parent().hasClass('tesdt') {
		$(this).parent().removeClass('tesdt');
	}
});


$('a').on('click', function () {
	alert( this.href ); // alerts the href attr
	alert( $(this).href ); // alerts undefined
	alert( $(this).parent() ); // alerts parent HTMLDomElement
	alert( this.parent() ); // throws error
});


$('#id1 #id2 #id3')

if (true) {
  var x = 5;
}
console.log(x); // 5

only global scope, not blocks


JavaScript may look like Java, smell like Java and even taste a little like Java, but it does not behave like Java
Variables are global in scope
“this” has different meaning based on the invocation type (learn this for your own sake)
Braces do NOT guarantee scope
Functions are first class citizens, not classes (avoid classes, you will set yourself up for disappointment)
Functions are objects, not simply methods to a class
Variables are dynamically typed objects
JavaScript often fails silently (this is for user experience)
Difficult t
o debug (use FireFox & Firebug addon)
Semicolons are optional (bad idea, put them where you want them)
Functions always return values, a value or “undefined”
“new” has some specific assumptions, not simply creating an Object
Cross browser compatibility (use jQuery or GWT to address most issues)


var dog = {
name: 'Sharo',
noise: 'bark'
};

for( var prop in dog ) { // each
  prop
  dog[prop]
}

// namespace
myApp = {};
myApp.stuff = {
init: function(){}
};

myApp = myApp || {};
myApp.azz = myApp.azz || {};

module pattern????? that??????



function addIt(bar) {
  bar = bar || 8; // unless bar is false, 0 ... dafuq! // antipattern
  return bar + 2;
}

function addIt(bar) {
  bar = typeof( bar ) == 'undefined' ? 8 : bar;
  return bar + 2; // shoulda work with false or 0 as well
}


Final: 
Chrome extensions - JS

don't touch the DOM
Cache DOM references in local vars
cache Length
Batch style changes?


IE specific:
• end with quotes '': '', ...
• addEventListener vs attachEvent

if( !window.addEventListener ) {
	window.attachEvent( 'onload', jsonp_event_listener );
} else {
	window.addEventListener( 'load', jsonp_event_listener );
}



handler alternative:

function createHandler( script ) {
   return function () {
      jsonp_event_listener( script );
   }
}

to:

(function( url_script_vars ) {
	var jsonp_handler = function () {
	   jsonp_event_listener( url_script_vars );
	}
	
	if( window.addEventListener ){
		window.addEventListener( 'load', jsonp_handler );
	} else if( window.attachEvent ) {
		window.attachEvent( 'onload', jsonp_handler );
	} else {
		window.onload = jsonp_handler;
	}
})( url_script_vars );


Да ползвам снимките с хората, които купих миналата седмица



xkcd logic
2 guys talking

0. "Why do I need that?"
- screenshots
- ui, logic, UX
- chrome extensions
1. "I'm a PHP developer so I know JavaScript"
-functions
-wtfjs
2. "I'm a WP developer and I know how to use JS"
-enqueue properly
-enqueue to a specific page
-add ajax call

3. "My JS is highly performant"
-selectors
-length

JS references and links

https://speakerdeck.com/daviferreira/javascript-workshop
https://speakerdeck.com/garann/improvisational-javascript
https://speakerdeck.com/stevebest/new-javascript
https://speakerdeck.com/rantav/javascript-advanced
https://speakerdeck.com/ynonperek/javascript-syntax
https://speakerdeck.com/ynonperek/advanced-javascript