台科大暑期資工營 - 前端入門

941 views

Published on

台科大暑期資工營 - 前端入門

Published in: Education
  • Be the first to comment

台科大暑期資工營 - 前端入門

  1. 1. 前端開發⼊入⾨門 NTUST CSIE CAMP
  2. 2. Contents • 前端⼊入⾨門 HTML、CSS、JavaScript • HTML5、CSS3 簡介 • 響應式網⾴頁設計 • 體驗 jQuery、AngularJS 課程時間: 2⼩小時
  3. 3. 前端⼊入⾨門 了解HTML、CSS、JavaScript
  4. 4. 網⾴頁組成 • HTML - structure(layout) and content(text) • CSS - stylesheets to set visual appearance • JavaScript - programming to alter the page
  5. 5. HTML ⼀一堆的<標籤>描述⼀一個網⾴頁所有的零件。
  6. 6. HTML 常⽤用標籤 <html> <head> <body> <meta/> <title> <br/> <p> <a> <table> <h1>~<h6> <ul> <ol> <li> <div> <span> <form> <input> <select> <button> <textarea> <img/> <iframe> <hr/> <script> <style>
  7. 7. DEMO
  8. 8. Practice 使⽤用HTML設計⼀一個單⾴頁個⼈人簡介⾴頁⾯面 ⾴頁⾯面內容 -> 如何呈現(表格?段落?圖⽚片?標題?) 先不⽤用管樣式,完成後請命名為index.html Graph API: graph.facebook.com/username/picture
  9. 9. CSS 選擇器 { 外觀屬性: 屬性值; }
  10. 10. CSS 選擇器 ⽤用來選擇所要描述外觀的對象。 標籤選擇 { } #ID選擇 { } .類別選擇 { }
  11. 11. CSS 其它常⽤用Selector Descendant Selector { } Child > Selector { } Selector[attr] { }
  12. 12. CSS 常⽤用屬性 display background line-height visible float clear width height font-size font-family color text-align padding margin border letter-spacing position top, …,left overflow z-index
  13. 13. CSS 將CSS寫在⼀一個獨⽴立的檔案命名為 stylesheet.css 檔 在HTML的head內加⼊入 <link rel="stylesheet" href="./stylesheet.css">
  14. 14. DEMO
  15. 15. Practice 使⽤用CSS調整個⼈人簡介⾴頁⾯面的樣式
  16. 16. JavaScript 程式語⾔言 控制網⾴頁的⾏行為以及動態調整網⾴頁
  17. 17. JavaScript 取得物件
  18. 18. JavaScript 變數、函數、控制流程、迴圈 … 學會使⽤用開發者⼯工具
  19. 19. JavaScript 將 JavaScript 寫在⼀一個獨⽴立的檔案命名為 main.js 在HTML的</body>前加⼊入 <script src=“./main.js”>
  20. 20. DEMO
  21. 21. Practice 在個⼈人⾴頁⾯面上使⽤用 JavaScript 與 HTML物件 設計⼀一個簡單的四則運算計算機
  22. 22. HTML、CSS、JavaScript 都可以寫成⼀一本書 有興趣的同學可以⾃自⼰己鑽研
  23. 23. HTML5 HTML4的擴充 為常⾒見的需求加⼊入新功能、標籤、屬性
  24. 24. Canvas <canvas>只是⼀一個畫布標籤 畫布的內容需透過 JavaScript 進⾏行繪製 http://www.w3schools.com/html/ html5_canvas.asp
  25. 25. More… http://www.w3schools.com/html/ html5_new_elements.asp
  26. 26. DEMO
  27. 27. CSS 響應式網⾴頁設計(Responsive Web Design) 依據不同裝置的解析度,利⽤用CSS呈現適應於該裝置的網⾴頁 Phone < 768px Tablets >= 768px Medium Device >= 992px Large Device >= 1200px
  28. 28. CSS3 http://www.w3schools.com/css/css3_intro.asp
  29. 29. DEMO
  30. 30. Bootstrap //maxcdn.bootstrapcdn.com/bootstrap/ 3.2.0/css/bootstrap.min.css
  31. 31. jQuery JavaScript library 更容易地使⽤用 JavaScript 同時兼顧跨瀏覽器
  32. 32. 引⼊入jQuery http://code.jquery.com/jquery-1.11.1.min.js
  33. 33. DEMO
  34. 34. 前端MVC Framework
  35. 35. Before starting, forget jQuery.
  36. 36. 引⼊入AngularJS 加入 ng-app 決定AngularJS的Scope 雙括號內的程式將會被運算
  37. 37. Directives directives are marked on a DOM element. ng-model ng-bind ng-show ng-hide ng-click ng-click attach a specified behavior to that DOM element. You can also define custom directive.
  38. 38. Data Binding use ng-model model live in $scope
  39. 39. Two-way Data Binding
  40. 40. jQuery’s way
  41. 41. Controller js/app.js
  42. 42. $scope js/app.js
  43. 43. $scope js/app.js
  44. 44. Filters Use pipe combine filters. There are many built-in filters. You can also define custom filter.
  45. 45. DEMO
  46. 46. Q&A
  47. 47. Thanks for your attention

×