javascript学习笔记

概述：javascript是一种运行在客户端浏览器的脚本语言，同时是解释型不需要编译、面向对象的语言。

特性：交互式操作、表单验证、网页特效。

语法：弱类型语言。

本文将从javacript的变量类型、常用对象、函数、创建对象、对象继承等主干知识展开对javascript的研究。

变量类型：

原始类型：
1、JavaScript中有五种原始数据类型：Undefined（undefined）、Null（null）、Boolean（true、false）、Number以及String。
2、typeof是一元运算符，后跟变量的名称，用于获取变量的数据类型，其返回值有5个：undefined、boolean、number、string以及object。
3、强制类型转换：在JavaScript中有3种强制类型转换：Boolean(value)，Number(value)，String(value)、parseInt(value)
4、在JavaScript中，对于函数中定义的变量来说，加var表示局部变量，不加var表示全局变量。
6、定义字符串：var s = "?" // var s = new String("?")
5、字符串相关方法：
     •charAt(索引)返回索引位置的字符
     •indexOf(“字串”[,索引])返回字串在对象中的索引位置
     •lastIndexOf(“字串”[,索引])返回字串在对象中的索引位置（反向搜索）
     •replace("字串1","字串2")字串2替换字串1
     •search(“字串”)返回字串在对象中的索引位置
     •substring(索引i[,索引j])返回索引i倒索引j-1的子串

对象类型：
1、在JavaScript，所有对象都是从Object对象继承过来的。Object中的属性是不可枚举的(propertyIsEnumerable返回false)，因此无法通过for…in语句得到其中的属性。

        eg: 

   	var obj = {name : "admin", password : "123"};
	for(var temp in obj)
	{
	     alert(temp + ":" + obj[temp]);
	}

2、在JavaScript中，可以动态添加对象的属性，也可以动态删除对象的属性。

    eg: 

	var obj = new Object();
	obj.name = "admin";//obj["name"] = "admin";
	alert(obj.name);
	delete obj.name;

重要对象：document、Array、Date、form

1、document

      document.getElementById("?").value
      document.getElementById("?").innerHtml
      document.getElementByName("?")[index].value
      document.location.href("?")
      document.writeln("?")

2、Array

   var array = new Array();
   array[index] = ?;
   array.push(?);

     最常用的方式：var array = [?, ?, ?]

    常用方法join("?")、toString()、reverse()、sort()。

3、Date对象

    var date = new Date();
   •getYear() 返回年份数
   •getFullYear() 返回年份数
   •getMonth() 返回月份数（0--11）
   •getDate() 返回日期数（1--31）
   •getDay() 返回星期数（0--6）
   •getHours() 返回时数（0--23）

   •getMinutes() 返回分数（0--59）

4、form对象
   •表单对象(最常使用，重要)：
   •文件对象的子对象，Javascript的runtime engine自动为每一个表单建立一个表单对象。
   •格式：
   •document.forms[索引].属性
   •document.forms[索引].方法（参数）
   •document.表单名称.属性
   •document.表单名称.方法（参数）

函数：

1、在JavaScript中，函数（function）就是对象，没有方法（函数）重载的概念。

     eg:

 	function add(){} ==  var add = function(){}

     所以定义两个相同函数名时，后面一个会把前面一个覆盖掉。 

2、在JavaScript中有一个Function对象，所有自定义的函数都是Function对象类型的。Function对象接收的所有参数都是字符串类型的，其中最后一个参数就是要执行的函数体，而前面的参数则是函数真正需要接收的参数。

   eg: 

	var add = new Function("name", "password", "alert(name);alert(password);");
	add("admin", "admin");

3、每一个函数对象都有一个length属性，表示该函数期望接收的参数格式。它与函数的arguments不同，arguments.length表示函数实际接收的参数格式。

   eg: 

	function add(name, password, age)
	{
		alert(add.length);
		alert(arguments.length);
	}
	add("admin", "admin");

4、在JavaScript中，如果函数没有声明返回值，那么会返回undefined。

高级部分：

1、创建对象
      1）基于已有对象扩充其属性和方法：

	var obj = new Object();
	obj.name = "admin";
	obj.sayHello = function(name)
	{
		this.name = name;
		alert(this.name);
	};

	obj.sayHello("sha");

      2） 工厂方式
      无参方式

	<script type="text/javascript">
		function createObj()
		{
			var obj = new Object();
			obj.name = "admin";
			obj.password = "admin";


			obj.sayHello = function()
			{
				alert(this.name + ":" + this.password);
			};

			return obj;
		}

		var obj = createObj();
		obj.sayHello();
        </script>

            带有参数的构造方法

	<script type="text/javascript">
		function createObj(name, password)
		{
			var obj = new Object();
			obj.name = name;
			obj.password = password;

			obj.sayHello = function()
			{
				alert(this.name + ":" + this.password);
			};

			return obj;
		}


		var obj = createObj("admin", "admin");
		obj.sayHello();
        </script>

