Javascript - The Good, the Bad and the Ugly
-
Upload
thorsten-suckow-homberg -
Category
Technology
-
view
821 -
download
1
description
Transcript of Javascript - The Good, the Bad and the Ugly
![Page 1: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/1.jpg)
Javascript
- Javascript -The Good,
the Bad and the Ugly
![Page 2: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/2.jpg)
Javascript
● Thorsten Suckow-HombergJavascript since 1999Author of conjoon (http://conjoon.com)Trainer and consultant for Javascript and ExtJSSenior Software Developer eyeworkers GmbH,Karlsruhe
@thorstensuckow
![Page 3: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/3.jpg)
Javascript
What is this talk about?
● Javascript● History● The good (a few words)● The Bad (examples)● The Ugly (more examples)
![Page 4: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/4.jpg)
Javascript
„Sometimes language designers make mistakes.“ - Douglas Crockford
http://en.wikipedia.org/wiki/Douglas_Crockford#mediaviewer/File:Douglas_Crockford.jpg
![Page 5: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/5.jpg)
Javascript
History
http://de.wikipedia.org/wiki/Brendan_Eich#mediaviewer/File:BEich.jpg
http://de.wikipedia.org/wiki/Netscape_Communications#mediaviewer/File:Netscape_Logo.svg
http://de.wikipedia.org/wiki/AOL#mediaviewer/File:AOL_Logo.jpg
● created by Brendan Eich, 1995 (in 10 days)
● shipped as „Live Script“ with Netscape Navigator 2.0
● Java Hype to this time: Renamed to JavaScript in NN 2.0B3
● Microsoft adopts JS and introduces it with IE 3.0
● Promotes its usage under the term „Dynamic HTML“
● Standardized as ECMAScript in June 1997
![Page 6: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/6.jpg)
Javascript
What is Javascript, anyway?
● dynamic computer programming language● prototype based scripting● dynamic typing● first-class functions● Supporting:
object orientedimperativefunctional
programming style
![Page 7: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/7.jpg)
Javascript
Java (Syntax)
Scheme (Functions)
Self(PrototypalInheritance)
Perl(Regular
Expressions)
JavaScript
![Page 8: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/8.jpg)
Javascript
Teasing the Good and the Bad
Goodfunctionsloose typing dynamic objectsexpressive literal object notation
Badprogramming model based on global variables
„Everything is an Object.“ - Javascript
http://edndoc.esri.com
![Page 9: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/9.jpg)
Javascript
Teasing the Good and the Bad – The Good
<script type =“text/javascript“>
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
function getDayName(dayNum) {
return days[dayNum];
}
</script>
![Page 10: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/10.jpg)
Javascript
Teasing the Good and the Bad – The Good
<script type =“text/javascript“>
function getDayName(dayNum) {
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
return days[dayNum];
}
</script>
![Page 11: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/11.jpg)
Javascript
Teasing the Good and the Bad – The Good<script type =“text/javascript“>
var getDayName = function() {
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
return function(dayNum) { return days[dayNum]; }
}();
GetDayName(0); // > 'monday'
</script>
![Page 12: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/12.jpg)
Javascript
var otherText = „oh hai!“;var text = „Hello World!“;
console.log(otherText);console.log(text);
// > Oh hai!// > Hello World!
Imperative Approach
http://www.retro-programming.de
![Page 13: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/13.jpg)
Javascript
function otherText() { console.log(„oh hai!“);}
function text() { console.log(„Hello World!“);}
otherText();text();
// > Oh hai!// > Hello World!
Functional Approach
http://www.excel-live.de
![Page 14: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/14.jpg)
Javascript
function Bar(text) { console.log(this.text); console.log(text);}
Bar.prototype = {
text : „oh hai!“
};
var foo = new Bar(„Hello World!“);// > Oh hai!// > Hello World!
Object Oriented Approach
http://www.teachitza.com/delphi/oop.htm
![Page 15: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/15.jpg)
Javascript
… and the DOM, of course.
http://www.technologyuk.net/the_internet/web/document_object_model.shtml
![Page 16: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/16.jpg)
Javascript
Teasing the Good and the Bad
1 + „foo“ // > 1foo
1 - „foo“ // >
![Page 17: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/17.jpg)
Javascript
Teasing the Good and the Bad
1 + „foo“ // > 1foo
1 - „foo“ // > NaN
typeof(NaN)
//>
![Page 18: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/18.jpg)
Javascript
Teasing the Good and the Bad
1 + „foo“ // > 1foo
1 - „foo“ // > NaN
typeof(NaN)
// > „number“
![Page 19: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/19.jpg)
Javascript
Semicolon Insertion
![Page 20: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/20.jpg)
Javascript
Semicolons
„Humans make mistakes. Let's try to detect omitted semicolons and insert them automatically.“- Javascript, 1995
console.log(„foo“);console.log(„bar“)console.log(„oh hai!“);
;
![Page 21: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/21.jpg)
Javascript
function foo() { return { bar : true };}
var bar = foo();console.log(bar);
// > ?
Semicolons
;
![Page 22: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/22.jpg)
Javascript
function foo() { return { bar : true };}
var bar = foo();console.log(bar);
// > undefined
Semicolons
;
![Page 23: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/23.jpg)
Javascript
function foo() { return { bar : true };}
var bar = foo();console.log(bar);
// > undefined
Semicolons
;;
![Page 24: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/24.jpg)
Javascript
function foo() { return { bar : true };}
var bar = foo();console.log(bar);
// > undefined
Semicolons
;;
;
![Page 25: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/25.jpg)
Javascript
function foo() { return { bar : true };}
var bar = foo();console.log(bar);
// > Object {bar:true}
Semicolons
;
![Page 26: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/26.jpg)
Javascript
function foo() { var a = 1 b = 2;}
foo();console.log(a);console.log(b);
Semicolons
;
![Page 27: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/27.jpg)
Javascript
function foo() { var a = 1 b = 2;}
foo();console.log(a);console.log(b);
// > Reference Error// > 2
Semicolons
;
![Page 28: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/28.jpg)
Javascript
Equality Operators
![Page 29: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/29.jpg)
Javascript
0 == '0'
Equality Operators
=
=====
!=!==
![Page 30: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/30.jpg)
Javascript
0 == '0' // true0 === '0'
Equality Operators
=====
!=!==
![Page 31: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/31.jpg)
Javascript
0 == '0' // true0 === '0' // false
0 == ''
Equality Operators
=====
!=!==
![Page 32: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/32.jpg)
Javascript
0 == '0' // true0 === '0' // false
0 == '' // true'' == '0'
Equality Operators
=====
!=!==
![Page 33: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/33.jpg)
Javascript
0 == '0' // true0 === '0' // false
0 == '' // true'' == '0' // false
false == 'false'
Equality Operators
=====
!=!==
![Page 34: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/34.jpg)
Javascript
0 == '0' // true0 === '0' // false
0 == '' // true'' == '0' // false
false == 'false' // falsefalse == '0'
Equality Operators
=====
!=!==
![Page 35: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/35.jpg)
Javascript
0 == '0' // true0 === '0' // false
0 == '' // true'' == '0' // false
false == 'false' // falsefalse == '0' // true
Equality Operators
=====
!=!==
![Page 36: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/36.jpg)
Javascript
'' == false // truefalse == '0' // true'' == '0' // ?
Equality Operators
=====
!=!==
![Page 37: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/37.jpg)
Javascript
'' == false // truefalse == '0' // true'' == '0' // ?
'' => false => '0'
'' == '0' // ?!?!?
Equality Operators
=====
!=!==
![Page 38: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/38.jpg)
Javascript
'' == false // truefalse == '0' // true'' == '0' // ?
'' => false =>'0'
'' == '0' // false
Equality Operators
=====
!=!==
![Page 39: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/39.jpg)
Javascript
Equality Operators
==!=
===!==
Expected '===' and instead saw '=='.
![Page 40: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/40.jpg)
Javascript
Arrays
![Page 41: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/41.jpg)
Javascript
foo = [1, 2, 3, 4];bar = new Array(1, 2, 3, 4);
Arrays
var foo = [];var bar = new Array();
![Page 42: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/42.jpg)
Javascript
foo = [1, 2, 3, 4];bar = new Array(1, 2, 3, 4);
foo[0] = 1;foo[1] = 2;foo[2] = 3;foo[3] = 4;
// > foo.length == 4
Arrays
var foo = [];var bar = new Array();
![Page 43: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/43.jpg)
Javascript
foo = [];
foo[11203] = 1;
// > foo.length == ?
Arrays
var foo = [];var bar = new Array();
![Page 44: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/44.jpg)
Javascript
foo = [];
foo[11203] = 1;
// > foo.length == 11204
Arrays
var foo = [];var bar = new Array();
![Page 45: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/45.jpg)
Javascript
foo = new Array(1, 2);
console.log(foo);
// > ?
Arrays
var foo = [];var bar = new Array();
![Page 46: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/46.jpg)
Javascript
foo = new Array(1, 2);
console.log(foo);
// > [1, 2]
Arrays
var foo = [];var bar = new Array();
![Page 47: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/47.jpg)
Javascript
foo = new Array(1, 2);console.log(foo);
// > [1, 2]
bar = new Array(2);console.log(bar);
// > ?
Arrays
var foo = [];var bar = new Array();
![Page 48: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/48.jpg)
Javascript
foo = new Array(1, 2);console.log(foo);
// > [1, 2]
bar = new Array(2);console.log(bar);
// > [undefined, undefined]
Arrays
var foo = [];var bar = new Array();
![Page 49: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/49.jpg)
Javascript
foo == true // ?
Arrays
var foo = [];var bar = new Array();
![Page 50: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/50.jpg)
Javascript
foo == true // false
Arrays
var foo = [];var bar = new Array();
var txt = '';
if (foo) { txt = 1;} else { txt = 2;}console.log(txt);
![Page 51: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/51.jpg)
Javascript
foo == true // false
Arrays
var foo = [];var bar = new Array();
var txt = '';
if (foo) { txt = 1;} else { txt = 2;}console.log(txt);
// > 1
![Page 52: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/52.jpg)
Javascript
Prototyping
![Page 53: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/53.jpg)
Javascript
var Foo = function() {
};
Foo.prototype.i = 0;Foo.prototype.bar = new Array(0, 1);
var wobble = new Foo;console.log(wobble.i); // 0console.log(wobble.bar[0]); // 0
wobble.i = 1;wobble.bar[0] = 2;console.log(wobble.i); // 1console.log(wobble.bar[0]); // 2
var wibble = new Foo;console.log(wibble.i); console.log(wibble.bar[0]);
// > ?
Prototyping
![Page 54: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/54.jpg)
Javascript
var Foo = function() {
};
Foo.prototype.i = 0;Foo.prototype.bar = new Array(0, 1);
var wobble = new Foo;console.log(wobble.i); // 0console.log(wobble.bar[0]); // 0
wobble.i = 1;wobble.bar[0] = 2;console.log(wobble.i); // 1console.log(wobble.bar[0]); // 2
var wibble = new Foo;console.log(wibble.i, wibble.bar[0]);
// > 0, 2
Prototyping
![Page 55: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/55.jpg)
Javascript
var Foo = function() {
};
Foo.prototype.i = 0;Foo.prototype.bar = new Array(0, 1);
var wobble = new Foo;console.log(wobble.i); // 0console.log(wobble.bar[0]); // 0
wobble.i = 1;wobble.bar[0] = 2;console.log(wobble.i); // 1console.log(wobble.bar[0]); // 2
var wibble = new Foo;console.log(wibble.i, wibble.bar[0]);
// > 0, 2
Prototyping
Foo.prototype.bar
wibble wobble
![Page 56: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/56.jpg)
Javascript
The BigBang Javascript Theory
Season 08 Episode 15: The Viktor Paradoxon
Summary:In this episode, Sheldon defines a Function and its prototype. While Leonard invokes the function and creates a new object of it, Howard changes the prototype. In the meantime, Rajesh relies on Howard's previously created object... Penny just leans back and watches as all hellbreaks loose...Will they ever figure out what happened?
Summary:In this episode, Sheldon defines a Function and its prototype. While Leonard invokes the function and creates a new object of it, Howard changes the prototype. In the meantime, Rajesh relies on Howard's previously created object... Penny just leans back and watches as all hellbreaks loose...Will they ever figure out what happened?
![Page 57: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/57.jpg)
Javascript
var Foo = function() {};
Foo.prototype.i = 0;
var wobble = new Foo;console.log(wobble.i);
Foo.prototype.i = 2;
var wibble = new Foo;
console.log(wobble.i, wibble.i);
// > ?// > ?
Prototyping
![Page 58: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/58.jpg)
Javascript
var Foo = function() {};
Foo.prototype.i = 0;
var wobble = new Foo;console.log(wobble.i);
Foo.prototype.i = 2;
var wibble = new Foo;
console.log(wobble.i, wibble.i);
// > 0// > 2, 2
Prototyping
![Page 59: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/59.jpg)
Javascript
WAT?
![Page 60: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/60.jpg)
Javascript
var Foo = function() {};
Foo.prototype.i = 0;
var wobble = new Foo;console.log(wobble.i);
Foo.prototype.i = 2;
var wibble = new Foo;
console.log(wobble.i, wibble.i);
// > 0// > 2, 2
Prototypingwibble.i === undefined
Foo.prototype.i === undefined
wibble.i
true false
true false
Foo.prototype.iObject.prototype.i === undefined
true false
undefined Object.prototype.i
![Page 61: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/61.jpg)
Javascript
DOM
![Page 62: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/62.jpg)
Javascript
<html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body></html>
DOM
console.log(foo);
// > ?
![Page 63: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/63.jpg)
Javascript
DOM
console.log(foo);
// > <div id=“foo“>
<html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body></html>
![Page 64: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/64.jpg)
Javascript
DOM
console.log(foo);// > <div id=“foo“>
foo.innerHTML = 'bar'
// > <div id=“foo“>bar</div>
<html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body></html>
![Page 65: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/65.jpg)
Javascript
DOM
console.log(foo);foo.innerHTML = 'bar'
var foo = 'bar';
// > ?
<html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body></html>
![Page 66: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/66.jpg)
Javascript
DOM
console.log(foo);foo.innerHTML = 'bar'
var foo = 'bar';
// > TypeError: foo is // undefined
<html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body></html>
![Page 67: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/67.jpg)
Javascript
● Building Ext JS 5 apps with Sencha Architect
● Testing Ext JS 5 applications with Siesta
● Javascript – The good, the bad and the ugly & Improving Ext JS app performance.
● Optimizing your current Ext JS applications for touch and tablets
● Building Custom UI Components With Ext JS 5
● Delivering a great user experience with Ext JS 5
● How to secure your data with Sencha Space
2014/12/02 Karlsruhe, Germany
http://senchaday.de
![Page 68: Javascript - The Good, the Bad and the Ugly](https://reader033.fdocuments.us/reader033/viewer/2022042614/558d24e7d8b42a86538b45d2/html5/thumbnails/68.jpg)
Javascript
Thank You!