JavaScript for PHP Developers

What We'll Cover

A little History
JS Language Basics
Document Object Model
jQuery Basics

By the time we're done, you'll be able to:

Use Firebug to inspect JavaScript data
Create and manipulate data structures in JavaScript
Use jQuery to:
- manipulate the DOM
- bind functions to events
- interface with your backend system (AJAX)
Prerequisites: intermediate understanding of HTML and CSS.

A Little JS History

Developed by Netscape in May, 1995
Invented by Brendan Eich, in 10 days
1996-7 standard was handed to ECMA (European Computer Manufacturers' Association)
JavaScript is also known as ECMA-262 or ECMAScript

JavaScript: What Is It Good For?

Enhances web pages with behaviour
Widgets: countdown clocks, live Twitter feeds, ads, and MORE!
Access HTML5 API's.
Taking control of pages you browse to: Greasemonkey
Bookmarklets
Server-side development with Node.js
Cross-platform Mobile development
- PhoneGap
- jQuery Mobile
Game Development: Unity 3D
Scripting of desktop apps (i.e. Photoshop)

The JavaScript Developer's Toolbelt

Firefox: other browsers are merely for testing.
Firebug: JavaScript and CSS debugger. Absolutely de rigueur.
Your favourite editor/IDE. Season to taste.

JavaScript: Let's Get Stuck In

JS: Basics

We're concentrating on enhancing web pages with JS.
Where PHP gets consumed on the server, JS is consumed on the desktop, by the browser.
JS can be included in the HTML, or in its own .js file.
When JS is in its own file, it can be cached.
JS syntax looks very much like PHP, without the $ for variables.
Semi-colons are optional at the end of the statement. Most people use them. They are required if you have multiple statements on the same line.

Including JS in Your Page

Including JS directly in HTML, inline and via HTML event handlers:

<script type="text/javascript">
document.write('Hello World!
\n');
</script>

<body onload="alert('now loaded!');">
  <input type="button" value="Click Me" onclick="alert('--Button Click--');" >

Including an external JS file in HTML:

<script type="text/javascript" src="myjsfile.js" ></script>

In a URL, with the special javascript: protocol:
```
Click Me
            
```
Demo
If you're using HTML5, you don't need to specify type="text/javascript"; it's assumed.

JS Language Basics

Comments

Comments in JavaScript, same as PHP:

// Single line comment.

/*
  Multi line comment.
  See? Another commented line.
* /

JS Language Basics

Variables

Variable names can start with an alpha character, dollar sign or underscore. (a-z, A-Z, $, _)
Subsequent characters can be more of the same, plus digits. (0-9)

Declaring variables in JS:

var x;
y = 3;
var z = 'This is a string', q = "This is also a string.";

Like PHP, variable names are case-sensitive.
If you don't use var to declare a variable (like y above), it is created with global scope. Best to always use var.
You can remove a variable with the delete statement.

JS Language Basics

Types

Loosely typed, like PHP
3 primitive types:
- numeric (integer and floating point)
- string
- boolean
"undefined"
null
Objects
Arrays

JS Language Basics

About Those Primitive Types...

There are three built-in objects which are connected to the three primitives:
- Number
- String
- Boolean

These allow you to use your primitives as objects.

var name = "\t Rasmus Eich\t\t ";
var upperName = name.trim().toUpperCase();   // RASMUS EICH

Demo

In this case JS wraps the string primitive in a String object, performs the toUpperCase() method, and discards the object.

JS Language Basics

Numerics 3

Numeric Conversion Table:

Input	Result
`undefined`	`NaN`
`null`	`0` (except IE which returns `NaN`)
`Boolean`	`true` returns `1`; otherwise `0` (except IE which returns `NaN`)
`Number`	No conversion; returns the value
`String`	Integer or float
`Object`	`NaN`

JS Language Basics

Strings

String literals can be bound by single or double quotes.
No variable interpolation.
String concatenation operator is +.
Escape sequences: \t, \n, \\, \/, \' and \".
Unicode characters: \u and four hexadecimal characters.

When a string is "added" in an expression, the result is a string:

var mySum1 = "5" + 3 + 8;   // "538"
var mySum2 = 5 + 3 + "8";   // "88"

Using any operator, other than +, the string is converted to a number:

var myVal1 = "30" - 10;   // 20
var myVal2 = 20 / "2";    // 10
var myVal3 = "10" * 3;    // 30

JS Language Basics

Booleans I

Can be true or false.
Not the same as "true" or "false".
Like PHP, the Boolean negation operator is !.
Like PHP, JS has boolean expression short-circuiting:
- A && B: if A is false, it doesn't bother evaluating B
- A || B: if A is true, it doesn't bother evaluating B
This idiom returns the value of the element on the right of the &&, but only if the value on the left is truthy.
Conversely, the || will return the element on the right, if the element on the left is falsy.

JS Language Basics

Booleans II

toBoolean Conversion Table:

Input	Result
`undefined`	`false`
`null`	`false`
`Boolean`	Value of value
`Number`	`false` if `0` or `NaN`; otherwise, `true`
`String`	`false` if empty; otherwise, `true`
`Object`	`true`

JS Language Basics

`null` and undefined

null is a value you can assign to a variable.
It is different from 0, but both are falsy.

A variable which has not been assigned a value has a type of undefined.
It's not a value, it's a type.

You can test for these like so:

var a = null;
if (a == null) alert('a is null');

var b;
if (typeof(b) == 'undefined') alert('b is undefined');

JS Language Basics

Objects 1

// declaring object with a literal
var myObject = {
  computer: 'MacBook Pro',
  os: 'OSX',
  age: 3,
  "screen-shot": '2012-09-30 screenshot.png'
};

// referencing the object
console.log(myObject.computer);
console.log(myObject['screen-shot']);

If it's not a primitive, it's an object.
Objects are containers of properties.
Objects are mutable.
If the property name is a legal JS variable name, it doesn't need quotes.
We can use object, as well as array, notation to reference properties in the object.
The last property in an object literal cannot have a comma after it.

JS Language Basics

Objects 2

var myObject = {
  computer: 'MacBook Pro',
  os: 'OSX',
  age: 3,
  software: {
    title: 'Firefox', 
    publisher: 'Mozilla', 
    version: 15.0
  }
};

console.log(myObject);
console.log(myObject && myObject.age);
console.log(myObject && myObject.software.title);

Demo

JS Language Basics

Arrays

Arrays are objects with a little bit of extra functionality.
Unlike PHP, JS arrays can only have numericly indexed elements. But, because they're objects, they can have properties added as well. And these can be indexed with string names.

Being an untyped language, JS arrays can have elements of any and all types, so you can have arrays within arrays (AKA ragged arrays), like in PHP.

var arr1 = new Array(10);
var arr2 = new Array(1, 2, 3, 4, 5, 6);
var arr3 = [0, 1, 'I am a string, I am.', function() {alert('the media');}];
arr3.prop1 = 'I am a proper property.';
var num = arr2[3];

JS Language Basics

Control Structures

JavaScript has pretty much the same control structures as PHP:

if/else
for
while
break
continue
for/in (instead of foreach)

There are more, but these will suffice for our purposes.

JS Language Basics

for/in

Used to traverse the properties of an object.

var arr = [1, 2, 3, 4 ,5];
arr.prop1 = 'Yes, properties in arrays.';

for (var prop in arr) {
  console.log('prop: ' + prop + ' - value: ' + arr[prop]);
}

Demo

If you want to traverse the elements of an array (as opposed to its properties), use a for or while loop.
Demo

JS Language Basics

Functions

Functions in JavaScript are first class objects; which means they can be used just like variables, and the values they hold.

We even have function literals, also known as anonymous functions, or lambdas.

function doAdd1(a, b) { return a + b; };

var doAdd2 = function(a, b) { return a + b; };

var myObj = {
  doAdd: function(a, b) {
    return a + b;
  }
}

Code outside of functions is executed as it is encountered and parsed.
Unlike PHP, JS function names are case-sensitive.
Being first class objects, you can store functions in objects and arrays, or pass them as arguments in function calls.

JS Language Basics

Invocation Context

Functions can be invoked in one of four ways:
- as functions
- as methods
- as constructors
- through call() and apply() methods
These are the so-called invocation contexts. Functions can refer to their invocation context by using the this keyword.
Function invocations rarely have a need for this; but it's either the global object, or undefined.
For methods, this refers to the object the method was invoked on.
For constructors (var a = new myFunc();), this refers to the newly created object.
For call() and apply() methods, you get to specify the context yourself. But we won't be getting into these.

The `document` Object
(World DOMination)

The Document Object Model (aka DOM) is the browser's interpretation of your HTML as a tree structure.
The standardized DOM allows JavaScript to manipulate the page elements through the document object, which encapsulates the DOM.
document.getElementById() returns an element based on its id.
The element's innerHTML property can be used to update content.

var el = document.getElementById('myDiv');
el.innerHTML = 'This is my new content';

Demo 1 Demo 2 Demo 3

Before the DOM

When browsers were young, and the DOM hadn't been invented yet, you could output JS values with document.write():
```
document.write('Outputs to page content');
            
```
Demo

AJAX: Dynamically Updating Your Page

COMING SOON

jQuery and Why We Need JS Libraries

Remember that word "standardized" in the World DOMination slide? When it comes to the DOM and JavaScript in browsers... not so much.
JavaScript libraries such as jQuery, dojo and Prototype level the playing field between browsers. They handle the infamous "cross-browser issues", giving us a single consistent interface.
Library developers allocate serious amounts of resources to QA. They test everything, across all browsers, over and over.
They also vastly reduce the amount of code we need to write to achieve amazing effects.
50% of all websites use jQuery. Chances are you'll need to understand it when you tweak someone else's site.
CAUTION: "With great power comes great responsibility":
It's all too easy to bog down your page with just a few lines of jQuery.

jQuery

Including jQuery in Your Page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://code.jquery.com/jquery-latest.js">


<script>window.jQuery || document.write('<script src="/path/to/local/copy/jquery-1.8.2.min.js"><\/script>')

3 ways of including jQuery in your page: 2 CDN's or from the server's local disk.
It's recommended to use a CDN (Content Delivery Network):
- Reduces your bandwidth
- Likely already cached on your user's machine

A couple of interesting side notes:

Check out the missing http in Google's CDN URL: it'll work with both http and https requests.

jQuery

`$` vs. `jQuery`

By default, jQuery defines both $ and jQuery as its main interface. Everything jQuery does, is done through those two, equivalent, variables.

Unfortunately, other libraries (i.e. Prototype) also use $. So we have the .noConflict() utility function to relinquish control of $:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script> 
  $.noConflict();
  (function($) {
    /* My jQuery code, using $. */
  })(jQuery);