曾对上面的改进，让一个方法被多个对象共享，而不是一个对象一个函数。

	<script type="text/javascript">

		function sayHello()
		{
			alert(this.name + ":" + this.password);
		}
		function createObj(name, password)
		{
			var obj = new Object();
			obj.name = name;
			obj.password = password;

			obj.sayHello = sayHello;

			return obj;
		}


		var obj = createObj("admin", "admin");
		obj.sayHello();
        </script>

3）构造函数方式
无参方式

	<script type="text/javascript">

		function sayHello()
		{
			alert(this.name + ":" + this.password);
		}
		function Person()
		{
			this.name = "admin";
			this.password = "admin";

			this.sayHello = sayHello;
		}

		var obj = new Person();
		obj.sayHello();
        </script>

有参方式

	<script type="text/javascript">

		function sayHello()
		{
			alert(this.name + ":" + this.password);
		}
		function Person(name, password)
		{
			this.name = name;
			this.password = password;

			this.sayHello = sayHello;
		}


		var obj = new Person("admin", "admin");
		obj.sayHello();
        </script>

4）原型（prototype）方式

	<script type="text/javascript">
		function Person(){}

		Person.prototype.name = "admin";
		Person.prototype.password = "admin";

		Person.prototype.sayHello = function()
		{
			alert(this.name + ":" + this.password);
		};

		var per0 = new Person();
		var per1 = new Person();

		per0.name = "sha";
		per0.sayHello();
		per1.sayHello();
        </script>

 

	 <script type="text/javascript">
		function Person(){}

		Person.prototype.name = new Array();
		Person.prototype.password = "admin";

		Person.prototype.sayHello = function()
		{
			alert(this.name + ":" + this.password);
		};


		var per0 = new Person();
		var per1 = new Person();


		per0.name.push("sha");
		per0.name.push("admin");
		per0.passoword = "123";


		per0.sayHello();
		per1.sayHello();
	</script>

使用原型+构造函数方式

	<script type="text/javascript">
		function Person()
		{
			this.name = new Array();
			this.password = "123";
		}

		Person.prototype.sayHello = function()
		{
			alert(this.name + ":" + this.password);
		};

		var per0 = new Person();
		var per1 = new Person();

		per0.name.push("admin");
		per1.name.push("sha");

		per0.sayHello();
		per1.sayHello();
	</script>

5）动态原型方式

<script type="text/javascript">
	function Person()
	{
		this.name = new Array();
		this.password = "123";

		if(typeof Person.flag == "undefined")
		{
			alert("invoke");
			Person.prototype.sayHello = function()
			{
				alert(this.name + ":" + this.password);
			};
			Person.flag = true;
		}
	}

	var per0 = new Person();
	var per1 = new Person();

	per0.name.push("admin");
	per1.name.push("sha");

	per0.sayHello();
	per1.sayHello();
</script>

2、对象的继承
1）对象的冒充

	<script type="text/javascript">
		function Parent(name)
		{
			this.name = name;
			this.sayHello = function()
			{
				alert(this.name);
			}
		}

		function Child(name, password)
		{
			this.method = Parent;
			this.method(name);
			delete this.method;

			this.password = password;

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

		var child = new Child("admin", "123");

		child.sayHello();
		child.sayHi();
	</script>

2）call方法

	<script type="text/javascript">
		function Parent(name)
		{
			this.name = name;
			this.sayHello = function()
			{
				alert(this.name);
			}
		}

		function Child(name, password)
		{
			Parent.call(this, name);
			this.password = password;

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

		var child = new Child("admin", "123");

		child.sayHello();
		child.sayHi();
	</script>

3）apply方式

	<script type="text/javascript">
		function Parent(name)
		{
			this.name = name;
			this.sayHello = function()
			{
				alert(this.name);
			}
		}

		function Child(name, password)
		{
			Parent.apply(this, [name]);
			this.password = password;

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

		var child = new Child("admin", "123");

		child.sayHello();
		child.sayHi();
	</script>

4）使用原型链（prototype chian）方式

	<script type="text/javascript">
		function Parent(){}

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

		function Child(){}

		Child.prototype = new Parent();

		Child.prototype.password = "123";
		Child.prototype.sayHi = function()
		{
			alert(this.password);
		};

		var child = new Child();

		child.sayHello();
		child.sayHi();
	</script>

5）混合方式

	<script type="text/javascript">
		function Parent(name)
		{
			this.name = name;
		}

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

		function Child(name, password)
		{
			Parent.call(this, name);
			this.password = password;
		}

		Child.prototype = new Parent();

		Child.prototype.sayHi = function()
		{
			alert(this.password);
		}

		var child = new Child("admin", "123");

		child.sayHello();
		child.sayHi();
	</script>

特效：定时器

      [定时器对象名=] setTimeout(“<表达式>”，毫秒)。
      [定时器对象名=] setInterval(“<表达式>”，毫秒)；
      clearInterval(name)

主流框架：jQuery、dojo、extJs。

单元测试框架：jsUnit。弹alert法。
1、引入jsCoreUnit.js
2、编写测试方法。testXxx(); setUp();tearDown();setUpPage();
3、打开testRunner.html输入要测试的页面的绝对地址。