Javascript 学习笔记1

所有有“注意”的地方都是曾犯过的错误，要Ctrl+F搜索出来反复强化。

了解几个固有功能：

   1. myString.substring(1,2);	//extract substring
   2. confirm("Do you want to continue?"); //ask user for confirm
   3. prompt("What's your age?");	//ask user for type in
   4. console.log("Hello worldd!");	//Print out the content
   5. var myVariable; 			//declare a variable
   6. declare a function:
         //声明一个函数：
   var myFunktion = function(input_num){
   var val = input_num/3;
   console.log(val);
   };


  // use myFunktion:
  myFunktion(6);


  //又如：========
  var greeting = function(name){
    console.log("Great to see you," + " my dear " + name);
    };
  greeting("sonictl");


===========================
    7. 声明一个空数组：
       var hits = [];

    8. 关于数组和string的访问： 
            var myName = "Emily"; //myName[0] = "E"  用数组的视角访问String中的字母
            var StrArr = ["Bear","Panda"];  //StrArr[0] = "Bear"  用数组的视角访问数组中的成员
    9. 关于text.substring(i,i+length) 犯的错误： text.substring(i,length); ×
 
    10.  var i = 5;
          do{
            i--;
            }
         while(i)    //this is how "do ... while... " works.

    11.  switch(input){  
             case "0":
                console.log("No dog");
                break;  
             case "1":
                console.log("one dog");
                break;
		  
             default:
                console.log("too many dogs!");
                break;
              }
    12. 声明一个Object:
        var myObj = {
            name: "ltcinos",
            age:  28,
            gender: "male",
        }
    13. 
There are two ways to create an object: using object literal notation (which is what you just did) and using the object constructor.
Literal notation is just creating an object with curly braces, like this:
   var myObj = {
       type: 'fancy',		//注意是 : 而不是 =, 但是vav = new Object(); 之后的赋值就要用=
       disposition: 'sunny'
   };

   var emptyObj = {};
When you use the constructor, the syntax looks like this:
   var myObj = new Object();
This tells JavaScript: "I want you to make me a new thing, and I want that thing to be an Object.
You can add keys to your object after you've created it in two ways:
   myObj["name"] = "Charlie";
   myObj.name = "Charlie";
Both are correct, and the second is shorthand for the first.
    14. 嵌套Object: you can creat object with object:
   var friends = new Object();
   friends.bill={
       name : "Bill"
       }
   friends.steve={
       name : "Steve"
       }

    15. for/in loop -- 不太理解。

      var list = function(obj){
          for (var id in obj){
          console.log(id);
          }
      };

      list(myObject);

    16. 这里我要贴一个JavaScript的程序段了：关于对象的声明和调用，for in用法，就是按id找同一class下的所有对象。参考下面第26点。
var friends = new Object();

friends.bill = {
    firstName:"Bill",
    lastName:"Gates",
    number:"88888888",
    address: "8888 BillGates' house",
    };

friends.steve = {
    firstName:"Steve",
    lastName:"Jobs",
    number:"0000000",
    address: "000 S Jobs' house.",
    };
    
var list = function(Obj){
    for (var xx in Obj){
        console.log("xx: " + xx);
        }
    };
    
var search = function(name){
    for(var id in friends){
    if (name === friends[id].firstName){  //can't use friends.id.firstname
        console.log(friends[id]);
        return friends[id];
        }
    }
}
    
list(friends);
search("Steve");

   17.  关于Object中的Property的access：
// Take a look at our next example object, a dog
var dog = {
  species: "greyhound",
  weight: 60,
  age: 4
};

var species = dog["species"];
// fill in the code to save the weight and age using bracket notation
var weight = dog.weight;
var age = dog["age"];
we accessed properties using what is known as dot notation. Good name, right? So to access a property, we use ObjectName.PropertyName (e.g., bob.name)
In addition to dot notation, we can also access properties using bracket notation.  In this case we use ObjectName["PropertyName"] to access the desired property. Note, we need " " around the property's name.
  18.  关于Object, Method声明与使用：
// bob has age of 17
var bob = {
    age : 17,  //[注意]此处不能写成bob.age:17
}
// this time we have added a method, setAge
bob.setAge = function(age){  //注意不能写成 var bob.setAge, 
    bob.age = age; //如果是this.age = age;上面就要用var,并指派bob.setage = setage;注意没有()
}
// add a method, getYearOfBirth
bob.getYearOfBirth = function(age){
      return 2014-age;
}
//console.log via the getYearOfBirth
console.log(bob.getYearOfBirth(14));

    19. this 的2种用法：
1. this在通用method中，作为通用object替代位置：
-----e.g.Code-----
  var susan = new Object();
  susan.height = 8;  // 【CAUTION】not :
  var setHeight = function(height){
    this.height = height;
  }
  susan.setHeight = setHeight; //attribute the mothod to Object!
  susan.setHeight(9);  // call the method.
----------
2. this在特定method中，作为位置替代：
------e.g.Code-----
  var susan = {
    height : 8,
  }
  susan.setHeight = function(newHeight){
    this.height = newHeight;	//this replace the "susan".height
  }
  susan.setHeight(9);
  console.log(susan.height);
