深入淺出Javascript Lesson 3

2012-01-31

2157
0
Javascript

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

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

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

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

書中的程式範例:

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

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

第三章探索用戶端

用戶端網站瀏覽器負責執行Javascript碼,指令稿因此得以存取用戶端環境,例如:取得瀏覽器視窗的寬度與高度,類似鬧鐘的計時機制,對cookie的存取

計時器(timer):

Javascript計時器讓我們在一段時限流逝後,才執行Javascript碼,又可分為單次計時器以及間歇計時器,顧名思義,單次計時器只會觸發一次程式碼而間歇計時器每隔一段時間,會重複呼叫計時器碼,直到我們讓它停止.

單次計時器設定時間setTimeout()

setTimeout()函式需要的兩項資訊,分別是時間延遲與計時器停止時欲執行的程式碼;提供這兩項資訊時沒有順序問題

setTimeout("alert('Wake up!');",600000);

上例呼叫setTimeout()函式,建立一個等待10分鐘,就彈出alert方塊的計時器

間歇計時器設定時間setInterval()

var timerID = setInterval("alert('Wake up!');",600000);

利用單次計時器設定5分鐘改變圖片:

setTimeout("document.getElementById('rockImg').src='rock.png';",300000);

以document物件取得用戶端視窗寬度及高度:

document.body.clientWidth

document.body.clientHeight

一張圖片因為多變的螢幕尺寸的不同造成圖片太小或是只能看到一小塊圖片,我們必須透過document物件取得用戶端的寬度或高度來計算圖片的適當寬高,基於瀏覽器的垂直高度較受限制,因此採取用戶端視窗的高度來計算比較保險,再來必須要做的就是如何改變原始的圖片寬高.

藉用一點CSS的能力,Javascript就能調整圖像尺寸,網頁上所有組件都有一個style物件,藉此可取得網頁上任何事物的寬度與高度

document.getElementById("rockImg").style.height="100px";

上例改變圖片的高度為100pixels,不用再另外設定寬度,因為它將根據新設定的高度自行縮放,維持圖樣的比例.

至於圖片應該如何配合頁面調整大小,除了前面講到透過垂直高度做基準外,再來就是透過百分比來設定圖片的大小.


function resizeRock() {
   document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9;
}

resizeRock()這函式為根據用戶端視窗尺寸,縮放寵物石的大小,應該擺放在onload事件處理器中.上例取得用戶端視窗的高度後減去100(距頂端100pixels),把圖像尺寸設為剩餘高度的90%.這類計算需要多一點嘗試,才能找出最洽當的數值.

瀏覽器改變大小時觸發onresize事件

上例網頁首度載入時會呼叫resizeRock()函式,另外當瀏覽器視窗尺寸調整時也會呼叫resizeRock()函式.

Javascript於瀏覽器關閉或網頁重新載入時,摧毀所有變數,此時要透過cookie來延長指令稿的生命週期.

cookie以獨一無二的名稱,儲存一段資料,這點很像變數.但是,cookie可以設定有效日期(expiration date),cookie以長文字字串的形式,儲存於使用者電腦裡;該字串內容與網站(或網域)相關.分號(;)區隔各個cookie,讀取cookie清單及取用某個cookie時,分號將是關鍵.

以下有三個處理cookie的協助函式,可以輕鬆地寫入,讀取,清除cookie,有時候,最聰明的處理方式在於借用其他人的努力成果,然後盡量用在你的自製cookie函式中.

cookie.js


function writeCookie(name, value, days) {
  // By default, there is no expiration so the cookie is temporary
  var expires = "";

  // Specifying a number of days makes the cookie persistent
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }

  // Set the cookie to the name, value, and expiration date
  document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
  // Find the specified cookie and return its value
  var searchName = name + "=";
  var cookies = document.cookie.split(';');
  for(var i=0; i < cookies.length; i++) {
    var c = cookies[i];
    while (c.charAt(0) == ' ')
      c = c.substring(1, c.length);
    if (c.indexOf(searchName) == 0)
      return c.substring(searchName.length, c.length);
  }
  return null;
}

function eraseCookie(name) {
  // Erase the specified cookie
  writeCookie(name, "", -1);
}

清除cookie的方式,就是把它改成沒有值,而且有效日期已經過去一天(-1).

把Javascipt碼另外儲存成一個檔案後,必須把檔案匯入任何需要Javascipt碼的網頁

<script type="text/javascript" src="cookie.js"></script>

讀取cookie

greetUser()函式負責於網頁首度載入後歡迎使用者


function greetUser() {
    userName = readCookie("irock_username");
    if (userName)
      alert("Hello " + userName + ", I missed you.");
    else
      alert('Hello, I am your pet rock.');
 }

上例可以看到使用readCookie()函式帶入名稱後檢查使用者名稱有沒有值,有的話呈現個人化的問候語,沒有的話採用一般問候語.

寫入cookie

touchRock()是使用者點擊寵物石圖像時呼叫的函式


function touchRock() {
  if (userName) {
    alert("I like the attention, " + userName + ". Thank you.");
  }
  else {
    userName = prompt("What is your name?", "Enter your name here.");
    if (userName) {
     alert("It is good to meet you, " + userName + ".");
      if (navigator.cookieEnabled)
        writeCookie("irock_username", userName, 5 * 365);
      else
        alert("Cookies aren't supported/enabled in your browser, which means I won't remember you later. I'm sorry.");
    }
  }
  document.getElementById("rockImg").src = "rock_happy.png";
  setTimeout("document.getElementById('rockImg').src = 'rock.png';", 5 * 60 * 1000);
}

上例,拿到使用者名稱後,問候使用者,並把名稱寫入cookie裡,當讀取cookie時也得使用irock_username這名稱.

沒有cookie的世界

有些瀏覽器不支援cookie,可以事先透過navigator.cookieEnabled回傳true或false值

在greetUser()函式中補上檢查瀏覽器是否支援cookie的機制


function greetUser() {
  if (navigator.cookieEnabled)
   userName = readCookie("irock_username");
 if (userName)
   alert("Hello " + userName + ", I missed you.");
  else
    alert('Hello, I am your pet rock.');
}

Javascript

回首頁