JavaScript for PHP Developers

JavaScript for PHP DevelopersEd Finkler@funkatroncoj@funkatron.com

May 18, 2010

#tekX #js4phphttp://joind.in/1564

Wednesday, May 19, 2010

JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010

What is this?

2Wednesday, May 19, 2010

Stop c+p'ing, start writing

A practical overview of JSfor the PHP developer

I'm too dumb for that

NOT CS-oriented

My experiences and best practices

JS devs are kind of dickheads

JavaScript dev is opinionated

History of JavaScript

Brendan Eich

"Mocha"

"LiveScript"

Seemed like a good idea at the time

"JavaScript"

http://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704

ECMAScript

Core JavaScript

aka ECMAScript 3, circa 1999

Baseline is JS 1.5

Hey, I know that!

Dynamically typed

Object-based

But not how you think

Object-oriented

First class, baby!

Functional

Like giving clay to a monkey

Malleable

You mean I don't have to memorize 4,500 function names?

Core is pretty darn small

Core Objects Core Global FunctionsBoolean decodeURINumber decodeURIComponentString encodeURIArray encodeURIComponentObject evalFunction isFiniteRegExp isNaNDate parseFloat

parseInt

Core JS

All the cool stuff!

What's missing?

File i/o

Networking

DB APIs

Yep, the DOM is not part of JavaScript

Please don't leave yet.

So what's it good for?

Please don't leave yet.

So what's it good for?

Asynchronous actions

Like GUI stuff

Browsers!

Web Runtime Platforms!

Dear God

Widget engines!

Server-side platforms

http://nodejs.org/

Node.js

http://narwhaljs.org/

Narwhal

http://code.google.com/p/v8cgi/

Don't quit your day job

SSJS isn't terribly mature

Syntax

Like PHP!

C/Java-like

But they can.

Variable names don't start with '$'

Not dot.

Concatenation with '+'

Not '->'. You will screw this up.

Dot for members. Or []

You will also screw this up.

Always case-sensitive

But you had better always use them

Semicolons are optional

Semicolons!

CODE TIME

"Primitives"

Data Types

Integers and floats

Numbers

Truthy

Booleans

Strings

Not NULL, not Null.

Declared, but no value set. Not the same as null

undefined

That's it.

Other elements

MDC: "Named containers for values"

Objects

All objects

Arrays, Date, RegExp

MDC: "Procedures your application can perform"

Functions

Hang on!

More bleed than PHP

No need for global declaration

Globals automatically available

With or without

Declaring variables

scope maintained

With var

Oops! Automatically global

Without var

window in browsers

Globals are properties ofglobal object

globals!

CODE TIME

This is awesome

Closures

Anything within context of function declaration is fair game

Using a var from outside function

Closures

CODE TIME

Literally

Literals

Right.

Numbers

Booleans

RegExp

Hey there.

['a','r','r','a','y','s'];

Oh snap!

{object:"literals"};

Literals

CODE TIME

Operators

+ , = == === < > ! && ||

Mostly like PHP

Remember, no classes in JS

Does this key exist?

"is X of type Y?"

instanceof

Returns string of core type

typeof

typeof returnstypeof {} "object"typeof function() {} "function"typeof new Function(); "function"typeof true "boolean"typeof new Date(); "object" // not "date"; use instanceoftypeof [1,2,3] "object" // not "array"typeof NaN "number"typeof null "object"typeof undefined "undefined"

Type conversion

Radix is optional, but Douglas Crockford will hate you

parseInt(val, [radix])

Like parseInt, returns NaN if cannot convert

parseFloat(val)

String(obj)

Number(obj)

Boolean(obj)

http://jibbering.com/faq/notes/type-conversion/

Functions

In the procedural tradition

As objects

As constructors

An array, kind of

Function arguments

Fun with functions

CODE TIME

Objects

Or associative arrays

As hashes

As static modules

Objects as modules

CODE TIME

Not a word

As instance-able objects

Just make the object and have a constructor func

No classes

No public, private, protected

No visibility levels

Prototypes & inheritance

Every object has a prototype

Prototype providesattributes of object

Modifying prototype changesall objects that use it

points to constructor function of object

Prototype has .constructor

Prototypes and inheritance

CODE TIME

Kinda suck in JS

Almost a necessary evil

eval()

That again

Malleability

Cookies???

BREAK TIME

JS in the browser

Non-sequential, long-running

Execution model

Single threaded

Oh the humanity

Browser compatibility

Woo wee!

DOM APIs

Words and pictures and movin' stuff!

Elements and events

Trust me

These are terrible

They suck

I'm not going to teach you these

Basically fixes everything

Just use jQuery

DOM manipulation and events

CODE TIME

HTTP interaction

JSON is love

Use JSON2.js

Newer browsers havenative implementations

Web APIs, woooooooooo!

CODE TIME

Resources

Resources:Code

•SpazCorehttp://github.com/funkatron/spazcore

•Underscore.jshttp://documentcloud.github.com/underscore/

•http://delicious.com/funka7ron/javascript

Resources:Web

•Mozilla Dev Center: Code JavaScript Guidehttps://developer.mozilla.org/en/Core_JavaScript_1.5_Guide

•Mozilla Dev Center: Core JavaScript Referencehttps://developer.mozilla.org/en/Core_JavaScript_1.5_Reference

•Eloquent JavaScripthttp://eloquentjavascript.net/

•comp.lang.javascript FAQhttp://jibbering.com/faq/

•Nicholas C. Zakas' Bloghttp://www.nczonline.net/

•John Resig's Bloghttp://ejohn.org/

•http://wtfjs.com/

Resources:Books

•JavaScript: The Definitive GuideDavid Flanagan

•JavaScript: The Good PartsDouglas Crockford

•High-Performance JavaScriptVarious

References

•Mozilla Dev Center: Core JavaScript Guide•Eloquent JavaScript

JavaScript for PHP Developers

Technology

JavaScript for PHP Developers

ASPNET for PHP Developers

什麼是PHP & JavaScript

PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

Caelum html-css-javascript-php

TDD for Javascript developers

Hire php developers | Hire PHP Programmers

Apache Usergrid for JavaScript Developers

Docker for PHP Developers - php[world] 2017

Curso PHP: Básico JavaScript

HelsinkiJS - Clojurescript for Javascript Developers

Webbisauna - ClojureScript for Javascript Developers

Docker for PHP Developers - Madison PHP 2017

HTML Css Javascript Php

Javascript for php developer

JavaScript + PHP

• PHP • JavaScript • Connect for

Hardware for JavaScript Developers

Flex for php developers

The Modern JavaScript Developers Toolbox