您的位置：首页 > Web前端 > JavaScript

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

2012-09-10 22:19 671 查看

JavaScript是网页设计中最常用的客户端脚本语言。它能够使你的网页更加生动活泼，具有显示时间、***特效等功能。jQuery 、EXTJS 、ajax等也都是基于javascript的技术。

先来介绍几款javascript的集成开发环境（IDE），

一、Eclipse中的JavaScript插件JSDT

JSDT(Javascript Debug Toolkit )是一个用于javascript编辑、调试的eclipse 插件，用于调试javascript。JSDT可以跨浏览器调试，支持在IE,Firefox,Safari,Chrome等主流浏览器中调试javascript。JSDT支持设置断点，单步调试等调试工具的基本特性。

1JSDT的安装：

打开Eclipse，选择“Help\Eclipse Marketpaces...”

在”find”中输入JSDT查找All Marks

图1

在查找结果中选择Javascript Debug Toolkit ，点击右侧的”learn more”

点击右侧的绿色下载箭头(如下图)，获取下载地址。

图2 下载链接图3 下载地址

将地址”http://jsdt......”复制下载，然后打开”Help\Install new SoftWare...”,t添加一个新的可用的repository，Location中粘贴刚刚复制下来的下载地址。

图4

然后点击“Ok”，进入下一步，之后进入下载状态，等几分钟下载完安装程序后会自动安装。

图5
安装完成后，接下来就可以建立项目，编辑JavaScript代码了。

2建立项目，编辑JavaScript代码

（1）选择“New\Others\JavaScript\JavaScript Project”，输入项目名，然后下一步，完成。新的项目就建立起来了。

（2）鼠标右击项目名，选择“New\JavaScript Source File”，输入文件名，建立“．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的Web Browser方式打开，查看测试结构。

通过以上测试，你会发现，当你输入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：是指变量被创建后，未给该变量赋值以前所具有的值.如 var a;

Number:Number是数值类型，有两种整形和实型；

Boolean：是班的正确和错误的值，有true和false两种情况；

String：字符串用单引号或双引号来说明;

Object：对象数据类型如f = new String("this is a String!");

Function：函数，是一个引用类型，可以看成是Object的子类；

JavaScript中，变量的定义用var，也可以省略。语法比较松散，不像java这样严谨。如：

Var a = 12; a = 12; 两种方式都可以；字符串的定义b = “test”;var b = ‘test’;两种方式都可以；熟悉java的人很容写成int a = 12; String s1 = "test1";或String s2 = new String("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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航