在上次的教程里,我給大家介紹了JavaScript的三個功能,比如寫入HTML文件的輸出,設置按鈕對事件做出反應,改變HTML內容。其實JavaScript還有非常豐富的功能,在這次的教程里,我再介紹JavaScript的三個功能。
JavaScript:改變 HTML 圖像
JavaScript可以動態地改變HTML里<image>標簽的內容,從而改變HTML中的圖像顯示。
為什么要這么做呢?
當我們在視頻網站看視頻的時候,經常會用到一個功能:關燈。這個功能方便我們專心地觀看視頻,而不被視頻框周圍的廣告或者其它功能所打擾。其實在點擊關燈按鈕的時候,我們并沒有真的關燈,而是改變了HTML中的圖像,從而達到了關燈的效果。
舉個例子,下圖里是一段通過點擊燈泡來控制其亮滅的代碼:
在代碼的<body>區域內,我們可以規劃HTML網頁的內容。在這個代碼里,我們先在<script>區域內定義了一個函數changeImage(),這個函數的功能是改變當前圖像,當圖像源src的名字里有“bulbon”這串字符的時候,把圖像源改成eg_bulboff.gif,需要注意的是這個gif圖像是需要真實存在的,而且按照代碼里的指示,兩張圖像eg_bulbon.gif和eg_bulboff.gif都需要放在文件夾“i”下。"/i/eg_bulboff.gif"是圖像“eg_bulboff.gif”的路徑名。
如果我們點擊燈泡,那么就會讓燈泡變亮或者變暗,達到開燈,關燈的效果。
當然,JavaScript 能夠改變任意 HTML 元素的大多數屬性,而不僅僅是圖片。這個特性我們以后還會多次用到。
JavaScript:改變 HTML 樣式
剛才提到JavaScript可以改變HTML元素的大多數屬性,比如改變圖像。其實,JavaScript還可以改變 HTML 元素的樣式,這屬于改變 HTML 屬性的變種。
舉一個簡單的例子:
x=document.getElementById("demo")//找到元素
x.style.color="#ff0000";//改變樣式
上面第一行代碼是找到demo這個元素,并用x指代;第二行代碼是改變x的顏色,指定顏色是#ff0000,在網上搜了一個呢,發現這個顏色代碼rgb(255,0,0),也就是純正的紅色。
下面我們看一個熟悉的例子:
對應的網頁是這樣的:
在上圖的代碼里,我們可以看到在<script>的代碼區域里,定義了一個函數myFunction(),這個函數的功能就是找到元素“demo”,并且改變其顏色為"#ff0000"。
“demo”是什么呢?我們看到在<script>上方有一段代碼:
<p id="demo">
JavaScript 能改變 HTML 元素的樣式。
</p>
在<p id="demo">里,我們看出來“demo”是“JavaScript 能改變 HTML 元素的樣式。”這一行文字。
那么當我們點擊按鈕“點擊這里”的時候,代碼就會執行“myFunction()”這個函數的功能,也就是改變“JavaScript 能改變 HTML 元素的樣式。”這一行文字的顏色為"#ff0000"(純正的紅色)。
過程如下:
大家可以在http://www.w3school.com.cn/tiy/t.asp?f=js_intro_style試試其他的顏色。
JavaScript:驗證輸入
由于其靈活的功能,JavaScript 常用于驗證用戶的輸入。
舉個例子:
if isNaN(x) {alert("Not Numeric")};
我解釋一下這行代碼,NaN是Not a Number的縮寫。
isNaN(x)就是判斷是不是一個數字,如果x不是一個數字,那么isNaN(x)返回yes,否則返回no。
所以if isNaN(x) {alert("Not Numeric")};這行代碼的意思就是,如果x不是一個數字,就發出警告“Not Numeric”!
下面我們在具體的情形中看看JavaScript在驗證輸入方面的作用:
對應的HTML文件內容如下:
在代碼區域,代碼用<input>標簽設置了一個輸入框,就是上圖中“點擊這里”按鈕左邊的框,可以輸入任意文本,然后定義了一個函數myFunction(),這個函數先用x指代ID是“demo”的值,這個“demo”ID指向input的文本,所以x就是我們在輸入框里輸入的文本。
如果我們輸入一個數字,那么HTML網頁不會有任何反應。但是如果我們輸入的不是數字,而是字符什么的,那么網頁就會彈出警告框。如下:
小結:
這次我們介紹了JavaScript的三個功能,更改圖像,更改樣式,設置驗證輸入。其實JavaScript的功能十分強大,不過“千里之行,始于足下”,在介紹了JavaScript的幾個典型的功能之后,我會給大家詳細介紹JavaScript的具體語法知識,讓大家更加深入地體驗JavaScript的獨特編程樂趣。