JavaScript网页编程之------一些常用的对象

于 2016-07-07 21:02:39 发布
阅读量300 收藏
点赞数
分类专栏： html网页编程 文章标签： 对象 javascript 属性 自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x121850182/article/details/51702300
版权

注：下文中用到的println()方法都是另外导入的out.js方法中写的

out.js： 
function print(param){
	document.write(param);
}

function println(param){
	document.write(param+"<br/>");
}


在with语句块中，可以省去对象名的引用

[html]  view plain  copy
  print ?
  1. var dd2 = new Date();  
  2.     with(dd2){//在with语句块中，可以省去对象名“dd2”的引用  
  3.       var year = getFullYear(); //dd2.getFullYear()  
  4.       var month= getMonth(); //从0开始的月份数  
  5.       var day =  getDate();//返回月份中的第几天  
  6.       println(year+"年"+month+"月"+day+"日 ");  
  7.     }  



一、Object对象

<html>
<head>
<title>Object对象的用法演示</title>
</head>
<body>
<script type="text/javascript">
	/*toString()将对象转换成字符串*/
	function show(){
		alert("show......");
	}
	//alert(show);//默认调用toString()
	//alert(show.toLocaleString());
	//alert(show.toString());
	
	var arr=[1,2,3,8];
	//alert(arr.toString());
	//alert(arr);//默认调的toString()
	
	/*valueOf(): 返回指定对象的原始值  */
	//alert(arr.valueOf());//结果和toString()一样
	//alert(show.valueOf());//结果和toString()一样
</script>
</body>
</html>

二、String 对象

1、创建String对象的两种方式

1）var str = new String("abc123");

2）var str2 = "abcd1234";


2、String对象当中的属性

str.length：字符串长度


3、String对象当中的方法

bold()：加粗

fontcolor("red")：设置颜色

link("http://www.hncu.net")：设置为超链接

substring(1, 5)：取子串[1,5)，Java一样，左包含，右不包含

substr(1,5)：取子串：从1位置开始，取5个字符


三、Date 对象

1、Date对象的构造

[javascript]  view plain  copy
  print ?
  1. var date = new Date();  
  2. println(date); //GMT格式输出  
  3. println(date.toLocaleString());//转成本地系统的日期时间格式输出。  
  4. println(date.toLocaleDateString()); //只有日期，没有时间  


2、从对象中解析出相应的日期元素

[javascript]  view plain  copy
  print ?
  1. //var year = date.getYear();//过时了，尽量不用 。它是返回从1900到当前日期所经过的年份  
  2.       var year = date.getFullYear();  
  3.       println(year);  
  4.       var month= date.getMonth(); //从0开始的月份数  
  5.       println(month);  
  6.       var day1 = date.getDay(); //返回星期中的第几天,0为星期天  
  7.       println(day1);  
  8.       var day2 = date.getDate();//返回月份中的第几天  
  9.       println(day2);  


3、要求显示出某个日期的“星期几”

[html]  view plain  copy
  print ?
  1. function getWeekDay( num ){  
  2.       var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];  
  3.       return weeks[num];  
  4. }  
  5. var weekDay = getWeekDay( date.getDay() );  
  6. println(weekDay);  


4、日期对象和毫秒值之间的转换

[html]  view plain  copy
  print ?
  1. var date2 = new Date();  
  2. var time = date2.getTime();//日期对象-->毫秒值  
  3. println("time:"+time);  
  4. var date3 = new Date(time);  
  5. println(date3.toLocaleDateString());  


5、日期对象和字符串之间进行转换

[html]  view plain  copy
  print ?
  1. //日期对象-->字符串：toLocaleString() 和 toLocaleDateString()  
  2. //字符串-->日期  
  3. //var strDate="9/27/15";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位  
  4. var strDate="9/27/2015 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位  
  5. var time = Date.parse(strDate);//返回的是毫秒数  
  6. var d = new Date(time);  
  7. println(d.toLocaleString());  


6、日期解析错误时，抛异常

[javascript]  view plain  copy
  print ?
  1. <script type="text/javascript">  
  2.      Date.prototype.parse2 =function(str){  
  3.         throw new Exception();  
  4.      };  
  5.        
  6.      try{  
  7.        var strDate2="9/27/2ewewwe15 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位  
  8.        var time2 = Date.parse2(strDate2);//返回的是毫秒数  
  9.          
  10.      }catch(e){  
  11.         alert("日期解析错误....我给的提示....");  
  12.      }  
  13. </script>  


四、Math 对象

Math.ceil(12.34);//向上进位

Math.floor(12.34);//向下进位

Math.round(12.54);//四舍五入

Math.pow(5,6);//5的6次方

//生成10个[0,10]范围内的随机整数
	for (var x=0;x<10;x++){
		//var n=Math.floor(Math.random()*11);//法1
		//var n=Math.round(Math.random()*10);//法2
		var n=parseInt(Math.random()*11);//法3
		println(x+": "+n);
	}


五、Global对象

Global对象中的方法是全局方法，调用时可以省略Global，直接写方法名

1、parseInt()中的基数用法----进制转换

