Recommended
More Related Content
What's hot
Viewers also liked
Similar to 台科大暑期資工營 - 前端入門
Similar to 台科大暑期資工營 - 前端入門 (20)
Recently uploaded
Recently uploaded (9)
台科大暑期資工營 - 前端入門
- 2. Contents • 前端⼊入⾨門 HTML、CSS、JavaScript • HTML5、CSS3 簡介 • 響應式網⾴頁設計 • 體驗 jQuery、AngularJS 課程時間: 2⼩小時
- 4. 網⾴頁組成 • HTML - structure(layout) and content(text) • CSS - stylesheets to set visual appearance • JavaScript - programming to alter the page
- 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
- 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
- 17. JavaScript 取得物件
- 19. JavaScript 將 JavaScript 寫在⼀一個獨⽴立的檔案命名為 main.js 在HTML的</body>前加⼊入 <script src=“./main.js”>
- 20. DEMO
- 21. Practice 在個⼈人⾴頁⾯面上使⽤用 JavaScript 與 HTML物件 設計⼀一個簡單的四則運算計算機
- 24. Canvas <canvas>只是⼀一個畫布標籤 畫布的內容需透過 JavaScript 進⾏行繪製 http://www.w3schools.com/html/ html5_canvas.asp
- 26. DEMO
- 27. CSS 響應式網⾴頁設計(Responsive Web Design) 依據不同裝置的解析度，利⽤用CSS呈現適應於該裝置的網⾴頁 Phone < 768px Tablets >= 768px Medium Device >= 992px Large Device >= 1200px
- 29. DEMO
- 32. jQuery JavaScript library 更容易地使⽤用 JavaScript 同時兼顧跨瀏覽器
- 34. DEMO
- 35. 前端MVC Framework
- 36. Before starting, forget jQuery.
- 37. 引⼊入AngularJS 加入 ng-app 決定AngularJS的Scope 雙括號內的程式將會被運算
- 38. 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.
- 39. Data Binding use ng-model model live in $scope
- 41. jQuery’s way
- 43. $scope js/app.js
- 44. $scope js/app.js
- 45. Filters Use pipe combine filters. There are many built-in filters. You can also define custom filter.
- 46. DEMO
- 47. Q&A
- 48. Thanks for your attention