Ironhack Day 6

JavaScript

1. Example of using an (anonymous) callback function like setTimeout with an asynchronous method:

function init(){
setTimeout(function(){
console.log(’Hi again!’)
}, 8000)
}

init()
console.log(’Hi!’)

// Hi!
// (after 8 sec) Hi again!

2. Using setInterval with an asynchronous method (it calls a function repeatedly with a fixed delayed time between each call):

var i = 10;
var intervalId = setInterval(function() {
if (i > 0) {
console.log(i);
} else {
console.log(”Pop!”);
clearInterval(intervalId);
}

i–;
}, 1000);

// 10
// 9
// 8 etc.
// Pop!

3. When using prototype it’s the instance of the prototype (here the function Car) that has priority over the prototype itself, that’s why below fiat will be red and not blue:

function Car(){
this.color = ”red”
}

Car.prototype.color = ”blue”

var fiat = new Car()

console.log(fiat.color)

// ’red’

4. To speed up your code it’s better to define properties in the prototype instead of defining them in the constructor (=in the function Car):

function Car(){
//this.color = ”red”

}

Car.prototype.color = ”blue”
Car.prototype.wheelsNum = ”4”

var fiat = new Car()

console.log(fiat.color)

var factory = []

for (var i = 0; i < 100; i++) {
factory.push(new Car(”))
}
console.log(factory)

5. In order to make an object be an instanceof another object you have to use both the .call method and prototype:

function Animal (name, owner, sound) {
this.name = name;
this.owner = owner;
this.sound = sound;
}

function Dog (name, owner){
Animal.call(this, name, owner);
this.sound = ”Guau Guau”;
this.humanRelation = ”love”;
}

Dog.prototype = Object.create(Animal.prototype);

var myAnimal = new Animal(”Arya”, ”Josephine”, ”–”);
var myDog = new Dog(”Max”, ”Owen”);

Bootstrap:
1. Remember to add the jquery cdn at the bottom of your html (see https://code.jquery.com/) before the bootstrap.min.js, like this:

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
    <!– Include all compiled plugins (below), or include individual files as needed –>
    <script src=”js/bootstrap.min.js”></script>
  </body>
</html>

2. Customizing Bootstrap: http://getbootstrap.com/customize/

3. Alternatives to Bootstrap:
http://materializecss.com
http://foundation.zurb.com

4. Free Bootstrap themes: https://bootswatch.com/