Javascript教程
Javascript语言基础
内容:JavaScript语言。JavaScript语法很多
和C#、Java、C等语言类似,因此本课只讲
JavaScript特有的语法,不会再讲解编程的基
本原理。
目标:掌握JavaScript语法,为Dom编程和
JQuery打基础。
什么是JavaScript
l HTML只是描述网页长相的标记语言,没有计算、判断能力,如
果所有计算、判断(比如判断文本框是否为空、判断两次密码是
否输入一致)都放到服务器端执行的话网页的话页面会非常慢、
用起来也很难用,对服务器的压力也很大,因此要求能在浏览器
中执行一些简单的运算、判断。JavaScript就是一种在浏览器端
执行的语言。(纯前端语言)
l JavaScript的Java没直接的关系,唯一的关系就是JavaScript原
名LiveScript,后来吸收了Java的一些特性,升级为JavaScript。
JavaScript有时被简称为JS。
l JavaScript是解释型语言(对应为编译型语言如C#),无需编译就可以随时运行,这样哪怕
语法有错误,没有语法错误的部分还是能正确运行。
JS的开发环境
l VS中JavaScript、JQuery的自动完成功能:在VS2010中直接有,
VS2008需要安装VisualStudio 2008SP1(
http://www.microsoft.com/downloads/details.aspx?displaylang=zhcn&
familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61)和VS90SP1-
KB958502-x86(
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.a
spx?ReleaseId=1736)补丁会更强更好用。如果实在“.” 不出来也没关
系,不影响运行。注意:先安装2008SP1,再安装VS90SP1-
KB958502-x86。
l JS是非常灵活的动态语言,不像C#等静态语言那样严谨,开发工具中
的JS完成功能只是一个辅助、建议,“.”出来的成员调用可能不能用,“.”
不出来的成员也许也能调用,因此不要因为“点儿不出来”而担心代码有
问题。
l VS2008的HTML编辑器中触发JavaScript自动完成:Ctrl+J。
JS入门
l <script type="text/javascript">
l alert(new Date().toLocaleDateString());
l </script>
l <script language="....>已经不推荐使用。
l JavaScript代码放到<script>标签中,script可以放到<head>、<body>等任意位
置,而且可以有不止一个<script>标签。alert函数是弹出消息窗口,new Date()
是创建一个Date类的对象,默认值就是当前时间。JS是大小写敏感的。
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>
</head>
<body>
</body>
</html>
l 放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>
是随着页面的加载而一个个执行的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>
<script type="text/javascript">
alert("唯有知情一片月,曾窥飞鸟入朝阳!");
</script>
</head>
<body>
<script type="text/javascript">
alert("玉京星阙!");
</script>
aaaaaaaaaaa
<script type="text/javascript">
alert("无人唱彻!");
</script>
bbbbbbbbbbbbbbbbb
</body>
</html>
l 除了可以在页面中声明JavaScript以外,还可以将JavaScript写到单独的js文件中
,然后在页面中引入:<script src="test.js" type="text/javascript"></script>。声
明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*)
<script src="common.js" type="text/javascript">
</script>
引用公用的js文件
l 注意:不要写成<script src="test.js" type="text/javascript"/>否则会有问题,这是
一个比较特殊的地方。
事件
l 在超链接的点击里执行JavaScript:
<a href="javascript:alert(88)">发发</a>
l JavaScript中也有事件的概念,当按钮被点击的时候也可以执行
JavaScript:
• <input type="button" οnclick="alert(99)" value="久久"/>
• 只有超链接的href中的JavaScript中才需要加“"javascript:”,
因为它不是事件,而是把“"javascript:”看成像“http:”、“ftp:”、
“thunder://”、“ed2k://”、"mailto:"一样的网络协议,交由js解
析引擎处理。只有href中这是这是一个特例。
JS的变量
l JavaScript中即可以使用双引号声明字符串,也可以使用单引号
声明字符串。主要是为了方便和html集成,避免转义符的麻烦。
l JavaScript中有null、undefined两种,null表示变量的值为空,
undefined则表示变量还没有指向任何的对象,未初始化。两者
的区别参考资料。
l JavaScript是弱类型语言(没有那么严谨完善的机制,没有类型一说),声明变量的时候无法:int i=0;只能通过var i=0;(声明变量为i指向0的整数,一旦指向0就是int类型)声明变量,和C#中的var不一样,不是C#中那样的类型推断。
l JavaScript中也可以不用var声明变量,直接用,这样的变量是“
全局变量”,因此除非确实想用全局变量,否则使用的时候最好
加上var。
l JS是动态类型的,因此var i=0;i="abc";是合法的。
JS除错与调试
l 如果JavaScript中的代码有语法错误,浏览器会弹出报错信息,
查看报错信息就能帮助排查错误。
l JavaScript的调试,使用VS可以很方便的进行JavaScript的调试
,调试时需要注意几点:
• IE6的调试选项要打开,Internet选项→高级,去掉“禁用脚本
调试”前的勾选。
• 以调试方式运行网页。
• 设置断点、监视变量等操作和C#一样。
l 案例:用循环语句的方法计算1到100之间整数的和
<script type="text/javascript">
// alert("唯有知情一片月,曾窥飞鸟入朝阳!");
var sum = 0;
for (var i = 0; i <= 100; i++) {
sum += i;
}
alert(sum);
</script>
判断变量初始化
JavaScript中判断变量、参数是否初始化的三种方法:
var x;
if (x == null) {
alert("null");
}
if (typeof (x) == "undefined") {
alert('undefined');
}
if (!x) {alert('不x');}
if(x){}//变量被初始化了或者变量不为空或者变量不为0.
推荐用最后一种方法。
函数的声明
l JavaScript中声明函数的方式:
function add(i1, i2) {
return i1 + i2;
}
int add(int i1,int i2)//C#写法
l 不需要声明返回值类型、参数类型。函数定义以function开头。
var r = add(1, 2);
alert(r);
r = add("你好", "tom");
alert(r);
l JavaScript中不像C#中那样要求所有路径都有返回值,没有返回值就是
undefined。
l 易错:自定义函数名不要和js内置、dom内置方法重名,比如selectall、
focus等函数名不要用。
匿名函数
var f1 = function(i1, i2) {
return i1 + i2;
}
alert(f1(1,2));
l 类似于C#中的匿名函数。
l 这种匿名函数的用法在JQuery中的非常多
l alert(function(i1, i2) { return i1 + i2; }(10,10));//直接声明一个匿名
函数,立即使用。用匿名函数省得定义一个用一次就不用的函数
,而且免了命名冲突的问题,js中没有命名空间的概念,因此很
容易函数名字冲突。通过例子发现一旦命名冲突以最后声明的为
准
l 必须<script src="my1.js" type="text/javascript"></script>不能:
<script src="my1.js" type="text/javascript"/>
JS面向对象基础(*)
l JavaScript中没有类的语法,是用函数闭包(closure)模拟出来的,下面讲解的时候
还是用C#中的类、构造函数的概念,JavaScript中String、Date等“类”都被叫做“对象”
,挺怪,方便初学者理解,不严谨。JavaScript中声明类(类不是类,是对象):
function Person(name, age) {
this.Name = name;
this.Age = age;
this.SayHello = function () {
alert("你好,我是" + this.Name + ",我" + this.Age + "岁了");
}
}
var p1 = new Person("tom", 20);
p1.SayHello();
l 必须要声明类名,function Person(name,age)可以看做是声明构造函数,Name、Age
这些属性也是使用者动态添加了。var p1 = Person("tom", 30);//不要丢了new,否则就
变成调用函数了,p1为undefined。new 相当于创建了函数的一个实例
String对象(*)
l length属性;
l charAt方法;
l indexOf;
l match、replace、search方法,正则表达式相关
l split
l substr、substring
Array对象
l JavaScript中的Array对象就是数组,首先是一个动态数组,而且
是一个像C#中数组、ArrayList、Hashtable等的超强综合体。
var names = new Array();
names[0] = "tom";
names[1] = "jerry";
names[2] = "lily";
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}
var names = new Array();
names[0] = "tom";
names[1] = "jerry";
names[2] = "lily";
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}
l 无需预先制定大小,动态。
练习
l 求一个数组中的最大值。定义成函数。
function getMax(arr) {
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max=arr[i];
}
}
return max;
}
var arr1 = new Array();
arr1[0] = 10;
arr1[1] = 100;
arr1[2] = 30;
arr1[3] = 50;
arr1[4] = 8;
alert(getMax(arr1));
l 将一个字符串数组输出为|分割的形式,比如“梅西|卡卡|郑大世”
。不要使用JavaScript中的Join函数。arr1.join("|")将数组用分隔
符连接成一个字符串。
function myjoin(arr) {
if (arr.length <= 0) {
return "";
}
var s = arr[0];
for (var i = 1; i < arr.length; i++) {
s=s+"|"+arr[i];
}
return s;
}
var arr = new Array();
arr[0] = "tom";
arr[1] = "jerry";
arr[2] = "lily";
alert(myjoin(arr));
l 将一个字符串数组的元素的顺序进行反转。{"3","a","8","haha"}
{"haha","8","a","3"}。不要使用JavaScript中的反转函数。提示:
第i个和第length-i-1个进行交换。定义成函数。Myreverse
function myreverse(arr) {
for (var i = 0; i < arr.length / 2; i++) {
var temp;
temp = arr[i];
arr[i] = arr[arr.length - i - 1];
arr[arr.length - i - 1] = temp;
}
}
var arr = new Array();
arr[0] = "tom";
arr[1] = "jerry";
arr[2] = "lily";
alert(myjoin(arr));
myreverse(arr);
alert(arr);
l 交换两个变量,数组同样是传递引用,js出错很麻烦。
JS中的Dictionary
l JS中的Array是一个宝贝,不仅是一个数组,还是一个Dictionary
,还是一个Stack。
var pinyins = new Array();
pinyins["人"] = "ren";
pinyins["口"] = "kou";
pinyins["手"] = "shou";
alert(pinyins["人"]);
alert(pinyins.人);
var diec = new Array();
diec["人"] = "ren";
diec["口"] = "kou";
diec["手"] = "shou";
alert(diec["口"]);
alert(diec.口);
var diec = new Array();
diec["人"] = "ren";
diec["口"] = "kou";
diec["手"] = "shou";
// alert(diec["口"]);
// alert(diec.口);
for (var k in diec) {
alert(k);
}
var arr = new Array();
arr[0] = "tom";
arr[1] = "jerry";
arr[2] = "lily";
for (var a in arr) {
alert(a);
}
结果为0,1,2
l 像Hashtable、Dictionary那样用,而且像它们一样效率高。
l 课下练习:网页版的火星文翻译。
Array的简化声明
l Array还可以有简化的创建方式
• var arr = [3, 5, 6, 8, 9]; 普通数组初始化
• 这种数组可以看做是pinyins["人"] = "ren";的特例,也就是key为0、1
、2……
l 字典风格的简化创建方式:
• var arr = {"tom":30,"jim":20};
var arr3 = { "tom": 30, "jim": 20 };
alert(arr3["jim"]);
输出为:20
数组、for及其他
l 对于数组风格的Array来说,可以使用join方法拼接为字符串
var arr = ["tom","jim","lily"];
alert(arr.join(","));//JS中join是array的方法,不像.Net中是string的方法
for循环可以像C#中的foreach一样用
l for循环还可以获得一个对象所有的成员,类似于.Net中的反射
for (var e in document) {
alert(e);
}因为对象的成员就是以对象的key的形式出现的
var p1 = new Object();
p1.Name = "tom";
p1.Age = 30;
p1.SayHello = function () { alert("hello"); };
p1.SayHello();
for (var s in p1) {
alert(s);
}
有了它没有文档也可以进行开发。
扩展方法(*)
l 通过类对象的prototype设置扩展方法,下面为String对象增加
quote(两边加字符)方法
l String.prototype.quote = function(quotestr) {
l if (!quotestr) {
l quotestr = "\"";
l }
l return quotestr + this + quotestr;
l };
l alert("abc".quote()); alert("abc".quote("|"));
l 扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门
的函数默认值的语法,但是可以不给参数传值,不传值的参数值
就是undefined,自己做判断来给默认值。