JS總結

時間 2019-12-19

原文原文鏈接

JS知識總結javascript

　　JavaScript是一種基於對象(Object)和事件驅動(Event Driven)並具備安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程序）一塊兒實如今一個Web頁面中連接多個對象，與Web客戶交互做用。從而能夠開發客戶端的應用程序等。它是經過嵌入或調入在標準的HTML語言中實現的。它的出現彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇，具備如下幾個基本特色：css

　　JavaScript是一種腳本語言，它採用小程序段的方式實現編程。像其它腳本語言同樣,JavaScript一樣已經是一種解釋性語言,它提供了一個易的開發過程。它與HTML標識結合在一塊兒，從而方便用戶的使用操做。html

它的變量類型是採用弱類型，並未使用嚴格的數據類型。java

JavaScript是一種安全性語言，它不容許訪問本地的硬盤，並不能將數據存入到服務器上，不容許對網絡文檔進行修改和刪除，只能經過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。編程

JavaScript是依賴於瀏覽器自己，與操做環境無關，只要能運行瀏覽器的計算機，並支持JavaScript的瀏覽器就可正確執行。小程序

　　2.　　JavaScript中變量聲明，採用其弱類型。即變量在使用前不需做聲明，而是解釋器在運行時檢查其數據類型，如：windows

　　x=1234;數組

　　y＝"4321";瀏覽器

　　前者說明x爲其數值型變量，然後者說明y爲字符型變量。安全

在HTML文檔中，JavaScript使用<Script>...</Script>來標識

JavaScript採用動態聯編，即JavaScript的對象引用在運行時進行檢查，如不經編譯則就沒法實現對象引用的檢查。

如同HTML標識語言同樣， JavaScript程序代碼是一些可用字處理軟件瀏覽的文本，它在描述頁面的HTML相關區域出現。

　　JavaScript代碼由 <Script Language ="JavaScript">...</Script>說明。在標識<Script Language="JavaScript">...</Script>之間就可加入JavaScript腳本。

經過標識說明：若不認識JavaScript代碼的瀏覽器，則全部在其中的標識均被忽略；若認識，則執行其結果。　　JavaScript 以 </Script> 標籤結束。

　　可將<Script>...</Script>標識放入head>.. </Head>或<Body> ...</Body>之間。將JavaScript標識放置<Head>... </Head>在頭部之間，使之在主頁和其他部分代碼以前裝載，從而可以使代碼的功能更強大；能夠將JavaScript標識放置在<Body>... </Body>主體之間以實現某些部分動態地建立文檔。

在JavaScript中四種基本的數據類型：數值（整數和實數）、字符串型（用「」號或‘’括起來的字符或數值）、布爾型（使True或False表示）和空值。在JavaScript的基本類型中的數據能夠是常量，也能夠變量。因爲JavaScript採用弱類型的形式，於是一個數據的變量或常量沒必要首先做聲明，而是在使用或賦值時肯定其數據的類型的。固然也能夠先聲明該數據的類型，它是經過在賦值時自動說明其數據類型的。

整型常量　　　　JavaScript的常量一般又稱字面常量，它是不能改變的數據。其整型常量可使用十六進制、八進制和十進制表示其值。

布爾值　　　　布爾常量只有兩種狀態：True或False

字符型常量　　使用單引號（‘）或雙引號（「）括起來的一個或幾個字符。如 "This is a book of JavaScript"、"3245"、"ewrt234234" 等。

空值　　　　　　JavaScript中有一個空值null,表示什麼也沒有。如試圖引用沒有定義的變量,則返回一個Null值。

變量　　　變量的主要做用是存取數據、提供存放信息的容器。對於變量必須明確變量的命名、變量的類型、變量的聲明及其變量的做用域。

變量的命名

JavaScript中的變量命名同其計算機語言很是類似，這裏要注意如下兩點：

必須是一個有效的變量，即變量以字母開頭，中間能夠出現數字如test一、text2等。除下劃線（－）做爲連字符外，變量名稱不能有空格、（＋）、（－）、（，）或其它符號。不能使用JavaScript中的關鍵字做爲變量。

　　在JavaScript中定義了４０多個類鍵字，這些關鍵是JavaScript內部使用的，不能做爲變量的名稱。如Var、int、double、true不能做爲變量的名稱。

　　在對變量命名時，最好把變量的意義與其表明的意思對應起來，以避免出現錯誤。

變量的類型

　　在JavaScript中，變量能夠用命令Var做聲明:

　　var mytest;

　　該例子定義了一個mytest變量。但沒有賦予它的值。

　　Var mytest=」This is a book」

　　該例子定義了一個mytest變量, 同時賦予了它的值。

　　在JavaScript中，變量以能夠不做聲明，而在使用時再根據數據的類型來確其變量的類型。

　　如：

　　x=100

　　y="125"

　　xy= True

　　cost=19.5等。

　　其中x整數，y爲字符串，xy爲布爾型，cost爲實型。

變量的聲明及其做用域

　　JavaScript變量能夠在使用前先做聲明，並可賦值。經過使用var關鍵字對變量做聲明。對變量做聲明的最大好處就是能及時發現代碼中的錯誤；由於JavaScript是採用動態編譯的，而動態編譯是不易發現代碼中的錯誤，特別是變量命名的方面。

　　對於變量還有一個重要性──那就是變量的做用域。在JavaScript中一樣有全局變量和局部變量。全局變量是定義

在全部函數體以外，其做用範圍是整個函數；而局部變量是定義在函數體以內，只對其該函數是可見的，而對其它函數則是不可見的。

表達式和運算符

１、表達式

　　在定義完變量後，就能夠對它們進行賦值、改變、計算等一系列操做，這一過程一般又叫稱一個叫表達式來完成，

能夠說它是變量、常量、布爾及運算符的集合，所以表達式能夠分爲算術表述式、字串表達式、賦值表達式以及布爾表

達式等。

２、運算符

　　運算符完成操做的一系列符號，在JavaScript中有算術運算符，如＋、-、*、/等；有比較運算符如!＝、＝＝等;

有邏輯布爾運算符如！（取反）、|、||; 有字串運算如＋、＋＝等。

　　在JavaScript主要有雙目運算符和單目運算符。其雙目運算符由下列組成：

　　操做數１運算符操做數２

　　即由兩個操做數和一個運算符組成。如50＋40、"This"+"that"等。單目運算符，只需一個操做數，其運算符可在

前或後。

（１）算術運算符

　　JavaScript中的算術運算符有單目運算符和雙目運算符。

雙目運算符：

+（加）、-（減）、 *（乘）、 /（除）、 %（取模）、|（按位或）、&(按位與)、<<（左移）、 >>（右移）、

>>>（右移，零填充）。

單目運算符：

-（取反）、~（取補）、++（遞加1）、--（遞減1）。

（２）比較運算符

　　比較運算符它的基本操做過程是，首先對它的操做數進行比較，爾後再返回一個true或False值，有８個比較運算符

<(小於)、>(大於)、<=(小於等於)、>=(大於等於)、==(等於)、!=(不等於)。

（３）布爾邏輯運算符

　　在JavaScript中增長了幾個布爾邏輯運算符:

!（取反)、&=（與以後賦值）、 &（邏輯與）、 |=（或以後賦值）、 |（邏輯或）、 ^=（異或以後賦值）、 ^（邏輯

異或）、 ?:（三目操做符）、||（或）、==(等於)、|=(不等於)。

　　其中三目操做符主要格式以下：

操做數？結果１：結果２

　　若操做數的結果爲真，則表述式的結果爲結果１，不然爲結果２。

JavaScript程序構成

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

JavaScript經常使用的程序控制流結構及語句:

１、if條件語句

　基本格式

if（表述式）

語句段１；

......

else

語句段２；

.....

　　功能：若表達式爲true，則執行語句段１；不然執行語句段２。

　　說明：

　　if -else 語句是JavaScript中最基本的控制語句，經過它能夠改變語句的執行順序。

