`
luoweifu
  • 浏览: 61001 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JavaScript的基础语法与集成开发工具(IDE)

 
阅读更多

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>



分享到：
| JavaScript 开发测试工具概览
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics