首頁 > 網頁教程 > JavaScript > Javascript新手教程:從入門到精通(完整版)

Javascript新手教程:從入門到精通(完整版)

時間:2011-09-26    來源:互聯網

JavaScript教程語言概況

  Internet時代,造就了我們新的工作和生活方式,其互聯性、開放性和共享信息的模式,打破了傳統信息傳播方式的重重壁壘,為我們帶來了新的機遇。隨著計算機和信息時代的到來,人類社會前進的腳步在逐漸加快,每一天都有新的事情發生,每一天都在創造著奇跡。隨著Internet技術的突飛猛進,各行各業都在加入Internet的行業中來。無論從管理方面,還是從商業角度來看,Internet都可以帶來無限生機。通過Internet,可以實現地區、集體乃至個人的連接,從而達到一種“統一的和諧”。那么怎樣把自己的或公司的信息資源加入到WWW 服務器,是廣大用戶日益關心的問題。采用超鏈技術(超文本和超媒體技術)是實現這個目標最簡單的、最快速的手段和途徑。具體實現這種手段的支持環境,那就是HTML超文本標識語言。通過它們可制作所需的Web網頁。
  通過超文本(Hyper Text)和超媒體(Hyper Media)技術結合超鏈接(Hyper link)的鏈接功能將各種信息組織成網絡結構(web),構成網絡文檔(Document),實現Internet上的“漫游”。通過HTML符號的描述就可以實現文字、表格、聲音、圖像、動畫等多媒體信息的檢索。
  然而采用這種超鏈技術存在有一定的缺陷,那就是它只能提供一種靜態的信息資源,缺少動態的客戶端與服務器端的交互。雖然可通過CGI(Common Gateway Interface)通用網關接口實現一定的交互,但由于該方法編程較為復雜,因而在一段時間防礙了Internet技術的發展。而JavaScript的出現,無凝為Internet網上用戶帶來了一線生機。可以這樣說,JavaScript的出現是時代的需求,是當今的信息時代造就了JavaScript。
  JavaScript的出現,它可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關系,而是實現了一種實時的、動態的、可交式的表達能力。從而基于CGI靜態的HTML頁面將被可提供動態實時信息,并對客戶操作進行反應的Web頁面的取代。JavaScript腳本正是滿足這種需求而產生的語言。它深受廣泛用戶的喜愛的歡迎。它是眾多腳本語言中較為優秀的一種,它與WWW的結合有效地實現了網絡計算和網絡計算機的藍圖。無凝Java家族將占領Internet網絡的主導地位。因此,盡快掌握JavaScript腳本語言編程方法是我國廣大用戶日益關心的。

一、什么是JavaScript

  JavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言(Java小程序)一起實現在一個Web頁面中鏈接多個對象,與Web客戶交互作用。從而可以開發客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現的。它的出現彌補了HTML語言的缺陷,它是Java與HTML折衷的選擇,具有以下幾個基本特點:
  腳本編寫語言
  JavaScript是一種腳本語言,它采用小程序段的方式實現編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發過程。
  它的基本結構形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣,需要先編譯,而是在程序運行過程中被逐行地解釋。它與HTML標識結合在一起,從而方便用戶的使用操作。
  基于對象的語言
  JavaScript是一種基于對象的語言,同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此,許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。
  簡單性
  JavaScript的簡單性主要體現在:首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型,并未使用嚴格的數據類型。
  安全性
  JavaScript是一種安全性語言,它不允許訪問本地的硬盤,并不能將數據存入到服務器上,不允許對網絡文檔進行修改和刪除,只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
  動態性
  JavaScript是動態的,它可以直接對用戶或客戶輸入做出響應,無須經過Web服務程序。它對用戶的反映響應,是采用以事件驅動的方式進行的。所謂事件驅動,就是指在主頁(Home Page)中執行了某種操作所產生的動作,就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后,可能會引起相應的事件響應。
  跨平臺性
  JavaScript是依賴于瀏覽器本身,與操作環境無關,只要能運行瀏覽器的計算機,并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。
  實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦,軟件僅需一個字處理軟件及一瀏覽器,無須WEB服務器通道,通過自己的電腦即可完成所有的事情。
  綜合所述JavaScript 是一種新的描述語言,它可以被箝入到HTML 的文件之中。JavaScript語言可以做到回應使用者的需求事件(如:form 的輸入) ,而不用任何的網路來回傳輸資料,所以當一位使用者輸入一項資料時,它不用經過傳給伺服端(server)處理,再傳回來的過程,而直接可以被客戶端(client) 的應用程式所處理。
  JavaScript 和Java 很類似,但到底并不一樣!Java 是一種比JavaScript 更復雜許多的程式語言,而JavaScript 則是相當容易了解的語言。JavaScript 創作者可以不那麼注重程式技巧,所以許多Java 的特性在Java Script 中并不支援。

