Html js css_aha
Download as PPTX, PDF1 like375 views
本文件讨论了创建静态网页的过程，包括HTML、CSS和JavaScript的基本知识。它涵盖了网页结构、基本的JavaScript变量类型和操作，以及如何使用jQuery和事件处理。最后，提出了创建一个自我介绍网页的目标，并附加了一项可选的编程挑战。
![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](https://image.slidesharecdn.com/htmljscssaha-150322122851-conversion-gate01/85/Html-js-css_aha-9-320.jpg)
![JS- Scope
• 所有變數都綁在window 底下
• 變數從裡到外一直找到同名的
• { } 就是定變數區域[ES5以前限函數內]
• var 是在目前區域[函數]內設立變數
• ES6 增加 let 可以在control statement](https://image.slidesharecdn.com/htmljscssaha-150322122851-conversion-gate01/85/Html-js-css_aha-10-320.jpg)
![JS - Basic
• document.getElementById([ID])
• document.getElementsByTagName([Tag name])
• setTimeout([function],[time])
• document.write([HTML code])](https://image.slidesharecdn.com/htmljscssaha-150322122851-conversion-gate01/85/Html-js-css_aha-12-320.jpg)
![最後的兩件事情
• 做出個人自介網頁
• [Optional][Hard]請設計網頁，在按下按鈕之後，每
隔一秒在螢幕上增加一個數字，這個數字等於前兩
個數字和，而第一與第二個數字是 1，同時文字顏
色依序為 紅綠藍](https://image.slidesharecdn.com/htmljscssaha-150322122851-conversion-gate01/85/Html-js-css_aha-15-320.jpg)
Html js css_aha
- 2. 本週目標 • 討論上週習題 • 完成第一個自介網頁 - 學會撰寫”靜態”網頁 • 另外一個世界 - Javascript 的使用
- 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