html js css_aha
TRANSCRIPT
![Page 1: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/1.jpg)
HTML Javascript CSS林鉦育
![Page 2: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/2.jpg)
本週目標
• 討論上週習題
• 完成第一個自介網頁 - 學會撰寫”靜態”網頁
• 另外一個世界 - Javascript 的使用
![Page 3: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/3.jpg)
綠色變小的芭樂很簡單吧 !
![Page 4: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/4.jpg)
今日的目標很簡單吧 !
![Page 5: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/5.jpg)
需要的程式碼
![Page 6: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/6.jpg)
HTML - head
• title 標題
• meta 提供編碼 , 網頁關鍵字 , 網頁描述
• script 提供動態網頁功能與事件處理
• css 提供網頁呈現格式設定
![Page 7: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/7.jpg)
HTML - body
• a 連結
• div span 顯示區塊
• table 表格 td 欄位 tr 列 th 網頁標頭
• br 換行 hr 水平線
• form 表單 input 輸入資料
![Page 8: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/8.jpg)
CSS
• #id
• .class
• tag
![Page 9: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/9.jpg)
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
![Page 10: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/10.jpg)
JS- Scope
• 所有變數都綁在 window 底下
• 變數從裡到外一直找到同名的
• { } 就是定變數區域 [ES5 以前限函數內 ]
• var 是在目前區域 [ 函數 ] 內設立變數
• ES6 增加 let 可以在 control statement
![Page 11: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/11.jpg)
JS - JSON Object
• 就是 Javascript Object Notation
• 就是剛剛看到的 dictionary
• 沒有更多特別的了 ... 以上
![Page 12: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/12.jpg)
JS - Basic
• document.getElementById([ID])
• document.getElementsByTagName([Tag name])
• setTimeout([function],[time])
• document.write([HTML code])
![Page 13: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/13.jpg)
jQuery
• <script src=“http://code.jquery.com/jquery-2.1.3.min.js” />
• 萬能的 $
• 起手 $(function(){ /* 做你要做的 */ });
![Page 14: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/14.jpg)
Events
• HTML onLoad onClick …. on 系列
• Javascript
• jQuery
![Page 15: Html js css_aha](https://reader036.vdocuments.site/reader036/viewer/2022062515/55c4a0abbb61eb4d458b466d/html5/thumbnails/15.jpg)
最後的兩件事情
• 做出個人自介網頁
• [Optional][Hard] 請設計網頁,在按下按鈕之後,每隔一秒在螢幕上增加一個數字,這個數字等於前兩個數字和,而第一與第二個數字是 1 ,同時文字顏色依序為 紅綠藍