函式宣告

函式

可被呼叫執行之程式片段

把可以重複使用的程式放裏面

也是一種型別

函式宣告

宣告一個函式

function add(a,b){
	return a+b
}
					

可以在任何時候呼叫

函式指派

將匿名函式指派給變數

var sub=function(a,b){
	return a-b
}
					

要指派完才能呼叫

匿名函式

將函式當成可執行之資料

可以直接執行不用給名字

typeof(function(a,b){
	return a*b
})
					

型別一樣是function

接下來

現在已經知道變數是什麼了

要怎麼使用呢?

使用函式

函式呼叫

不論是函式還是匿名函式呼叫法都一樣

console.log("%s is %s","Tom","Mary")

使用小括號並用逗號分隔引數

引數?參數?

argument 引數

parameter 參數

引數是指值，參數是指變數

看看實際例子

var div=function(a,b){
	return a/b
}
div(30,5)
					

30和5是引數，a和b是參數

雖然如此但還是很難分啦

變動長度參數

console.log怎麼傳引數都可以

"我是副市長的姪子，你們看著辦。"

請使用arguments取得參數

使用範例

把傳入的數都加起來

(function(){
	var sum=0
	for(var i=0;i<arguments.length;i++){
		sum+=arguments[i]
	}
	return sum
})(1,2,3,4,5)
					

arguments用法和Array很像

接下來

函式中變數作用範圍道理是如何運作

JavaScript劣質部份

變數作用域

作用域

scope

變數可以被使用的範圍

區域變數

Local variable

宣告在函式中的變數

只有該函式可以取用

要有var宣告才是區域變數

全域變數

Global variable

在任何地方都可以被使用

有同名之區域變數則無法使用

自動全域變數

沒有var就賦值的變數

當你以為是區域變數結果到處都可以用...

不論如何都用var宣告吧

變數存活時間

從被宣告時出生

區域變數在離開函式呼叫後刪除

全域變數在頁面被關閉時刪除

接下來

JS有很多的內建函式可以使用

不要重新做輪子了，找找有沒有可用的函式

物件的函式

物件的函式

數字相關

字串相關

BOM

DOM

數字相關函式

轉成數字

常常用到的全域函式

Number(obj)

parseFloat(str)

parseInt(str,radix)

數字轉其他

.toString(radix)

.toExponential(len)

.toFixed(len)

.toPrecision(len)

字串相關函式

字串處理

字串處理是常常遇到的事

JS幫你寫好很多函式可以用了

字串尋找

找到就回傳位置否則回傳-1

.indexOf(str)

.search(str)

前兩者效果一樣但search有更強功能

.lastIndexOf(str)

字串切割

.slice(strX,endX)

取得兩個參數範圍內的字串

參數可以為負數代表從後面數

子字串

不支援負引數的slice

.substring(strX,endX)

取用某位置開始的固定長度字串

.substr(strX,len)

字串替換

.replace(oldStr,newStr)

取得將指定字串換成新字串的字串

請不要用來防XSS...

JS的字串

所有的函式都是回傳新字串

避免副作用

字串轉陣列

可以用字元切割成子字串

.split(str)

可以不切(不傳引數)也可以都切(傳空字串)

BOM

BOM

Browser Object Model

每個頁面都有個window物件

裏面包含頁面所有東西

另外還有DOM等等會說

頁面尺寸屬性

這個不是函式

.innerHeight

.innerWidth

頁面操作

.open(URL,name,sepc,replace)

.focus()

.close()

.moveTo(x,y)

.resizeTo(x,y)

全域變數與函式

存放全域變數還有函式

雖然說哪裡都能看到就是了...

接下來

DOOM

要說明HTML文件在JS中的表現樣式

DOM

DOM

Document Object Model

一棵不開花的樹

JS的能力

由於整個html文件都被DOM所表達

可以改變HTML元素、屬性

可以換CSS風格

可以新增移除HTML元素

JS的無力

因為JS可以新增<script>元素

所以沒有引入函式庫的函式呼叫...

ES6終於會有啦

IE持續悲劇中

取得元素

document.getElementById(id)

document.getElementsByTagName(name)

document.getElementsByClassName(name)

改變元素

此處element代換任意DOM中的元素

element.innerHTML=newHtmlContent

element.attribute=newValue

element.setAttribute(attribute, value)

element.style.property =newStyle

增刪元素

document.createElement(element)

以下的document可依節點做代換

document.removeChild(element)

document.appendChild(element)

document.replaceChild(oldNode,newNode)

document.write(text)