javascript 基础

/**
 * http://blog.csdn.net/sunyingyuan/article/details/16357467
 * 数据类型和类型转换
 */
(function(){
 document.write("<br><bease data Type=================================><br>");
/**
 * 基本数据类型(3种)
 * (1)数字 number
 *   例如 3.1415927 ,0.251,.2,100,1.478E
 * (2)字符串
 *   string
 * (3)布尔 booble
 */
 //数字型转字符串
 var num1 = 3.1415927;
 var str1 = Number.toString(num1);
 document.write(typeof str1 == "string");//true
 document.write("<br>")
 //四舍五入
 var num2 = num1.toFixed(2);
 document.write(num2);
 document.write("<br>")
 //返回指定的位数的数字
 var num3 = num1.toPrecision(4);
 document.write(num3);
 document.write("<br>")
 //(Math) 介绍一点方法
 //四舍五入round
 document.write(Math.round(4.7));
 document.write("<br>")
 //随机出处理0~1
 document.write(Math.random());
 document.write("<br>")
 //0~10的随机数 floor向下取整
 document.write(Math.floor((Math.random()*11)));
 document.write("<br>")
 document.write("-------------------------------<br>")
 
 //字符串
 //注意(转义) pca't  要输入 pca\'t \n 换行
 /**
 \' \" \& 和号+ \\ \n \r 回车
 \t 制表符 \b退格 \f 换页
  */
 //属性 length indexof substring chartAt(整数)
 //indexof判断所需要的字符串在第几位，如果没有的话范围-1
 //如何转成数字
 var str2 = "USPCAT.COM";
 var str3 = "3.14";
 var number = Number(str3);
 document.write(typeof number == "number");
 document.write("<br>")
 document.write((str2 - 0)+"<br>");//NaN 非数值
 document.write((str3 - 1)+"<br>");//如果是减法他回自动将字符串转成数字
 document.write((str3 + 1)+"<br>");//加法会当成字符串的拼接操作
 //布尔类型(boolean)
 //true | false
 var s = "";
 var o = {};//true
 var l = [];//true
 var n = null;
 var f = false;
 var u = undefined;
 document.write("-------------------------------<br>")
 if(!s){
  document.write("s is false<br>");
 }
 if(!o){
  document.write("o is false<br>");
 }
 if(!l){
  document.write("l is false<br>");
 }
 if(!n){
  document.write("n is false<br>");
 }
 if(!f){
  document.write("f is false<br>");
 }
 if(!u){
  document.write("u is false<br>");
 }
 /**
s is false
f is false
u is false
n is false
  */
 /*
 if(str != "" && str != null && str != undefined){
  //...
 }
 if(str){
  //...
 }
 */
 /**
  * 2复合类型
  * (1)数组-->有序的集合(array):下标(index) 是从0开始的
  * 例子
  * var arr = new Array();
  * (2)特殊的对象-->函数(function)
  */
 /**
  * 特殊值
  * (1) null不是有效的对象\数组\数组\字符串  他们为空
  * (2)undefined 他是代表没有定义 和空不是一个概念
  * [没有] 但是有容器 有一个盒子但是盒子里面没有东西
  * undefined 连盒子也没有
  */
 /**
  * 内置特殊对象
  * Data对象
  * Error错误对象
  * ReExp对象
  */
})();

(function(){
 document.write("<composite Type==================================================><br>");
}
)();