二、JavaScript和Java的區別

  雖然JavaScript與Java有緊密的聯系,但卻是兩個公司開發的不同的兩個產品。Java是SUN公司推出的新一代面向對象的程序設計語言,特別適合于Internet應用程序開發;而JavaScript是Netscape公司的產品,其目的是為了擴展Netscape Navigator功能,而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言,它的前身是Live Script;而Java的前身是Oak語言。下面對兩種語言間的異同作如下比較:
  基于對象和面向對象
  Java是一種真正的面向對象的語言,即使是開發簡單的程序,必須設計對象。
  JavaScript是種腳本語言,它可以用來制作與網絡無關的,與用戶交互作用的復雜軟件。它是一種基于對象(Object Based)和事件驅動(Event Driver)的編程語言。因而它本身提供了非常豐富的內部對象供設計人員使用。
  解釋和編譯
  兩種語言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶端執行之前,必須經過編譯,因而客戶端上必須具有相應平臺上的仿真器或解釋器,它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。
  JavaScript是一種解釋性編程語言,其源代碼在發往客戶端執行之前不需經過編譯,而是將文本格式的字符代碼發送給客戶編由瀏覽器解釋執行。
  強變量和弱變量
  兩種語言所采取的變量是不一樣的。
  Java采用強類型變量檢查,即所有變量在編譯之前必須作聲明。如:
  Integer x;
  String y;
  x=1234;
  x=4321;
  其中X=1234說明是一個整數,Y=4321說明是一個字符串。
  JavaScript中變量聲明,采用其弱類型。即變量在使用前不需作聲明,而是解釋器在運行時檢查其數據類型,如:
  x=1234;
  y="4321";
  前者說明x為其數值型變量,而后者說明y為字符型變量。
  代碼格式不一樣
  Java是一種與HTML無關的格式,必須通過像HTML中引用外媒體那么進行裝載,其代碼以字節代碼的形式保存在獨立的文檔中。
  JavaScript的代碼是一種文本字符格式,可以直接嵌入HTML文檔中,并且可動態裝載。編寫HTML文檔就像編輯文本文件一樣方便。
  嵌入方式不一樣
  在HTML文檔中,兩種編程語言的標識不同,JavaScript使用<Script>...</Script>來標識,而Java使用<applet>...</applet>來標識。
  靜態聯編和動態聯編
  Java采用靜態聯編,即Java的對象引用必須在編譯時的進行,以使編譯器能夠實現強類型檢查。
  JavaScript采用動態聯編,即JavaScript的對象引用在運行時進行檢查,如不經編譯則就無法實現對象引用的檢查。
三、JavaScript程序運行環境
Java運行環境
  軟件環境:
  Windows 95/98或Windows NT。
  Netscape Navigator x.0或Internet Explorer x.0。
  用于編輯HTML文檔的字符編輯器(WS、WPS、Notepad、WordPad等)或HTML文檔編輯器。
  硬件配置:
  首先必須具備運行Windows 95/98或Windows NT的基本硬件配置環境。推薦:
  基本內存32M。
  CRT只少需要256顏色,分辨率在640X480以上。
  CPU只少233以上。
  鼠標和其它外部設置(根據需要選用)。

四、編寫第一個JavaScript程序

  下面我們通過一個例子,編寫第一個JavaScript程序。通過它可說明JavaScript的腳本是怎樣被嵌入到HTML文檔中的。test1.html文檔: 

<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here.
alert("這是第一個JavaScript例子!");
alert("歡迎你進入JavaScript世界!");
alert("今后我們將共同學習JavaScript知識!");
</Script>
</Head>
</Html>

在Internet Explore5.0中運行行后的結果見圖1-1所示。

圖1-1 程序運行的結果
說明:test.html是HTML文檔,其標識格式為標準的HTML格式;
如同HTML標識語言一樣,JavaScript程序代碼是一些可用字處理軟件瀏覽的文本,它在描述頁面的HTML相關區域出現。
JavaScript代碼由<Script Language ="JavaScript">...</Script>說明。在標識<Script Language ="JavaScript">...</Script>之間就可加入JavaScript腳本。
alert()是JavaScript的窗口對象方法,其功能是彈出一個具有OK對話框并顯示()中的字符串。
通過<!-- ...//-->標識說明:若不認識JavaScript代碼的瀏覽器,則所有在其中的標識均被忽略;若認識,則執行其結果。使用注釋這是一個好的編程習慣,它使其他人可以讀懂你的語言。
JavaScript 以</Script> 標簽結束。
  從上面的實例分析中我們可以看出,編寫一個JavaScript程序確實非常容易的

