rails girls weekly - 初探前端網頁技術 javascript 1/3
TRANSCRIPT
Rails Girls Weekly - week 1
Kuro Hsu 2016/06/14
/ PM
/ PM
/ PM
- Professional Frontend Engineering by Nate Koechley http://www.slideshare.net/natekoechley/professional-frontend-engineering
We tell browsers what to do.瀏覽器
Source: https://speakerdeck.com/josephj/f2e-the-keystone, — F2E, the Keystone by Joseph Chiang.
Source: http://www.slideshare.net/adamp3wang/mockupwebconftw-2013 mockup @ WebConf.tw 2013 by Adam Wang
• PM wireframe
•
• API
• API
HTML HTML HTML+
CSS+
CSS+
JavaScript
• Brendan Eich
• JavaScript Java
•
Javascript
Hello World! - JS ver.
Hello World! - jQuery ver.
• JS John Resig 2006 3.0
• CSS DOM JavaScript
• jQuery JavaScript
http://trends.builtwith.com/javascript/country/Taiwan
https://jquery.com/download/
CDN
Sublime Text
Chrome DevTools
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
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
http://goo.gl/2QL8JR
: .myList
: div:eq(1)
:tr:eq(1), tr:eq(4)
: [title]
jQuery jQuery
jQuery
jQuery jQuery
jQuery
.text( )
dom
// set $('#heading').text('<h1>Hi 5xRuby</h1>');
// get $('#heading').text();
.html( )
dom html
// set $('#heading').html('<h1>Hi 5xRuby</h1>');
// get $('#heading').html();
.val( )
// set $('#heading').val('text');
// get $('#heading').val();
.css( )
DOM
.attr( )
DOM
// get $('.link').attr('title');
// set $('.link').attr('href', 'http://railsgirls.com/taipei');
html
document
head
body
p
p
p
p
h1
div
div
.parent() / .parents()
// $('p').parent('.day');
// $('p').parents('body');
parent() parents()
.children()
selector
$('.day').children('.content');
$('.week').children('.content');
.find()
selector
$('.week').find('p');
$('.week').find('.content');
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
event
• JavaScript
•
( )
• ( ) -> ( )
: http://www.w3schools.com/jsref/dom_obj_event.asp
$(SELECTOR).on( , callback);
.btn [ ] —> alert('Hello') [ ]
week 1 -
•
• HTML, CSS JavaScript
• jQuery
•
Thanks