概述: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语句得到其中的属性。
•getYear() 返回年份数
•getFullYear() 返回年份数
•getMonth() 返回月份数(0--11)
•getDate() 返回日期数(1--31)
•getDay() 返回星期数(0--6)
•getHours() 返回时数(0--23)
•表单对象(最常使用,重要):
•文件对象的子对象,Javascript的runtime engine自动为每一个表单建立一个表单对象。
•格式:
•document.forms[索引].属性
•document.forms[索引].方法(参数)
•document.表单名称.属性
•document.表单名称.方法(参数)
3、每一个函数对象都有一个length属性,表示该函数期望接收的参数格式。它与函数的arguments不同,arguments.length表示函数实际接收的参数格式。
4、在JavaScript中,如果函数没有声明返回值,那么会返回undefined。
1)基于已有对象扩充其属性和方法:
无参方式
带有参数的构造方法
曾对上面的改进,让一个方法被多个对象共享,而不是一个对象一个函数。
3)构造函数方式
无参方式
有参方式
4)原型(prototype)方式
使用原型+构造函数方式
5)动态原型方式
2、对象的继承
1)对象的冒充
2)call方法
3)apply方式
4)使用原型链(prototype chian)方式
5)混合方式
[定时器对象名=] setInterval(“<表达式>”,毫秒);
clearInterval(name)
主流框架:jQuery、dojo、extJs。
单元测试框架:jsUnit。弹alert法。
1、引入jsCoreUnit.js
2、编写测试方法。testXxx(); setUp();tearDown();setUpPage();
3、打开testRunner.html输入要测试的页面的绝对地址。
特性:交互式操作、表单验证、网页特效。
语法:弱类型语言。
本文将从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("?")
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)
•表单对象(最常使用,重要):
•文件对象的子对象,Javascript的runtime engine自动为每一个表单建立一个表单对象。
•格式:
•document.forms[索引].属性
•document.forms[索引].方法(参数)
•document.表单名称.属性
•document.表单名称.方法(参数)
函数:
1、在JavaScript中,函数(function)就是对象,没有方法(函数)重载的概念。eg:
function add(){} == var add = 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输入要测试的页面的绝对地址。