This document provides an overview of JavaScript concepts including variables, data types, objects, functions, conditionals, loops, callbacks, prototypes, this keyword, scope, closures, events, DOM manipulation, and asynchronous programming. It includes code examples to demonstrate these concepts such as defining variables, creating and accessing objects and their properties, writing functions with parameters and return values, if/else statements, for loops, and using callbacks with asynchronous functions.

6. JavaScript

16. •
•
•

17. var name = "bender";
var model = 22;

19. var name = ”Bender";
var name = ’Bender’;

21. var names = [”Bender", "Fry", "..."];

23. var theMagicObject = {
"property1" : "value1",
property2 : 123,
property3 : function(){ return "yes"; }
};
theMagicObject.property1 // "value1"
theMagicObject.property2 // 123
theMagicObject.property3() // "yes"
theMagicObject["property1"] // "value1"
theMagicObject["property2"] // 123
theMagicObject["property3"]() // "yes"

24. ==
!= ++
+=
--

26. true:
'1' == 1
false:
'1' === 1

27. "2" - 1 // = 1
"2" + 1 // = 21

30. function bender(){
...
}
var bender = function(){
...
}

31. var name = function(){
return "Bender";
}
alert(name);

32. var name = function(){
return "Bender";
}
alert(name());

33. function log(a,b,c){
// Stuff
}
log.length // 3

34. function(){
// Jag är en annonym funktion
}

35. function loadProducts(category,callback){
// Do some async work
callback();
}
loadProducts("Robots",function(){
// When the products are loaded
});

36. (function(){
// Jag är en självanropande
// anonym funktion
})();

38. var eat = function(food, beverage){
...
}
eat(”pizza”,”beer”) // OK!
eat(”pizza”); // OK! ("pizza", undefined)
eat(); // OK! (undefined, undefined)

40. var formatName = new Function(
"firstName",
"lastName",
"company",
"return lastName + ', ' + firstName
+ ' (' + company + ')'"
);
formatName("Anders","Jönsson","Avega");
// => Jönsson, Anders (Avega)

42. if

43. if(...){ for(...){
... ...
} }
if(...) for(...)
{ {
... ...
} }

44. function isBender(model){
return (model === "Bending Unit 22")
? "Yes!" : "Nooo!";
}

46. var items = {
fry : function(){},
bender : function(){},
drZoidberg: function(){}
};
for(var item in items){
console.log(item);
// item()
// items[item]()
}

47. var items = ["Fry","Bender"
,"Dr. Zoidberg"];
for(var item in items){
console.log(item);
}
items.forEach(function(item){
console.log(item);
});

49. var model = "Bender";
if(typeof robot === "undefined”){
...
}

50. undefined != "undefined"
var undefined = "hello";

51. var eat = function(food, beverage){
if(food === undefined){
// true
}
}
eat();

52. var eat = function(food, beverage){
if(typeof food === "undefined"){
// true
}
}
eat();

53. var eat = function(food, beverage){
if(!food){
// true
}
}
eat();

56. var avega = {
getOrgNumber: function(){
...
},
getAddress: function(){
...
}
};
avega.getOrgNumber()

57. var avega = {};
avega.companyInfo = {
getOrgNumber: function(){...}
};
avega.companyInfo.getOrgNumber()

58. namespace("avega.companyInfo", function(){
// ...
});

60. // vad är this här?
avega = {
getOrgNumber: function(){
// vad är this här?
}
};
avega.companyInfo = {
getOrgNumber: function(){
// vad är this här?
}
};

62. String.prototype.trimDotts = function(){
return this.replace(/./g,"");
}
var name = "..bender.";
name = name.trimDotts();
console.log(name); // bender

63. 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();

66. 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 obj2
obj2.prototype = new obj1();
x.m3(); // m3 in obj1
obj2.prototype.m2 = function(){
console.log("m2 in " + this.name2);
};
obj2.prototype.m3 = function(){
console.log("m3 in " + this.name);
};

70. 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();

72. function someFunction(){
// här kommer vi åt x
var y = 20;
}
var x = 10;
someFunction();
// här kommer vi inte åt y

73. function isBender(model){
if(model === "Bending Unit 22"){
var is = "Yes!";
}else{
var is = "Nooo!";
}
return is; // OK!
}

75. 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
... ...

78. 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();

80. someMethod.call(this, arg1, arg2, ...)
.call()
&
.apply()
someMethod.apply(this, args[])

81. var bender = {
getFullName : function(){
return "Bender Bending Rodríguez";
},
logFullName : function(){
return "Bender's full name is: " + this.getFullName();
}
};
var fry = {
getFullName : function(){
return "Philip J. Fry";
},
logFullName : function(){
return "Fry's full name is: " + this.getFullName();
}
};
bender.logFullName(); // Bender's full name is: Bender Bending Rodríguez
fry.logFullName(); // Fry's full name is: Philip J. Fry
fry.logFullName.call(bender);
// Fry's full name is: Bender Bending Rodríguez

82. •
•
•
•
•

84. function bender(){}
// ligger under window["bender"]
var name = "bender"
// ligger under window["name"]

85. var fly = function(){
// ...
}
fly();
window["fly"]();

87. <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>

90. 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);
}

92. for(var i = 0; i < document.
getElementsByTagName("input").length; i++){
document
.getElementsByTagName("input")[i]
.style.visibility = "hidden";
}

94. 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";
}

96. var fragment =
document.createDocumentFragment();
*
display: none;

97. •
•

101. http://nwipatriots.com/blog/wp-
content/uploads/2009/10/waiting-in-line.jpg

107. 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 at
http://127.0.0.1:8124/");

120. 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.aspx
Gott och blandat http://webshop.gottelisa.se/ovrigt/gott-and-blandat.html
=== http://thelibeerian.blogspot.com/2010/11/people-cheat-say-it-aint-so.html
Funktioner http://perro.si/wp-content/uploads/2008/08/bb.gif
Enkät http://www.staffanstorp.se/images/18.3ba879f211de50c8d5580005605/enk%C3%A4tifyllande.jpg
Funktionsanrop http://ertos.nicta.com.au/research/l4.verified/visual.pml
Gråt http://1.bp.blogspot.com/_x7asENDXFm0/TKiGiVU1_RI/AAAAAAAAADQ/EPaYp_9L_Kg/s1600/dawson-crying.jpg
Closure citat http://jibbering.com/faq/notes/closures/
warning http://www.everestdigitalscanning.com/Everest_Website/Disaster_Services_files/warning_sign.jpg
Gråt http://www.ralphmag.org/EA/frenchman-crying500x368.gif
reflow http://www.wishfulthinking.co.uk/2006/04/24/creative-flow/
no shit sherlock http://images.retecool.com/uploads/BasTaart-NoShitSherlock.jpg
Finn x, http://www.princeton.edu/~hammett/puzzles/norway_math_test.html
Fry 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.php
Detour http://prayitoff.blogspot.com/2010/11/pray-it-off-111810-turning-speed-bumps.html
Comet http://www.newforestobservatory.com/wordpress/wp-content/gallery/quasarsandother/comet-lulin.jpg
V8 http://www.annonsera.se/stockholm-stockholm/fordon-b%C3%A5tdelar-_-tillbeh%C3%B6r/v8-marina-motorer-260-385-hk.html
First 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.svg
Reflow http://code.google.com/intl/sv-SE/speed/articles/reflow.html
I 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.php
Godis http://maidies.blogg.se/2010/may/godis.html