JavaScript基本數據結構  JavaScript提供腳本語言的編程與C++非常相似,它只是去掉了C語言中有關指針等容易產生的錯誤,并提供了功能強大的類庫。對于已經具備C++或C語言的人來說,學習JavaScript腳本語言是一件非常輕松愉快的事。

一、JavaScript代碼的加入

  JavaScript的腳本包括在HTML中,它成為HTML文檔的一部分。與HTML標識相結合,構成了一個功能強大的Internet網上編程語言。可以直接將JavaScript腳本加入文檔:

<Script Language ="JavaScript">
JavaScript語言代碼;
JavaScript 語言代碼;
....
</Script>

說明:
  通過標識<Script>...</Script>指明JavaScript腳本源代碼將放入其間。
  通過屬性Language ="JavaScript"說明標識中是使用的何種語言,這里是JavaScript語言, 表示在JavaScript中使用的語言。
  下面是將JavaScript腳本加入Web文檔中的例子:
Test2.html

<HTML>
<Head>
<Script Language ="JavaScript">
document. Write("這是賽迪網互動學校");
document. close();
</Script>
</Head>
</HTML>

  在瀏覽器的窗口中調用test2.html,則顯示“這是賽迪網互動學校”字串。見圖2所示。


圖2

說明:
  Document. write()是文檔對象的輸出函數,其功能是將括號中的字符或變量值輸出到窗口;document. close()是將輸出關閉。
可將<Script>...</Script>標識放入head>.. </Head>或<Body> ...</Body>之間。將JavaScript標識放置<Head>... </Head>在頭部之間,使之在主頁和其余部分代碼之前裝載,從而可使代碼的功能更強大;可以將JavaScript標識放置在<Body>... </Body>主體之間以實現某些部分動態地創建文檔。

相關推薦
新手教程:107條Javascript的常用語句
JavaScript新手教程之JSON的使用全解(超詳細)
Javascript教程:js異步編程的4種方法詳述
JavaScript編程中的for與in循環的用法實例
用JS代碼簡單實現checkbox的全選與反選
如何處理JS的'null'為空或不是對象
用javascript代碼實現對瀏覽器判斷的思路
25款有趣好玩的JavaScript小游戲
JS代碼的window.location屬性詳解
用javascript把XML解析為JSON的方法
用Js操作Cookie的代碼教程附有詳細注釋
JS教程:NodeList集合跟Array數組的區別
深入理解JavaScript的caller,callee,call,apply函數
獲取Javscript執行函數名稱的代碼實例
JavaScript的split函數詳解及代碼實例
js禁用下拉框的代碼實例
js編程經驗分享 原始Ajax與jQuery中的Ajax比較
10款基于Javascript的超酷繪畫和畫布類庫
網頁制作web開發中常用的javascript表單驗證函數分享
jquery教程:10條建議讓你編寫的jquery代碼運行速度更快
jQuery教程:10個技巧讓你也能寫出卓越的jQuery插件
jQuery新手教程:12個jQuery編程常用技巧分享
JavaScript技巧:圖片列表的寬度自適應解決辦法
JavaScript解析如何讓搜索引擎看到更真實的網頁?
超實用:正則表達式30分鐘入門教程分享
JS新手教程:數學函數sqrt求平方根函數的代碼分享
JavaScript教程:適合新手的js代碼使用方法和技巧大全
用JavaScript處理JSON數據的代碼實例
在JavaScript中將JSON的字符串解析成JSON數據格式的兩種方法
JavaScript如何處理解析JSON數據詳解
jQuery教程:10個很實用的jQuery表單操作代碼片段分享
JS根據userAgent值來判斷瀏覽器的類型及版本
JavaScript判斷智能手機瀏覽器的代碼片段分享

精彩推薦

熱門教程

北京pk10走势图下载 双色球基本走势图360 山东十一选五走势图表爱彩乐 大唐无双零单开赚钱 河南11选5基本走势带坐标 厂房排水赚钱吗 山东11选5走势图表360 排三排五开奖金额 15选5中奖分布图 网络知名小说家赚钱吗 山东群英会赢遍天下 租车跑滴滴能赚钱吗 pc蛋蛋走势图加拿大