手把手教你JavaScript編程(3):JavaScript的強大功能續篇

在上次的教程里,我給大家介紹了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的獨特編程樂趣。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,811評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 在上次的教程里,我介紹了如何用JavaScript寫一個簡單的網頁。在這次教程里,我介紹3個JavaScript的...
    君君玩科技閱讀 1,842評論 12 18
  • 今天想說的是關于如何維系親密關系的一些感慨。 在一段戀情里邊,很多女孩子都會有同樣的狀態就是患得患失,總是會懷疑對...
    奶味冰咖燕子閱讀 87評論 3 1
  • 親媽躁怒孩受苦, 兩根鋼針刺入骨。 誰信此人是親母? 虐孩堪比狼和虎。 躁怒狂親母往孩子身上扎針,越哭越扎,越哭越...
    旖旎i閱讀 227評論 5 6