(function(){
 /**
   * 2复合类型
   * (1)数组-->有序的集合(array):下标(index) 是从0开始的 
  */
 //属性
 //constructor 返回对创建此对象的数组的函数引用
 //index
 //input
 //*length
 //方法
// *concat 合并数组
// *join 把数组按照一定的各式进行串联
// *push 数组的追加
// *pop 删除数组返回的最后一个元素
 //sort toString shift 删除并且返回数组的第一个元素
 var arr = new Array();
 arr.push(1);
 arr.push(55);
 arr.push(5);
 arr.push(3);
 arr.push(9);
 //alert(arr.length)
 document.write("Arr.length"+arr.length+"<br>");
 var arr2 = [1,2,3,45,6,7,8];
 //alert(arr2.join(":"));
 //alert(arr.concat(arr2).toString())
 document.write("Arr.join(':'):"+arr2.join(":")+"<br>");
 document.write("Arr.concat(Arr2):"+arr.concat(arr2).toString()+"<br>");
 
 for (var i = 0; i < arr2.length; i++) {
  if(i==0){
   document.write("for()-->Arr<br><br>");
  }
  document.write(arr2[i]+"||");
 }
 document.write("<br><br>each()-->Arr<br><br>");
 //扩展array的方法
 Array.each = function(array,fn){
  for (var i = 0; i < array.length; i++) {
   var temp = array[i];
   //document.write(temp);
   fn("aa",temp);
  }
 };
 
 Array.each(arr2,function(v){
  document.write(v+"||");
 });
})();

(function(){document.write("<br><condition & control================================================><br>");})();
/**
 * 分支
 */
(function(){
 /**
  if(条件){
   //...
  }
  if(条件){
   //..
  }else if(条件){
   //..
  }else{
  }
  */
 //实验
 var d = new Date();
 var time = d.getHours();
 if(time >= 18){
  document.write("<b>good evening</b>")
 }else{
  document.write(time+"<br>")
 }
 //实验2
 if(time<10){
  document.write("<b>good morning</b>")
 }else if(time>=10 && time<16){
  document.write("<b>good day</b>")
 }else{
  document.write("<b>good evening</b>");
 }
 //实验3
 //三目运算符 (条件)?"成立":"失败"
 var str = "";
 str = (time>10)?"good ,day":"good evening";
 //alert(str);
 
 /**
  *  switch 后面的(n)可以是表达式,也可以是变量
  switch(n){
   case 1:
       //代码
      break;
   case 2:
       //代码
       break;
   default:
    //代码
    break;
  }
  */
 document.write("<br>")
 theDay = d.getDay();
 switch(theDay){
  case 5:
   document.write("finally friday");
   break;
  case 6:
   document.write("super zhouliu");
   break;
  case 0:
   document.write("sleepy sunday");
   break ;
  default :
   document.write("xiwang 一个 zhoum");
 }
  
})();
/**
 * 循环
 */
(function(){
 /**
  for(变量 = 开始数值;变量<=结束值;变量=变量+步长){
  }
  */
 var arr = [1,2,3,45,6,5];
 for (var i = 0; i < arr.length; i++) {
  document.write(arr[i]+"<br>")
 }
 /**
  while(变量<=结束值){
  }
  */
 var i = arr.length-1;
 while(i>=0){
  document.write(i+"-->"+arr[i]+"<br>");
  i--;
 }
 /**
  * for(变量 in 对象){
  * }
  */
 var o = {name:"USPCAT",age:1};
 for(k in o){
  document.write(k+"-->"+o[k]+"<br>");
 }
 
})();
/**
 * js的其他零散知识
 */
(function(){
 
 //1异常捕获
// try{
//  
// }catch(e){
//  
// }
 try{
  //alert(2/0);
 }catch(e){
  //throw new Error("Error:"+e);
  //alert("===="+e);
 }
 
 /**
  * 定时器
  * setTimeout
  * 未来某个时间执行一段代码
  */
 function timedMsg(){
  //一秒钟以后出发的函数
  var t = setTimeout("alert('1 miao zhong ')",1000);
 };

 var c = 0;
 var t ;
 function timedCount(){ 
  //document.getElementById("txt").value = c;
  //alert(c);
  c = c+1;
  //alert("2"+c);
  t = setTimeout("timedCount()",1000);
 };

 function stop(){
  clearTimeout(t);
 };
 timedMsg();
 timedCount();
})();

/**
 * 函数
 */
