[web]javascript筆記

【JavaScript Tutorial】http://www.w3schools.com/js/default.asp
【HTML DOM Tutorial】http://www.w3schools.com/htmldom/default.asp
【DHTML Tutorial】http://www.w3schools.com/dhtml/default.asp (zeldman說該用DOM來取代)

【JavaScript Reference】http://www.w3schools.com/jsref/default.asp
【HTML DOM Reference】http://www.w3schools.com/htmldom/dom_reference.asp

(01)
<html>
<body>
<script type=”text/javascript”>
document.write(“Hello World!”)
</script>
</body>
</html>

(02)
<script type=”text/javascript”>
<!–
document.write(“Hello World!”)
//–>
</script>
<!– –>是為了怕script code被人看到, //是避免<!– –>被java script compiler編譯

(03)
<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>

(04)
宣告變數
var foo = foobar
foo == foobar
* 宣告在function外的是為global variable

條件控制
* 像C一樣, 好像一定要有大括弧
* 支援while loop, do while loop
* 注意java script不用分號做結尾
* 有break/continue, 也要加{}
* 支援 for( x in something)語法

運算子
* 像C一樣,多加了===,表示檢查值與型別(像一個是字串5一個是數值5就不相等)
* 字串可用+做concatenate
* 也支援三元運算子

box函數
alert()
confirm(); 會有確定、取消兩鍵
prompt(string,default); 有一條輸入框,內有預設值,有確定、取消

函數
* 可以有多個參數, 回傳同C

事件
onload/onunload
onfocus/onblur/onchange; 用在表格(form)
onsubmit
onmouseover/onmouseout
onerror(見下個)(onerror是在<script>的下一行設的,
像這樣
<script type=”text/javascript”>
onerror=handleErr
handleErr是一個函式)

錯誤處理
try{
    //…
}catch(err){
    //…
}
真的就是用err, 然後可以用err.description看錯誤原因
可以在try block內用throw “string”
然後比較catch的參數是否==string
做相應動作

跳脫字元
Code    Outputs
\’    single quote
\”    double quote
\&    ampersand
\\    backslash
\n    new line
\r    carriage return
\t    tab
\b    backspace
\f    form feed

其他
C式兩種註解都可用

內建函式
【字串】
var txt=”Hello world!”
http://www.w3schools.com/jsref/jsref_obj_string.asp
【日期】
var myDate=new Date()
http://www.w3schools.com/jsref/jsref_obj_date.asp
【陣列】
var myArray=new Array()
http://www.w3schools.com/jsref/jsref_obj_array.asp
【布林】
var myBoolean=new Boolean()
http://www.w3schools.com/jsref/jsref_obj_boolean.asp
【數學】
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
(Math物件不用宣告即可使用)
http://www.w3schools.com/jsref/jsref_obj_math.asp
【HTML DOM】
物件列表
http://www.w3schools.com/js/js_obj_htmldom.asp

* 偵測browser
因為有些brwoser不支援java script.
DWWS教我們如何偵測DOM
這裡偵測javascript的方法是從navigator的information
去知道browser的version, name…等等
但我認為有更好的方法

* cookie
cookie是document的成員
cookie提供簡單的,不需要加密的,依使用者資訊的網頁互動

* 驗證
可以這樣寫
with(物件){
    if(….){
        //…
    }
}

* 動畫
這裡的code沒什麼特別,但是可以了解物件hierarchy
注意為什麼document.bl.src
<html>
<head>
<script type=”text/javascript”>
function mouseOver()
{
document.b1.src =”b_blue.gif”
}
function mouseOut()
{
document.b1.src =”b_pink.gif”
}
</script>
</head>

<body>
<a href=”http://www.w3schools.com&#8221; target=”_blank”
onmouseOver=”mouseOver()”
onmouseOut=”mouseOut()”>
<img border=”0″ alt=”Visit W3Schools!”
src=”b_pink.gif” name=”b1″ />
</a>
</body>
</html>

* 影像地圖
搭配影像地圖,可以用mouseover做文字說明

* 計時器
DOM提供單位為millisecond的計時器
可以起動 /停止

* 自訂物件
object.member=value //properties
object.method()        //methods
myobj = new Object()        // java script有區分大小寫

用函式就可以造出物件的constructor
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
myFather=new person(“John”,”Doe”,50,”blue”)
myMother=new person(“Sally”,”Rally”,48,”green”)

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: