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!
Server-side development with Node.js
Cross-platform Mobile development
Game Development: Unity 3D
Scripting of desktop apps
- Photoshop
- Processing (ok, not a desktop app, but goes well with 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:

<script type="text/javascript">
  // Say hello world 42 times
  function helloWorld(world) {
    for (var i = 42; --i >= 0;) {
      document.write(i + '. Hello ' + String(world) + '
\n');
    }
  }
</script>

<body onload="helloWorld('you stink');">
  <input type="button" id="mybutton" value="My Button" onclick="helloWord('I love you.');" >

Including a JS file in HTML:
```
            
```
If you're using HTML5, you don't need to specify type="text/javascript"; it's assumed.

JS Language Basics

Comments

Comments in JavaScript:

// 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 operator. But not variables which have been defined with var; they're permanent. (I know: it doesn't make sense to me either.)

JS Language Basics

Reserved Words

A variable name can't be a JavaScript reserved word:

`break`	`else`	`new`	`var`
`case`	`finally`	`return`	`void`
`catch`	`for`	`switch`	`while`
`continue`	`function`	`this`	`with`
`default`	`if`	`throw`
`delete`	`in`	`try`
`do`	`instanceof`	`typeof`

More reserved word info here.

JS Language Basics

Types

Loosely typed, like PHP
3 primitive types:
- numeric
- string
- boolean
"undefined"
null
Regular Expressions
Arrays
Objects

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 = "Rasmus Eich";
var upperName = name.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 1

A number without a fractional part is treated as a base-10 integer, and can have a value between -2⁵³ and 2⁵³. (-9,007,199,254,740,992 and 9,007,199,254,740,992)
A number with a fractional part is treated as a base-10 floating point number, and can have a value between -2³¹ and 2³¹. (-2,147,483,648 and 2,147,483,648)
You can use scientific notation: 1.95e-1 is .195.
Hexadecimals are also accommodated starting with 0x or 0X: 0xAC9F.
Octal numbers are a newer addition, and start with 0: 0127.
The function parseInt() can be used to convert other types to an integer. An optional second parameter specifies the base of the number to be converted (from 2 to 36).
The function parseFloat() will convert other types to a floating point number.

JS Language Basics

Numerics 2

Special Numbers:

Content	Meaning
`Infinity` `Number.POSITIVE_INFINITY` `Number.NEGATIVE_INFINITY`	`Infinity`. Can also represent negative `Infinity` as `-Infinity`. (`1/0` is `Infinity`)
`NaN` `Number.NaN`	Not a Number (`0/0` is `NaN`)
`Number.MAX_VALUE`	Largest representable number (1.7976931348623157e+308)
`Number.MIN_VALUE`	Smallest (closest to zero) number (5e-324)

Demo

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

Can be true or false.
Not the same as "true" or "false".
Like PHP, the Boolean negation operator is !.

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`

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

JS Language Basics

Undefined

Undefined is a variable which has not been assigned a value.
It's not a value, it's a type.

You can test for this 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['computer']);

If it's not a primitive, it's an object.
Objects are mutable.
Objects are containers of properties.
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

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.

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 strings.

Being an untyped language, JS arrays can have elements of any and all types, so you can have arrays within 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, 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.

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.
The document object 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

The `window` and `document` Objects

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.
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

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
Note the missing http in Google's CDN URL: it'll work with both http and https pages.

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 $:
```
            
```
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 $.

jQuery

What a `$` Buys You

jQuery packs a LOT of functionality into one variable. Here's what you get (we'll be looking at examples of each of these in a minute):

Selecting and manipulating so-called "wrapped sets" of elements.
Chaining wrapper methods.
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 element 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.

jQuery

Our First Wrapper Methods

.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.

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.
We also have the ability of assigning a single event handler to multiple events.

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

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

Resources 2

Docs

Mozilla Developer Network JS Documentation
jQuery API Docs
QuirksMode - Peter-Paul Koch's blog about browsers, JavaScript, etc.
Encosia - 3 Reasons to Let Google Host jQuery for You
Closures - From a great series on How JavaScript Objects Work by Helen Emerson

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.
appenTo - Learn JavaScript and jQuery for free.

JavaScript for PHP Developers

2012-10-02: GTA PHP User Group

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

JS Language Basics

Comments

JS Language Basics

Variables

JS Language Basics

Reserved Words

JS Language Basics

Types

JS Language Basics

About Those Primitive Types...

JS Language Basics

Numerics 1

JS Language Basics

Numerics 2

JS Language Basics

Numerics 3

JS Language Basics

Strings

JS Language Basics

Booleans

JS Language Basics

null

JS Language Basics

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

World DOMination

The window and document Objects

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

Resources 1

Tools

Books

Resources 2

Docs

Resources 3

Training and Videos

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

`null`

The `window` and `document` Objects

`$` vs. `jQuery`

What a `$` Buys You