玉山內部分享使用

1. HTML Javascript CSS
林鉦育

2. 本週目標
• 討論上週習題
• 完成第一個自介網頁 - 學會撰寫”靜態”網頁
• 另外一個世界 - Javascript 的使用

3. 綠色變小的芭樂
很簡單吧!

4. 今日的目標
很簡單吧!

5. 需要的程式碼

6. HTML - head
• title 標題
• meta 提供編碼, 網頁關鍵字, 網頁描述
• script 提供動態網頁功能與事件處理
• css 提供網頁呈現格式設定

7. HTML - body
• a 連結
• div span 顯示區塊
• table 表格 td 欄位 tr 列 th 網頁標頭
• br 換行 hr 水平線
• form 表單 input 輸入資料

8. CSS
• #id
• .class
• tag

9. JS - Types of Variable
• 整數 1 2 3 浮點數 1.1 1.2
• 文字 “aha“
• 陣列 [‘a’,1,2]
• dictionary {a:’安安’,b:’你好嘛’}
• function function(x,y){ return x+y; }
• object

10. JS- Scope
• 所有變數都綁在window 底下
• 變數從裡到外一直找到同名的
• { } 就是定變數區域[ES5以前限函數內]
• var 是在目前區域[函數]內設立變數
• ES6 增加 let 可以在control statement

11. JS - JSON Object
• 就是Javascript Object Notation
• 就是剛剛看到的dictionary
• 沒有更多特別的了...以上

12. JS - Basic
• document.getElementById([ID])
• document.getElementsByTagName([Tag name])
• setTimeout([function],[time])
• document.write([HTML code])

13. jQuery
• <script src=“http://code.jquery.com/jquery-2.1.3.min.js” />
• 萬能的 $
• 起手$(function(){ /* 做你要做的 */ });

14. Events
• HTML onLoad onClick …. on 系列
• Javascript
• jQuery

15. 最後的兩件事情
• 做出個人自介網頁
• [Optional][Hard]請設計網頁，在按下按鈕之後，每
隔一秒在螢幕上增加一個數字，這個數字等於前兩
個數字和，而第一與第二個數字是 1，同時文字顏
色依序為 紅綠藍