Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3
5 likes1,119 views
Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3 2016/06/14
![about me
• Kuro Hsu
•
• kurotanshi [at] gmail.com
• http://kuro.tw](https://image.slidesharecdn.com/ruby-js01-160615110313/85/Rails-Girls-Weekly-JavaScript-1-3-2-320.jpg)
![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](https://image.slidesharecdn.com/ruby-js01-160615110313/85/Rails-Girls-Weekly-JavaScript-1-3-33-320.jpg)
![: [title]](https://image.slidesharecdn.com/ruby-js01-160615110313/85/Rails-Girls-Weekly-JavaScript-1-3-38-320.jpg)
![$(SELECTOR).on( , callback);
.btn [ ]
—> alert('Hello') [ ]](https://image.slidesharecdn.com/ruby-js01-160615110313/85/Rails-Girls-Weekly-JavaScript-1-3-54-320.jpg)
Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3
- 1. Rails Girls Weekly - week 1 Kuro Hsu 2016/06/14
- 2. about me • Kuro Hsu • • kurotanshi [at] gmail.com • http://kuro.tw
- 5. / PM
- 6. / PM
- 7. / PM
- 11. - Professional Frontend Engineering by Nate Koechley http://www.slideshare.net/natekoechley/professional-frontend-engineering We tell browsers what to do. 瀏覽器
- 12. Source: https://speakerdeck.com/josephj/f2e-the-keystone, — F2E, the Keystone by Joseph Chiang.
- 13. Source: http://www.slideshare.net/adamp3wang/mockupwebconftw-2013 mockup @ WebConf.tw 2013 by Adam Wang
- 15. • PM wireframe • • API • API
- 18. • Brendan Eich • JavaScript Java • Javascript
- 22. Hello World! - JS ver.
- 23. Hello World! - jQuery ver.
- 25. • JS John Resig 2006 3.0 • CSS DOM JavaScript • jQuery JavaScript
- 29. Sublime Text
- 30. Chrome DevTools
- 32. 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
- 33. 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
- 35. : .myList
- 36. : div:eq(1)
- 38. : [title]
- 41. .text( ) dom // set $('#heading').text('<h1>Hi 5xRuby</h1>'); // get $('#heading').text();
- 42. .html( ) dom html // set $('#heading').html('<h1>Hi 5xRuby</h1>'); // get $('#heading').html();
- 43. .val( ) // set $('#heading').val('text'); // get $('#heading').val();
- 44. .css( ) DOM
- 45. .attr( ) DOM // get $('.link').attr('title'); // set $('.link').attr('href', 'http:// railsgirls.com/taipei');
- 51. 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
- 52. event • JavaScript • ( ) • ( ) -> ( )
- 54. $(SELECTOR).on( , callback); .btn [ ] —> alert('Hello') [ ]
- 55. this this DOM $() jQuery jQuery http://goo.gl/tebAOR
- 57. week 1 - • • HTML, CSS JavaScript • jQuery •
- 58. Thanks