rails girls weekly - 初探前端網頁技術 javascript 1/3

Rails Girls Weekly - week 1

Kuro Hsu 2016/06/14

about me

• Kuro Hsu

•

• kurotanshi [at] gmail.com

• http://kuro.tw

/ 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

https://jsbin.com/

JS BIN

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');

n 0

http://goo.gl/KobSRR

.eq( n )

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') [ ]

this

this DOM $() jQuery jQuery

http://goo.gl/tebAOR

-

http://goo.gl/02qDlI: http://goo.gl/kxN4Qu

week 1 -

•

• HTML, CSS JavaScript

• jQuery

•

Thanks