<script src="/path/to/Prototype.js">

Even though we give up the $ in the global namespace, we can continue using it in a function scope.
This idiom can be used repeatedly throughout your page. We'll continue using the delightfully concise $ for our jQuery code; but only within the lambda.

jQuery

What a `$` Buys You

jQuery packs a LOT of functionality into one variable. Here's what you get:

Selecting and manipulating so-called "wrapped sets" of elements.
Chaining wrapper methods:
- add or remove CSS classes;
- add or remove HTML content;
- fetch or update a database via AJAX;
- animate page elements
Referencing the wrapped set as an array of elements.
Utility functions. (i.e. $.trim(myString) )
Creating DOM elements from HTML markup.
Plugins.
Document ready handler.

jQuery

The Document Ready Handler

The onLoad event handler waits for everything to be loaded before firing. This includes images, CSS and JS files and widgets, often from remote servers. This can significantly and negatively impact the user experience.
jQuery gives us the Document Ready handler which fires as soon as the HTML structure has been parsed into the DOM. It doesn't wait for images.
```
$(document).ready(function() {
  // my JS code...
});

$(function() {
  // my JS code...
});
            
```

jQuery

Selectors

jQuery leverages CSS's selector mechanism.

It uses its own selector engine, so it overcomes the limitations of older, or non-conforming browsers.

