JavaScript for PHP
developers
The Good Parts
Karsten Dambekalns <karsten@typo3.org>
Freitag, 15. Mai 2009

What this is about
the JavaScript language
not DOM
not browsers
not JS frameworks
not website building
Freitag, 15. Mai 2009

Am I qualified?
Probably not, when it comes to JS
Absolutely when it comes to PHP
Freitag, 15. Mai 2009

My JS background
First JS usage in the days of NN4
Used DynAPI, modified it
Saw alert() fix timing issues in browsers
Was happy when I did not have to use
JavaScript anymore
Thought I would never touch it again
Freitag, 15. Mai 2009

In JavaScript, there is
a beautiful, elegant,
highly expressive
language...
Freitag, 15. Mai 2009

...that is buried under
a steaming pile of
good intentions and
blunders.
Douglas Crockford
Freitag, 15. Mai 2009

Grammar
Freitag, 15. Mai 2009

Names
Names can be chosen freely
Some words are reserved, most of them not
used in JavaScript, though
Some word should have been reserved:
NaN, Infinity, undefined
Freitag, 15. Mai 2009

Numbers
Only one type, 64 bit floating point internally
Numbers have methods
(Most things in JavaScript are objects)
Freitag, 15. Mai 2009

Strings
16 bit Unicode, as such somewhat limited
Strings have methods and properties
toUpperCase(), length
Concatenation is done with +, as is addition
(Beware of errors as a result of this!)
Freitag, 15. Mai 2009

var
Most confusing for me was var – it seemed to
make no difference most of the time
Inside a function var defines a function’s
private variables
Otherwise variables will be globally accessible!
Freitag, 15. Mai 2009

Type issues
typeof returns a string with a type
For arrays and null it returns ‘object’
typeof NaN === ‘number’ // true!
undefined and NaN are global variables – you
can change their values
Freitag, 15. Mai 2009

Functions
Freitag, 15. Mai 2009

Basics
Functions are objects, they can be
stored in variables, arrays, objects
passed as arguments and returned
Functions can have methods (they are objects!)
Freitag, 15. Mai 2009

Defining functions
JavaScript has a function statement and a
function expression:
function foo() {}
means about the same as
var foo = function foo() {}
Remember: functions are values
Freitag, 15. Mai 2009

Closure
Inner functions can access parameters and
variables of the context in which they are
created
This can be used
to protect variables against manipulation
to keep values over function calls
Freitag, 15. Mai 2009

var myObject = function () {
var value = 0;
return {
increment: function (inc) {
value += typeof inc === ‘number ? inc : 1;
}
getValue: function () {
return value;
}
}();
Freitag, 15. Mai 2009

Objects
Freitag, 15. Mai 2009

Basics
Numbers, strings, booleans, null, undefined are
simple types
Everything else is an object: arrays, functions,
regular expressions
Objects have properties with name and value
Objects are class free
Freitag, 15. Mai 2009

Object literals
Very cool way of creating objects, confusing if
seen for the first time (no new?!)
var flight = {
airline: ‘FLOW Flights’,
number: 3,
captain: { ... }
}
Freitag, 15. Mai 2009

The new statement
new creates an object that inherits from the
operand, then calls the operand with the
created object bound to this
If the operand customizes the object but you
forgot new, you change global variables!
If you use new, make constructor method
names UpperCamelCase
Freitag, 15. Mai 2009

Inheritance
Objects inherit from objects, no classes
Prototypal inheritence allows to augment
existing objects during runtime:
Foo.prototype.bar = function () { ... }
Even built-in objects can be enhanced
Local properties hide inherited ones
Freitag, 15. Mai 2009

Arrays
Freitag, 15. Mai 2009

Basics
Arrays can be created with array literals:
var data = [‘one’, ‘two’, ‘three’];
The length property of an array
is the largest integer property name +1
can be set and thus cut off arrays at the end
Freitag, 15. Mai 2009

Array or Object?
Simple rule for what to use:
When property names are small sequential
integers, use an array. Otherwise an object.
Hard to find out what you have:
You need to define a useful is_array method
yourself.
Freitag, 15. Mai 2009

Awful & bad parts
Freitag, 15. Mai 2009

Semicolon inerstion
JavaScript tries to fix programs by inserting
semicolons – do not rely on that!
What does this return?
return
{
status: true
};
Freitag, 15. Mai 2009

parseInt
parseInt(’16’) == parseInt(’16 tons’) == 16
parseInt(’08’) returns 0 because it assumes
octal numbers
Always provide the radix parameter to parseInt
Freitag, 15. Mai 2009

Bitwise operators
Avoid them if you think you gain speed
All numbers are floating point, so bitwise
operators convert to integer and back
Freitag, 15. Mai 2009

Read this!
JavaScript: The Good Parts
Douglas Crockford
O’Reilly
Freitag, 15. Mai 2009

Thanks!
Freitag, 15. Mai 2009