(function(){
// function 函数名字(val1,val12,val3,valn){
//  //代码
//  //return
// }
// var fn = function(){
//  //代码
// }
 //2中函数声明的区别
 /**
  * var abc = function(){}
  * 只能在函数声明后才能使用
  */
 //add(1,1);
 function add(x,y){
  alert(x+y)
 }
 //add(1,2);
 //add2(12,3)
 var add2 = function(x,y){
  alert(x+y)
 }
 add2(12,3)
})();
/**
 * 回调函数
 * 调用一个函数之后，又会再调用本身传入的一个函数
 */
(function(){
 //接收回调函数的函数
 function add(x,y,fn){
  this.x = x||1;
  this.y = y||1;
  if(fn){
   fn(this.x+this.y);
  }
 }
 add(1,2,function(v){
  if(v>0){
   alert("re > 0")
  }else{
   alert("re <= 0")
  }
 })
})();
/**
 * 函数传参
 */
(function(){
 //1.参数传递的随意性
 function add(x,y,z){
  this.x = x||0;
  this.y = y||0;
  this.z = z||0;
  alert(this.x+this.y+this.z)
 }
 //add(12,3,5)
 //add(14,5)
 //弊端 : 无法像java等高级语言那有 有函数精确复写的特性
 //技巧 : 如果你这个类是工具类的情况下,那没你接收的参数最好是对象
 /**
  * conf = {gridName:"",gridCode:"",gridSize:""}
  */
 function gridUtil(conf){
  alert(conf["gridName"]+" "+conf["gridSize"]);
 }
 gridUtil({gridName:"YUNFENGCHENG",gridSize:10});
 //传值还是传址
 var i = 100;
 var s = "one";
 function add3(i,s){
  i++;
  s+="--";
  //alert(i);
 }
 //add3(i,s);
 //alert(i);//100 or 101
 //alert(s);//"one" or one--
 /**
  * 证明 : 基础变量是传递数值的
  * 自定义对的传参方式是传得"地址"
  */
 //对象
 var o = {name:"YUNFENGCHENG"}
 function change(o){
  o["name"] = "USPCAT.COM"
 }
 change(o);
 alert(o.name)
})();
/**
 * 函数递归
 */
(function(){
 //常见的编程题 1~100 用递归算法完成累加
 function add(start,end){
  var num = 0;
  num = num + start;
  if(start < end){
   num = num + add(start+1,end);
  }
  return num;
 }
 
 alert(add(1,100));
})();
/**
 * 函数使用技巧
 */
(function(){
 //代理函数-->用程序来决定返回的新的函数(他是一个生产函数的函数)
 //模拟数据库
 var person = {"jim":"m","lili":"w"}
 var test = function(name){
  if(person[name] == "m"){
  
   /**
    * 内科,外科
    */
   return function(nk, wk){
    alert(nk+"  "+wk)
   }
   
  }else if(person[name] == "w"){
   /**
    * 内科,外科,妇科
    */
   return function(nk, wk, fk){
    alert(nk+"  "+wk+" "+fk)
   }   
  }
 }
 test("jim")("ok","ok")
 test("lili")("ok","ok","no")
})();
(function(){
 //eval 他是把一个字符串解析成一个方法并且调用
 var str = "var show = function(){alert(100)}()";
 //eval(str)
 //数据库会返回一个字符串(长得像javaScrpit数组)
 var a = "[1,2]";
 var array = eval(a);
 for (var i = 0; i < array.length; i++) {
  alert(array[i])
 }
})();
(function(){document.write("<br>< Class ========================================><br>");})();
(function(){
 //在javascript中我们利用function来定义类
 function Shape(){
  var x = 1;
  var y = 2
 }
 //然我们如何实例化一个对象呢? 通过new 关键字
 var aShape = new Shape();
 //在类的内部我们用var 定义的是私有变量 如何才能定义共有变量呢?
 function Shape2(){
  this.x = 1;
  this.y = 2;
 }
 var bShape = new Shape2();
 //测试
 //alert(bShape.x)
 //处理定义私有变量外还可以用var定义私有函数
 //private 函数
 function Shape3(){
  var draw = function(){
   //私有函数
  }
  this.draw2 = function(){
   //外界可以看到的共有函数
  }
 }
 var c = new Shape3();
 c.draw2();
 //用javascript模仿OOP编程
 function Shape4(ax,ay){
  var x = 0;
  var y = 0;
  var init = function(){
   x = ax;
   y = ay;
  }
  init();
  this.getX = function(){
   return x;
  }
 }
 var d = new Shape4(2,4);
 alert(d.getX());
 //模仿OOP编程的构造函数,现在我们来写静态属性和静态方法
 //JS中静态方法是作用到类身上的而非是对象
 function Person(){this.Name = "YUNFENGCHENG"};
 //静态变量
 Person.age = 0;
 Person.showName = function(obj){
  alert(obj.Name)
 }
 Person.showName(new Person())
// Array.each= function(){
// }
 //简单类定义方法
 var a = {};
 var array = [];
 a["name"] = "USPCAT.COM";
 alert(a.name)
})();
/**
 * Map
 */
