Your SlideShare is downloading. ×
  • Like
  • Save
JavaScript - i och utanför webbläsaren (2010-03-03)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 554 views
Published

Slides for my presentation at Avega 2011-03-03

Slides for my presentation at Avega 2011-03-03

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
554
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript
  • 2. •••
  • 3. var name = "bender"; var model = 22;
  • 4. var name = ”Bender";var name = ’Bender’;
  • 5. var names = [”Bender", "Fry", "..."];
  • 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. ==!= +++= --
  • 8. true:1 == 1 false:1 === 1
  • 9. "2" - 1 // = 1"2" + 1 // = 21
  • 10. function bender(){ ...}var bender = function(){ ...}
  • 11. var name = function(){ return "Bender";}alert(name);
  • 12. var name = function(){ return "Bender";}alert(name());
  • 13. function log(a,b,c){ // Stuff}log.length // 3
  • 14. function(){ // Jag är en annonym funktion}
  • 15. function loadProducts(category,callback){ // Do some async work callback();}loadProducts("Robots",function(){ // When the products are loaded});
  • 16. (function(){ // Jag är en självanropande // anonym funktion})();
  • 17. var eat = function(food, beverage){ ...}eat(”pizza”,”beer”) // OK!eat(”pizza”); // OK! ("pizza", undefined)eat(); // OK! (undefined, undefined)
  • 18. var formatName = new Function( "firstName", "lastName", "company", "return lastName + , + firstName + ( + company + )");formatName("Anders","Jönsson","Avega");// => Jönsson, Anders (Avega)
  • 19. if
  • 20. if(...){ for(...){ ... ...} }if(...) for(...){ { ... ...} }
  • 21. function isBender(model){ return (model === "Bending Unit 22") ? "Yes!" : "Nooo!";}
  • 22. var items = { fry : function(){}, bender : function(){}, drZoidberg: function(){}};for(var item in items){ console.log(item); // item() // items[item]()}
  • 23. var items = ["Fry","Bender" ,"Dr. Zoidberg"];for(var item in items){ console.log(item);}items.forEach(function(item){ console.log(item);});
  • 24. var model = "Bender";if(typeof robot === "undefined”){ ...}
  • 25. undefined != "undefined"var undefined = "hello";
  • 26. var eat = function(food, beverage){ if(food === undefined){ // true }}eat();
  • 27. var eat = function(food, beverage){ if(typeof food === "undefined"){ // true }}eat();
  • 28. var eat = function(food, beverage){ if(!food){ // true }}eat();
  • 29. var avega = { getOrgNumber: function(){ ... }, getAddress: function(){ ... }};avega.getOrgNumber()
  • 30. var avega = {};avega.companyInfo = { getOrgNumber: function(){...}};avega.companyInfo.getOrgNumber()
  • 31. namespace("avega.companyInfo", function(){ // ...});
  • 32. // vad är this här?avega = { getOrgNumber: function(){ // vad är this här? }};avega.companyInfo = { getOrgNumber: function(){ // vad är this här? }};
  • 33. String.prototype.trimDotts = function(){ return this.replace(/./g,"");}var name = "..bender.";name = name.trimDotts();console.log(name); // bender
  • 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. 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. 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. function someFunction(){ // här kommer vi åt x var y = 20;}var x = 10;someFunction();// här kommer vi inte åt y
  • 38. function isBender(model){ if(model === "Bending Unit 22"){ var is = "Yes!"; }else{ var is = "Nooo!"; } return is; // OK!}
  • 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. 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. someMethod.call(this, arg1, arg2, ...) .call() & .apply() someMethod.apply(this, args[])
  • 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. •••••
  • 44. function bender(){}// ligger under window["bender"] var name = "bender"// ligger under window["name"]
  • 45. var fly = function(){ // ...}fly();window["fly"]();
  • 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. 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. for(var i = 0; i < document. getElementsByTagName("input").length; i++){ document .getElementsByTagName("input")[i] .style.visibility = "hidden";}
  • 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. var fragment =document.createDocumentFragment(); * display: none;
  • 51. ••
  • 52. http://nwipatriots.com/blog/wp-content/uploads/2009/10/waiting-in-line.jpg
  • 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. 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