1）将指定进制格式的字符串转换成-->10进制数

[javascript]  view plain  copy
  print ?
  1. //var num = parseInt("110",10); //110  
  2. //var num = parseInt("110",2); //6  
  3. var num = parseInt("0x3c",16); //60  


2）10进制转换成--->非10进制

[javascript]  view plain  copy
  print ?
  1. var num2 = new Number(6);  
  2. println( "num2="+ num2.toString(2) );  
  3. var num3 = 60;  
  4. println( "num3="+ num3.toString(16) );  


2、for(in)语句的用法

1）格式：   
   for(变量 in 对象){
    ...//对对象中的元素进行遍历操作
   }

2）例：

<script type="text/javascript">
	/*
     <span style="white-space:pre">	</span>for( 变量名  in 对象 ){
    	 ...//分别对对象中的元素(属性)进行遍历操作
   <span style="white-space:pre">	</span>}
    <span style="white-space:pre">	</span>*/
    <span style="white-space:pre">	</span>//数组对象
    <span style="white-space:pre">	</span>var arr=[12,13,22,-1,56,0,9];
    <span style="white-space:pre">	</span>for (x in arr){//注意，对于数组，这里的x是下标即是0,1,2,3,...
    	<span style="white-space:pre">	</span>println(x+": "+arr[x]);
<span style="white-space:pre">	</span>}
    
<span style="white-space:pre">	</span>print("<hr/>");
	//用for...in语句操作自定义对象
	for (x in p2){//x是函数中的成员变量与成员方法的名称
		println(x+"------"+p2[x]);// p2[x]就是valeOf(x)
	}
</script>


六、自定义对象

对js来描述对象--Person

1、方法1:本质上，有点类似于Java当中的直接new一个空参对象，然后往里面直接添加变量

[javascript]  view plain  copy
  print ?
  1. <script type="text/javascript">  
  2.        function Person(){  
  3.            //alert("Person...");  
  4.            println("Person...");  
  5.        }  
  6.        var p = new Person();  
  7.        //要为Person对象p添加变量，直接使用：p.对象名=...  
  8.        p.name = "Jack";  
  9.        p.age = 24;  
  10.        //alert(p.name+"---"+p.age);  
  11.        //要为Person对象p添加方法，直接使用：p.方法名=...  
  12.        p.show = function(){  
  13.            println(p.name+"---"+p.age);  
  14.        };  
  15.        p.show();//调方法  
  16.          
  17.        var obj = new Object();  
  18.        obj.name = "God";  
  19.        obj.age =10000;  
  20.        obj.show = function(){  
  21.            println(obj.name+"::::"+obj.age);  
  22.        };  
  23.        obj.show();  
  24.          
  25.     </script>  


2、方法2:更接近于Java当中的面向对象的方式----类的封装

[javascript]  view plain  copy
  print ?
  1. <script type="text/javascript">  
  2.        //方式2:更接近于Java当中的面向对象的方式----类的封装  
  3.        function Person(name,age){  
  4.            this.name = name; //这里的this.表示给当前对象添加一个变量  
  5.            this.age = age;  
  6.            this.setName= function(name){  
  7.                this.name = name;  
  8.            };  
  9.            this.getName= function(){  
  10.                return this.name;  
  11.            };  
  12.            this.show= function(){  
  13.                return "name:"+this.name+",age:"+this.age;  
  14.            };  
  15.        }  
  16.        var p = new Person("Tom",22);  
  17.        println(p.name+"==="+p.age);  
  18.        p.setName("Rose");  
  19.        println(p.show());  
  20.          
  21.        for(x in p){ //x为自定义对象当中的变量名  
  22.            println(x+":"+p[x]); //p[x]为自定义对象当中的变量值(如果是函数，为它的字节码)  
  23.        }  
  24.          
  25. </script>  


3、方式3: map方式, key:value   ----类似于java当中的数据封装，把数据封装到Map集合当中
<span style="font-weight: normal;"><script type="text/javascript">  
       //对象调用成员有两种方式：对象.属性名  和  对象["属性名"]  
       //1) 对象.属性名的方式应该注意: 如果属性名不符合标识符的命名规则，那么不能采用这种方式调用，如下面例子当中的不能采用map[8]的方式  
       //2)  对象["属性名"]的方式应该注意:如果属性名符合标识符的命名规则，那么访问时属性名应该要加引号，如下面例子当中的map[name]要写成pp["name"]的形式才行  
       var pp = {  
           //"name":"张三","age":"23", //key:value
	   name:"张三",age:"23",  //这句和上面一句等效---key的名称可以省略引号   
           "getName": function(){  
               return this.name;  
            }  
       };  
       println(pp.name+"===" + pp.age);     
       println(pp.getName());  
       println( pp["name"] ); //用 pp[name]是不行的  
         
       //map集合的定义  
       var map={  
            8:"张三" , 3:"李四", 5:"Jack"  
       };  
       var val = map[8];//8是数字，不是变量名，因此引号省略照样能解析出来
       println("val:"+val);  
       //var val2 = map.8; //不行，因为8不是变量的形式  
       //println(val2);  
         