(function(){
 function jMap(){
  //私有变量
  var arr = {};
  //增加
  this.put = function(key,value){
   arr[key] = value;
  }
  //查询
  this.get = function(key){
   if(arr[key]){
    return arr[key];
   }else{
    return null;
   }
  }
  //删除
  this.remove = function(key){
   //delete 是javascript中关键字 作用是删除类中的一些属性
   delete arr[key];
  }
  //遍历
  this.eachMap = function(fn){
   for(var key in arr){
    fn(key,arr[key]);
   }
  }
 }
 var country = new jMap();
 country.put("01","ZG");
 country.put("02","HG");
 country.put("03","MG");
 country.put("04","TG");
 //alert(country.get("01"))
 country.remove("01")
 //alert(country.get("01"))
 
 country.eachMap(function(key,value){
  document.write(key+"-->"+value+"<br>");
 })
})();
(function(){document.write("<br>< call ========================================><br>");})();
(function(){
 /*
  * obj1.method1.call(obj2,argument1,argument2)
                     如上，call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入．            
  */
 function add(a,b) {
  alert("add:"+(a+b));
  alert("add");
 };
 function sub(a,b) {
  alert("sub:"+(a-b));
  alert("sub");
 };
 add.call(sub,3,1);
 /*
   这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，
   所以运行结果为：alert(4);
  注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。                  
  */
 
 
 function Class1() {
  this.name = "class1";
  this.showNam = function(){
   alert(this.name);
  };
 };
 function Class2() {
  this.name = "class2";
 };
 var c1 = new Class1();
 var c2 = new Class2();
 c1.showNam.call(c2);  
 /*
   注意，call 的意思是把 c1 的方法放到c2上执行，原来c2是没有showNam() 方法，现在是把c1 的showNam()
   方法放到 c2 上来执行，所以this.name 应该是 class2，执行的结果就是 ：alert（"class2"）;
  怎么样，觉得有意思了吧，可以让a对象来执行b对象的方法，这是java程序员所不敢想的。
  还有更有趣的，可以用 call 来实现继承
  */
 
 
 function Class1() {
  this.showTxt = function(txt) {
   alert(txt);
  };
 };
 function Class2() {
  Class1.call(this);
 }
 var c2 = new Class2();
 c2.showTxt("cc");
 /*
  这样 Class2 就继承Class1了，Class1.call(this) 的 意思就是使用 Class1 对象代替this对象，
  那么 Class2 中不就有Class1 的所有属性和方法了吗，c2 对象就能够直接调用Class1 的方法以及属性了，
  执行结果就是：alert（“cc”）;
  */
 function Class10()
 {
 this.showSub = function(a,b)
 {
 alert(a-b);
 }
 }
 function Class11()
 {
 this.showAdd = function(a,b)
 {
 alert(a+b);
 }
 }

 function Class2()
 {
 Class10.call(this);
 Class11.call(this);
 }
 /*
  使用两个 call 就实现多重继承了
  当然，js的继承还有其他方法，例如使用原型链，这个不属于本文的范畴，只是在此说明call 的用法
  说了call ，当然还有 apply，这两个方法基本上是一个意思
  区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组，也可以是arguments
  还有 callee，caller，这个和call的 用法就不同了
  */

})();