Javascript, Do you speak it!

JavaScriptDo you speak it!

Tuesday, August 2, 2011

!"#$%&'(&'&)**+,&-*.%/012%*3%*4&5#663*78(9::;#%7/<=$&>:"#$%&'(&'&)*

“The world’s most

misunderstood

programming language”

We’ll talk about

why JavaScript is the most misunderstood programming language

Object Oriented Programming in JavaScript

function scope, closures, circular references

making the web a little faster

JavaScript

aka Mocha

aka LiveScript

aka JScript aka ECMAScript

Java... Script?

somehow related to Java?

maybe a subset?

less capable interpreted version of Java?

Java... Script?

developed by Netscape in 1997 (vs. 3.0 in 1999)

Java prefix intended to create confusion

JavaScript is not interpreted Java

Design errors

overloading “+” means both addition and string concatenation with type conversion

error-prone “with” statement

reserved word policies are much too strict

semicolon insertion was “a huge mistake”

1 + “1” = ?1 + +”1” = ?

Bad implementations

earlier implementations were buggy

embedded horribly in browsers

did not respect the ECMA standard

Evolution

first versions of JavaScript were quite weak

no exception handling, inner functions

in its present form, it’s a full OOP language

ECMAScript 5.1

Overview

types and operators, core objects, methods

does not have classes, but this functionality is accomplished with object prototypes

functions are objects (and can be passed around as parameters)

(Loosely) TypesNumber

String

Boolean

Object (Function, Array, Date, RegExp)

Undefined

typeofinstanceof

Lisp in C’s clothing

C-like syntax (curly braces, for statement...)

appears to be a procedural language

it’s actually a functional language!

Haskell vs. JSpalindr :: [Int] -> Boolpalindr [] = Truepalindr [x] = Truepalindr xs = (head xs == last xs) && palindr (tail (init xs))

function palindr(xs) { var i, len = xs.length; for (i = 0; i < len / 2; i++) if (xs[i] !== xs[len - i - 1]) return false;

return true;}

Objects

JavaScript is fundamentally about objects

usually implemented as hashtables

objects are created using constructors

use a namespace for them (don’t modify objects you don’t own)

use JS sugar: var obj = {}; and var arr = [];

polymorphism

encapsulation

inheritance

abstractization

class Dog { public string name = “”; public int yearsOld = 0;

void bark(int times); void bark(float volume); void sleep();}

class Pudel : Dog { public int cuteness = 5;}

Dog pinky = new Dog();Dog leyla = new Pudel();

Objects in JavaScriptMyNamespace.Dog = function(){ this.name = “”; this.yearsOld = 0;};

MyNamespace.Dog.prototype = { bark: function(param){ }, sleep: function(){ }};

var pinky = new Dog();var leyla = new Dog();leyla.cuteness = 5;

Objects in JavaScriptMyNamespace.Dog = function(){ this.name = “”; this.yearsOld = 0;};

MyNamespace.Dog.prototype = { bark: function(param){ }, sleep: function(){ }};

var pinky = new Dog();var leyla = new Dog();leyla.cuteness = 5;

no private members?

Closuresfunction foo(a, b){ function bar() { return a + b; }

return bar();}

function foo2(a, b){ function bar(c) { return a + b + c; }

return bar;}

var res1 = foo(5, 2);var res2 = foo2(5, 2);

var res3 = res2(3);

Private membersMyNamespace.Dog = function(){ var name = “”; var yearsOld = 0;

this.bark = function(param){ if (“Number” === typeof param) { } else { } }; this.sleep = function(){ };};

var pinky = new Dog();

Private membersMyNamespace.Dog = function(paramName, paramYearsOld){ var name = paramName; var yearsOld = paramYearsOld;

this.bark = function(param){ }; this.sleep = function(){ };

get nrYearsOld(){ return yearsOld; };};

var pinky = new Dog();console.log(pinky.nrYearsOld);

Why is JavaScript slow?

Bad compilation?

No compilation!*

*yes, interpreters are a lot smarter these days, but..

Scope chainsfunction scope1(){ var elem2;

function scope2(){ var elem2; function scope3(){ var elem3; var func = window.alert;

return { something: elem4, somethingElse: elem5 } } }}

Memory leaks

function leakMemory(){ var elem = somethingThatOccupiesLotsOfMemory; function inner(){ }; return inner;}

var res1 = leakMemory();var res2 = leakMemory();

Circular references

function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };}

Circular references

function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };

elem = null;}

Circular references

function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };

return elem;}

Circular references

function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ }; try { return elem; } finally { elem = null; }}

Scope bindingfunction scopeBinding(){ this.elem = {}

function addMemberToElem(){ this.elem.newProperty = 5; // fail };

addMemberToElem();}

Scope bindingfunction scopeBinding(){ this.elem = {};

function addMemberToElem(){ this.elem.newProperty = 5; };

addMemberToElem.call(this);}

function addMemberToElem(propertyValue){ this.elem.newProperty = propertyValue; };

addMemberToElem.call(this, 5);}

var addMemberToElem = function(propertyValue){ this.elem.newProperty = propertyValue; }.bind(this);

addMemberToElem(5);}

“But why should I do OOP with JavaScript?”

?Tuesday, August 2, 2011

Javascript, Do you speak it!

Technology

Transcript of Javascript, Do you speak it!

JavaScript Architecture: The Front and the Back of It

JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,

Introduction To JavaScript. Putting it Together (page 11) All javascript must go in-between the script tags. All javascript must go in-between the script.

REQUENTLY SKED UESTIONS€¦ · speak Spanish also speak English, “well” or “very well.” 40% do not speak English “well” or do not speak it at all. We welcome feedback

JavaScript, HTML, DOM. Java vs JavaScript "When Java applets failed, JavaScript became the 'Language of the Web' by default. [...] It is unfortunate that.

JavaScript - Optimising Where it Hurts (Jake Archibald)

Aplikasi IT II (Javascript & HTML)

JavaScript Enlightenment - Buffalo State College...JavaScript code. It was not written to distinguish the good features of the JavaScript language from the bad. It is not meant to

Accelerated JavaScript: How to Access the GPU Without ...on-demand.gputechconf.com/...accelerated-javascript... · Any valid JavaScript function provided it has no side effects. —Might

Speak It and Believe It

It allow that these flowers speak by me

Learning Javascript while working with Brython What it is ...2013.es.pycon.org/media/Brython_PyConES2013.pdf · Learning Javascript while working with Brython What it is Brython?

It Pays to Speak English Like a Native

Italian, do you speak it?

[SoftServe IT Academy] JavaScript Forms

NOW IT IS TIME TO SPEAK ENGLISH

Loading JavaScript: Even a caveman can do it

Geek Speak Glossary a Managers Guide to IT Terminology

JavaScript - edeleastar.github.ioedeleastar.github.io/design-patterns/topic11/pdf/a-javascript.pdf · Embracing JavaScript • JavaScript looks like a toy language! • It has a lot

Stop it at the start. Speak up!