Prototypes objects constructors the basics

Prototypes is a more efficient way to use methods inside of constructor functions.  It allows you to create methods that can be called for each instance of a particular constructors.

Meaning that:

function Monsters(name) = {
  this.name = name;
  this.health = 100;
  this.takeAHit = function() {
    this.health --;
  }
}

The above takeAHit function has to be run for each time we make a monster.

var bigfoot = new Monsters(bigfoot);
var sharkweek = new Monsters(sharkweek);

if there where thousands of names it would take more computing power and more time call the takeAHit() function for each new name.

Wouldn't it be nice if we could call it once for all of them?

Prototype is what you need!

function Monsters(name) = {
  this.name = name;
  this.health = 100;
  this.takeAHit;
  }
}
Monsters.prototype.takeAHit = function() {
    this.health --;
   }

Constructor Functions

• describes how an object should be created.
• simler objects
• each created object is known as an instance of that object...

This is an example of a Constructor Function.  

function Monster(rank) {  // the "M" Monster tells other its a constructor Function.
  this.rank = rank;  // explains what the function name or rank is
  this.health = 100;  // starting heath is 100
  this.takeHit = function() { // a method that takes damage to the heath 
    this.health--;
  }
  this.isDead = function() {  // when he dies return the health.
    return this.health <= 0;
  }
}

var monster = new Monster("Captain");  // a new instance of the Constructor

var badGuy = new Monster("bigfoot"); // a new instance of the Constructor

Another:


function Dice(sides) {
  this.sides = sides,
  this.roll = function () {
    var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    return randomNumber;
  }
}

Make another Method Calc

Making a calculator isn't so hard.  Lets take a look.

var calculator = {
    sum: 0,
    add: function(value) {
    this.sum += value;
  },
    subtract: function(value) {
    this.sum -= value;
  },
    multiply: function(value) {
    this.sum = this.sum * value;
  },
    divide: function(value) {
    this.sum = this.sum / value;
  },
    clear: function() {
    this.sum = 0;
  },
    equals: function() {
    return this.sum;
  }
}

creating my first method. Math.floor() Math.random()

a method is something we've been using all along.  an example is:

console.log()
console is the object
.log() is the method it prints to the console anything in the ();

another example is:

document.write()
document is the object determined by javascript and the html connected to it.
write() writes info to the html document.

This is an example of writing my first method

var dice6 = { //dice6 is the object name
  sides: 6,  //it has a property with the value set to 6
  roll: function () {  // this is the declared method with an anonymous function()   
    var randomNumber = Math.floor(Math.random() * this.sides) + 1;
// this creates a local scope variable called randomNumber
// it uses some methods to help.  The Math.floor() tells it to round down.
// Math.random()  generates a random number between 0 and .999
// it is multiplied by the amount of sides that has been previously set. At sides: 6 using this.sides.
// we add one to make sure we can use use the full range 1-6
  console.log(randomNumber
  }
}

var dice100 = {
  sides: 100,
  roll: function () {
    var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    console.log(randomNumber);
  }
}

For Loops and For In loops

a for loop lets you iterate through and array or object.

example:

var array = [1, 2, 3, 4];

for (var i = 0; i < array.length; i ++) {
  console.log(i);
}

// this console.logs the placement/key/prop of i in the array 0, 1, 2, 3 not the value of 1, 2, 3, 4;

for (var i = 0; i < array.length; i ++) {
  console.log(array[i]);
}

//this console.logs the value of each key so this array console.logs 1, 2, 3, 4;

the special for in loop is only for arrays;

var obj = { name: 'josh', age: '34', haircolor: 'black', address: {street: '1012 old mountain rd', city: 'Denver', country: 'USA'} } for (var prop in obj) { console.log(prop) }

//this console.logs the keys of the object asking for the name of the key
name
age
haircolor
address



for (var prop in obj) { console.log(obj[prop]) }

//this console.logs the values of the object asking for the object's property.

josh

34

black

Object {street: "1012 old mountain rd", city: "Denver", country: "USA"}

for (var prop in obj) {
  console.log(obj[prop].city)
  //  this iterates through the object values then looks for the value of a key named city
}

Arrays join() turns into string - concat() merges two arrays together - indexOf() find the key index of

The array join method is useful when you want to join the contents in an array in a single string.  Take the following array:

var weekdays = ["mon", "tues", "w", "thu", "fri"];

the .join() method would do the following.

var workDays = weekdays.join(", ");

This joins the array together and adds a ",  " between each value in the array.

concat() is another useful tool in javascript arrays.

concat() join's to arrays together to create one array.  see the following:

var weekends = ["sat", "sun"];

var allDays = weekdays.concat(weekends);

This creates a var allDays = ["mon", "tues", "w", "thu", "fri", "sat", "sun"].

indexOf() works well to find out the position "index" of a given value.

var sat = allDays.indexOf("sat");

This would return 5.

var frat = allDays.indexOf("frat");
This would return -1 because there isn't a fraturday in the list.

Array pop() shift()

if you wanted to remove the last item in an array you would want to use pop() method. This removes the last item from an array but also returns it.

example:

var array = [1, 2, 3];
var last = array.pop([2]);

This removes the last item from the array "3" then save's 3 in the var last.  If you wanted to use it later.

Similarly the shift() method does the same for the beginning of an array.

Arrays Unshift() and Push()

Arrays are one of the most useful ways to store data.  A great way to add data to the beginning of an array is to use the unshift() method.

Lets take a already declared array.

var array = [1, corey, true] ;

Adding to the beginning of the array is as easy as...

array.unshift("danny", false, 15);

This adds "danny", false and 15 to the array in places [0], [1], [2] in the array and moves 1, "corey" and true to places [3], [4], [5] in the array.

If you wanted to add something to end of the array you would use the push() method..

array.push("hello", 99);

This would add "hello" and 99 to the end of the array in places [6] and [7].

Hope this helps.

$(document).ready()

For jQuery to load properly we want to make sure that the document which is the html or the DOM file loads fully first.  Incasing your jQuery in $(document).ready() tells jQuery to hold up and wait its turn.

Here's an example:

//wait till the document file has loaded then executes a function (with no parameters)

$(document).ready(function() {

//print out "Hello" to the console.

  console.log("Hello");

//close

})

You can also do the short hand.

//the (document).ready is optional. 

$(function() {

  console.log("Hello");

})

What is jQuery?

jQuery is a javascript library designed with a fast and light approach to programing in javascript.  It was created by  John Resig in 2006 with the motto of "write less, do more".  jQuery simplifies HTML document traversing, event handing, animation, Ajax interactions and more.

• DOM Manipulation - jQuery makes it easy to traverse HTML elements.  This also makes selecting elements extremely fast and easy.
• Event Handling - jQuery makes events like "clicking the mouse, hover over an item" easy to do in a quick and intuitive way.
• Animations - it comes with a number a animations that are commonly used.  
• Lightweight - jQuery's js file is about 19kb.
• Ajax -  Helps to develop a responsive site feature rich using Ajax.  "I'll find out what this is later"

Find more information at jQuery.

Mastering jQuery by teaching.

Hello World.

I'm in the process of mastering jQuery...

I currently know very little about jQuery but I know that a lot of web developers use it to make coding in javascript easier.  I hope to find out why it's easier and if in fact it is.   All while providing another online resource for Newb's like me.  Sorry in advanced for all the grammatical errors.