這份文件是給初學者看的。如果你已經很熟Javascript了，就不要浪費時間抓下來看了噢!! 另外也請大家如果有發現錯誤，請跟我說!! 謝謝你們 2015/4/11 . 加入保留字說明

1. 網頁三本柱最終章
Javascript與Jquery
JAJA

2. 本PPT適合的對象
毫無經驗 - 剛起步學走
http://tinyurl.com/l3o9hr9

3. 目錄
 Javascript say Hello World!
 變數基礎, 迴圈
 Document & Object API
 JQUERY say Yo!
 JQUERY 選擇器
 JQUERY HTML操作
 JQUERY 效果
 JQUERY UI

4. 每段故事，在開場前

5. 一定都會來段人物介紹

6. http://ppt.cc/tlMD
http://ppt.cc/V93p

7. JavaScript生平
 現年20歲
 性別不詳
 別名: ECMAScript
 現況介紹:
目前通用主流為ECMAScript 5 近期會出現 ECMAScript 6正式版
但各家瀏覽器已經可以測試ECMA6的語法
 主要用途：
打從娘胎出生至今就是個網頁的「工具人」
凡舉網頁需要變大變小變顏色，加入移除元素，做特效做動畫做阿凡達
 其它用途:
因為這個「工具」太好用了，現在Javascript可以用來寫伺服器寫硬體寫APP寫絕句

8. 學就對了！不學你會後悔
http://ppt.cc/lf47

9. Hello World!
 為了配合千年來寫程式的傳統…
 我們一定也要來個Hello World! Rocker!!!

10. 請記得所有寫的東西
都要被<script> </script>包起來

11. 你以為Javascript就這麼簡單的話
http://ppt.cc/J-i0

12. 保留字
 所有的程式語言，都會保留一些特定的關鍵字。供自已使用
 我們在撰寫的時候都會避免用到保留字 (白話文：用了只是多生了幾隻蟲)
http://tinyurl.com/lsbdmrw

13. 變數
 Javascript 是一種弱型別的語言
(白話文) 就是寫錯了有時很難找出錯在那
 簡單定義變數的方式如下

14. 變數的型態
 JavaScript的基本型態有number、string與boolean，而且在必要的時候，
自動型態轉換為對應的包裹物件
白話文的意思就是：有時候他會好心的幫你把string轉成number 可是你都
不知道!!!

15. 當然除了基本的變數

16. 我們還有許多內建的物件可以用
http://ppt.cc/74VI

17. 內建物件
 Array
 Math
 Date
 String

18. Array(陣列)
0 1 2 3 4 5 6 7
http://tinyurl.com/ntrslug

19. Array(陣列)
 所有陣列都是從0開始
 實際可用的空間是陣列長度-1
一維陣列 (長度為10)
http://ppt.cc/O-Wp
二維陣列 (長度為4x7)
http://ppt.cc/q64x

20. Array(陣列)
一般我們會這樣建立 當然也可以這樣建立

21. Math
http://tinyurl.com/pmdn4vo

22. Math
 可以簡單的做一些數學運算 (算正弦、餘弦、微積分)
 Math.abs 絕對值
 Math.log 就是個log…
 Math.random 取一個隨機亂數

23. Date
http://tinyurl.com/l7xznw9

24. Date
 所有你想的到的日期操作 (EX: 取得女朋友的生日、取得老師的生日)
 Date.getDate 取得今天的日期
 Date.getFullYear 取得現在的年份
 Date.Month 取得現在的月份

25. String
http://tinyurl.com/nn2ct2j

26. String
 毫無疑問的…就是個字串的操作
 像是 ‘ABCDE’.toLowerCase() 會變成 abcde
 ‘I Love’.concat(‘5566’) 會變成 I Love 5566

27. 比較
http://tinyurl.com/2m434k

28. IF判斷式
 用白話解釋就是 ：
如果
(IF) 小伍體重 > 60 { console.log(‘可以參加普渡’); }
else(否則) {console.log(‘無法參加普渡’); }
寫成程式碼就會像下列這樣

29. Switch
 功能幾乎跟IF一樣
switch ( 體重 ){
case 40:
console.log(‘抱的動’);
break;
case 50:
console.log(‘有點吃力’);
break;
case 60:
console.log(‘還是妳抱我吧’);
break;
default:
console.log(‘一般人不會量不到體重的…’);
}

30. 迴圈
http://tinyurl.com/m2bs2jq

31. For迴圈
最簡單的分為
1.叫他做幾次事
for(var i=0;i<10;i++){
console.log(‘我跑了’ + i + ‘圈操場’);
}
2.依據陣列內容來跑
var mylunch = [‘肉圓’,’四神湯’,’廣東炒麵’,’五十嵐四季春微少’];
console.log(‘我中午吃了’);
for(item in my lunch){
console.log(item);
}

32. While迴圈
沒有叫他停，他就不會停
一般會寫這樣
var i =1;
var weight = 100;
while (weight >50 ) {
console.log (‘我跑了’ + i + ‘圈。操場’);
weight = weight -1;
console.log (‘我減了’ + i +’公斤’);
i=i+1;
}
var i =1;
var weight = 100;
while (weight >50 ) {
console.log (‘我跑了’ + i + ‘圈。操場’);
i=i+1;
}
正確的寫法 錯誤的寫法

33. Function (函數) 1/2
 我們會把一些常用的程式碼，整理到某一個特定的區塊，然後命名
下次要用的時候，直接呼叫他的名字就好了!!
Function 呼叫神龍(){
console.log(‘是誰集滿七顆龍珠呼叫我，我可以給你一個願望’);
}
if( 集滿七顆龍珠 ) {
呼叫神龍();
}

34. Function (函數) 2/2
當然，你也可以丟一些東西進去函數裡
function 呼喚神龍 ( 龍珠) {
if( 龍珠===7 ) {
console.log(‘神龍現身’);
}
}

35. Object API & Event
 Javascript 有許多的API 用來控制網頁上的東西
 也有常見的Event用來偵測使用者的動作 (像是Click , Mouseover , keydown )
http://tinyurl.com/o8w2tyx

36. Click & Change Size
 在這裡我們會偵測按鈕是否被按下，然後我們會改變另一顆按鈕的大小

37. Javascript Framework?

38. Make a Change

39. JQUERY say Yo! (1/2)
 JQUERY是一套用Javascript寫的Framework(框架)
 Framework可以讓你要寫數百行程式碼的功能，只要下一個指令
 除了JQERUY還有Facebook推的ReactJS、Google的AngularJS…繁族不及備載
 使用Framework要注意載入的順序跟衝突的問題
ReactJSAngularJS
http://tinyurl.com/kg8z4xc

40. JQUERY say Yo! (2/2)
以下是一段JQUERY如何say Yo!

41. 比較

42. JQUERY 選擇器
 跟CSS Selector非常的像
 $(‘#ID’) 、 #(‘.Class’) 、 #(‘div’)
http://tinyurl.com/7wak6bk

43. JQUERY HTML操作

44. JQUERY 效果

45. JQUERY UI
 基於JQUERY 所製作的另一個Framework ，可以很方便的使用製作好的一
些元件與效果
 所以使用前，一定要先引用JQUERY

46. JQUERY UI - Menu

47. JQUERY UI - Tabs

48. 透過view source先體驗一下

49. Tips
 在正式使用JQUERY前，一定要先學會Javascript
 在寫任何程式前，可以先想好整個流程。先用註解一步一步寫下
再一步一步完成
 因為網頁是由上而下解析讀取，再次記得JQUERY要先載入再載入JQUERY UI

50. Q&A