Time of Update: 2014-04-10
每個寫過程式的人都不會對範圍這個概念陌生,那在這篇文章中就來談下Javascript的範圍。 在Javascript,全域環境本身就一個對象。在瀏覽器宿主中這個對象是window,而當Javascript用於其它非瀏覽器的宿主,如嵌入式的環境中,可能會是其它的對象。
Time of Update: 2014-04-10
在Web應用程式特別是Web2.0程式開發中,經常要擷取頁面中某個元素,然後更新該元素的樣式、內容等。如何擷取要更新的元素,是首先要解決的問題。令人欣慰的是,使用JavaScript擷取節點的方法有很多種,這裡簡單做一下總結: 通過頂層document節點擷取: document.getElementById(elementId) 該方法通過節點的ID,可以準確獲得需要的元素,是比較簡單快捷的方法。如果頁面上含有多個相同id的節點,那麼只返回第一個節點。
Time of Update: 2014-04-10
今天有個小問題,在iPhone上顯示所有圖片。但是不可能一次顯示全部,只能顯示圖片的名稱列表。需要點擊圖片名,然後顯示圖片,再次點擊的話,就隱藏圖片。一個比較簡單的javascript代碼,在這裡記錄下,方便以後取用。 示範如下: [ 點我顯示與隱藏圖片 ][ 點我顯示與隱藏圖片 ] 代碼也很簡單。 html [<a onclick=show('img1')> 點我顯示與隱藏圖片 </a>]<img
Time of Update: 2014-04-10
現在電子商務紅紅火火的,什麼秒殺,限時什麼的,JavaScript的倒計時用得很廣泛。下面就來做一個倒計時效果,先來看效果。 效果示範 隨便寫的代碼,還有待改進。下面是原始碼: JavaScript Code<script type="text/javascript" language="javascript">//總時間,以分為單位var time = 100;//小時var h = parseInt(time / 60) > 0 ? parseInt(time / 6
Time of Update: 2014-04-10
編程的陷阱(gotcha)是指電腦系統中的意想不到的文檔特徵而不是bug。這些陷阱使得初學者遠離javascript編程。在我看來,因為所有的瀏覽器都能運行javascript使得它是使用最廣泛的語言之一,但它也是最少人研究的。讓我們從一個基礎的樣本開始。 浮點運算 這可能是挫敗一些對javascript不熟悉並準備執行一些數學運算的人的主要原因。 <script>alert(0.02 / 0.1); //0.19999999999999998alert(1.14 *
Time of Update: 2014-04-10
做過前端開發的應該都會對瀏覽器安全色問題抓過頭吧,這裡有一種方法,可以根據使用者使用的瀏覽器判斷使用何種CSS,同樣,你也可以根據使用者登入的時間,顯示白天,夜晚或者淩晨,這樣可以使你的網站更加人性化。 <link href="" rel="stylesheet" type="text/css" id="link"/><script type="text/javascript"><!--if (window.navigator.userAgent.indexOf("MSIE"
Time of Update: 2014-04-10
作為一個程式員, 你可能早已經習慣於物件導向語言中指代當前對象的引用(或者指標), 如的c++中的this或者 python 中的self,當然具有OO屬性( javascript 其實更多的是一種所謂的函數式語言)的 javascript 同樣, 它也具有引用當前屬性的對象的指標(或者引用), 也就是this關鍵字。 為了理解this關鍵字,如果你只想記住一句話,那應該是 this關鍵字總是指向當前函數的所有者對象(執行空間), 至於這句話如何理解, 可以參見下面的詳細說明。
Time of Update: 2014-04-10
儘管那需要用長串的、沉悶的不同分支代碼來應付不同瀏覽器的日子已經過去,偶爾還是有必要做一些簡單的區分和目標檢測來確保某塊代碼能在使用者的機器上正常運行。下面介紹一些在IE和Firefox中不同的JavaScript句法。 CSS "float" 值 訪問一個給定CSS 值的最基本句法是:object.style.property,使用駝峰寫法來替換有串連符的值,例如,訪問某個ID為"header"的<div>的 background-color值,我們使用如下句法:
Time of Update: 2014-04-10
從基礎的層面來講,理解JavaScript的定時器是如何工作的是非常重要的。計時器的執行常常和我們的直觀想象不同,那是因為JavaScript引擎是單線程的。我們先來認識一下下面三個函數是如何控制計時器的。var int = self.setInterval("updateMsg()",12000);var id = setTimeout(fn, delay); --
Time of Update: 2014-04-10
轉換為布爾型 用兩次非運算(!): !!5 ==> true 用布爾型的建構函式: new Boolean(5) == > true 值轉換為布爾類型為false:0,+0,-0,NaN,""(Null 字元串),undefined,null 除上面的值其他值在轉換以後為true,需要特別提到的是:"0",new Object(),function(){} 轉換為字串類型 加上Null 字元串"": 123 + "" =
Time of Update: 2014-04-10
JavaScript是一種在Web開發中經常使用的前端動態指令碼技術。在JavaScript中,有一個很重要的安全性限制,被稱為“Same-Origin
Time of Update: 2014-04-10
Hashtable是最常用的資料結構之一,但在JavaScript裡沒有各種資料結構對象。但是我們可以利用動態語言的一些特性來實現一些常用的資料結構和操作,這樣可以使一些複雜的代碼邏輯更清晰,也更符合面象對象編程所提倡的封裝原則。這裡其實就是利用JavaScriptObject 對象可以動態添加屬性的特性來實現Hashtable, 這裡有需要說明的是JavaScript 可以通過for語句來遍曆Object中的所有屬性。但是這個方法一般情況下應當盡量避免使用,除非你真的知道你的對象中放了些什麼。
Time of Update: 2014-04-10
如何快速成為JavaScript高手?之前我拿這個問題問過我的同事,也問過國內的一些JavaScript高手。最近,我一直在拿這個問題問自己。之所以會有這個問題,我基於兩個前提:第一、我自認為自己不笨;第二、我學習和使用JavaScript也有一段時間了,並且自己學習還算努力。思來想去,我覺得我應該先回答下這個問題:如何提高自己的學習效率?想象一下學校的情境,有一些知識,有的人就是學得比你快。為什嗎?可能他本來就比你聰明;可能他之前學過的、接觸過的東西使他對這個知識有啟發;可能他背地裡比你花的功
Time of Update: 2014-04-10
本篇開始將回顧下Javascript的事件機制。同時會從一個最小的函數開始寫到最後一個具有完整功能的,強大的事件模組。為敘述方便將響應函數/回呼函數/事件Listener/事件handler都稱為事件handler。 先看看頁面中添加事件的幾種方式:直接將JS代碼寫在HTML上測試:Nowamagic<div onclick="alert('歡迎訪問Nowamagic.net');">Nowamagic</div>HTML
Time of Update: 2014-04-10
行拖動的實現思路非常簡單,選中一行,往上拖就與上面的行交換位置,往下拖就與下面的行交換位置。問題是如何得到交換行。我見過一個非常詳細的教程,它會把表格裡的每一行的高度與Y座標計算出來,換言之,都時是比較e.pageX是否在[rowTop,rowBottom]區間之內。但這也帶來第二個問題,有多少行就有多個這樣的區間。於是解法就變成取事件來源對象,然後再往上取其父物件,如果其父物件是TR元素,就取其[rowTop,rowBottom]區間....思路非常直接,同時也客觀做出一個限制——不能使用代理
Time of Update: 2014-04-10
之所以取名叫做詞法範圍,是這個概念是js中相當基礎也是極為重要的,很多想當然的錯誤或感覺怪異的問題都是和這個東西有關。所以,本文主要說下這個名詞的概念以及討論下他牽扯出來的有關變數、函數、閉包的問題。 由變數開始談 習慣性先來段代碼:var x = "globol value";var getValue = function(){alert(x); //彈出"undefined"var x = "local value";alert(x); //彈出"local
Time of Update: 2014-04-10
真正去解釋this這個東西的時候,才發現不是這麼簡單,花了一些時間,寫了幾個小demo,讓我們來一探究竟。恩,以人為鏡,可知得失,看來這句話是很有道理的。 如果是一個全域的function,則this相當於window對象,在function裡定義的各種屬性或者方法可以在function外部存取到,前提是這個function需要被調用。 <script type="text/javascript"> //在function中使用this
Time of Update: 2014-04-10
setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算運算式。setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
Time of Update: 2014-04-10
我們很容易被漂亮的代碼吸引,也不知不覺的在自己的程式碼程式庫中加入這些。卻沒有冷靜的想過它們的優劣。這不,我就收集了一系列形如 "是否為……?" 的判斷的boolean函數。isNull: function(a){return a === null;},isUndefined: function(a){return a === undefined;},isNumber: function(a){return typeof a === 'number';},isString:
Time of Update: 2014-04-10
在這個js架構隨處亂跑的時代,你是否考慮過寫一個自己的架構?下面的內容也許會有點協助。 一個架構應該包含哪些內容? 1. 語言擴充 大部分現有的架構都提供了這部分內容,語言擴充應當是以ECMAScript為基礎進行的,不應當依賴任何宿主環境,也就是說,作為一個架構的設計者,你應當保證你的語言擴充可以工作在任何宿主環境中,而不是僅僅適合瀏覽器環境。你必須保證把它放到WScript,SpiderMonkey Shell,Rhino Shell,Adobe