Selector	Results
`$('#myID')`	Selects element with ID `myID`.
`$('.myClass')`	Selects elements with class `myClass`.
`$('p:odd')`	Selects all odd `p` elements.
`$('tr:nth-child(3)')`	Selects the third row of each table.
`$('body > div')`	Selects direct `div` children of `body`.
`$("a[href$='pdf']")`	Selects links to PDF files.
`$('div:has(a)')`	Selects `div`s containing links.

These examples all return a "wrapped set" of elements.

jQuery

Our First Wrapper Methods

You apply wrapper methods to the wrapped set.
.html() allows you to get and set HTML within the wrapped set's elements.
.css() allows you to get and set the wrapped set's elements' CSS values.

.addClass() and .removeClass() add and remove classes from the wrapped set's elements.

$('p:odd')
  .html('This is an odd paragraph.')
  .addClass('odd')
  .css('color', 'green');

Demo

Note the chaining of methods. Each method returns the wrapped set, so we can invoke other methods on it.
Method chaining is an attribute of Fluent Interfaces.

jQuery

Event Handlers

So far our JavaScript and jQuery code has executed as it was parsed, or invoked by functions called on page load.
We may want our code to run when a button is pushed, or a window resized, or scrolled. Or any of a number of events.
Demo
jQuery allows us to assign multiple event handlers to a given event, or a single event handler to multiple events.

