JavaScript for PHP Developers


2012-10-02: GTA PHP User Group

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

What We'll Cover


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

A Little JS History

JavaScript: What Is It Good For?

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

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

Screenshot from Firebug console

JS Language Basics

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']);
        

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

JS Language Basics

Control Structures

JavaScript has pretty much the same control structures as PHP:

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

JS Language Basics

for/in

JS Language Basics

Functions

World DOMination

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

The window and document Objects

Events in JavaScript

COMING SOON

AJAX: Dynamically Updating Your Page

COMING SOON

*/ ?>

jQuery and Why We Need JS Libraries

jQuery

Including jQuery in Your Page






        

jQuery

$ vs. jQuery

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):

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