深入淺出Javascript Lesson 1

2012-01-18

3266
0
Javascript
2012-01-31

深入淺出系列的書籍在我的印象中算是市面上編寫程式相關的書籍裡可以讓人看得比較輕鬆並有興趣繼續往下看的書了

圖文並茂加上循序漸進的方式值得推薦給各位

不過我覺得最好是已經具備基本的認識像是"深入淺出Javascript"一書最好是本身已經對Javascript有初步的認識

看起來會更駕輕就熟也能理解更深

書中的程式範例:

http://www.headfirstlabs.com/books/hfjs/

爾後會將每章節學習到的重點節錄出來做為日後複習之用

第一章互動性網站

HTML,CSS,Javascript是構成網站的三大元素

HTML提供骨架 CSS添加美觀的畫面 Javascript則注入功能性,讓網頁有所行動

要將Javascript放入HTML裡面第一件事就是要讓瀏覽器知道接下來不是HTML,而是Javascript

因此利用script標籤,任何地方都可以安插script標籤,但最好是擺在網頁的head區域

如:


<SCRIPT type=text/javascript>
  function touchRock() {
        var userName = prompt("What is your name?", "Enter your name here.");
        if (userName) {
          alert("It is good to meet you, " + userName + ".");
          document.getElementById("rockImg").src = "rock_happy.png";
        }
      }
 </SCRIPT>

script標籤表示說接下來的指令稿語言為javascript.

alert()函式是javascript裡彈出訊息視窗的方式(或稱對話方塊),列出的文字前後記得要加引號.

函式(function)是一段負責常見任務,可重複利用的javascript碼,如上的touchRock() 為一自製函式.

prompt()函式負責製作彈出視窗,並向使用者詢問資料的值,如上是詢問名字的值.

document.getElementById()是javascript中允許我們利用ID來存取網頁元素的函式,這個函式不會直接捕捉元素的資料,而是以javascript物件的型式,提供HTML欄位內容,而我們再透過欄位的性質(property)來存取資料,如上我們將取得一個img且ID為rockImg的欄位,接著再透過src性質來存放圖片來源.

接著再談到javascript的事件(event)

所謂事件,指的是javascript在通知我們有些值得注意的事情發生了,例如網頁的載入(onload)或按鈕的點擊(onclick),我們可以自己設計回應事件的javascript碼

<body onload="alert('Hello, I am your pet rock.');">

onload事件使用的原始碼,設置在body標籤裡的onload屬性裡,如上可以理解成當網頁載入完成後,瀏覽器將呈現一個alert方塊,列出歡迎使用者的訊息

<img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />

onclick事件如上使用在img標籤內,可以理解成當rockImg圖片被點擊後將觸發touchRock()函式

Javascript

回首頁