Your SlideShare is downloading. ×
0
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

480

Published on

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

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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×