JavaScriptJava is to JavaScript as ham is to hamster
• The basic language• The good parts• The bad parts• The salvation
The basic language     Do what I mean
alert(”Hello world”);
function fib(n) {    if (n == 1 || n == 2) {        return 1;    }    return fib(n-1) + fib(n-2);}alert(fib(100));
var burt = new Person();burt.age = 2;burt.father = ”Gustav”;
try {    var input = prompt();    if (input <= 0) {        throw ”Natural plz”;    }    alert(fib(input));} catch (ex) {  ...
var s1 = ”a ‘quoted’ string”;var s2 = ’a ”quoted” string’;var s3 = ”a ‘quoted” string”;
var a1 = [2, 3, 5, 7, 11];var a2 = [”foo”, ”bar”];var a3 = [2, ”foo”, null];
var p = /^[A-Z][a-z]*$/;alert(”Jakob”.match(p));alert(”iPhone”.match(p));
The good partsFirst-class functions, object literals, closures, prototyping                  and dynamic arguments
First-class functions
var burt = new Person();burt.age = 2;burt.father = ”Gustav”;burt.tellAge = function() {    alert(”Age: ” + this.age);}burt...
var p = [2, 3, 5, 7, 11];alert(p.filter(function(x) {  return x & 1 == 0;}));
get(”jsonip.com”, function(x) {  alert(x);});
Object literals
var burt = {    age: 2,    father: ”Gustav”,    tellAge: function() {      alert(”Age: ” + this.age);    },    employees: ...
for (var property in burt) {    alert(property);    alert(burt[property]);}
burt.lookMom = ”a new value!”;alert(Object.keys(burt));alert(Object.values(burt));
var json = {    ”xml”: ”no”,    ”json”: true,    ”numbers”: [1, 2, 3],    ”functions”: false,    ”recursive”: {        ”gu...
Closures
class Counter {    private int x = 0;    public void count() {        return x++;    }}var c1 = new Counter();var c2 = new...
function counter() {    var x = 0;    var f = function() {        return x++;    }    return f;}var c1 = counter();var c2 ...
• C lets us forget stacks, heaps and jumps• Java lets us forget memory management• JavaScript lets us forget creating state
Prototyping
function Animal(name) {    this.name = name;    this.talk = function() {        alert(this.name + ”: huh?”);    }}var a = ...
function Animal(name) {    this.name = name;}Animal.prototype.talk = f() {    alert(this.name + ”: huh?”);}var a = new Ani...
function clone(o) {    function F() {}    F.prototype = o;    return new F();}
var animal = { };animal.talk = function() {    alert(this.name + ": huh?");};var cat = clone(animal);cat.talk = function()...
The bad parts  The bad and the ugly
IE6
The DOM
eval
var sum = eval(”1 + 4”);eval(”var x = 10”);eval(”alert(x + sum)”);
• Opens up the code for injection attacks• Debugging becomes hell• Slow execution
Tricky truthiness
if (x) {    alert(”when?”);}
• Not null• Not undefined• Not false• Not 0• Not the empty string
Missing ”var”
// Style #1function foobar() {    x = 10;}// Style #2function foobar() {    var x = 10;}// Style #3var x;function foobar()...
fs.readFileSync(  sourceDir + "/" + files[i],  encoding = "utf8");
Silly semicolon    insertion
function foobar() {    var x = 1 + 2    return x}
function foobar() {    var x = 1 + 2;    return    x;}
with
with(burt) {    alert(age);    alert(father);}
with(burt) {    age = 3;    foo = ”bar”;}
parseInt
var a = parseInt(”123”);var b = parseInt(”110”, 2);var c = parseInt(”0123”);
Everything is an object  (except when parsing numbers)
alert(x.toString());alert(1.toString());
alert(1.0.toString());
alert(1..toString());
alert((1).toString());
The salvationGood coding practices, common sense & static analysis
Upcoming SlideShare
Loading in …5
×

JavaScript @ CTK

1,098 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,098
On SlideShare
0
From Embeds
0
Number of Embeds
131
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • JavaScript @ CTK

    1. 1. JavaScriptJava is to JavaScript as ham is to hamster
    2. 2. • The basic language• The good parts• The bad parts• The salvation
    3. 3. The basic language Do what I mean
    4. 4. alert(”Hello world”);
    5. 5. function fib(n) { if (n == 1 || n == 2) { return 1; } return fib(n-1) + fib(n-2);}alert(fib(100));
    6. 6. var burt = new Person();burt.age = 2;burt.father = ”Gustav”;
    7. 7. try { var input = prompt(); if (input <= 0) { throw ”Natural plz”; } alert(fib(input));} catch (ex) { alert(”Doh: ” + ex);}
    8. 8. var s1 = ”a ‘quoted’ string”;var s2 = ’a ”quoted” string’;var s3 = ”a ‘quoted” string”;
    9. 9. var a1 = [2, 3, 5, 7, 11];var a2 = [”foo”, ”bar”];var a3 = [2, ”foo”, null];
    10. 10. var p = /^[A-Z][a-z]*$/;alert(”Jakob”.match(p));alert(”iPhone”.match(p));
    11. 11. The good partsFirst-class functions, object literals, closures, prototyping and dynamic arguments
    12. 12. First-class functions
    13. 13. var burt = new Person();burt.age = 2;burt.father = ”Gustav”;burt.tellAge = function() { alert(”Age: ” + this.age);}burt.tellAge();burt.age = 3;burt.tellAge();
    14. 14. var p = [2, 3, 5, 7, 11];alert(p.filter(function(x) { return x & 1 == 0;}));
    15. 15. get(”jsonip.com”, function(x) { alert(x);});
    16. 16. Object literals
    17. 17. var burt = { age: 2, father: ”Gustav”, tellAge: function() { alert(”Age: ” + this.age); }, employees: [”Jakob”, ... ]}var whichOne = prompt();alert(burt[whichOne]);
    18. 18. for (var property in burt) { alert(property); alert(burt[property]);}
    19. 19. burt.lookMom = ”a new value!”;alert(Object.keys(burt));alert(Object.values(burt));
    20. 20. var json = { ”xml”: ”no”, ”json”: true, ”numbers”: [1, 2, 3], ”functions”: false, ”recursive”: { ”guess”: ”Hell yeah!” }}
    21. 21. Closures
    22. 22. class Counter { private int x = 0; public void count() { return x++; }}var c1 = new Counter();var c2 = new Counter();var a = [c1.count(), c1.count(), c2.count()];alert(a);
    23. 23. function counter() { var x = 0; var f = function() { return x++; } return f;}var c1 = counter();var c2 = counter();var a = [c1(), c1(), c2()];alert(a);
    24. 24. • C lets us forget stacks, heaps and jumps• Java lets us forget memory management• JavaScript lets us forget creating state
    25. 25. Prototyping
    26. 26. function Animal(name) { this.name = name; this.talk = function() { alert(this.name + ”: huh?”); }}var a = new Animal(”garfield”);var b = new Animal(”lassie”);alert(a.name);alert(b.talk());
    27. 27. function Animal(name) { this.name = name;}Animal.prototype.talk = f() { alert(this.name + ”: huh?”);}var a = new Animal(”garfield”);var b = new Animal(”lassie”);alert(a.name);alert(b.talk());
    28. 28. function clone(o) { function F() {} F.prototype = o; return new F();}
    29. 29. var animal = { };animal.talk = function() { alert(this.name + ": huh?");};var cat = clone(animal);cat.talk = function() { alert(this.name + ": meow!");}var a = clone(cat);a.name = "garfield";a.talk();
    30. 30. The bad parts The bad and the ugly
    31. 31. IE6
    32. 32. The DOM
    33. 33. eval
    34. 34. var sum = eval(”1 + 4”);eval(”var x = 10”);eval(”alert(x + sum)”);
    35. 35. • Opens up the code for injection attacks• Debugging becomes hell• Slow execution
    36. 36. Tricky truthiness
    37. 37. if (x) { alert(”when?”);}
    38. 38. • Not null• Not undefined• Not false• Not 0• Not the empty string
    39. 39. Missing ”var”
    40. 40. // Style #1function foobar() { x = 10;}// Style #2function foobar() { var x = 10;}// Style #3var x;function foobar() { x = 10;}
    41. 41. fs.readFileSync( sourceDir + "/" + files[i], encoding = "utf8");
    42. 42. Silly semicolon insertion
    43. 43. function foobar() { var x = 1 + 2 return x}
    44. 44. function foobar() { var x = 1 + 2; return x;}
    45. 45. with
    46. 46. with(burt) { alert(age); alert(father);}
    47. 47. with(burt) { age = 3; foo = ”bar”;}
    48. 48. parseInt
    49. 49. var a = parseInt(”123”);var b = parseInt(”110”, 2);var c = parseInt(”0123”);
    50. 50. Everything is an object (except when parsing numbers)
    51. 51. alert(x.toString());alert(1.toString());
    52. 52. alert(1.0.toString());
    53. 53. alert(1..toString());
    54. 54. alert((1).toString());
    55. 55. The salvationGood coding practices, common sense & static analysis

    ×