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

xuhu_java

浏览: 12956 次
性别:
来自: 西安

最近访客更多访客>>

dss_itoyo

weison

skeay

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

JavaScript

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();">返回</a>
	<!--
	如果写成这样 不管在哪个浏览器下 都能返回
	-->
	<a href="javascript:void(0);" onclick="history.back();">返回</a>
</body>

八、Function 对象模型
1.

<script type="text/javascript">
	function add(num)
	{
		alert(num + 10);
	}
	function add(num)
	{
		alert(num + 20);
	}
	
	function add(num, num1)
	{
		alert(num + 30);
	}
	add(10);
	//这时候alert的值为40
	/*以上的形式就相当于
		var add = function(num)
		{
			alert(num + 10);
		}
		
		var add = function(num, num1)
		{
			alert(num + 30);
		}
		
		看似是简单的覆盖 实际上是add的引用 指向了一个新的对象，
		1、在javascript中，函数（function）就是对象
		2、在javascript中没有方法重载的说法。
		在javascript中不管定义的函数function中有多少个参数你都
		可以传或者不传，它都会按顺序去赋值
	*/
</script>

2、隐含对象arguments

function add(num1, num2)
{
	/*
	在javascript中，每个函数都有一个隐含的对象arguments，
	表示给函数实际传递的参数。
	*/
	alert(arguments[0]);
	alert(arguments[1]);
}
//函数名.length表示函数期望传入的参数个数
alert(add.length);
add(2, 3);

九、javascript中数据类型

<script type="text/javascript">
	//JavaScript中有五种数据类型：Undefined、Null、Boolean、Number以及String。
	//1.Undefined数据类型的值只有一个：undefined
	//2.Null数据类型的值只有一个：null
	//3.Boolean数据类型的值有两个：true和false
	//4.javascript中没有字符类型(char)
	//5.typeof一元运算符，后跟变量的名称，用于获取变量的数据类型，其返回值有5个:
	//6.undefined、boolean、number、string以及object
	var s = 'hello';
	alert(typeof s);
	//7.在javascript中，如果函数没有声明返回值，那么会返回undefined
	//8.null与undefined关系：undefined实际上是从null派生出来的 也就是null == undefined 为true
	//9.强制类型转换：在javascript中有3种强制类型转换：Boolean(value),Number(value),String(value)
	//10.在javascript中，对于函数中定义的变量来说，加var表示局部变量，不加var表示全局变量。
	//11.在javascript中，所有对象都是从Object继承过来的。
</script>

十、javascript之构造函数方式定义对象

/*在javascript中，可以动态添加属性，
也可以动态的删除对象的属性*/
var obj = new Object();
//动态添加属性的两种方式
//1.
obj.name = "test";
//2.
//obj["name"] = "test2";
alert(obj.name);

//动态删除对象的属性
delete obj.name;//name属性已经从obj对象中删除
alert(obj.name);

//在Javascript中最常见一种定义对象的方式
var obj = {name:"zhangsan", age:"15"};
alert(obj.name);
alert(obj.age);

十一、Javascript中定义对象的几种方式(javascript中没有类的概念只有对象)

//1.基于已有对象扩充其属性和方法
var obj = new Object();
obj.name = "zhangsan";
obj.setName = function(name)
{
	this.name  = name;
	alert(name);
}
obj.setName("test");

//2、工厂方式创建对象
function createObject()
{
	var obj = new Object();

	obj.name = "zhangsan";
	obj.password = "123";

	obj.get = function()
	{
		alert(this.name + "," + this.password);
	}

	return obj;
}

var obj1 = new createObject();
var obj2 = new createObject();
obj1.get();
obj2.get();

3、使用原型(prototype：Object对象的属性不是js库)方式创建对象

//使用原型(prototype：Object对象的属性不是js库)方式创建对象
function Person()
{
}

Person.prototype.username = new Array();
Person.prototype.password = "123";
Person.prototype.getInfo = function()
{
	alert(this.username + ", " + this.password);
}

//调用
var p1 = new Person();
var p2 = new Person();
//修改用户名称
p1.username.push("zhangsan");
p1.username.push("lisi");
p1.password = "456";
p1.getInfo();
p2.getInfo();

/*
注：
1.单纯使用原型方式定义类无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性的值
2.如果使用原型的方式对象，那么生成的所有对象会共享原型中的属性，
  这样一个对象改变了该属性，也会反应到其他对象中
*/



//使用原型+构造函数方式定义对象,对象间的属性互不干扰，各个对象间共享同一个方法
function Person()
{
	this.username = new Array();
	this.password = "123";
}

Person.prototype.getInfo = function()
{
	alert(this.username + ", " + this.password);
}

var p1 = new Person();
var p2 = new Person();

p1.username.push("zhangsan");
p2.username.push("lisi");

p1.getInfo();
p2.getInfo();

4、动态原型方式创建对象:在构造函数中通过标志量，让所有对象共享一个方法，而每个对象又拥有自己的属性