-------------------
    20. Constructor的用法，建立所谓的类class及它的methods  
//看看Constructor是怎么玩的：
function Cat(age, color) {
  this.age = age;
  this.color = color;
}
var Tom = new Cat(18,"gray")  //别忘了var,new
console.log(Tom.age);

//下面是函数的语法
var myFuc = function (a,b){
    var c = a+b;
}

    21. Constructor with methods:
function Rectangle(height, width) {
  this.height = height;
  this.width = width;
  // put our calcArea function here!
  this.calcArea = function() {
      return this.height * this.width;
  };
  // put our calcPerimeter function here!
  this.calcPerimeter = function(){
      return (this.height + this.width)*2;
  };
}

var rex = new Rectangle(13,4); //creat Rectagle, name:rex
var area= rex.calcArea();//calc area for rex with calcArea不要忘了()
var perimeter=rex.calcPerimeter();//calc perimeter for rex with calcP..

    22.关于Constructor要注意的重点位置：

 
 
 以function开始：function ConstructorName(para1,para2){}
 以this替代类名：this.height = para1; 分号结尾。this.width = para2;
 与Array合用，Array的声明： var myArray = [];

    23.其实Object的属性properties有两种引用方法：
Properties are like variables that belong to an object, and are used to hold pieces of information. Properties can be accessed in two ways:
 
 
Dot notation, with ObjectName.PropertyName
Bracket notation, withObjectName["PropertyName"] (don't forget the quotes!)
    24. 在函数中新建一个Object:
  
    //假设table是一个object的数组，每个object内包含width, height，
    //现在要增加一个object,即在table[table的长度]上增加一个obj
      var add = function(width,height){
      table[table.length] = {    //这是在原数组 table[] 基础上新增一个元素
        width : width,
        height : height,
      };
    };
  
    25.使用Constructor建立class时，内部声明method方法：        25. 类型检查工具typeof myObj与property查询工具：myObj.hasOwnProperty('propName')    26. 关于全面查询properties of an Object: 这里要呼应一下前面第16点，介绍的for in loop：    示例代码如下：    
var nyc = {
    fullName: "New York City",
    mayor: "Bill de Blasio",
    population: 8000000,
    boroughs: 5
};
//打印所有properties of nyc
for(var prop in nyc){
    console.log(prop);
}
    27.     Javascript学习笔记1自测复习：
javascript自测复习：
1.			提取substring
2.			//ask user to confirm
3.			//ask user to type in 
4.			//Print out the content: 					console.log();
5.			//declare a variable:						var myVariable;
6.			//declare a function:						var myFk = function(inPut){};
7.			//declare an empty array:					var myArr= [];
8.			//how to use switch:						switch(myIn){case "0": xxx; break;}
9.			//declare an Object:					var myObj = { name : "so", xx:yy, qq:ww,};
10.			//two ways to create an object:				var myObj = new Object(); //constructor
11.			//add keys to object:					myObj["name"] = "";  myObj.name = "";
12.			//嵌套object：		var friends = new Object();	friends.bill = {name: "bill"}
13.			//for/in loop, access 嵌套objcet's properties		for(var x in friends){ friends[x].firstname = "Bill";} //name all as "Bill"
14.
15.
16.

17.			//access the properties in an obj			two ways:1. var age = dog.age;  2.var age = dog["age"];
18.			//Declare Obj, Method but function			bob.setage = function(age){ bob.age = age;}

19.			//two ways of using "this"				
				
				var setAge = function(age){ this.age = age; }
				susan.setAge = setAge;
				susan.setAge(19);
			//2nd way:
				susan.setHeight = function(height){ this.height = height ; //or "susan.height = height;" 
				}

20.			//creat class and method via Constructor
				//create class:
					function Cat(age, colour){ this.age = age; this.colour = colour;}
			
			//conclude the key word "function":
			//a) create a function: 
				var myFk = function(a,b){ var c = a+b;}
			//b) create a public method, and attribute to an Obj:
				var setAge = function(age){ this.age = age;}
				susan.setAge = setAge;
			//c) Constructor for create a new class:
				function Cat(age, color){ this.age = age; this.color = color;}
				var Tom = new Cat(3, "gray");
			//d) Constructor for method:
				//when we creat a new class, we use in the Class, by below:
				this.myMethod = function(){ return 2014-this.age; }
				
21.			//Constructor for method:"this.myMethod = function(){this.prop}"
			//1. create the class
			//2. contain the method into the creation of class
		
				function Rectangle(width, length){
					this.width = width;
					this.length = length;
					//methods begins here:
					this.calcArea = function(){
						return this.length*this.width;
					}
					this.calcPerimeter = function(){
						return (this.length+this.width)*2;
					}
				}
			//use it:
				var rex = new Rectangle(13,5); //create Obj via Class
				var area= rex.calcArea();
				var peri= rex.calcPerimeter();

25.			//type check:"typeof myObj"
26.			//呼应第16点中的 for/in loop
			var nyc = {
				name: "New York City" ,
				age: 300,
				address: "The East of USA"
			}
			
			for (var prop in nyc){
				console.log(prop);
			}