• 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)

on

  • 821 views

Slides for my presentation at Avega 2011-03-03

Slides for my presentation at Avega 2011-03-03

Statistics

Views

Total Views
821
Views on SlideShare
821
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript - i och utanför webbläsaren (2010-03-03) Presentation 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