//动态原型方式创建对象:在构造函数中通过标志量，让所有对象共享一个方法，而每个对象又拥有自己的属性
function Person()
{
	this.username = "zhangsan";
	this.password = "123";
	
	if(typeof Person.flag == "undefined")
	{
		alert("invoked");
		Person.prototype.getInfo = function()
		{
			alert(this.username + ", " + this.password);
		}

		Person.flag = true;
	}
}

var p1 = new Person();
var p2 = new Person();

p1.getInfo();
p2.getInfo();

十二、Javascript中继承
1）对象冒充

<script type="text/javascript">
	//继承第一种方式：对象冒充
	//注：在Javascript中this不是指本类，而是谁调用就代指谁
	function Parent(username)
	{
		this.username = username;
		this.sayHello = function()
		{
			alert(this.username);
		}
	}

	function Child(username, password)
	{
		//将method指向Parent对象
		this.method = Parent;
		//将子类的username赋值
		this.method(username);
		delete this.method;
		//以上3行代码是最关键的

		this.password = password;
		this.sayWorld = function()
		{
			alert(this.password);
		}
	}

	var p = new Parent("zhangsan");
	var c = new Child("lisi", "1234");

	p.sayHello();
	c.sayHello();
	c.sayWorld();
</script>

2）call方法方式
call方法是Function对象中的方法，因此我们定义的每一个function对象都拥有该方法。可以通过函数名来调用call方法，call方法中的第一个参数会被传递给函数中的this,从第二个开始依次赋值给函数中的参数。

<script type="text/javascript">
	//继承的第二种实现方式：call方法方式，Function对象的方法
	function test(str)
	{
		alert(this.name + "," + str);
	}

	var object = new Object();
	object.name = "zhangsan";
	//test.call相当于调用了test函数
	test.call(object, "learn");//将object赋给了this，从传入的第二个参数开始将依次赋值给test中定义的参数
</script>

3）apply方法方式

<script type="text/javascript">
	//第三种方式 apply方法方式
	function Parent(username)
	{
		this.username = username;
		this.sayHello = function()
		{
			alert(this.username);
		}
	}
	
	function Child(username, password)
	{
		//apply方法只是将call方法的零散的传值封装成了数组
		Parent.apply(this, new Array(username));
		this.password = password;
		this.sayWorld = function()
		{
			alert(this.password);
		}
	}
	
	var p = new Parent("zhangsan");
	var c = new Child("lisi", 999);

	p.sayHello();
	c.sayHello();
	c.sayWorld();
</script>

4）原型链方式（无法给构造函数传参）

<script type="text/javascript">
	//使用原型链(prototype chain)方式实现继承:无法给构造函数传参数
	function Parent()
	{
	}

	Parent.prototype.hello = "hello";
	Parent.prototype.sayHello = function()
	{
		alert(this.hello);
	}

	function Child()
	{
	}
	
	//将Child原型指向Parent
	Child.prototype = new Parent();
	Child.prototype.world = "world";
	Child.prototype.sayWorld = function()
	{
		alert(this.world);
	}

	var c = new Child();
	c.sayHello();
	c.sayWorld();
</script>

5）混合方式实现对象继承(推荐)

<script type="text/javascript">
	//混合方式实现对象继承(推荐)
	function Parent(hello)
	{
		this.hello = hello;
	}
	Parent.prototype.sayHello = function()
	{
		alert(this.hello);
	}

	function Child(hello, world)
	{
		Parent.call(this, hello);
		this.world = world;
	}

	Child.prototype = new Parent();
	Child.prototype.sayWorld = function()
	{
		alert(this.world);
	}

	var c = new Child("hello", "world");
	c.sayHello();
	c.sayWorld();
</script>

Ajax

<script type="text/javascript">
	//定义一个空的xmlHttpRequest，用于接收XMLHttpRequest对象
	var xmlHttpRequest = null;
	function ajaxSubmit()
	{
		//如果是IE浏览器
		if(window.ActiveXObject)
		{
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//除IE外的其他浏览器
		else if(window.XMLHttpRequest)
		{
			xmlHttpRequest = new XMLHttpRequest();
		}
		
		if(null != xmlHttpRequest)
		{
			var v1 = document.getElementById("v1").value;
			var v2 = document.getElementById("v2").value;
			
			/*GET请求方式
			xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);
			//绑定回调函数
			xmlHttpRequest.onreadystatechange = ajaxCallBack;
			//GET方式为null
			xmlHttpRequest.send(null);
			*/
			
			/*POST请求方式*/
			xmlHttpRequest.open("POST", "AjaxServlet", true);
			//绑定回调函数
			xmlHttpRequest.onreadystatechange = ajaxCallBack;
			//Post请求方式需要设置请求头
			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);
			
		}
		
	}
	//回调函数
	function ajaxCallBack()
	{
		if(xmlHttpRequest.readyState == 4)
		{
			if(xmlHttpRequest.status == 200)
			{
				var responseText = xmlHttpRequest.responseText;
				document.getElementById("showMsg").innerHTML = responseText;
			}
		}
	}
</script>