日期:2014-05-16  浏览次数:20327 次

JavaScript学习笔记[更新中...]
JavaScript学习笔记

一、数组(Array)
<script type="text/javascript">
	/*数组的定义*/
	//第一种
	var arr1 = ["A","B","C"];
	
	//第二种
	var arr2 = new Array("A", "B", "C");
	
	//第三种
	var arr3 = new Array(2);
	arr3.push("A");
	arr3.push("B");
	
	//遍历数组
	for(var i = 0; i < arr1.length; i++)
	{
		document.writeln("arr[" + i + "]" + arr1[i] + "<br />");	
	}
     
        with(document)
        {
	     write("<ul>");
	     write("<li>" + arr.join() + "</li>");
	     write("<li>" + arr.join("#") + "</li>");
	     write("<li>" + arr.toString() + "</li>") ;
             /*数组反转*/
	     write("<li>" + arr.reverse().join()+ "</li>");
	     write("<li>" + arr.valueOf() + "</li>");
	     write("</ul>");
        }
</script>

关于数组的排序以及自定义排序
<script type="text/javascript">
	var arr = [1, 3, 25];
	/*对于Javascript数组的sort方法来说,它会先将待排序的
	内容转换为字符串(调用toString()方法),按照字符串的先后
	顺序排序
	*/
	//数组的sort方法。默认升序
	//arr.sort();
	//alert(arr);

	//实现数组自定义排序
	function compare(num1, num2)
	{
		var temp1 = parseInt(num1);
		var temp2 = parseInt(num2);

		if(temp1 < temp2)
		{
			return -1;
		}
		else if(temp1 == temp2)
		{
			return 0;
		}
		else
		{
			return 1;
		}
	}
	
	//函数名是对象的引用
	arr.sort(compare);
	alert(arr);
</script>



二、字符串
	var str = "javascript";
	var num = 12345;
	//返回索引为3的字符
	alert(str.charAt(3));
	//转大写
	alert(str.toUpperCase());
	//转小写
	alert(str.toLowerCase());
	alert(num.toString().charAt(3));
	alert(str.indexOf('t'));
	alert(str.substring(0,4));


三、对象
	/*Object*/
	function member(name, gender)
	{
		this.name = name;
		this.gender = gender;
		this.display = display;//指定member对象的display方法
	}
	
	var m1 = new member("test1", "Man");
	with(document)
	{
		write(m1.name + ":" + m1.gender + "<br />");
	}
	
	function display()
	{
		var str = this.name + ":" + this.gender;
		document.writeln("display:" + str + "<br />");
	}
	
	var m2 = new member("test2","f");
	m1.display();


四、定时器
//第一种
/*setTimeout*/
//经过5000毫秒执行一次后,不再执行
setTimeout("alert('Successed');",5000);

//第二种
/*setInterval*/
//每隔1000毫秒执行一次,除非关闭浏览器或者执行clearInterval方法才停止执行
var timeId = setInterval("method();", 1000);
/*clearInterval*/
//清除定时器,需要传入被清除的定时器ID
clearInterval(timeId);


五、Screen
<script type="text/javascript">
	//screen对象
	with(document)
	{
		write("屏幕设定值:<br />");
		//屏幕实际的高度
		write("屏幕实际的高度:", screen.availHeight, "<br />");
		//屏幕实际的宽度
		write("屏幕实际的宽度:", screen.availWidth, "<br />");
		//屏幕的区域高度
		write("屏幕的区域高度:", screen.height, "<br />");
		//屏幕的区域宽度
		write("屏幕的区域宽度:", screen.width, "<br />");
	}
</script>


六、绑定事件
<script type="text/javascript">
	//event对象(绑定事件)
	/*
	function getEvent(event)
	{
		alert("事件类型:" + event.type);
	}
	document.write("单击...");
	绑定事件
	document.onmousedown = getEvent;
	*/
	
	function loadPage()
	{
		var obj = document.getElementById("btn1");
		//注意只需要函数名
		obj.onclick = testBind;
		
		obj.onmouseover = function()
		{
			alert("button is onmouseovered");
		}
	}
	
	function testBind()
	{
		alert("button is clicked");
	}
</script>

<body onload="loadPage();">
	<input type="button" value="点击我" id="btn1" />
</body>


七、关于<a>标签 href
<body>
	<!--如果href="#",那么a标签在执行完onclick后会再次执行href-->
	<!--比如说当前页URL是http://www.google.com/-->
        <!--那么这时候herf="http://www.google.com/#"-->
	<!--就无法返回始终在此页-->
	<a href="#" onclick="history.back();">返回</