　　表達式中必須使用關係語句，來實現判斷，它是做爲一個布爾值來估算的。

　　它將零和非零的數分別轉化成false和true。若if後的語句有多行，則必須使用花括號將其括起來。

if語句的嵌套：

if（布爾值）語句１；

else（布爾值）語句２；

else if（布爾值）語句３；

……

else 語句４；

　　在這種狀況下，每一級的布爾表述式都會被計算，若爲真，則執行其相應的語句，不然執行else後的語句。

２、For循環語句

　基本格式

for（初始化；條件；增量）

語句集；

　　功能：實現條件循環，當條件成立時，執行語句集，不然跳出循環體。

　　說明：

　　初始化參數告訴循環的開始位置，必須賦予變量的初值；

　　條件：是用於判別循環中止時的條件。若條件知足，則執行循環體，不然跳出。

　　增量：主要定義循環控制變量在每次循環時按什麼方式變化。

　　三個主要語句之間，必須使用逗號分隔。

３、while循環

　　基本格式

　while（條件）

　語句集；

　　該語句與For語句同樣，當條件爲真時，重複循環，不然退出循環。

　　For與while語句都是循環語句，使用For語句在處理有關數字時更易看懂，也較緊湊；而while循環對複雜的語句效

果更特別。

４、break和continue語句

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

2、函數

　　函數爲程序設計人員提供了一個豐常方便的能力。一般在進行一個複雜的程序設計時，老是根據所要完成的功能，

將程序劃分爲一些相對獨立的部分，每部分編寫一個函數。從而，使各部分充分獨立，任務單一，程序清晰，易懂、易

讀、易維護。JavaScript函數能夠封裝那些在程序中可能要屢次用到的模塊。並可做爲事件驅動的結果而調用的程序。

從而實現一個函數把它與事件驅動相關聯。這是與其它語言不樣的地方。

１、JavaScript函數定義

Function 函數名（參數,變元）{

函數體;.

Return 表達式;

}

說明：

　　當調用函數時,所用變量或字面量都可做爲變元傳遞。

　　函數由關鍵字Function定義。

　　函數名：定義本身函數的名字。

　　參數表，是傳遞給函數使用或操做的值，其值能夠是常量，變量或其它表達式。

　　經過指定函數名（實參）來調用一個函數。

　　必須使用Return將值返回。

　　函數名對大小寫是敏感的。

２、函數中的形式參數：

　　在函數的定義中，咱們看到函數名後有參數表，這些參數變量多是一個或幾個。那麼怎樣才能肯定參數變量的個

數呢？在JavaScript中可經過arguments .Length來檢查參數的個數。

例：

Function function_Name(exp1,exp2,exp3,exp4)

Number =function _Name . arguments .length;

