JavaScript是网页设计中最常用的客户端脚本语言。它能够使你的网页更加生动活泼,具有显示时间、制作特效等功能。jQuery、EXTJS、ajax等也都是基于javascript的技术。
先来介绍几款javascript的集成开发环境(IDE),
一、Eclipse中的JavaScript插件JSDT
JSDT(JavascriptDebugToolkit)是一个用于javascript编辑、调试的eclipse插件,用于调试javascript。JSDT可以跨浏览器调试,支持在IE,Firefox,Safari,Chrome等主流浏览器中调试javascript。JSDT支持设置断点,单步调试等调试工具的基本特性。
1JSDT的安装:
打开Eclipse,选择“Help\EclipseMarketpaces...”
在”find”中输入JSDT查找AllMarks
图1
在查找结果中选择JavascriptDebugToolkit,点击右侧的”learnmore”
点击右侧的绿色下载箭头(如下图),获取下载地址。
图2 下载链接 图3下载地址
将地址”http://jsdt......”复制下载,然后打开”Help\InstallnewSoftWare...”,t添加一个新的可用的repository,Location中粘贴刚刚复制下来的下载地址。
图4
然后点击“Ok”,进入下一步,之后进入下载状态,等几分钟下载完安装程序后会自动安装。
图5
安装完成后,接下来就可以建立项目,编辑JavaScript代码了。
2建立项目,编辑JavaScript代码
(1)选择“New\Others\JavaScript\JavaScriptProject”,输入项目名,然后下一步,完成。新的项目就建立起来了。
(2)鼠标右击项目名,选择“New\JavaScriptSourceFile”,输入文件名,建立“.Js”文件。接下来编码测试,体验它的强大功能吧!
3编码测试
Test.js
/**
*
*/
function f(){
document.writeln("Hello World");
window.alert("Hello JSDT!");
}
Test.html
<html>
<head><title>jsdt test</title></head>
<body>
Hello!
<script language="javascript" src="Test.js"></script>
<script>
f();
</script>
</body>
</html>
用Eclipse的WebBrowser方式打开,查看测试结构。
通过以上测试,你会发现,当你输入document或window时,他会自动提示document或window对象所包含的全部方法.你就不用自己输入方法名了;当你把一边的大括号”{或}”删除时,他也会报错。这样是不是可以很好地提高效率并减少错误。
二、NetBeans
NetBeans是另一款非常好用的JavaScript编辑和调试工具。
在网上下载一个NetBeans,最新版本好像是NetBeans7.2。一下是我下载NetBeans的一个链接:thunder://QUFodHRwOi8vcDJzLm5ld2h1YS5jb20vZG93bi9uZXRiZWFucy03LjItbWwtamF2YXNlLXdpbmRvd3MuZXhlWlo=
新建一个项目,如NetBeans类型的项目,然后新建一个JavaScript文件。选择”文件\新建文件\其他\JavaScript文件”,点击下一步,完成。
和上面的第3步一样,进行编码测试,看看效果。会发现提示功能好像比JSDT更强大。
三、JavaScript基础语法
1基本数据类型
JavaScript有6种基本数据类型:
JavaScript的6种基本数据类型分别为undefined、number、boolean、string、object与function
Undefined:是指变量被创建后,未给该变量赋值以前所具有的值.如vara;
Number:Number是数值类型,有两种整形和实型;
Boolean:是班的正确和错误的值,有true和false两种情况;
String:字符串用单引号或双引号来说明;
Object:对象数据类型如f=newString("thisisaString!");
Function:函数,是一个引用类型,可以看成是Object的子类;
JavaScript中,变量的定义用var,也可以省略。语法比较松散,不像java这样严谨。如:
Vara=12;a=12;两种方式都可以;字符串的定义b=“test”;varb=‘test’;两种方式都可以;熟悉java的人很容写成inta=12;Strings1="test1";或Strings2=newString("test2");这都是错误的。
下面是关于数据类型的一些例子:
function datatype() {
var a = 123;
b = 125.89;
c = true;
var d = null;
var e;
f = new String("this is a String!");
g='test2';
h = "test3";
document.writeln("整形" + a + "<br>");
document.writeln("实型" + b+ "<br>");
document.writeln("boolean型" + c+ "<br>");
document.writeln("null类型" + d+ "<br>");
document.writeln("Undefined类型" + e+ "<br>");
document.writeln("字符串1" + f+ "<br>");
document.writeln("字符串2" + g+ "<br>");
document.writeln("字符串3" + h+ "<br>");
}
2函数
语法:
Function函数名(参数列表){
函数体
Return一个值或表达式; //return可以省略,视需要而加
}
如:
//Eg1:
function funct1() {
document.writeln("函数1<br>");
}
//Eg2:
function funct2() {
document.writeln("函数2<br>");
var a = 10;
b = 15.5;
return a+b;
}
//Eg3:
function funct3(a, b) {
document.write("最大值为:");
return a>b?a:b;
}
假设上面这些例子都写在Test.js中,则调用该JavaScript方法的html文件如下:
test.html
<html>
<head><title>jsdt test</title></head>
<body>
<script language="javascript" src="Test.js"></script>
<script>
//f();
datatype();
funct1();
var result = funct2();
document.writeln(result + "<br>");
document.writeln(funct3(10, 80));
</script>
</body>
</html>