JavaScript
•••
var name = "bender";  var model = 22;
var name = ”Bender";var name = ’Bender’;
var names = [”Bender", "Fry", "..."];
var theMagicObject = {    "property1" : "value1",    property2 : 123,    property3 : function(){ return "yes"; }};theMagic...
==!=        +++=     --
true:1 == 1 false:1 === 1
"2" - 1   // = 1"2" + 1   // = 21
function bender(){    ...}var bender = function(){    ...}
var name = function(){    return "Bender";}alert(name);
var name = function(){    return "Bender";}alert(name());
function log(a,b,c){    // Stuff}log.length // 3
function(){    // Jag är en annonym funktion}
function loadProducts(category,callback){     // Do some async work     callback();}loadProducts("Robots",function(){     ...
(function(){    // Jag är en självanropande    // anonym funktion})();
var eat = function(food, beverage){    ...}eat(”pizza”,”beer”) // OK!eat(”pizza”); // OK! ("pizza", undefined)eat(); // OK...
var formatName = new Function(     "firstName",     "lastName",     "company",     "return lastName + ,  + firstName     +...
if
if(...){   for(...){    ...        ...}          }if(...)    for(...){          {    ...        ...}          }
function isBender(model){    return (model === "Bending Unit 22")              ? "Yes!" : "Nooo!";}
var items = {    fry : function(){},    bender : function(){},    drZoidberg: function(){}};for(var item in items){    con...
var items = ["Fry","Bender"                ,"Dr. Zoidberg"];for(var item in items){    console.log(item);}items.forEach(fu...
var model = "Bender";if(typeof robot === "undefined”){    ...}
undefined != "undefined"var undefined = "hello";
var eat = function(food, beverage){    if(food === undefined){        // true    }}eat();
var eat = function(food, beverage){    if(typeof food === "undefined"){         // true    }}eat();
var eat = function(food, beverage){    if(!food){         // true    }}eat();
var avega = {     getOrgNumber: function(){         ...     },     getAddress: function(){         ...     }};avega.getOrg...
var avega = {};avega.companyInfo = {     getOrgNumber: function(){...}};avega.companyInfo.getOrgNumber()
namespace("avega.companyInfo", function(){      // ...});
// vad är this här?avega = {    getOrgNumber: function(){         // vad är this här?    }};avega.companyInfo = {    getOr...
String.prototype.trimDotts = function(){    return this.replace(/./g,"");}var name = "..bender.";name = name.trimDotts();c...
var Dictionary = function(){    this._dictionary = {};    this._count = 0;};Dictionary.prototype.count = function() {    r...
var obj1 = function(){    this.name = "obj1";};obj1.prototype.m1 = function(){    console.log("m1 in " + this.name);};var ...
function save(){    var robot = document.getElementById("robot");    var status = document.getElementById("status");    st...
function someFunction(){    // här kommer vi åt x    var y = 20;}var x = 10;someFunction();// här kommer vi inte åt y
function isBender(model){    if(model === "Bending Unit 22"){        var is = "Yes!";    }else{        var is = "Nooo!";  ...
function fly(to){     var color = "blue";     if(to == "stockholm"){           document.body.style.background = color;    ...
var handleSelection = function(){    var numberOfSelected = 0;    return {        select: function(){             numberOf...
someMethod.call(this, arg1, arg2, ...)                    .call()                       &                   .apply()   som...
var bender = {    getFullName : function(){        return "Bender Bending Rodríguez";    },    logFullName : function(){  ...
•••••
function bender(){}// ligger under window["bender"]      var name = "bender"// ligger under window["name"]
var fly = function(){    // ...}fly();window["fly"]();
<html><head>     <title>Show all products</title>     <link rel="stylesheet" href="products.css"          type="text/css" ...
function timedProcessArray(items, process, callback){     //create a clone of the original     var todo = items.concat(); ...
for(var i = 0; i < document.     getElementsByTagName("input").length; i++){     document          .getElementsByTagName("...
var elements =document.getElementsByTagName("input");for(var i=0, length=elements.length; i<length; i++){    var element =...
var fragment =document.createDocumentFragment();                  *          display: none;
••
http://nwipatriots.com/blog/wp-content/uploads/2009/10/waiting-in-line.jpg
var http = require("http");http.createServer(function (req, res) {    res.writeHead(200, {         "Content-Type" : "text/...
Jag har inte copyright på bilderna, det har:Vem vill bli miljonär - http://odetocode.com/Blogs/scott/archive/2009/03/18/si...
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
Upcoming SlideShare
Loading in...5
×

JavaScript - i och utanför webbläsaren (2010-03-03)

603

Published on

Slides for my presentation at Avega 2011-03-03

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

  • Be the first to like this

No Downloads
Views
Total Views
603
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript - i och utanför webbläsaren (2010-03-03)

  1. 1. JavaScript
  2. 2. •••
  3. 3. var name = "bender"; var model = 22;
  4. 4. var name = ”Bender";var name = ’Bender’;
  5. 5. var names = [”Bender", "Fry", "..."];
  6. 6. var theMagicObject = { "property1" : "value1", property2 : 123, property3 : function(){ return "yes"; }};theMagicObject.property1 // "value1"theMagicObject.property2 // 123theMagicObject.property3() // "yes"theMagicObject["property1"] // "value1"theMagicObject["property2"] // 123theMagicObject["property3"]() // "yes"
  7. 7. ==!= +++= --
  8. 8. true:1 == 1 false:1 === 1
  9. 9. "2" - 1 // = 1"2" + 1 // = 21
  10. 10. function bender(){ ...}var bender = function(){ ...}
  11. 11. var name = function(){ return "Bender";}alert(name);
  12. 12. var name = function(){ return "Bender";}alert(name());
  13. 13. function log(a,b,c){ // Stuff}log.length // 3
  14. 14. function(){ // Jag är en annonym funktion}
  15. 15. function loadProducts(category,callback){ // Do some async work callback();}loadProducts("Robots",function(){ // When the products are loaded});
  16. 16. (function(){ // Jag är en självanropande // anonym funktion})();
  17. 17. var eat = function(food, beverage){ ...}eat(”pizza”,”beer”) // OK!eat(”pizza”); // OK! ("pizza", undefined)eat(); // OK! (undefined, undefined)
  18. 18. var formatName = new Function( "firstName", "lastName", "company", "return lastName + , + firstName + ( + company + )");formatName("Anders","Jönsson","Avega");// => Jönsson, Anders (Avega)
  19. 19. if
  20. 20. if(...){ for(...){ ... ...} }if(...) for(...){ { ... ...} }
  21. 21. function isBender(model){ return (model === "Bending Unit 22") ? "Yes!" : "Nooo!";}
  22. 22. var items = { fry : function(){}, bender : function(){}, drZoidberg: function(){}};for(var item in items){ console.log(item); // item() // items[item]()}
  23. 23. var items = ["Fry","Bender" ,"Dr. Zoidberg"];for(var item in items){ console.log(item);}items.forEach(function(item){ console.log(item);});
  24. 24. var model = "Bender";if(typeof robot === "undefined”){ ...}
  25. 25. undefined != "undefined"var undefined = "hello";
  26. 26. var eat = function(food, beverage){ if(food === undefined){ // true }}eat();
  27. 27. var eat = function(food, beverage){ if(typeof food === "undefined"){ // true }}eat();
  28. 28. var eat = function(food, beverage){ if(!food){ // true }}eat();
  29. 29. var avega = { getOrgNumber: function(){ ... }, getAddress: function(){ ... }};avega.getOrgNumber()
  30. 30. var avega = {};avega.companyInfo = { getOrgNumber: function(){...}};avega.companyInfo.getOrgNumber()
  31. 31. namespace("avega.companyInfo", function(){ // ...});
  32. 32. // vad är this här?avega = { getOrgNumber: function(){ // vad är this här? }};avega.companyInfo = { getOrgNumber: function(){ // vad är this här? }};
  33. 33. String.prototype.trimDotts = function(){ return this.replace(/./g,"");}var name = "..bender.";name = name.trimDotts();console.log(name); // bender
  34. 34. var Dictionary = function(){ this._dictionary = {}; this._count = 0;};Dictionary.prototype.count = function() { return this._count;};Dictionary.prototype.add = function(key, value) { if(this.get(key) === undefined){ this._count++; } this._dictionary[key] = value;};...var dic = new Dictionary();
  35. 35. var obj1 = function(){ this.name = "obj1";};obj1.prototype.m1 = function(){ console.log("m1 in " + this.name);};var obj2 = function(){ var x = new obj2(); this.name2 = "obj2"; x.m1(); // m1 in obj1}; x.m2(); // m2 in obj2obj2.prototype = new obj1(); x.m3(); // m3 in obj1obj2.prototype.m2 = function(){ console.log("m2 in " + this.name2);};obj2.prototype.m3 = function(){ console.log("m3 in " + this.name);};
  36. 36. function save(){ var robot = document.getElementById("robot"); var status = document.getElementById("status"); status.innerHTML = "Saving robot"; saveAsync(robot, function(){ status.innerHTML = "Robot saved"; });}function saveAsync(robot, completeCallback){ // Ajax save for robot completeCallback();}save();
  37. 37. function someFunction(){ // här kommer vi åt x var y = 20;}var x = 10;someFunction();// här kommer vi inte åt y
  38. 38. function isBender(model){ if(model === "Bending Unit 22"){ var is = "Yes!"; }else{ var is = "Nooo!"; } return is; // OK!}
  39. 39. function fly(to){ var color = "blue"; if(to == "stockholm"){ document.body.style.background = color; // ... } Activation object} this (global) arguments ["stockholm"fly("stockholm"); ] to "stockholm" color "blue" Execution context Scope chain Scope chain 0 1 Global object this (global) document (object) fly function ... ...
  40. 40. var handleSelection = function(){ var numberOfSelected = 0; return { select: function(){ numberOfSelected++; }, deselect: function(){ numberOfSelected--; }, getNumberOfSelected: function(){ return numberOfSelected; } };}();handleSelection.select();handleSelection.select();handleSelection.deselect();// Vad returnerar följande: ?handleSelection.getNumberOfSelected();
  41. 41. someMethod.call(this, arg1, arg2, ...) .call() & .apply() someMethod.apply(this, args[])
  42. 42. var bender = { getFullName : function(){ return "Bender Bending Rodríguez"; }, logFullName : function(){ return "Benders full name is: " + this.getFullName(); }};var fry = { getFullName : function(){ return "Philip J. Fry"; }, logFullName : function(){ return "Frys full name is: " + this.getFullName(); }};bender.logFullName(); // Benders full name is: Bender Bending Rodríguezfry.logFullName(); // Frys full name is: Philip J. Fryfry.logFullName.call(bender);// Frys full name is: Bender Bending Rodríguez
  43. 43. •••••
  44. 44. function bender(){}// ligger under window["bender"] var name = "bender"// ligger under window["name"]
  45. 45. var fly = function(){ // ...}fly();window["fly"]();
  46. 46. <html><head> <title>Show all products</title> <link rel="stylesheet" href="products.css" type="text/css" media="all" /></head><body> ...content... <script type="text/javascript" src="products-min.js"></script></body></html>
  47. 47. function timedProcessArray(items, process, callback){ //create a clone of the original var todo = items.concat(); setTimeout(function(){ var start = +new Date(); do { process(todo.shift()); } while (todo.length > 0 && (+new Date() - start < 50)); if (todo.length > 0){ setTimeout(arguments.callee, 25); } else { callback(items); } }, 25);}
  48. 48. for(var i = 0; i < document. getElementsByTagName("input").length; i++){ document .getElementsByTagName("input")[i] .style.visibility = "hidden";}
  49. 49. var elements =document.getElementsByTagName("input");for(var i=0, length=elements.length; i<length; i++){ var element = elements[i]; element.style.color = "red"; element.style.border = "solid 2px red"; element.style.fontStyle = "italic";}
  50. 50. var fragment =document.createDocumentFragment(); * display: none;
  51. 51. ••
  52. 52. http://nwipatriots.com/blog/wp-content/uploads/2009/10/waiting-in-line.jpg
  53. 53. var http = require("http");http.createServer(function (req, res) { res.writeHead(200, { "Content-Type" : "text/plain" }); res.end("Hello Worldn");}).listen(8124, "127.0.0.1");console.log("Server running athttp://127.0.0.1:8124/");
  54. 54. Jag har inte copyright på bilderna, det har:Vem vill bli miljonär - http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspxGott och blandat http://webshop.gottelisa.se/ovrigt/gott-and-blandat.html=== http://thelibeerian.blogspot.com/2010/11/people-cheat-say-it-aint-so.htmlFunktioner http://perro.si/wp-content/uploads/2008/08/bb.gifEnkät http://www.staffanstorp.se/images/18.3ba879f211de50c8d5580005605/enk%C3%A4tifyllande.jpgFunktionsanrop http://ertos.nicta.com.au/research/l4.verified/visual.pmlGråt http://1.bp.blogspot.com/_x7asENDXFm0/TKiGiVU1_RI/AAAAAAAAADQ/EPaYp_9L_Kg/s1600/dawson-crying.jpgClosure citat http://jibbering.com/faq/notes/closures/warning http://www.everestdigitalscanning.com/Everest_Website/Disaster_Services_files/warning_sign.jpgGråt http://www.ralphmag.org/EA/frenchman-crying500x368.gifreflow http://www.wishfulthinking.co.uk/2006/04/24/creative-flow/no shit sherlock http://images.retecool.com/uploads/BasTaart-NoShitSherlock.jpgFinn x, http://www.princeton.edu/~hammett/puzzles/norway_math_test.htmlFry panic, http://tvlowcostquebec.wordpress.com/2008/06/23/advertisers-do-not-panic-in-tv-advertising-the-economic-approach-of-tvlowcost-allows-to-restore-the-%E2%80%9D-marketing-purchasing-power-%E2%80%9D-of-companies/Stop, http://www.worldofstock.com/stock_photos/MES2105.phpDetour http://prayitoff.blogspot.com/2010/11/pray-it-off-111810-turning-speed-bumps.htmlComet http://www.newforestobservatory.com/wordpress/wp-content/gallery/quasarsandother/comet-lulin.jpgV8 http://www.annonsera.se/stockholm-stockholm/fordon-b%C3%A5tdelar-_-tillbeh%C3%B6r/v8-marina-motorer-260-385-hk.htmlFirst class http://blog.asiahotels.com/the-three-most-luxurious-airlines/singapore-airlines/Telefoner http://www.ipadnytt.se/tag/javascript/HTML http://www.techpin.com/cool-html-codes/Important http://en.wikipedia.org/wiki/File:Nuvola_apps_important_blue.svgReflow http://code.google.com/intl/sv-SE/speed/articles/reflow.htmlI have a dream http://bigdaddyseashell.wordpress.com/2008/04/04/early-morning-april-4/Captain obvious http://bostonist.com/2005/05/28/tim_mccarver_still_sucks.phpGodis http://maidies.blogg.se/2010/may/godis.html

×