if (Number>1）

document.wrile(exp2);

if (Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

...

3、事件驅動及事件處理

１、基本概念

　　JavaScript是基於對象(object-based)的語言。這與Java不一樣,Java是面向對象的語言。而基於對象的基本特徵，

就是採用事件驅動(event-driven)。它是在用形界面的環境下，使得一切輸入變化簡單化。一般鼠標或熱鍵的動做咱們

稱之爲事件（Event），而由鼠標或熱鍵引起的一連串程序的動做，稱之爲事件驅動（Event Driver）。而對事件進行

處理程序或函數，咱們稱之爲事件處理程序（Event Handler）。

２、事件處理程序

　　在JavaScript中對象事件的處理一般由函數(Function)擔任。其基本格式與函數所有同樣，能夠將前面所介紹的所

有函數做爲事件處理程序。格式以下：

Function 事件處理名（參數表）{

事件處理語句集；

……

}

３、事件驅動

　　JavaScript事件驅動中的事件是經過鼠標或熱鍵的動做引起的。它主要有如下幾個事件：

（１）單擊事件onClick

　　當用戶單擊鼠標按鈕時，產生onClick事件。同時onClick指定的事件處理程序或代碼將被調用執行。一般在下列基

本對象中產生：

button（按鈕對象）

checkbox（複選框）或（檢查列表框）

radio （單選鈕）

reset buttons（重要按鈕）

submit buttons（提交按鈕）

例：可經過下列按鈕激活change()文件：

<Form>

</Form>

　　在onClick等號後，可使用本身編寫的函數做爲事件處理程序，也可使用JavaScript中內部的函數。還能夠直

接使用JavaScript的代碼等。例：

<Input type="button" value=" " onclick=alert("這是一個例子"）;

（２）onChange改變事件

　　當利用text或texturea元素輸入字符值改變時發該事件，同時當在select表格項中一個選項狀態改變後也會引起該

事件。

例： <Form>

</Form>

（３）選中事件onSelect

　　當Text或Textarea對象中的文字被加亮後，引起該事件。

（４）得到焦點事件onFocus

　　當用戶單擊Text或textarea以及select對象時，產生該事件。此時該對象成爲前臺對象。

（５）失去焦點onBlur

　　當text對象或textarea對象以及select對象再也不擁有焦點、而退到後臺時，引起該文件，他與onFocas事件是一個

對應的關係。

（６）載入文件onLoad

　　當文檔載入時，產生該事件。onLoad一個做用就是在首次載入一個文檔時檢測cookie的值，並用一個變量爲其賦值

，使它能夠被源代碼使用。

（７）卸載文件onUnload

　　當Web頁面退出時引起onUnload事件，並可更新Cookie的狀態。

4、範例

　　範例1：下例程序是一個自動裝載和自動卸載的例子。即當裝入HTML文檔時調用loadform()函數,而退出該文檔進入

另外一HTML文檔時則首先調用unloadform()函數,確認後方可進入。

<HTML>

<HEAD>

<!--

function loadform(){

alert("這是一個自動裝載例子!");

}

function unloadform(){

alert("這是一個卸載例子!");

}

//-->

</Script>

</HEAD>

</BODY>

</HTML>

　　範例2：這是一個獲取瀏覽器版本號的程序。該程序首先顯示一個波浪一提示信息。以後顯示瀏覽器的版本號有關信

息。

<html>

<head>

// -->

function makeArray(n){

this.length=n

return this

}

function hexfromdec(num) {

hex=new makeArray(1);

var hexstring="";

var shifthex=16;

var temp1=num;

for(x=1; x>=0; x--) {

hex[x]=Math.round(temp1/shifthex - .5);

hex[x-1]=temp1 - hex[x] * shifthex;

temp1=hex[x-1];

shifthex /= 16;

}

for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }

return (hexstring);

}

function getletter(num) {

if (num < 10) { return num; }

else {

if (num == 10) { return "A" }

if (num == 11) { return "B" }

if (num == 12) { return "C" }

if (num == 13) { return "D" }

if (num == 14) { return "E" }

if (num == 15) { return "F" }

}

function rainbow(text){

var color_d1;

var allstring="";

for(i=0;i<text.length;i=i+2){

color_d1=255*Math.sin(i/(text.length/3));

color_h1=hexfromdec(color_d1);

allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";

}

return allstring;

}

function sizefont(text){

var color_d1;

var allstring="";

var flag=0;

for(i=0,j=0;i<text.length;i=i+1){

if (flag==0) {

j++;

if (j>=7) {

flag=1;}}

if (flag==1) {

j=j-1;

if (j<=0) {

flag=0; }}

allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";

}

return allstring;

}

document.write("<font size=8><CENTER>")

document.write("<BR><BR>")

document.write( sizefont("這是一個獲取WEB瀏覽器的程序"))

document.write("</CENTER></font>")

document.write("瀏覽器名稱: "+navigator.appName+"<br>");

document.write("版本號: "+navigator.appVersion+"<br>");

document.write("代碼名字: "+navigator.appCodeName+"<br>");

document.write("用戶代理標識: "+navigator.userAgent);

</script>

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

第四講基於對象的JavaScript語言

　　JavaScript語言是基於對象的（Object-Based），而不是面向對象的（object-oriented）。之因此說它是一門基

於對象的語言，主要是由於它沒有提供象抽象、繼承、重載等有關面嚮對象語言的許多功能。而是把其它語言所建立的

複雜對象統一塊兒來，從而造成一個很是強大的對象系統。

　　雖然JavaScript語言是一門基於對象的，但它仍是具備一些面向對象的基本特徵。它能夠根據須要建立本身的對象

，從而進一步擴大JavaScript的應用範圍，加強編寫功能強大的Web文檔。

1、對象的基礎知識

１、對象的基本結構

　　JavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構成的。前者是對象在實施其所需

要行爲的過程當中，實現信息的裝載單位，從而與變量相關聯；後者是指對象可以按照設計者的意圖而被執行，從而與特

定的函數相聯。

２、引用對象的途徑

　　一個對象要真正地被使用，可採用如下幾種方式得到：

引用JavaScript內部對象；

由瀏覽器環境中提供；

建立新對象。

　　這就是說一個對象在被引用以前，這個對象必須存在，不然引用將毫無心義，而出現錯誤信息。從上面中咱們能夠

看出JavaScript引用對象可經過三種方式獲取。要麼建立新的對象，要麼利用現存的對象。

３、有關對象操做語句

　　JavaScript不是一純面向對象的語言，它設有提供面嚮對象語言的許多功能，所以JavaScript設計者之因此把它你

「基於對象」而不是面向對象的語言，在JavaScript中提供了幾個用於操做對象的語句和關鍵字及運算符。

1）、For...in語句

格式以下：

For（對象屬性名 in 已知對象名）

說明：

　　該語句的功能是用於對已知對象的全部屬性進行操做的控制循環。它是將一個已知對象的全部屬性反覆置給一個變

量；而不是使用計數器來實現的。

　　該語句的優勢就是無需知道對象中屬性的個數便可進行操做。

例：下列函數是顯示數組中的內容：

Function showData(object)

for (var X=0; X<30;X++)

document.write(object[i])；

　　該函數是經過數組下標順序值，來訪問每一個對象的屬性，使用這種方式首先必須知道數組的下標值，不然若超出範

圍，則就會發生錯誤。而使For...in語句，則根本不須要知道對象屬性的個數，見下：

Function showData(object)

for(var prop in object)

document.write(object[prop])；

　　使用該函數時，在循環體中，For自動將的屬性取出來，直到最後爲此。

.with語句

　　使用該語句的意思是：在該語句體內，任何對變量的引用被認爲是這個對象的屬性，以節省一些代碼。

with object{

...}

全部在with語句後的花括號中的語句，都是在後面object對象的做用域的。

.this關鍵字

　　this是對當前的引用，在JavaScript因爲對象的引用是多層次，多方位的，每每一個對象的引用又須要對另外一個對

象的引用，而另外一個對象有可能又要引用另外一個對象，這樣有可能形成混亂，最後本身已不知道如今引用的那一個對象

，爲此JavaScript提供了一個用於將對象指定當前對象的語句this。

.New運算符

　　雖然在JavaScript中對象的功能已是很是強大的了。但更強大的是設計人員能夠按照需求來建立本身的對象，以

知足某一特定的要求。使用New運算符能夠建立一個新的對象。其建立對象使用以下格式：

Newobject=NEW Object(Parameters table);

　　其中Newobject建立的新對象：object是已經存在的對象； parameters table參數表；new是JavaScript中的命令

語句。

如建立一個日期新對象

newData=New Data()

birthday=New Data (December 12.1998)

以後就可以使NewData、birthday做爲一個新的日期對象了。

４、對象屬性的引用

　　對象屬性的引用可由下列三種方式之一實現：

（１）使用點（.）運算符

university.Name=「雲南省」

university.city=「昆明市」

university.Date="1999"

其中university是一個已經存在的對象，Name、City、Date是它的三個屬性，並經過操做對其賦值。

（２）經過對象的下標實現引用

university[0]=「雲南」

university[1]=「昆明市」

university[2]="1999"

經過數組形式的訪問屬性，可使用循環操做獲取其值。

function showunievsity(object)

for (var j=0;j<2; j++)

document.write(object[j])

若採用For...in則能夠不知其屬性的個數後就能夠實現：

Function showmy(object)

for (var prop in this)

docament.write(this[prop]);

（３）經過字符串的形式實現

university["Name"]=「雲南」

university["City"]=「昆明市」

university["Date"]="1999"

５、對象的方法的引用

　　在JavaScript中對象方法的引用是很是簡單的。

ObjectName.methods()

實際上methods()=FunctionName方法實質上是一個函數。如引用university對象中的showmy（）方法，則可以使用：

document.write (university.showmy())

或：document.write(university)

如引用math內部對象中cos()的方法

則：

with(math)

document.write(cos(35));

document.write(cos(80));

若不使用with則引用時相對要複雜些：

document.write(Math.cos(35))

document.write(math.sin(80))

2、經常使用對象的屬性和方法

　　JavaScript爲咱們提供了一些很是有用的經常使用內部對象和方法。用戶不須要用腳原本實現這些功能。這正是基於對

象編程的真正目的。

　　在JavaScript提供了string（字符串）、math（數值計算）和Date（日期）三種對象和其它一些相關的方法。從而

爲編程人員快速開發強大的腳本程序提供了很是有利的條件。

１、經常使用內部對象

　　在JavaScript中對於對象屬性與方法的引用，有兩種狀況：其一是說該對象是靜態對象，即在引用該對象的屬性或

方法時不須要爲它建立實例；而另外一種對象則在引用它的對象或方法是必須爲它建立一個實例，即該對象是動態對象。

　　對JavaScript內部對象的引用，以是牢牢圍繞着它的屬性與方法進行的。於是明確對象的靜動性對於掌握和理解

JavaScript內部對象是具備很是重要的意義。

１)、串對象

string對象：內部靜態性。

訪問properties和methods時，可以使用（.）運算符實現。

基本使用格式：objectName.prop/methods

（１）串對象的屬性

　　該對象只有一個屬性，即length。它代表了字符串中的字符個數，包括全部符號。例：

　　mytest="This is a JavaScript"

　　mystringlength=mytest.length

　　最後mystringlength返回mytest字串的長度爲20。

（２）串對象的方法

　　string對象的方法共有１９個。主要用於有關字符串在Web頁面中的顯示、字體大小、字體顏色、字符的搜索以及字

符的大小寫轉換。

　　其主要方法以下：

　　錨點anchor()：該方法建立如用Html文檔中同樣的anchor標記。使用anchor如用Html中(A Name="")同樣。經過下

列格式訪問:string.anchor(anchorName)。

　　有關字符顯示的控制方法

　　big字體顯示, Italics()斜體字顯示，bold()粗體字顯示，blink()字符閃爍顯示，small（）字符用小體字顯示

，fixed()固定高亮字顯示、fontsize(size)控制字體大小等。

　　字體顏色方法；fontcolor(color)

　　字符串大小寫轉換

　　toLowerCase()－小寫轉換，toUpperCase()大寫轉換。下列把一個給定的串分別轉換成大寫和小寫格式:

　　string=stringValue.toUpperCase和string=stringValue.toLowerCase。

　　字符搜索：indexOf[charactor,fromIndex]

　　從指定formIndtx位置開始搜索charactor第一次出現的位置。

　　返回字串的一部分字串：substring(start,end)

　　從start開始到end的字符所有返回。

２)、算術函數的math對象

　功能：提供除加、減、乘、除之外的一引些自述運算。如對數，平方根等。

　靜動性：靜態對象

（１）主要屬性

　　math中提供了６個屬性，它們是數學中常常用到的常數Ｅ、以１０爲底的天然對數ＬＮ１０、以２爲底的天然對數

LN二、3.14159的PI、1/2的平方根SQRT1-2,2的平方根爲SQRT2。

（２）主要方法

　絕對值：abs()

　正弦餘弦值：sin(),cos()

　反正弦反餘弦 :asin(), acos()

　正切反正切：tan(),atan()

　四捨五入：round()

　平方根：sqrt()

　基於幾方次的值：Pow(base,exponent)

...

３)、日期及時間對象

