javascript 基礎(chǔ)篇1 什么是js 建立第一個(gè)js程序

更新時(shí)間：2012年03月14日 15:23:25 作者：

javascript是很多東西的基礎(chǔ)，比如jsp，ajax等，如果不會(huì)這么，那么學(xué)起這些來(lái)就比較麻煩，所以要先學(xué)好這個(gè)，為將來(lái)的學(xué)習(xí)打好經(jīng)濟(jì)基礎(chǔ)

javascript是一個(gè)基于對(duì)象和事件驅(qū)動(dòng)，并且具有安全性的腳本語(yǔ)言，應(yīng)用很廣泛，不僅僅是網(wǎng)頁(yè)，不要被jsp給困住。

基于對(duì)象，就是不需要指定變量的類型，你給他一個(gè)3，它知道是整型，如果給賦值'3'，它就知道是char。
事件驅(qū)動(dòng)，就是單擊啊，之類的事件進(jìn)行驅(qū)動(dòng)。

javascript優(yōu)點(diǎn)：網(wǎng)頁(yè)互動(dòng)性強(qiáng)，簡(jiǎn)單易用。js主要是基于客戶端運(yùn)行，很大程度上減少了服務(wù)器的負(fù)荷。
javascript是腳本編程語(yǔ)言：采用程序段方式實(shí)現(xiàn)，與HTML結(jié)合，java的編譯器其實(shí)就是瀏覽器本身。
安全性：HTML頁(yè)面中不能訪問(wèn)本地硬盤，只能對(duì)網(wǎng)絡(luò)文檔進(jìn)行刪除和修改，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。

跨平臺(tái)性：只要有支持js的瀏覽器，就可以運(yùn)行。
javascript是ECMAScript規(guī)范的一種實(shí)現(xiàn)。

js的編程通常在eclipse環(huán)境下，這里推薦一個(gè)插件spket，它可以智能提示代碼，非常好用，下載地址 spket IDE 1.6.22 根據(jù)需求選擇就好，我們一般是選Spket IDE啦。如果用的是myeclipse，可以選擇不安裝，因?yàn)樗旧砭蛶Я祟愃频慕M件。

插件的安裝的話，如果你下的是壓縮包(就是里面有倆文件夾plugin 和feature，那么把這倆個(gè)文件夾的內(nèi)容跟eclipse安裝目錄下相同文件夾合并就好。)

如果選擇的是可執(zhí)行jar包，那個(gè)安裝的時(shí)候記得選擇plugin選項(xiàng)。目錄選擇eclipse的安裝目錄。

接下來(lái)，打開eclipse吧~

(不是我說(shuō)，eclipse圖標(biāo)真的很難看，所以作為外貌協(xié)會(huì)的我其實(shí)一般來(lái)說(shuō)用的是myeclipse~)←這句話看清楚了，我說(shuō)的是圖標(biāo)，是圖標(biāo)！麻煩不要跑我這里吐槽UI！

打開以后，可以看到window菜單下preference選項(xiàng)里面有了spket，就是我們剛才說(shuō)的插件了，至于怎么用，今后會(huì)提到的。

接著，讓我們來(lái)建立一個(gè)js相關(guān)的project。file ->new -> java project 我就命名它為testJs了。

查看工程的workspace目錄相信大家都知道怎么看吧？在myeclipse中，右擊工程的話就會(huì)有myeclipse，鼠標(biāo)跟隨，右邊出現(xiàn)菜單，選擇open in explorer。

eclipse中，右鍵點(diǎn)工程，選擇properties，查看屬性，里面有工程目錄，復(fù)制一下到窗口打開就行了。

接著要建立一些標(biāo)準(zhǔn)路徑。

(我是越想越覺得苦逼啊，如果是myeclipse的話可以選擇web project，直接想要的就都有了啊...囧rz，但是為了符合大部分人的需求，還是得用eclipse來(lái)學(xué)。).

因?yàn)槲覀兪且⒁粋€(gè)jsp的project，所以在project下要有一些標(biāo)準(zhǔn)路徑，參照下面的圖片建立(我是把myeclipse下建立的web project后自動(dòng)生成的文件夾復(fù)制過(guò)來(lái)了)：

其中MANIFEST.MF的代碼內(nèi)容如下：

復(fù)制代碼代碼如下:

 
Manifest-Version: 1.0 
Class-Path: 

web.xml的內(nèi)容如下：

復(fù)制代碼代碼如下:

 
<?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> 

建立一個(gè)新的文件(New->File main.html 后綴不可少)，main.html 代碼如下:

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>(*￣▽￣)</title> 
</head> 

<body> 
This is my page. <br> 
</body> 
</html> 

接下來(lái)我們就要靠編輯這個(gè)玩意兒來(lái)享受js帶給我們的快感啦~！

首先，為了代碼規(guī)范，我比較建議大家把js的內(nèi)容都存放在新建的.js文件中，一來(lái)可以實(shí)現(xiàn)代碼共享，而來(lái)也好看好編輯。

作為一個(gè)A型血的微強(qiáng)迫癥，我如果看到代碼亂七八糟的話是絕對(duì)寫不下去的。

所以，這里我們首先在WebRoot目錄上點(diǎn)擊右鍵，選擇New->Folder+ (不是說(shuō)建立js文件嗎魂淡！)=.=別急別急，我們把js文件放到一起這樣比較好看啊~

新建一個(gè)名叫js的文件夾。然后再在這個(gè)文件夾上右擊，new->file 隨便寫個(gè)名字，記得加后綴，我命名它為output.js。

編輯js文件前我們示范下spket的用法，它可以幫助我們建立代碼模板，過(guò)程如下：

這樣，我們就建立了一個(gè)名字叫做func的模板，打開js文件，輸入func，按ALT+/ 提示中找到模板，回車，就出現(xiàn)了pattern中我們定義的代碼：

這樣我們js文件中就有一個(gè)函數(shù)啦~！

這樣大家就明白了吧~ spket可以用來(lái)自定義提示，同時(shí)它已經(jīng)自帶了js的模板，自己點(diǎn)點(diǎn)preference下spket里的各個(gè)東西，也就差不多熟悉了。

不過(guò)我們一般會(huì)導(dǎo)入一個(gè)extjs包，今后肯定有用，下載地址 senta

在spket中加載方法是：

接下在最后一步是 add file，然后把剛才下載的東西加載進(jìn)去就行了。

最后，來(lái)來(lái)來(lái)，我們?cè)趆tml中引用一下js文件，今天就算大獲成功啦ヘ(￣▽￣ヘ)：

在main.html中，編寫代碼如下：

復(fù)制代碼代碼如下:

 
<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”
接下來(lái)，找到工程目錄，雙擊html文件看下效果吧~