</script> </span>


4、map数据封装的进一步扩展

[javascript]  view plain  copy
  print ?
  1. <script type="text/javascript">  
  2.        //属性值是数组  
  3.        var myMap = {  
  4.                names:["Jack1","Jack2","Jack4"],  
  5.                ages:[25,22,18]  
  6.        };  
  7.        //取出Jack2的姓名和年龄  
  8.        println("name:"+ myMap.names[1]);  
  9.        println("age:"+ myMap.ages[1]);  
  10.          
  11.        var myMap2 = {  
  12.                names:[{name:"Jack1"},{name:"Jack2"},{name:"Jack4"}]  
  13.        };  
  14.        //取出Jack1  
  15.        println("name:"+ myMap2.names[0].name);//或者println( myMap2.names[0]["name"]); 
  16. </script>  


5、对象的prototype属性

要给对象添加新功能时，直接采用“对象.prototype.新内容”的形式就可以。这内容可以是变量，也可以是函数。

1）为String对象添加一个自定义函数trim：剪去字符串两端的空格

[javascript]  view plain  copy
  print ?
  1. <script type="text/javascript">  
  2.        function trim(str){  
  3.            var start, end;  
  4.            start=0;  
  5.            end=str.length-1;  
  6.            while(start<=end && str.charAt(start)==' '){  
  7.                start++;  
  8.            }  
  9.            while(start<=end && str.charAt(end)==' '){  
  10.                end--;  
  11.            }  
  12.            return str.substring(start,end+1);  
  13.        }  
  14.        //测试  
  15.        var s="   dsk dsds   ";  
  16.        //alert("#"+s+"#");  
  17.        //alert("#"+ trim(s) + "#" );  
  18.          
  19. </script>  


2）添加变量

[javascript]  view plain  copy
  print ?
  1. String.prototype.aa = 200;  
  2.       println("abc123".aa);  


3）添加函数

[javascript]  view plain  copy
  print ?
  1. String.prototype.trim = trim;  
  2.       println("<hr>");  
  3.       println("aa3".trim("   abc123   "));  

（这里的trim就是上面（1）里面自定义属性中的trim）

注：这里通过“aa3”.trim("   abc123   ")处理的是别的字符串并不是自己


4）通过对象直接调用的函数（注意，一定要把前一版本当中的参数str改成this）

[javascript]  view plain  copy
  print ?
  1. <script type="text/javascript">  
  2.       String.prototype.trim = function(){  
  3.            var start, end;  
  4.            start=0;  
  5.            end=this.length-1;  
  6.            while(start<=end && this.charAt(start)==' '){  
  7.                start++;  
  8.            }  
  9.            while(start<=end && this.charAt(end)==' '){  
  10.                end--;  
  11.            }  
  12.            return this.substring(start,end+1);  
  13.       };  
  14.       println("   aa3   ".trim() );  
  15.       var str2 ="    76jh dssdds   ";  
  16.       println( str2.trim() );  
  17.         
  18.  </script>  

注：这里是对自己进行处理


6、对象原型修改练习

1）给String对象添加一个toCharArray()方法

2）给String对象添加一个reverse方法：将字符串反转

3）JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类

[javascript]  view plain  copy
  print ?
  1. <script type="text/javascript">  
  2.        String.prototype.toCharArray= function(){  
  3.            var chs=[];  
  4.            for(var x=0; x<this.length; x++){  
  5.                chs[x] = this.charAt(x);  
  6.            }  
  7.            return chs;  
  8.        };  
  9.   
  10.      //给String对象添加一个reverse方法：将字符串反转  
  11.      String.prototype.reverse=function(){  
  12.         //JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类  
  13.          //辅助函数，用于交换数组中的两个元素  
  14.          function swap(arr,x,y){  
  15.           var temp = arr[x];  
  16.           arr[x] = arr[y];  
  17.           arr[y] = temp;  
  18.          }  
  19.            
  20.          var arr = this.toCharArray();  
  21.          for(var x=0,y=arr.length-1; x<y; x++,y--){  
  22.              swap(arr,x,y);  
  23.          }  
  24.          return arr.join("-");  
  25.      };  
  26.     /* 
  27.      //辅助函数，用于交换数组中的两个元素 
  28.      function swap(arr,x,y){ 
  29.       var temp = arr[x]; 
  30.       arr[x] = arr[y]; 
  31.       arr[y] = temp; 
  32.      } 
  33.     */  
  34.      //测试  
  35.      var str = "dsjk2323jkjkewio";  
  36.      println( str.reverse() );  
  37.        
  38.      //测试：在外部能否调用函数reverse内部的swap函数  
  39.      //测试结果：不行的。其实它和局部变量是一个道理。  
  40.      //因此，以后在写某个函数内部的辅助功能函数时，最好写在内部  
  41.      /* 
  42.      var arr =[23,45,7,9]; 
  43.      swap(arr,1,2); 
  44.      println("kkk"); 
  45.      println(arr); 
  46.      */  
  47. </script> 


夏小弥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值