　　功能：提供一個有關日期和時間的對象。

　　靜動性：動態性，即必須使用New運算符建立一個實例。例:

　　MyDate=New Date()

　　Date對象沒有提供直接訪問的屬性。只具備獲取和設置日期和時間的方法。

　　日期起始值:１７７０年１月１日００:００:００。

　　獲取日期的時間方法

　　getYear(): 返回年數

　　getMonth():返回當月號數

　　getDate(): 返回當日號數

　　getDay():返回星期幾

　　getHours():返回小時數

　　getMintes(:返回分鐘數

　　getSeconds():返回秒數

　　getTime() : 返回毫秒數

（２）設置日期和時間：

　　setYear();設置年

　　setDate():設置當月號數

　　setMonth():設置當月份數

　　setHours():設置小時數

　　setMintes():設置分鐘數

　　setSeconds():設置秒數

　　setTime ():設置毫秒數

　　...

二、JavaScript中的系統函數

　　JavaScript中的系統函數又稱內部方法。它提供了與任何對象無關的系統函數，使用這些函數不需建立任何實例,

可直接用。

返回字符串表達式中的值：

　方法名：eval（字串表達式），例：

　test=eval("8+9+5/2");

返回字符串ASCI碼：

　方法名：unEscape (string)

返回字符的編碼：

　方法名：escape(character)

返回實數：

　parseFloat(floustring);

返回不一樣進制的數：

　parseInt(numbestring ,rad.X)

　其中radix是數的進制，numbs字符串數

3、範例

　　下面是一個時鐘顯示的JavaScript文檔。在文檔中用了很是多的函數。

<style>

</style>

function showClock() {

}

function hideClock() {

}

var timerID = null

var timerRunning = false

function stopClock() {

if(timerRunning)

clearTimeout(timerID);

timerRunning = false

document.clock.face.value = "";

}

function showTime() {

var now = new Date();

var year = now.getYear();

var month = now.getMonth() + 1;

var date = now.getDate();

var hours = now.getHours();

var mins = now.getMinutes();

var secs = now.getSeconds();

var timeVal = "";

timeVal += ((hours <= 12) ? hours : hours - 12);

timeVal += ((mins < 10) ? ":0" : ":") + mins;

timeVal += ((secs <= 10) ? ":0" : ":") + secs;

timeVal += ((hours < 12) ? "AM" : "PM");

timeVal += ((month < 10) ? " on 0" : " on ") + month + "-";

timeVal += date + "-" + year;

document.clock.face.value = timeVal;

timerID = setTimeout("showTime()", 1000);

timerRunning = true

}

function startClock() {

stopClock();

showTime();

}

function windowOpener( indexnum ){

var loadpos="date.html"+"#"+indexnum;

controlWindow=window.open

(loadpos,"date","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable

=yes,width=620,height=400");

}

</script>

</head>

<tr>

<div align="center"><center><p><input TYPE="text" NAME="face" size="20" VALUE style="background-

color: #c0c0c0"> </p>

</center></div>

</form>

</td>

</tr>

</table>

</center></div>

</body>

</html>

　　本講介紹了基於對象的JavaScript中經常使用內部對象屬性、方法的使用。

閱讀全文(73) | 回覆(1) | 引用(0)

回覆:JavaScript教程

alpha發表評論於2005-3-15 9:48:59

第五講建立新對象

　使用JavaScript能夠建立本身的對象。雖然JavaScript內部和瀏覽器自己的功能已十分強大，但JavaScript仍是提

供了建立一個新對象的方法。使其沒必要像超文本標識語言那樣，求於或其它多媒體工具，就能完成許多複雜的工做。

　　在JavaScript中建立一個新的對象是十分簡單的。首先它必須定義一個對象，然後再爲該對象建立一個實例。這個

實例就是一個新對象，它具備對象定義中的基本特徵。

1、對象的定義

JavaScript對象的定義，其基本格式以下：

Function Object（屬性表）

This.prop1=prop1

This.prop2=prop2

...

This.meth=FunctionName1;

This.meth=FunctionName2;

...

　　在一個對象的定義中，能夠爲該對象指明其屬性和方法。經過屬性和方法構成了一個對象的實例。如如下是一個關

於University對象的定義：

Function university(name,city,creatDate URL)

This.name=name

This.city=city

This.creatDate=New Date(creatDate)

This.URL=URL

其基本含義以下：

Name－指定一個「單位」名稱。　

City－「單位」所在城市。　

CreatDate－記載university對象的更新日期。　

URL－該對象指向一個網址。

2、建立對象實例

　　一旦對象定義完成後，就能夠爲該對象建立一個實例了：

NewObject=New object();

其中Newobjet是新的對象，Object已經定義好的對象。例：

U1=New university(「雲南省」，「昆明市」，"January 05,199712:00:00","http://www.YN.KM")

U2=New university(「雲南電子科技大學」，「昆明」,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")

3、對象方法的使用

　　在對象中除了使用屬性外，有時還須要使用方法。在對象的定義中，咱們看到This.meth=FunctionName語句，那就

是爲定義對象的方法。實質對象的方法就是一個函數FunctionName，經過它實現本身的意圖。

　　例:在university對象中增長一個方法，該方法是顯示它本身自己，並返回相應的字串。

function university(name,city,createDate,URL)

This.Name=Name;

This.city=city;

This.createDate=New Date(creatDate)；

This.URL=URL；

This.showuniversity=showuniversity;

其中This.showuniversity就是定義了一個方法－－－showuniversity()。

而showuniversity()方法是實現university對象自己的顯示。

function showuniversity()

For (var prop in this)

alert(prop+="+this[prop]+"");

其中alert是JavaScript中的內部函數，顯示其字符串。

4、JavaScript中的數組

使用New建立數組

　　JavaScript中沒有提供像其它語言具備明顯的數組類型，但能夠經過function定義一個數組，並使用New對象操做

符建立一個具備下標的數組。從而能夠實現任何數據類型的存儲。

a、定義對象的數組

Function arrayName(size){

This.length=Size;

for(var X=; X<=size;X++)

this[X]=0;

Reture this;

}

　　其中arrayName是定義數組的一個名子，Size是有關數組大小的值（1-size），即數組元素的個數。經過for循環對

一個當前對象的數組進行定義，最後返回這個數組。

　　從中能夠看出，JavaScript中的數組是從1到size，這與其它０到size的數組表示方法有所不一樣，固然你可根據需

要將數組的下標由１到size調整到０到size－１,可由下列實現:

Function arrayName (size)

For (var X=0; X<=size;X++)

this[X]=0;

this.lenght=size;

Return this;

　　從上面能夠看出該方法是隻是調整了this.lenght的位置，該位置是用於存儲數組的大小的。從而調整後的數組的

下標將與其它語言一致。但請讀者注意正是因爲數組下標順序由１到size，使得JavaScript中的對象功能更增強大。

b、建立數組實例

　　一個數組定義完成之後，還不能立刻使用，必須爲該數組建立一個數組實例：

　　Myarray=New arrayName(n);

並賦於初值：

Myarray[1]=「字串１」；

Myarray[2]=「字串２」；

Myarray[3]=「字串３」；

...

Myarray[n]=「字串n」；

　　一旦給數組賦於了初值後，數組中就具備真正意義的數據了，之後就能夠在程序設計過程當中直接引用。

建立多維數組

Function creatMArray(row,col){

var indx=0;

this.length=(row*10)+col

for(var x=1;x<=row;x++)

for(var y=1;y<=col;y++)

indx=(x*10)+y;

this[indx]=」」;

}

myMArray=new creatMArray();

以後可經過myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、

…來引用。

內部數組

　　在Java中爲了方便內部對象的操做,可使用窗體(Forms)、框架(Frames)、元素(element)、連接(links)和錨

(Anchors)數組實現對象的訪問。

　anchors[]:使用《A name=「anchorName「》標識來創建錨的連接。

　links[]: 使用<A href=」URL」>來定義一個越文本連接項。

　Forms[]: 在程序中使用多窗體時,創建該數組。

　Elements[]:在一個窗口中使用從個元素時,創建該數組。

　Frames[]:創建框架時,使用該數組

　anchors[]用於窗體的訪問(它是經過《form name=「form1」》所指定的),link[]用於被連接到的錨點的訪問(它是

經過《a href=URL》所指定的)。Forms[]反映窗體的屬性,而anchors[]反映Web頁面中的連接屬性。

有關錨數組的文檔：

<A NAME=」MyAnchorsName1」> 定義第一個錨名

HTML Code

<A NAME=」MyAnchorsName2」> 定義第二個錨名

HTML Code

<A HREF=」#MyAnchorsName1」>創建錨的連接

<A HREF=」#MyAnchorsName2」> 創建錨的連接

….

該文檔段創建了兩面全錨的連接,可經過Anchors[]訪問這些錨。document.Anchors[0]反映第一個錨,而

document.Anchors[1]反映第二個錨的有關信息。

5、範例

範例1：一個動態文字滾動的例子。

with (top.window.location)

{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}

total_toc_items = 0;

current_overID = "";

last_overID = "";

browser = navigator.appName;

version = parseInt(navigator.appVersion);

client=null;

loaded = 0;

if (browser == "Netscape" && version >= 3) client = "ns3";

function toc_item (img_name,icon_col,width,height) {

if (client =="ns3") {

img_prefix = baseURL + img_name;

this.icon_col = icon_col;

this.toc_img_off = new Image (width,height);

this.toc_img_off.src = img_prefix + "_off.gif";

this.toc_img_on = new Image (width,height);

this.toc_img_on.src = img_prefix + "_on.gif";

}

function new_toc_item (img_name,icon_row,width,height) {

toc_item [img_name] = new toc_item (img_name,icon_row,width,height);

}

function toc_mouseover (itemID) {

if (client =="ns3") {

current_overID = itemID;

if (current_overID != last_overID) {

document [current_overID].src = toc_item [current_overID].toc_img_on.src;

if (last_overID != "") {

document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;

}

last_overID = current_overID;

}

function toc_mouseout () {

if (client =="ns3") {

if (current_overID != "") {

document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;

}

current_overID = "";

last_overID = "";

}

new_toc_item ("1",2,120,20);

<!-- Begin

function bannerObject(p){

this.msg = MESSAGE

this.out = " "

this.pos = POSITION

this.delay = DELAY

this.i = 0

this.reset = clearMessage}

function clearMessage(){

this.pos = POSITION}

var POSITION = 50;

var DELAY = 150;

var MESSAGE = "這是一個動態JavaScript文字顯示的例子";

var scroll = new bannerObject();

function scroller(){

scroll.out += " ";

if(scroll.pos>0)

for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }

if (scroll.pos>= 0)

scroll.out += scroll.msg

else

scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)

document.noticeForm.notice.value = scroll.out

scroll.out = " ";

scroll.pos--;

if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout

('scroller()',scroll.delay);}

</script>

</head>

<body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"

alink="#008080"

text="#C0C0C0">

<tr>

</form>

</td>

</tr>

</table>

</center></div>

</body></html>

範例2:顏色變化的例子。

<!--

function makearray(n) {

this.length = n;

for(var i = 1; i <= n; i++)

this[i] = 0;

return this;}

hexa = new makearray(16);

for(var i = 0; i < 10; i++)

hexa[i] = i;

hexa[10]="a";

hexa[11]="b";

hexa[12]="c";

hexa[13]="d";

hexa[14]="e";

hexa[15]="f";

function hex(i) {

if (i < 0)

return "00";

else if (i > 255)

return "ff";

else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setbgColor(r, g, b) {

var hr = hex(r);

var hg = hex(g);

var hb = hex(b);

document.bgColor = "#"+hr+hg+hb;}

function fade(sr, sg, sb, er, eg, eb, step) {

for(var i = 0; i <= step; i++) {

setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),

Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *

((step-i)/step) + eb * (i/step))); }}

function fadein() {

fade(255,0,0,0,0,255,100);

fade(0,0,255,0,255,0,100);

fade(0,255,0, 0,0,0, 100);}

fadein();

// -->

</script>

<body>

</body></html>

　　本講介紹了用戶自行建立對象的方法, 用戶可根據須要建立本身的對象。並介紹了JavaScript中建數組的方法。

第六講使用內部對象系統

　　使用瀏覽器的內部對象系統, 可實現與HTML文檔進行交互。它的做用是將相關元素組織包裝起來，提供給程序設計

人員使用，從而減輕編程人的勞動，提升設計Web頁面的能力。

1、瀏覽器對象層次及其主要做用

　　除了前面提到過的文檔document對象外，Navigator瀏覽器中還提供了窗口（Window）對象以及歷史（History）

和位置（Location）對象。

瀏覽器對象(Navigator):

　　提供有關瀏覽器的信息

窗口對象(Windows)：

　　Window對象處於對象層次的最頂端，它提供了處理Navigator窗口的方法和屬性。

位置對象(Location)：

　　Location對象提供了與當前打開的URL一塊兒工做的方法和屬性，它是一個靜態的對象。

歷史對象(History)：

　　History對象提供了與歷史清單有關的信息。

文檔對象(Document) ：

　　document對象包含了與文檔元素(elements)一塊兒工做的對象，它將這些元素封裝起來供編程人員使用。

　　編程人員利用這些對象，能夠對WWW瀏覽器環境中的事件進行控制並做出處理。在JavaScript中提供了很是豐富的

內部方法和屬性,從而減輕了編程人員的工做,提升編程效率。這正是基於對象與面向對象的根本區別所在。在這些對象

系統中,文檔對象屬於很是重要的,它位於最低層,但對於咱們實現Web頁面信息交互起做關鍵做用。於是它是對象系統的

核心部分。

2、文檔對象功能及其做用

　　在Navigator瀏覽器中，document文檔對象是核心是，同時也是最重要的。見下表：

Links　　　Anchor　　Form　　　Method　　Prop

連接對象　　錨對象　窗體對象　　方法　　　對象

　　document對象的主要做用就是把這些基本的元素（如links,anchor等）包裝起來，提供給編程人員使用。從另外一個

角度看，document對象中又是由屬性和方法組成。

１、document中三個主要的對象

　　在document中主要有：links,anchor,form等三個最重要的對象：

（１）anchor錨對象：

　　anchor對象指的是<A Name=...> </A>標識在HTML源碼中存在時產生的對象。它包含着文檔中全部的anchors信息

。

（２）連接links對象

　　link對象指的是用<A Href=...> </A>標記的鏈接一個超文本或超媒體的元素做爲一個特定的URL。

（３）窗體（Form）對象

　　窗體對象是文檔對象的一個元素，它含有多種格式的對象儲存信息，使用它能夠在JavaScript腳本中編寫程序進行

文字輸入，並能夠用來動態改變文檔的行爲。經過document. Forms[]數組來使得在同一個頁面上能夠有多個相同的窗

體,使用forms[]數組要比使用窗體名字要方便得多。

　　例:下面就是一個使用窗體數組和窗體名字的例子。該程序使得兩個窗體中的字段內容保持一致。

<body>

<form >

</form>

</form>

</body></html>

　　其中用了OnChnge事件(當窗體內容改變時激發)。第一個使用窗體名字標識my,第二個使用窗體數組Forms[]。其效

果是一致。

２、文檔對象中的attribute屬性

　　document對象中的attribute屬性，主要用於在引用Href標識時，控制着有關顏色的格式和有關文檔標題、文檔原

文件的URL以及文檔最後更新的日期。這部分元素的主要含義以下：

（１）連接顏色：alinkcolor

　　這個元素主要用於，當選取一個連接時，連接對象自己的顏色就按alinkcolo r指定改變。

（２）連接顏色：linkcolor

　　當用戶使用<A Href=...> Text string </A>連接後，Textstring的顏色就會按Linkcolor所指定的顏色更新。

（３）瀏覽事後的顏色：VlinkColor

　　該屬性表示的是已被瀏覽存儲爲已瀏覽過的連接顏色。

（４）背景顏色：bgcolor

　　該元素包含文檔背景的顏色。

（５）前景顏色：Fgcolor

　　該元素包含HTML文檔中文本的前景顏色。

３、文檔對象的基本元素

（１）窗體屬性：

　　窗體屬性是與HTML文檔中<Form>...</Form>相對應的一組對象在HTML文檔所建立的窗體數，由length指定。經過

document.forms.length反映該文檔中所建立的窗體數目。

（２）錨屬性：anchors

　　該屬性中，包含了HTML文檔的全部<A> </A>標記爲Name=...的語句標識。全部「錨」的數目保存在

document.anchors.length中。

（３）連接屬性：links

　　連接屬性是指在文檔中<A>...</A>的由Href=...指定的數目，其連接數目保存在document.links.length中。

3、範例

例1:下面咱們經過一個例子來講明文檔對象的綜合應用。輸出結果見圖6-2所示。

</HEAD>

<BOdy>

請輸入數據：

</Form>

<A name="Link1" href="test31.htm">連接到第一個文本</a><br>

<A name="Link2" href="test32.htm">連接到第二個文本</a><br>

<A name="Link2" href="test33.htm">連接到第三個文本</a><br>

<BR>

document.write("文檔有"+document.links.length+"個連接"+"<br>");

document.write("文檔有"+document.anchors.length+"個錨點"+"<br>");

document.write("文檔有"+document.forms.length+"個窗體");

</script>

</body>

</HTML>

例子2：下列程序隨機產生每日一語。

<HTML>

<HEAD>

<!--

tips = new Array(6);

tips[0]="每日一語（1）";

tips[1]="每日一語（2）";

tips[2]="每日一語（3）";

tips[3]="每日一語（4）";

tips[4]="每日一語（5）";

tips[5]="每日一語（6）";

index = Math.floor(Math.random() * tips.length);

document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");

</Script>

</HEAD>

</BODY>

</HTML>

　　本講主要介紹了JavaScript對象系統的使用方法，其中重點介紹了文檔對象及使用。

第七講窗口及輸入輸出

　　JavaScript是基於對象的腳本編程語言，那麼它的輸入輸出就是經過對象來完成的。其中有關輸入可經過窗口

（Window）對象來完成，而輸出可經過文檔（document）對象的方法來實現。

1、窗口及輸入輸出

請看下面例子：

<HTML>

<Head>

Var test=window.prompt("請輸入數據:");

document.write(test+"JavaScript輸入輸出的例子");

</script>

</Head>

</HTML>

　　其中window.prompt()就是一個窗口對象的方法，其基本做用是，當裝入Web頁面時在屏幕上顯示一個具備「肯定」

和「取消」的對話框，讓你輸出數據。document.writle是一個文檔對象的方法，它的基本功能，是實現Web頁面的輸出

顯示。見下圖所示。

一、窗口對象

　　該對象包括許多有用的屬性、方法和事件驅動程序，編程人員能夠利用這些對象控制瀏覽器窗口顯示的各個方面，

如對話框、框架等。在使用應注意如下幾點：

　該對象對應於HTML文檔中的<Body>和<FrameSet>兩種標識；

　onload和onunload都是窗口對象屬性；

　在JavaScript腳本中可直接引用窗口對象。如：

　window.alert("窗口對象輸入方法")

　可直接使用如下格式：

　alert("窗口對象輸入方法")

二、窗口對象的事件驅動

　　窗口對象主要有裝入Web文檔事件onload和卸載時onunload事件。用於文檔載入和中止載入時開始和中止更新文檔

。

三、窗口對象的方法

　　窗口對象的方法主要用來提供信息或輸入數據以及建立一個新的窗口。

建立一個新窗口open()

　使用window.open（參數表）方法能夠建立一個新的窗口。其中參數表提供有窗口的主要特性和文檔及窗口的命名。

具備OK按鈕的對話框

　alert()方法能建立一個具備OK按鈕的對話框。

具備OK和Cancel按鈕的對話框

　confirm()方法爲編程人員提供一個具備兩個按鈕的對話框。

具備輸入信息的對話框

　prompt()方法容許用戶在對話框中輸入信息，並可以使用默認值，其基本格式以下prompt（「提示信息」，默認值）。

四、窗口對象中的屬性

　　窗口對象中的屬性主要用來對瀏覽器中存在的各類窗口和框架的引用，其主要屬性有如下幾個：

frames 文檔中幀的數目

frames（幀）做爲實現一個窗口的分隔操做，起到很是有用的做用，在使用注意如下幾點：

　frames屬性是經過HTML標識<Frames>的順序來引用的，它包含了一個窗口中的所有幀數。

　幀自己已經是一類窗口，繼承了窗口對象全部的所有屬性和方法。

Parent 指明當前窗口或幀的父窗口。

defaultstatus:默認狀態，它的值顯示在窗口的狀態欄中。

status:包含文檔窗口中幀中的當前信息。

top:包括的是用以實現全部的下級窗口的窗口。

window.指的是當前窗口

self:引用當前窗口。

五、輸出流及文檔對象

　　在JavaScript文檔對象中，提供了用於顯示關閉、消除、打開HTML頁面的輸出流。

（１）建立新文檔open()方法

　　使用document.open()建立一個新的窗口或在指定的命令窗口內打開文檔。因爲窗口對象是所加載的父對象,於是我

們在調用它的屬性或方法時,不須要加入Window對象。例用Window. Open()與Open()是同樣的。

打開一個窗口的基本格式：

Window .open("URL","窗口名字","窗口屬性"]

window屬性參數是由一個字符串列表項它由逗號分隔，它指明瞭有關新建立窗口的屬性。見下表所示。

參數

設定值

含義

toolbar

yes/no

創建或不創建標準工具條

location

yes/no

創建或不創建位置輸入字段

directions

yes/no

創建或不創建標準目錄按鈕

status

yes/no

創建或不創建狀態條

menubar

yes/no

創建或不創建菜單條

scrollbar

yes/no

創建或不創建滾動條

revisable

yes/no

可否改變窗口大小

width

yes/no

肯定窗口的寬度

Height

yes/no

肯定窗口的高度。

　　在使用Open()方法時，須要注意如下點：

一般瀏覽器窗中，總有一個文檔是打開的。於是不須要爲輸出創建一個新文檔。

在完成對Web文檔的寫操做後，要使用或調用close()方法來實現對輸出流的關閉。

在使用open()來打開一個新流時，可爲文檔指定一個有效的文檔類型，有效文檔類型包括text/HTML、text/gif、

text/xim、text/plugin等。

（２）write()、writeln()輸出顯示。

　　該方法主要用來實如今Web頁面上顯示輸出信息。在實際使用中，需注意如下幾點：

writeln()與write()惟一不一樣之處在於在未尾加了一個換符。

爲了正常顯示其輸出信息，必須指明<pre> </Pre>標記，使之告訴編輯器。

輸出的文檔類型，能夠由瀏覽器中的有效的合法文本類型所肯定。

（３）關閉文檔流close()

　　在實現多個文檔對象中，必須使用close()來關閉一個對象後，才能打開另外一個文檔對象。

（４）清除文檔內容clear()

　　使用該方法可清除已經打開文檔的內容。

2、簡單的輸入、輸出例子

　　在JavaScript中能夠很是方便地實現輸入輸出信息，並與用戶進行交互。

一、JavaScript信息的輸入

　　經過使用JavaScript中所提供的窗口對象方法prompt(), 就能完成信息的輸入。該方法提供了最簡便的信息輸入方

式，其基本格式以下：

Window.prompt("提示信", 預約輸入信息);

　　此方法首先在瀏覽器窗口中彈出一個對話框, 讓用戶自行輸入信息。一旦輸入完成後，就返回用戶所輸入信息的值

。例:

test=prompt（「請輸入數據:」，」this is a JavaScript」）

　　實際上prompt()是窗口對象的一個方法。由於缺省狀況下所用的對象就是window對象, 因此windows對象能夠省略

不寫。

二、輸出顯示

　　每種語言，都必須提供信息數據的輸出顯示。JavaScript也是同樣，它提供有幾個用於信息輸出顯示的方法。比較

經常使用的有window.alert()、document.write和及document.writln()方法。

１)、document.write()方法和document.writeln()方法

　　document是JavaScript中的一個對象在它中封裝許多有用的方法，其中write()和writeln()就是用於將文本信息

直接輸出到瀏覽器窗口中的方法。

document.write()；

document.writeln()；

說明：

　write()和writeln()方法都是用於向瀏覽器窗口輸出文本字串；

　兩者的惟一區別就是writeln()方法自動在文本以後加入回車符。

２)、 window.alert()輸出

　　在JavaScript爲了方便信息輸出，JavaScript提供了具備獨立的對話框信息輸出─alert()方法。

alert()方法是window對象的一個方法，所以在使用時，不須要寫window窗口對象名，而是直接使用就好了。它主要用

途用在輸出時產生有關警告提示信息或提示用戶，一旦用戶按「肯定」鈕後，方可繼續執行其餘腳本程序。例:

<HTML>

<HEAD>

</HEAD>

<BODY>

alert("這是一個JavaScript測試程序");

</Script>

</BODY>

</HTML>

３)、利用輸入、輸出方法實現交互

　　在JavaScript中，能夠利用prompt()方法和write()方法實現與Web頁面用戶進行交互。例下面就是一個有關實現交

互的例子。

<HTML>

<HEAD>

</HEAD>

<BODY>

<!-- Hide From Other Browsers

document.write("<H1>有關交互的例子");

my=prompt("請輸入數據:");

document.write(my+"</H1>");

document.close();

// Stop Hiding from Other Browsers-->

</Script>

</BODY>

</HTML>

從上面程序能夠看出：

　可經過write()和prompt()方法實現交互。

　在JavaScript腳本語言中可使用HTML標識語言的代碼。從而實現混合編程。其中<H1>和<Br>就是HTML標識符。

3、範例

下列程序演示了你進入主頁所停留的時間。

<html>

<td vAlign="top" width="135">您在此停留了：

</form>

var id, iM = 0, iS = 1;

start = new Date();

function go()

{

now = new Date();

time = (now.getTime() - start.getTime()) / 1000;

time = Math.floor( time);

iS = time % 60;

iM = Math.floor( time / 60);

if ( iS < 10)

document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";

else

document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";

id = setTimeout( "go()", 1000);

}

go();

</script>

</body>

</html>

在瀏覽器中的結果，見下圖1所示。

第八講 WEB頁面信息的交互

　　要實現動態交互，必須掌握有關窗體對象(Form)和框架對象(Frames)更爲複雜的知識。

1、窗體基礎知識

　　窗體對象可使設計人員能用窗體中不一樣的元素與客戶機用戶相交互，而用不着在以前首先進行數據輸入，就能夠

實現動態改變Web文檔的行爲。

１、什麼是窗體對象

　　窗體（Form）:它構成了Web頁面的基本元素。一般一個Web頁面有一個窗體或幾個窗體，使用Forms[]數組來實現不

同學體的訪問。

</form>

</form>

　　在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。

　　窗體對象最主要的功能就是可以直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：

<Form

Name ="表的名稱"

Target ="指定信息的提交窗口"

action ="接收窗體程序對應的URL"

Method =信息數據傳送方式(get/post)

enctype ="窗體編碼方式"

[onsubmit ="JavaScript代碼"]>

</Form>

２、窗體對象的方法

　　窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現窗體信息的提交。如提交Mytest窗體,則使用

下列格式：

document.mytest.submit()

３、窗體對象的屬性

　　窗體對象中的屬性主要包括如下：elements name action target encoding method.

　　除Elements外，其它幾個均反映了窗體中標識中相應屬性的狀

態，這一般是單個窗體標識；而elements經常是多個窗體元素值的數組，例：

elements[0].Mytable.elements[1]

４、訪問窗體對象

　　在JavaScript中訪問窗體對象可由兩種方法實現：

（１）經過訪問窗體

　　在窗體對象的屬性中首先必須指定其窗體名，然後就能夠經過下列標識訪問窗體如：document.Mytable()。

（２）經過數組來訪問窗體　　除了使用窗體名來訪問窗體外，還可使用窗體對象數組來訪問窗體對象。但須要注意

一點，因窗體對象是由瀏覽器環境的提供的，而瀏覽器環境所提供的數組下標是由0到n。因此可經過下列格式實現窗體

對象的訪問：

document.forms[0]

document.forms[1]

document.forms[2]

...

５、引用窗體的先決條件

　　在JavaScript中要對窗體引用的條件是：必須先在頁面中用標識建立窗體，並將定義窗體部分放在引用以前。

2、窗體中的基本元素

　　窗體中的基本元素由按鈕、單選按鈕、複選按鈕、提交按鈕、重置按鈕、文本框等組成。

　　在JavaScript中要訪問這些基本元素，必須經過對應特定的窗體元素的數組下標或窗體元素名來實現。每個元素

主要是經過該元素的屬性或方法來引用。其引用的基本格式見下:

formName.elements[].methadName (窗體名.元素名或數組.方法)

formName.elemaent[].propertyName(窗體名.元素名或數組.屬性)

下面分別介紹：

１、Text單行單列輸入元素

　功能：對Text標識中的元素實施有效的控制。

　基本屬性：

　　Name：設定提交信息時的信息名稱。對應於HTML文檔中的Name。

　　Value：用以設定出如今窗口中對應HTML文檔中Value的信息。

　　defaultvalue：包括Text元素的默認值

　基本方法：

　　blur()：將當前焦點移到後臺。

　　select()：加亮文字。

　主要事件：

　　onFocus：當Text得到焦點時，產生該事件。

　　OnBlur：從元素失去焦點時，產生該事件。

　　Onselect：當文字被加亮顯示後，產生該文件。

　　onchange：當Text元素值改變時，產生該文件。

　例：...

</form>

...

document.mytest.value="that is a Javascript";

document.mytest.select();

document.mytest.blur();

</script>

２、textarea多行多列輸入元素

　功能：實施對Textarea中的元素進行控制。

　基本屬性

name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。

Value：用以設定出如今窗口中對應HTML文檔中Value的信息。

Default value：元素的默認值。

　方法：

blur()：將輸入焦點失去

select()：將文字加亮後

　事件：

onBlur:當失去輸入焦點後產生該事件

onFocus:當輸入得到焦點後，產生該文件

Onchange:當文字值改變時，產生該事件

Onselect:當文字加亮後，產生該文件

３、Select選擇元素

　功能：實施對滾動選擇元素的控制。

　屬性：

name:設定提交信息時的信息名稱，對應文檔select中的name。

Length:對應文檔select中的length

options:組成多個選項的數組

selectIndex;該下標指明一個選項

select在中每一選項都含有如下屬性：

Text:選項對應的文字

selected:指明當前選項是否被選中

Index:指明當前選項的位置

defaultselected:默認選項

　事件：

OnBlur：當select選項失去焦點時，產生該文件。

onFocas:當select得到焦點時，產生該文件。

Onchange:選項狀態改變後，產生該事件。

４、Button按鈕

　功能：實施對Button按鈕的控制。

　屬性：

Name:設定提交信息時的信息名稱，對應文檔中button的Name。

Value:用以設定出如今窗口中對應HTML文檔中Value的信息。

　方法：

click()該方法相似於一個按下的按鈕。

　事件：

onclick當單擊button按鈕時，產生該事件。

例：

</form>

...

document.elements[0].value="mytest"; //經過元素訪問

或

document.testcallvalue="mytest"; // 經過名字訪問

</script>

.....

５、checkbox檢查框

　功能：實施對一個具備複選框中元素的控制。

　屬性：

name:設定提交信息時的信息名稱。

Value:用以設定出如今窗口中對應HTML文檔中Value的信息。

Checked:該屬性指明框的狀態true/false.

defauitchecked:默認狀態

　方法：

click()該方法使得框的某一個項被選中。

　事件：

onclick:當框的選被選中時，產生該事件。

６、radio無線按鈕

　功能：實施對一個具單選功能的無線按鈕控制。

　屬性：

name:設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同

value:用以設定出如今窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。

length:單選按鈕中的按鈕數目。

defalechecked:默認按鈕。

checked:指明選中仍是沒有選中。

index:選中的按鈕的位置。

　方法：

chick():選定一個按鈕。

　事件：

onclick:單擊按鈕時，產生該事件。

７、hidden:隱藏

　功能：實施對一個具備不顯示文字並能輸入字符的區域元素的控制。

　屬性：

name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。

Value:用以設定出如今窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。

defaleitvalue:默認值

８、Password口令

　功能：實施對具備口令輸入的元素的控制。

　屬性：

Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。

Value:用以設定出如今窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。

defaultvalu:默認值

　方法

select():加亮輸入口令域。

blur():使這丟失passward輸入焦點。

focus():得到password輸入焦點。

９、submit提交元素

　功能：實施對一個具備提交功能按鈕的控制。

　屬性：

name:設定提交信息時的信息名稱，對應HTML文檔中submit。

Value:用以設定出如今窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。

　方法

click()至關於按下submit按鈕。

　事件：

onclick()當按下該按鈕時，產生該事件。

3、範例

　　下面咱們演示經過點擊一個按鈕（red）來改變窗口顏色，點擊「調用動態按鈕文檔」調用一個動態按鈕文檔。

//原來的顏色

document.bgColor="blue";

document.vlinkColor="white";

document.linkColor="yellow";

document.alinkcolor="red";

//動態改變顏色

function changecolor(){

document.bgColor="red";

document.vlinkColor="blue";

document.linkColor="green";

document.alinkcolor="blue";

}

</script>

</HEAD>

<A href="test8_2.htm"> 調用動態按鈕文檔</a>

<form >

</form>

</BODY>

</HTML>

輸出結果見下圖1所示。

動態按鈕程序。

<tr>

<p><input type="submit" name="banner" VALUE="Submit"

onClick="alert('You have to put an \'action=[url]\' on the form

tag!!')"> <br>

var id,pause=0,position=0;

function banner() {

// variables declaration

var i,k,msg=" 這裏輸入你要的內容";// increase msg

k=(30/msg.length)+1;

for(i=0;i<=k;i++) msg+=" "+msg;

// show it to the window

document.form2.banner.value=msg.substring(position,position-30);

// set new position

if(position++==msg.length) position=0;

// repeat at entered speed

id=setTimeout("banner()",60); }

// end -->

banner();

</script></p>

</form>

</td>

</tr>

</table>

</center></div>

<BODY>

</BODY>

</HTML>

輸出結果見下圖所示。

　　本講介紹了使用JavaScript腳本實現Web頁面信息交互的方法。其中主要介紹了窗體中的基本元素的主要功能和使

用。

第九講實現更復雜的交互

1、什麼是框架

　　框架Frames最主要功用是"分割"視窗，使每一個"小視窗"能顯示不一樣的HTM L文件，不一樣框架之間能夠互動

(interact)，這就是說不一樣框架之間能夠交換訊息與資料。例如:假設您開了兩個frames，第一個frame可顯示書的目錄

，第二個frame則顯示章節的具體內容。

　　框架能夠將屏幕分割成不一樣的區域，每一個區域有本身的URL，經過Frames[]數組對象來實現不一樣框架的訪問。實際

上框架對象自己也一類窗口，它繼承了窗口對象的全部特徵，並擁有全部的屬性和方法。

</HEAD>

</Frameset>

</HTML>

　　以上HTML標識將屏幕分紅三個框架。先將窗口分紅以二行爲單位的窗口，以後再按分紅二個窗口。並在相應的框架

中放入本身的HTML文檔。

　　經過[Framset ]告訴瀏覽器您要設置幾個框架；rows這項參數告訴瀏覽器您想將視窗分割成幾列；而 cols這項參

數是告訴瀏覽器您想將視窗分割成幾行。

　　能夠用不少組的 <frameset...> tags 將視窗分割得更復雜。

　　能夠給每一個frame一個"名字" (name)。frame的名字在JavaScript語法中的地位很是重要。

　　能夠用 <src> 告訴瀏覽器您要載入哪個 HTML文件。

2、如何訪問框架

　　在前面咱們介紹過使用document.forms[]實現單一窗體中不一樣元素的訪問。而要實現框架中多窗體的不一樣元素的訪

問，則必須使用window對象中的Frames屬性。Frames屬性一樣也是一個數組，他在父框架集中爲每個子框架設有一項

。經過下標實現不一樣框架的訪問:

parent.frames[Index1].docuement.forms[index2]

經過parent.frames.length肯定窗口中窗體的數目。

除了使用數組下標來訪問窗體外還可使用框架名和窗體名來實現各元素的訪問：

parent.framesName.decument.formNames.elementName.(m/p)

3、範例

　　下面咱們經過一個具體的實例, 來講明利用JavaScript腳本在WEB中實現更爲複雜的信息交互。該例子是在一個多

窗口中實現窗體信息的動態交互,在程序中首先在瀏覽器窗口中製做三個用於窗體交互的窗口,每一個窗體窗口實現不一樣信

息的動態交互。

main.html爲主調用文檔它首先將窗口劃分爲具備二行的窗體,爾後再將第二行的窗體劃分爲具備二列的窗體；

1.html爲顯示標題文檔；

2.html爲第二框架文檔其中須要注意的是:

經過JavaScript腳本將所示的「雲南省」和「四川省」分別改成「昆明市」和「成都市」；

3.html爲第三框架文檔。

主調文檔

主要做用是將窗口劃分爲具備二行的窗體,爾後再將第二行的窗體劃分爲具備二列的窗體。

main.htm

<HTML>

<HEAD>

</HEAD>

</Frameset>

</HTML>

第一個框架

主要做用是顯示標題文檔。

1.htm

<HTML>

<HEAD>

</HEAD>

<H2>使用框架實現WEB交互</H2>

</HTML>

第二個框架

主要做用是實現交互。能夠經過JavaScript腳本將所示的「雲南省」和「四川省」分別改成「昆明市」和「成都市」。

2.htm

<HTML>

<HEAD>

</HEAD>

<Body>

請選擇城市：<BR>

<Option>雲南省

<Option>四川省

<Option>貴州省

<Option>山東省

<Option>江蘇省

<Option>浙江省

<Option>安徽省

<Option>河南省

</select><BR>

<HR>

</Form>

<pre>

document.test9_1.elements[0].options[0].text="昆明市";

document.test9_1.elements[0].options[1].text="成都市";

</script>

</pre>

</Body>

</HTML>

第三個框架

主要做用是實現交互。

3.htm

<HTML>

<HEAD>

</HEAD>

<Body>

請輸入用戶名：

<HR>

請選擇:

<HR>

<BR>

</Form>

document.test9_2.elements[0].value="勞動和社會保障";

document.test9_2.elements[1].checked=true;

document.test9_2.elements[2].checked=true;

document.test9_2.elements[3].checked=false;

</script>

</Body>

</HTML>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。