JavaScript基本介绍02-Array对象、自定义对象、原型

补充:
事件编程中事件的分类:
1.鼠标点击事件:单击:onclick / 双击:ondbclick
2.和焦点相关的事件:聚焦事件:onfocus / 失去焦点事件:onblur
3.选项卡发生变化的事件:onchange事件
4.鼠标经过 / 移出事件:onmouseover / onmouseout
5.页面加载事件:body中的内容加载完毕之后会执行的事件 onload

js之Array对象

js中定义数组注意事项:
1.在js中定义数组,不用担心数组越界问题,会自动扩容;
2.在js中,数组是可以定义任何数据类型的;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Array对象</title>
		<script>
		/*1.指定数组长度
		var arr = new Array(3);*/
		//需要给数组中的元素进行赋值
		
		/*2.不指定数组长度
		 var arr = new Array();*/
		
		/*3.指定具体元素内容*/
		 var strArray = ["java","python","c++"];
		
		 //两个方法
		 //1.join(str):通过指定字符串,将数组中的内容用该字符串拼接
		 //2.reverse():将数组中的内容进行反转
		var str = strArray.join("-");
		 document.write(str);
		</script>
	</head>
	<body>
	</body>
</html>

js自定义对象

  • 有参方式:类似于java中的有参构造

        function 对象(形参){
        	追加属性
         	  追加方法
        }
        创建对象:var 对象名 = new 对象(实参);
    
  • 2.无参构造:类似于java中的参数构造

       function 对象(){
       	
       }
       创建对象
       var 对象名 = new 对象();
       追加属性
       追加方法
    
  • 创建Object对象:在js中Object对象代表了所有对象,是一个模板对象

    var p = new Object;
    //追加属性
    p.name = "susan";
    p.age = 18;
    //追加方法
    p.say = function(){
    	alert("调用了say方法");
    	}
    
  • 字面量的方式:json格式

    var p ={
    	"key1":"value1";
    	"name":"susan";
    	"age":"18";
    	//追加方法
    	"say":function(){
    		alert("调用了say方法");
    	}
    	...
    };
    

练习:
需求:
设计一个工具对象ArrayUtil-
添加一个search(array,target)-在array数组中查找target元素的位置;
添加max(array):获取最大值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js自定义对象</title>
		<script src = "ArrayUtil.js"></script>
		<script>
			//定义一个数组
			var arr = [8,67,15,65,98,10];
			var arrayUtil = new ArrayUtil();
			var index = arrayUtil.search(arr,15);
			document.write("15的位置是"+index+"
"
); var max = arrayUtil.max(arr); document.write("最大值是"+max+"
"
); </script> </head> <body> </body> </html>

js文件中:

function ArrayUtil(){
			this.search = function(array,target){
				for(var i = 0;i<array.length;i++){
					if(array[i] == target){
						return i;
					}
				}
				return -1;
			}
			this.max = function(array){
				var max = 0;
				for(var i = 0;i<array.length;i++){
					if(array[i]>max){
						max = array[i];
					}
				}
				return max;
			}
		}

js原型

js原型属性的作用:
1.在js中所有的内置对象中,都存在原型属性:prototype;
2.在内置对象中调用原型属性,追加一个方法,这个方法会自动添加到内置对象中;
3.原型的作用就是为了给内置对象中追加方法
格式:
内置对象.prototype.方法名 = function(参数){...}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js原型</title>
		<!--需求:
			在Array对象中
			添加一个search(array,target)-在array数组中查找target元素的位置;
			添加max(array):获取最大值
			不能使用自定义对象去完成!
			
			js原型是解决方案:
			在js中给原型对象中添加一个方法,然后在内置对象中去创建原型对象,
			这个方法会自动添加到内置对象中
			prototype
		-->
		<script>
			Array.prototype.search = function(target){
				for(var i = 0;i<this.length;i++){
					if(this[i] == target){
						return i;
					}
				}
				return -1;
			}
			
			Array.prototype.max = function(){
				var max = this[0];
				for(var i = 1;i<this.length;i++){
					if(this[i]>max){
						max = this[i]; 
					}
				}
				return max;
			}
			
			var arr = [8,67,15,65,98,10];
			var index = arr.search(15)
			document.write("15的位置是"+index+"
"
); var max = arr.max(); document.write("最大值是"+max+"
"
); </script> </head> <body> </body> </html>

你可能感兴趣的:(JS)