Installing & Setting up
JavaScript (JS) is a dynamic computer programming language. Install Google Dev Tools to proceed.
JavaScript 101
To include your example.js in an HTML page (usually placed right before
JavaScript (JS) is a dynamic computer programming language. Install Google Dev Tools to proceed.
To include your example.js in an HTML page (usually placed right before
will guarantee that elements are defined when the script is executed):
<script src="/path/to/example.js"></script>
Variables can be defined using multiple var statements or in a single combined var statement. The value of a variable declared without a value is undefined.
- String
- Number
- Boolean
- null (represent the absence of a value, similar to many other programming languages)
- undefined (represent a state in which no value has been assigned at all)
// Creating an object with the constructor:
var person1 = new Object;
person1.firstName = "John";
person1.lastName = "Doe";
alert( person1.firstName + " " + person1.lastName );
// Creating an object with the object literal syntax:
var person2 = {
firstName: "Jane",
lastName: "Doe"
};
alert( person2.firstName + " " + person2.lastName );
Array
// Creating an array with the constructor:
var foo = new Array;
// Creating an array with the array literal syntax:
var bar = [];
If/Else
var foo = true;
var bar = false;
if ( bar ) {
// This code will never run.
console.log( "hello!" );
}
if ( bar ) {
// This code won't run.
} else {
if ( foo ) {
// This code will run.
} else {
// This code would run if foo and bar were both false.
}
}
switch ( foo ) {
case "bar":
alert( "the value was bar -- yay!" );
break;
case "baz":
alert( "boo baz :(" );
break;
default:
alert( "everything else is just ok" );
}
for ( var i = 0; i < 5; i++ ) {
// Logs "try 0", "try 1", ..., "try 4".
console.log( "try " + i );
}
var i = 0;
while ( i < 100 ) {
// This block will be executed 100 times.
console.log( "Currently at " + i );
i++; // Increment i
}
or
var i = -1;
while ( ++i < 100 ) {
// This block will be executed 100 times.
console.log( "Currently at " + i );
}
do {
// Even though the condition evaluates to false
// this loop's body will still execute once.
alert( "Hi there!" );
} while ( false );
// Set foo to 1 if bar is true; otherwise, set foo to 0:
var foo = bar ? 1 : 0;
.length
var myArray = [ "hello", "world", "!" ];
for ( var i = 0; i < myArray.length; i = i + 1 ) {
console.log( myArray[ i ] );
}
.concat()
var myArray = [ 2, 3, 4 ];
var myOtherArray = [ 5, 6, 7 ];
var wholeArray = myArray.concat( myOtherArray );
.join()
// Joining elements
var myArray = [ "hello", "world", "!" ];
// The default separator is a comma.
console.log( myArray.join() ); // "hello,world,!"
// Any string can be used as separator...
console.log( myArray.join( " " ) ); // "hello world !";
console.log( myArray.join( "!!" ) ); // "hello!!world!!!";
// ...including an empty one.
console.log( myArray.join( "" ) );
.pop() and .push()
Extracts a part of the array and returns that part in a new array. This method takes one parameter, which is the starting index:
.reverse()
var myArray = [ "world" , "hello" ];
myArray.reverse(); // [ "hello", "world" ]
.shift()
var myArray = [];
myArray.push( 0 ); // [ 0 ]
myArray.push( 2 ); // [ 0 , 2 ]
myArray.push( 7 ); // [ 0 , 2 , 7 ]
myArray.shift(); // [ 2 , 7 ]
.slice()
Abd adds new ones at the given index. It takes at least three parameters:
var myArray = [ 0, 7, 8, 5 ];
myArray.splice( 1, 2, 1, 2, 3, 4 );
console.log( myArray ); // [ 0, 1, 2, 3, 4, 5 ]
.sort()
It takes one parameter, which is a comparing function. If this function is not given, the array is sorted ascending:
// Sorting with comparing function.
function descending( a, b ) {
return b - a;
}
var myArray = [ 3, 4, 6, 1 ];
myArray.sort( descending ); // [ 6, 4, 3, 1 ]
.unshift()
.forEach()
function printElement( elem ) {
console.log( elem );
}
function printElementAndIndex( elem, index ) {
console.log( "Index " + index + ": " + elem );
}
function negateElement( elem, index, array ) {
array[ index ] = -elem;
}
myArray = [ 1, 2, 3, 4, 5 ];
// Prints all elements to the consolez
myArray.forEach( printElement );
// Prints "Index 0: 1", "Index 1: 2", "Index 2: 3", ...
myArray.forEach( printElementAndIndex );
// myArray is now [ -1, -2, -3, -4, -5 ]
myArray.forEach( negateElement );
Strings are a primitive and an object in JavaScript.
Some methods:
Nearly everything in JavaScript is an object – arrays, functions, numbers, even strings - and they all have properties and methods.
var myObject = {
sayHello: function() {
console.log( "hello" );
},
myName: "Rebecca"
};
myObject.sayHello(); // "hello"
console.log( myObject.myName ); // "Rebecca"
The key can be any valid identifier:
var myObject = {
validIdentifier: 123,
"some string": 456,
99999: 789
};
Can be created in many ways:
// Named function expression.
var foo = function() { ----> function expression (load later)
// Do something.
};
function foo() { ----> function declaration (load first)
// Do something.
}
If you declare a local variable and forget to use the var keyword, that variable is automatically made global.
Immediately -Invoked Function Expression:
(function() {
var foo = "Hello world";
})();
console.log( foo ); // undefined!
JavaScript lets you execute code when events are detected.
Example of code to change a source image:
windows.onload = init;
function init(){
var img = docuemnt.GetEventById("example");
img.src = "example.jpg"
Methods for events:
Closure is one of the main proprieties of JavaScript.
Example of closure for a counter. Normally we would have the code:
var count = 0;
function counter(){
count += 1;
return count
}
console.log(counter()); --> print 1
console.log(counter()); --> print 2
However, in JS we can enclose our counter inside an environment. This is useful for large codes, with multiple collaborations, for example, where we might use count variables more than once:
function makeCounter(){
var count = 0;
function counter(){
count += 1;
return count;
}
return counter; ----> closure holds count!
}
function dog(name, color){
this.name = name;
this.color = color;
}
dog.prototype.species = "canine"
dog.prototype.bark = function{
}
Type Checking with jQuery:
// Checking the type of an arbitrary value.
var myValue = [ 1, 2, 3 ];
// Using JavaScript's typeof operator to test for primitive types:
typeof myValue === "string"; // false
typeof myValue === "number"; // false
typeof myValue === "undefined"; // false
typeof myValue === "boolean"; // false
// Using strict equality operator to check for null:
myValue === null; // false
// Using jQuery's methods to check for non-primitive types:
jQuery.isFunction( myValue ); // false
jQuery.isPlainObject( myValue ); // false
jQuery.isArray( myValue ); // true
Enjoy! This article was originally posted here.