Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3
2016/06/14

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3

  1. 1. Rails Girls Weekly - week 1 Kuro Hsu 2016/06/14
  2. 2. about me • Kuro Hsu • • kurotanshi [at] gmail.com • http://kuro.tw
  3. 3. / PM
  4. 4. / PM
  5. 5. / PM
  6. 6. - Professional Frontend Engineering by Nate Koechley http://www.slideshare.net/natekoechley/professional-frontend-engineering We tell browsers what to do. 瀏覽器
  7. 7. Source: https://speakerdeck.com/josephj/f2e-the-keystone, 
 — F2E, the Keystone by Joseph Chiang.
  8. 8. Source: http://www.slideshare.net/adamp3wang/mockupwebconftw-2013
 mockup @ WebConf.tw 2013 by Adam Wang
  9. 9. • PM wireframe • • API • API
  10. 10. HTML HTML HTML + CSS + CSS + JavaScript
  11. 11. • Brendan Eich • JavaScript Java 
 • Javascript
  12. 12. Hello World! - JS ver.
  13. 13. Hello World! - jQuery ver.
  14. 14. • JS John Resig 2006 3.0 • CSS DOM 
 JavaScript • jQuery JavaScript
  15. 15. http://trends.builtwith.com/javascript/country/Taiwan
  16. 16. https://jquery.com/download/ CDN
  17. 17. Sublime Text
  18. 18. Chrome DevTools
  19. 19. https://jsbin.com/ JS BIN
  20. 20. jQuery $('#header') // id="header" $('.header') // class="header" $('div') // <div> $('div, p') // <div> <p> $('body > .tag') // body .tag $('body div') // body div ( ) $('div.body') // class="body" div
  21. 21. jQuery $('a[href="#"]') // href # a $("[href]") // href $('.header > *') // .header $("ul li:first") // ul li $("ul li:last") // ul li $("ul li:eq(n)") // ul n li $(…).length // .length
  22. 22. http://goo.gl/2QL8JR
  23. 23. : .myList
  24. 24. : div:eq(1)
  25. 25. :
 tr:eq(1), tr:eq(4)
  26. 26. : [title]
  27. 27. jQuery jQuery jQuery
  28. 28. jQuery jQuery jQuery
  29. 29. .text( ) dom // set $('#heading').text('<h1>Hi 5xRuby</h1>'); // get $('#heading').text();
  30. 30. .html( ) dom html // set $('#heading').html('<h1>Hi 5xRuby</h1>'); // get $('#heading').html();
  31. 31. .val( ) // set $('#heading').val('text'); // get $('#heading').val();
  32. 32. .css( ) DOM
  33. 33. .attr( ) DOM // get $('.link').attr('title'); // set $('.link').attr('href', 'http:// railsgirls.com/taipei');
  34. 34. html document head body p p p p h1 div div
  35. 35. .parent() / .parents() // $('p').parent('.day'); // $('p').parents('body'); parent() parents()
  36. 36. .children() selector $('.day').children('.content'); $('.week').children('.content');
  37. 37. .find() selector $('.week').find('p'); $('.week').find('.content');
  38. 38. n 0 http://goo.gl/KobSRR .eq( n )
  39. 39. http://goo.gl/UvX97c 1. Hello, world! Hello Rails Girls! 2. Heading 
 16px, (#00f) 3. Heading 1 (src ) 
 http://placekitten.com/g/350/150 HTML : http://goo.gl/k6HAVi
  40. 40. event • JavaScript • ( ) • ( ) -> ( )
  41. 41. : http://www.w3schools.com/jsref/dom_obj_event.asp
  42. 42. $(SELECTOR).on( , callback); .btn [ ]
 —> alert('Hello') [ ]
  43. 43. this this DOM $() jQuery jQuery http://goo.gl/tebAOR
  44. 44. - http://goo.gl/02qDlI : http://goo.gl/kxN4Qu
  45. 45. week 1 - • • HTML, CSS JavaScript • jQuery •
  46. 46. Thanks

×