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

Like this? Share it with your network

Share

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

  • 838 views
Uploaded on

Slides for my presentation at Avega 2011-03-03

Slides for my presentation at Avega 2011-03-03

More 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
838
On Slideshare
838
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