熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JavaScript教程--從入門到精通(3)

2013-11-15 11:34:34  來源: JSP教程 

  JavaScript程序構成

  JavaScript腳本語言的基本構成是由控制語句函數對象方法屬性等來實現編程的

  一程序控制流
  在任何一種語言中程序控制流是必須的它能使得整個程序減小混亂使之順利按其一定的方式執行下面是JavaScript常用的程序控制流結構及語句:
if條件語句
 基本格式
if(表述式)
語句段1

else
語句段2

 功能若表達式為true則執行語句段1否則執行語句段2
 說明
if else 語句是JavaScript中最基本的控制語句通過它可以改變語句的執行順序
表達式中必須使用關系語句來實現判斷它是作為一個布爾值來估算的
它將零和非零的數分別轉化成false和true
若if後的語句有多行則必須使用花括號將其括起來
 
if語句的嵌套
if(布爾值)語句1
else(布爾值)語句2
else if(布爾值)語句3
……
else 語句4
 
在這種情況下每一級的布爾表述式都會被計算若為真則執行其相應的語句否則執行else後的語句
 
For循環語句
 基本格式
for(初始化條件增量)
語句集
 功能實現條件循環當條件成立時執行語句集否則跳出循環體
 說明
初始化參數告訴循環的開始位置必須賦予變量的初值
條件是用於判別循環停止時的條件若條件滿足則執行循環體否則 跳出
增量主要定義循環控制變量在每次循環時按什麼方式變化
三個主要語句之間必須使用逗號分隔
 
while循環
 基本格式
while(條件)
語句集
該語句與For語句一樣當條件為真時重復循環否則退出循環
 For與while語句
  兩種語句都是循環語句使用For語句在處理有關數字時更易看懂也較緊湊而while循環對復雜的語句效果更特別

  4break和continue語句
  與C++語言相同使用break語句使得循環從For或while中跳出continue使得跳過循環內剩余的語句而進入下一次循環

  二函數
  函數為程序設計人員提供了一個豐常方便的能力通常在進行一個復雜的程序設計時總是根據所要完成的功能將程序劃分為一些相對獨立的部分每部分編寫一個函數從而使各部分充分獨立任務單一程序清晰易懂易讀易維護JavaScript函數可以封裝那些在程序中可能要多次用到的模塊並可作為事件驅動的結果而調用的程序從而實現一個函數把它與事件驅動相關聯這是與其它語言不樣的地方

  1JavaScript函數定義
Function 函數名 (參數變元){
函數體;
Return 表達式;
}
說明
 當調用函數時所用變量或字面量均可作為變元傳遞
 函數由關鍵字Function定義
 函數名定義自己函數的名字
 參數表是傳遞給函數使用或操作的值其值可以是常量 變量或其它表達式
 通過指定函數名(實參)來調用一個函數
 必須使用Return將值返回
 函數名對大小寫是敏感的
 
函數中的形式參數
  在函數的定義中我們看到函數名後有參數表這些參數變量可能是一個或幾個那麼怎樣才能確定參數變量的個數呢?在JavaScript中可通過arguments Length來檢查參數的個數

