JavaScript基础入门：语言特性与Eclipse环境配置指南

JavaScript语言特性概述

JavaScript是一种基于对象和事件驱动，且具备安全性的脚本语言，应用场景十分广泛，并不局限于网页开发，不应被JSP的概念所局限。

所谓基于对象，是指无需显式指定变量类型。例如，赋值整数3时，系统自动识别为整型；若赋值字符串'3'，则识别为字符型。

事件驱动机制意味着程序由点击等用户交互事件来触发执行。

JavaScript的主要优势在于网页互动性强且简单易用。由于JS主要在客户端运行，这极大地减轻了服务器的负载压力。

JavaScript属于脚本编程语言，采用程序段方式实现，并与HTML结合使用。其编译器实际上就是浏览器本身。

在安全性方面，HTML页面无法直接访问本地硬盘，仅能对网络文档进行删除和修改操作，且所有信息浏览或动态交互必须通过浏览器实现。

JavaScript具有跨平台特性，只要浏览器支持JS即可运行，无需依赖特定操作系统。

JavaScript是ECMAScript规范的一种具体实现。

Eclipse开发环境配置

JavaScript编程通常在Eclipse环境下进行，这里推荐一款名为Spket的插件，它提供智能代码提示功能，非常实用。下载地址为Spket IDE 1.6.22，用户可根据需求选择版本，通常选择Spket IDE即可。如果使用MyEclipse，则无需额外安装，因为它已内置类似组件。

关于插件安装，若下载的是压缩包（包含plugin和feature两个文件夹），只需将这两个文件夹内的内容合并到Eclipse安装目录下对应的相同文件夹中即可。

若选择的是可执行jar包，安装时记得选择plugin选项，并将目录指向Eclipse的安装目录。

接下来，启动Eclipse软件。

（虽然Eclipse的图标确实不太美观，作为注重外观的用户，我通常使用MyEclipse，但请注意，这里讨论的是图标问题，请勿在此吐槽UI设计。）

打开软件后，可以在Window菜单下的Preference选项中找到Spket，这就是刚才安装的插件。至于具体使用方法，后续章节会详细介绍。

创建项目与标准路径设置

接着，我们来创建一个与JS相关的项目。依次点击File -> New -> Java project，我将项目命名为testJs。

查看工程的workspace目录，相信大家都熟悉如何操作。在MyEclipse中，右键点击工程会出现MyEclipse菜单，鼠标跟随后在右侧菜单中选择open in explorer即可。

在Eclipse中，右键点击工程，选择properties查看属性，其中包含工程目录信息，复制该路径到文件窗口打开即可。

随后需要建立一些标准路径。

（越看越觉得麻烦，如果是MyEclipse，可以选择Web project，这样所需结构直接生成……不过为了符合大多数人的需求，这里仍使用Eclipse进行演示。）

因为我们要建立的是一个JSP项目，所以在项目下需要包含一些标准路径。请参照图片建立（我是将MyEclipse下建立的Web project后自动生成的文件夹复制过来了）：

 
Manifest-Version: 1.0
Class-Path:

web.xml的内容如下：

 
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>main.html</welcome-file>
</welcome-file-list>
</web-app>

建立一个新的文件（New->File main.html，后缀不可省略），main.html代码如下：

 
<html>
<head>
<title>(*￣▽￣)</title>
</head>
<body>
This is my page. <br>
</body>
</html>

代码规范与模板使用

接下来，我们将通过编辑这个文件来体验JS带来的乐趣！

首先，为了代码规范，建议大家将JS内容存放在新建的.js文件中，这样既可以实现代码共享，也便于编辑和维护。

作为一个有轻微强迫症的人，如果看到代码杂乱无章，我是绝对无法继续编写的。

因此，这里我们首先在WebRoot目录上点击右键，选择New->Folder+（不是说建立js文件吗？别急，我们把js文件集中存放看起来更整洁）。

新建一个名为js的文件夹。然后在该文件夹上右击，选择new->file，随意命名，记得加上后缀，我将其命名为output.js。

在编辑js文件前，我们先示范一下Spket的用法，它可以帮助我们建立代码模板，过程如下：

这样，我们就建立了一个名为func的模板。打开js文件，输入func，按ALT+/在提示中找到模板，回车，即可出现pattern中我们定义的代码：

这样，我们的js文件中就包含了一个函数！

大家现在应该明白了吧？Spket支持自定义提示，同时也自带了JS模板。大家可以多点击Preference下Spket中的各项设置，很快就能熟悉。

不过，我们通常会导入一个extjs包，今后肯定有用，下载地址为senta。

在Spket中的加载方法是：

最后一步是add file，然后将刚才下载的内容加载进去即可。

HTML与JS文件引用

最后，让我们在html中引用一下js文件，今天就算大功告成了！

在main.html中，编写代码如下：

 
<html>
<head>
<title>O.O</title>
<script type="text/javascript" src="js/output.js"></script>
<script type="text/javascript">
testOutput("Dumpling");// use function
</script>
</head>
<body>
This is my JSP page. <br>
</body>
</html>

引用文件时使用src="xxxxx.jsp"。接下来，找到工程目录，双击html文件查看效果吧~

上面是在不同浏览器下的测试信息，兼容性很好吧~