JavaScript Basics: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 2: | Line 2: | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<head> | <head> | ||
<title>Test</title> | |||
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> | |||
<script src="spectra.js" type="text/javascript" ></script> | |||
</head> | </head> | ||
</source> | </source> | ||
| Line 22: | Line 22: | ||
== Arrays == | == Arrays == | ||
Arrays are special objects that get their methods from <code>Array.prototype</code>. | Arrays are special objects that get their methods from <code>Array.prototype</code>. | ||
< | <source lang="javascript"> | ||
var my_array = []; // make a new empty array | var my_array = []; // make a new empty array | ||
var my_array = [1, 4, 2]; | var my_array = [1, 4, 2]; | ||
| Line 32: | Line 32: | ||
my_array.reduce(function(total, currentValue, index, array){ return total += currentValue;}) | my_array.reduce(function(total, currentValue, index, array){ return total += currentValue;}) | ||
// 7 | // 7 | ||
</ | </source> | ||
== Objects == | == Objects == | ||
< | <source lang="javascript"> | ||
var new_object = {}; // make a new empty object | var new_object = {}; // make a new empty object | ||
new_object.name = "Bill"; // create a property | new_object.name = "Bill"; // create a property | ||
| Line 43: | Line 43: | ||
// value is my_object[key] | // value is my_object[key] | ||
} | } | ||
</ | </source> | ||
== Functions == | == Functions == | ||
Functions are special objects that get their methods from <code>Function.prototype</code>. | Functions are special objects that get their methods from <code>Function.prototype</code>. | ||
< | <source lang="javascript"> | ||
var adder = { | var adder = { | ||
x: 1, y: 2, | x: 1, y: 2, | ||
| Line 56: | Line 56: | ||
addx10 = adder.add.bind({x:10, y:20}) | addx10 = adder.add.bind({x:10, y:20}) | ||
addx10() // 30 | addx10() // 30 | ||
</ | </source> | ||
== Constructors == | == Constructors == | ||
< | <source lang="javascript"> | ||
function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) { | function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) { | ||
this.color = theColor; | this.color = theColor; | ||
| Line 78: | Line 78: | ||
var mango = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]); | var mango = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]); | ||
</ | </source> | ||
== Counter Example == | == Counter Example == | ||
< | <source lang="javascript"> | ||
function Counter() { | function Counter() { | ||
this.things = {}; // name -> count | this.things = {}; // name -> count | ||
| Line 101: | Line 101: | ||
var myCounter = new Counter(); | var myCounter = new Counter(); | ||
</ | </source> | ||
== Prototypes == | == Prototypes == | ||
Every object has a <code>prototype</code> property. This can be used to add attributes or methods after the constructor has been defined: | Every object has a <code>prototype</code> property. This can be used to add attributes or methods after the constructor has been defined: | ||
< | <source lang="javascript"> | ||
Fruit.prototype.peeled = false; | Fruit.prototype.peeled = false; | ||
Fruit.prototype.peel = function() { | Fruit.prototype.peel = function() { | ||
this.peeled = true; | this.peeled = true; | ||
} | } | ||
</ | </source> | ||
== Closures == | == Closures == | ||
Offers a way to hide data inside an object: | Offers a way to hide data inside an object: | ||
< | <source lang="javascript"> | ||
function createIncrementer(){ | function createIncrementer(){ | ||
var i = 0; // i is not accessible outside | var i = 0; // i is not accessible outside | ||
| Line 125: | Line 125: | ||
obj = createIncrementer(); | obj = createIncrementer(); | ||
obj.increment(); obj.increment(); obj.increment(); // 1, 2, 3 | obj.increment(); obj.increment(); obj.increment(); // 1, 2, 3 | ||
</ | </source> | ||
== Exceptions == | == Exceptions == | ||
< | <source lang="javascript"> | ||
function noEven(num){ | function noEven(num){ | ||
if (num % 2 == 0){ | if (num % 2 == 0){ | ||
| Line 145: | Line 145: | ||
} | } | ||
} | } | ||
</ | </source> | ||
Revision as of 18:48, 21 April 2015
Link to external Javscript file
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="spectra.js" type="text/javascript" ></script>
</head>
Types
The built-in types are string, number, boolean, null, undefined, object.
Use typeof some_var to get the type.
The following are considered false: false, 0, "", null, undefined, NaN.
Strings
" Hello ".trim() // "Hello"
Arrays
Arrays are special objects that get their methods from Array.prototype.
var my_array = []; // make a new empty array
var my_array = [1, 4, 2];
my_array.forEach( function(element){
// do something with element
}
my_array.filter(function(i){return i % 2 == 0}); // [4, 2] only keeps even numbers
my_array.map(function(i){return i*i}); // [1, 16, 4]
my_array.reduce(function(total, currentValue, index, array){ return total += currentValue;})
// 7
Objects
var new_object = {}; // make a new empty object
new_object.name = "Bill"; // create a property
new_object["name"] = "Bill"; // same thing
for (var key in my_object){ // iterate over an object
// do something with key
// value is my_object[key]
}
Functions
Functions are special objects that get their methods from Function.prototype.
var adder = {
x: 1, y: 2,
add: function(){return this.x + this.y;}
}
adder.add() // 3
adder.add.apply({x:2, y:4}) // 6
addx10 = adder.add.bind({x:10, y:20})
addx10() // 30
Constructors
function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {
this.color = theColor;
this.sweetness = theSweetness;
this.fruitName = theFruitName;
this.nativeToLand = theNativeToLand;
this.showName = function () {
console.log("This is a " + this.fruitName);
}
this.nativeTo = function () {
this.nativeToLand.forEach(function (eachCountry) {
console.log("Grown in:" + eachCountry);
});
}
}
var mango = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]);
Counter Example
function Counter() {
this.things = {}; // name -> count
this.add = function (name){
if (name in this.things){
this.things[name]++;
} else {
this.things[name] = 1;
};
};
this.getCount = function(name){
if (name in this.things){
return this.things[name];
} else {
return 0;
};
};
};
var myCounter = new Counter();
Prototypes
Every object has a prototype property. This can be used to add attributes or methods after the constructor has been defined:
Fruit.prototype.peeled = false;
Fruit.prototype.peel = function() {
this.peeled = true;
}
Closures
Offers a way to hide data inside an object:
function createIncrementer(){
var i = 0; // i is not accessible outside
return {
increment: function(){
return ++i;
}
};
}
obj = createIncrementer();
obj.increment(); obj.increment(); obj.increment(); // 1, 2, 3
Exceptions
function noEven(num){
if (num % 2 == 0){
throw {
code: 'even_number',
message: 'This function cannot be called with even numbers'
};
}
}
function passNumber(num){
try {
noEven(num);
} catch (e){
console.log(e.code+':'+e.message);
noEven(num+1);
}
}