blur()	focusin()	mousedown()	mouseup()
change()	focusout()	mouseenter()	resize()
click()	keydown()	mouseleave()	scroll()
dblclick()	keypress()	mousemove()	select()
error()	keyup()	mouseout()	submit()
focus()	load()	mouseover()	unload()

jQuery

Coming Clean with AJAX

When you need to fetch data from your server based on user data or action;
or when you need to update your server based on user data or action;
but you're not ready to request a new page... Then it's a job for AJAX!
jQuery has a number of methods to handle AJAX calls: $.load(), $.get(), $.post()and $.ajax(). They all use $.ajax(). We're going to look at $.get(). Demo

Animation

There are a number of jQuery functions dedicated to animating elements on your page:
- show(), hide(), toggle()
- slideUp(), slideDown(), slideToggle()
- fadeIn(), fadeOut(), fadeTo()
- and animate()
Demo

Resources 1

Tools

JS Bin / JSFiddle: online testing/sharing tools.

Books

JavaScript: The Good Parts - (176 pages) Douglas Crockford
JavaScript: The Definitive Guide - (1100 pages) David Flanagan
Learning jQuery - (428 pages) Karl Swedberg, Jonathan Chaffer

Resources 2

Docs

Mozilla Developer Network JS Documentation
jQuery API Docs
QuirksMode - Peter-Paul Koch's blog about browsers, JavaScript, etc.
Closures - From a great series on How JavaScript Objects Work by Helen Emerson
webplatform.org - A documentation wiki supported by W3C, Adobe, FaceBook, Google, HP, Microsoft, Nokia, Mozilla and Opera. Still in Alpha. You should join and contribute.

Resources 3

Training and Videos

Wat (4:16) - A lightning talk by Gary Bernhardt from CodeMash 2012 (JavaScript section starts at 1:20)
JavaScript at 17: video of Eich's talk 2012-05
Crockford on JavaScript - Yahoo's JS Architect. 8 videos, each over an hour. In depth stuff.
appendTo - Learn JavaScript and jQuery for free.

JavaScript for PHP Developers

2012-11-02: TrueNorth PHP Conference

A. Alfred Ayache, ZCE @notrswebmaster alfred@notoriouswebmaster.com

What We'll Cover

A Little JS History

JavaScript: What Is It Good For?

The JavaScript Developer's Toolbelt

JavaScript: Let's Get Stuck In

JS: Basics

Including JS in Your Page

Including JS in Your WordPress Theme

JS Language Basics

Comments

JS Language Basics

Variables

JS Language Basics

Types

JS Language Basics

About Those Primitive Types...

JS Language Basics

Numerics 3

JS Language Basics

Strings

JS Language Basics

Booleans I

JS Language Basics

Booleans II

JS Language Basics

null and undefined

JS Language Basics

Objects 1

JS Language Basics

Objects 2

JS Language Basics

Arrays

JS Language Basics

Control Structures

JS Language Basics

for/in

JS Language Basics

Functions

JS Language Basics

Invocation Context

The document Object(World DOMination)

Before the DOM

Events in JavaScript

AJAX: Dynamically Updating Your Page

jQuery and Why We Need JS Libraries

jQuery

Including jQuery in Your Page

jQuery

$ vs. jQuery

jQuery

What a $ Buys You

jQuery

The Document Ready Handler

jQuery

Selectors

jQuery

Our First Wrapper Methods

jQuery

Event Handlers

jQuery

Coming Clean with AJAX

Animation

Resources 1

Tools

Books

Resources 2

Docs

Resources 3

Training and Videos

A. Alfred Ayache, ZCE
@notrswebmaster
alfred@notoriouswebmaster.com

`null` and undefined

The `document` Object
(World DOMination)

`$` vs. `jQuery`

What a `$` Buys You