jQuery - Start

1:  $(document).ready(function() {  
2:    $('#notready').fadeOut(1000);  
3:  });  

1. $() says, "hey, jQuery things are about to happen!"

2. .ready(); is a function in jQuery. It says "hey, I'm going to do stuff as soon as the HTML document is ready!"

JavaScript Basics

1. Object property for creating contact list
2. Access properties of Object
3. Object Constructor with properties and functions
4. Object Array
5. Literal notation for adding methods in Object
6. Loop over properties in Object
7. Using prototype to create method for specific class
8. Inherit properties and methods from parent class
9. Create private property and function for Object

JavaScript - create private property and function for Object

1.Create private property

1:  function Person(first,last,age) {  
2:    this.firstname = first;  
3:    this.lastname = last;  
4:    this.age = age;  
5:    var bankBalance = 7500; // private property which could not be called outside 
6:  }  
7:  // create your Person   
8:  var john = new Person("Guangyuan","Piao",29);  
9:  // try to print his bankBalance  
10:  console.log(john.bankBalance);  // will print undefined

2.Create and call private function

1:  function Person(first,last,age) {  
2:    this.firstname = first;  
3:    this.lastname = last;  
4:    this.age = age;  
5:    var bankBalance = 7500;  
6:    var returnBalance = function() {  
7:     return bankBalance;  
8:    };  
9:    // create the new function here  
10:    this.askTeller = function () {  
11:      return returnBalance;    
12:    }  
13:  }  
14:  var john = new Person('John','Smith',30);  
15:  console.log(john.returnBalance);  
16:  var myBalanceMethod = john.askTeller();  // return function
17:  var myBalance = myBalanceMethod(); // call function
18:  console.log(myBalance);  

JavaScript - Inheritance, inherit properties and methods from parent class

1.Penguin class will inherit properties and classes from Animal class

1:  // the original Animal class and sayName method  
2:  function Animal(name, numLegs) {  
3:    this.name = name;  
4:    this.numLegs = numLegs;  
5:  }  
6:  Animal.prototype.sayName = function() {  
7:    console.log("Hi my name is " + this.name);  
8:  };  
9:  // define a Penguin class  
10:  function Penguin(name){  
11:    this.name = name;  
12:    this.numLegs = 2;  
13:  }  
14:  // set its prototype to be a new instance of Animal  
15:  Penguin.prototype = new Animal();  

JavaScript - using prototype to create method for specific class

1:  function Dog (breed) {  
2:   this.breed = breed;  
3:  };  
4:  // here we make buddy and teach him how to bark  
5:  var buddy = new Dog("golden Retriever");  
6:  Dog.prototype.bark = function() {  
7:   console.log("Woof");  
8:  };  
9:  buddy.bark();  
10:  // here we make snoopy  
11:  var snoopy = new Dog("Beagle");  
12:  /// this time it works!  
13:  snoopy.bark();  

snoopy can also bark since the bark() method is created for Dog class.

JavaScript - loop over properties in Object

1:  var nyc = {  
2:    fullName: "New York City",  
3:    mayor: "Bill de Blasio",  
4:    population: 8000000,  
5:    boroughs: 5  
6:  };  
7:  for(var property in nyc) {  
8:    console.log(property);    
9:  }  

JavaScript - Check Object type & property exist or not

1.Check Object type

1:  var anObj = { job: "I'm an object!" };  
2:  var aNumber = 42;  
3:  var aString = "I'm a string!";  
4:  console.log(typeof anObj); // should print "object"  
5:  console.log(typeof aNumber); // should print "number"  
6:  console.log(typeof aString); // should print "string"  

2.Check property existence

1:  var myObj = {  
2:    name: "Piao Guangyuan"  
3:  };  
4:  console.log( myObj.hasOwnProperty('name') ); // should print true  
5:  console.log( myObj.hasOwnProperty('nickname') ); // should print false  

JavaScript - literal notation for adding methods in Object

1:  var james = {  
2:    job: "programmer",  
3:    married: false,  
4:    speak: function( msg ) {  
5:      console.log("Hello, I am feeling "+msg);  
6:    }  
7:  };  
8:  james.speak("great");  
9:  james.speak("just okay");  

JavaScript - Object Array

 // Our Person constructor  
 function Person(name,age){  
   this.name = name;  
   this.age = age;  
 }  
 // Now we can make an array of people  
 var family = [];  
 family[0] = new Person("alice",40);  
 family[1] = new Person("bob",42);  
 family[2] = new Person("michelle",8);  
 family[3] = new Person("timmy", 6);  
 // loop through our new array  
 for(var i=0;i<family.length;i++){  
   console.log(family[i].name);    
 }  

JavaScript - Object Constructor with properties and functions

 function Rectangle(height, width) {  
  this.height = height;  
  this.width = width;  
  this.calcArea = function() {  
    return this.height * this.width;  
  };   
  this.calcPerimeter = function() {  
   return 2*(this.height+this.width);    
  }  
 }  
 var rex = new Rectangle(7,3);  
 var area = rex.calcArea();  
 var perimeter = rex.calcPerimeter();  

JavaScript - Access properties of Object

1.Use bracket for accessing properties of Object. Do not forget "" for property name within bracket.

1:  var dog = {  
2:   species: "greyhound",  
3:   weight: 60,  
4:   age: 4  
5:  };  
6:  var species = dog["species"];  
7:  var weight = dog["weight"];  
8:  var age = dog["age"];  

2.Use dot notation for accessing properties of Object.

1:  var bob = {  
2:   name: "Bob Smith",  
3:   age: 30  
4:  };  
5:  var susan = {  
6:   name: "Susan Jordan",  
7:   age: 25  
8:  };  
9:  var name1 = bob.name;  
10:  var age1 = bob.age;  
11:  var name2 = susan.name;  
12:  var age2 = susan.age;  

JavaScript - Object property for creating contact list

1:  var friends = new Object();  
2:  friends.steve = {  
3:    firstName : 'Steve',  
4:    lastName : 'Shock',  
5:    number : 13533334444,  
6:    address : ['20','Rahoon']  
7:  };  
8:  friends.bill = {  
9:    firstName : 'Bill',  
10:    lastName : 'Guangyuan',  
11:    number : 13514437556,  
12:    address : ['26','Angues House']  
13:  };  
14:  function list(friends){  
15:    for (var p in friends) {  
16:      console.log(p);    
17:    }  
18:  };  
19:  var search = function (name){  
20:    for(var p in friends){  
21:      console.log(friends[p].firstName);  
22:      if(friends[p].firstName === name){  
23:        console.log(p);  
24:        return friends[p];  
25:      }  
26:    }    
27:  };  
28:  list(friends);  
29:  search('Steve');