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 ===============
af3f
=========================><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的 用法就不同了

  */

})();