Function function_Name(expexpexpexp)
Number =function _Name arguments length;
if (Number>
documentwrile(exp);
if (Number>)
documentwrite(exp);
if(Number>)
documentwrite(exp);

事件驅動及事件處理
基本概念
  JavaScript是基於對象(objectbased)的語言這與Java不同Java是面向對象的語言而基於對象的基本特征就是采用事件驅動(eventdriven)它是在用形界面的環境下使得一切輸入變化簡單化通常鼠標或熱鍵的動作我們稱之為事件(Event)而由鼠標或熱鍵引發的一連串程序的動作稱之為事件驅動(Event Driver)而對事件進行處理程序或函數我們稱之為事件處理程序(Event Handler)

  2事件處理程序
  在JavaScript中對象事件的處理通常由函數(Function)擔任其基本格式與函數全部一樣可以將前面所介紹的所有函數作為事件處理程序
格式如下
Function 事件處理名(參數表){
事件處理語句集
……
}

  3事件驅動
  JavaScript事件驅動中的事件是通過鼠標或熱鍵的動作引發的它主要有以下幾個事件
(1)單擊事件onClick
  當用戶單擊鼠標按鈕時產生onClick事件同時onClick指定的事件處理程序或代碼將被調用執行通常在下列基本對象中產生
button(按鈕對象)
checkbox(復選框)或(檢查列表框)
radio (單選鈕)
reset buttons(重要按鈕)
submit buttons(提交按鈕)

  例可通過下列按鈕激活change()文件
<Form>
<Input type=button Value= onClick=change()>
</Form>

  在onClick等號後可以使用自己編寫的函數作為事件處理程序也可以使用JavaScript中內部的函數還可以直接使用JavaScript的代碼等
<Input type=button value= onclick=alert(這是一個例子);
(2)onChange改變事件
  當利用text或texturea元素輸入字符值改變時發該事件同時當在select表格項中一個選項狀態改變後也會引發該事件

<Form>
<Input type=text name=Test value=Test onCharge=check(thistest)>
</Form>

(3)選中事件onSelect
  當Text或Textarea對象中的文字被加亮後引發該事件
(4)獲得焦點事件onFocus
  當用戶單擊Text或textarea以及select對象時產生該事件此時該對象成為前台對象
(5)失去焦點onBlur
  當text對象或textarea對象以及select對象不再擁有焦點而退到後台時引發該文件他與onFocas事件是一個對應的關系
(6)載入文件onLoad
  當文檔載入時產生該事件onLoad一個作用就是在首次載入一個文檔時檢測cookie的值並用一個變量為其賦值使它可以被源代碼使用
(7)卸載文件onUnload
  當Web頁面退出時引發onUnload事件並可更新Cookie的狀態

  四范例
  范例下例程序是一個自動裝載和自動卸載的例子即當裝入HTML文檔時調用loadform()函數而退出該文檔進入另一HTML文檔時則首先調用unloadform()函數確認後方可進入

<HTML>
<HEAD>
<script Language=JavaScript>
<!
function loadform(){
alert(這是一個自動裝載例子!);
}
function unloadform(){
alert(這是一個卸載例子!);
}
//>
</Script>
</HEAD>
<BODY OnLoad=loadform() OnUnload=unloadform()>
<a >調用</a>
</BODY>
</HTML>

 
范例這是一個獲取浏覽器版本號的程序該程序首先顯示一個波浪一提示信息之後顯示浏覽器的版本號有關信息

<html>
<head>
<script language=JavaScript><!
// >
function makeArray(n){
thislength=n
return this
}
function hexfromdec(num) {
hex=new makeArray();
var hexstring=;
var shifthex=;
var temp=num;
for(x=; x>=; x) {
hex[x]=Mathround(temp/shifthex );
hex[x]=temp hex[x] * shifthex;
temp=hex[x];
shifthex /= ;
}
for (x=; x>=; x) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
 
function getletter(num) {
if (num < ) { return num; }
else {
if (num == ) { return A }
if (num == ) { return B }
if (num == ) { return C }
if (num == ) { return D }
if (num == ) { return E }
if (num == ) { return F }
}
}
function rainbow(text){
var color_d;
var allstring=;
for(i=;i<textlength;i=i+){
color_d=*Mathsin(i/(textlength/));
color_h=hexfromdec(color_d);
allstring+=<FONT COLOR=+color_h+ff+color_h+>+textsubstring(ii+)+</FONT>;
}
return allstring;
}
 
function sizefont(text){
var color_d;
var allstring=;
var flag=;
for(i=j=;i<textlength;i=i+){
if (flag==) {
j++;
if (j>=) {
flag=;}}
if (flag==) {
j=j;
if (j<=) {
flag=; }}
allstring+=<FONT SIZE=+ j + > + textsubstring(ii+) + </FONT>;
}
return allstring;
}
documentwrite(<font size=><CENTER>)
documentwrite(<BR><BR>)
documentwrite( sizefont(這是一個獲取WEB浏覽器的程序))
documentwrite(</CENTER></font>)
documentwrite(浏覽器名稱: +navigatorappName+<br>);
documentwrite(版本號: +navigatorappVersion+<br>);
documentwrite(代碼名字: +navigatorappCodeName+<br>);
documentwrite(用戶代理標識: +navigatoruserAgent);
</script>
<body>
</body>
</html>

輸出結果圖所示

  

  圖

  本講介紹了JavaScript程序設計的有關內容程序流函數事件是我們學習掌握JavaScript編程的重點


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19230.html
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.