Back To The Front - Javascript Test Driven Development is between us (workshop)Marco Cedaro
Javascript & browsers have been for years a complex and unsafe environment for a web developer, now we have the right tools to gain control on what we are distributing in our web applications. During the workshop you will learn first-hand basic Javascript Test Driven Development practices including testing, refactoring and related agile practices such as continuous integration and pair programming.
presented at italian Back To The Front conference /w @sirLisko
使用 Raspberry pi + fluentd + gcp cloud logging, big query 做iot 資料搜集與分析Simon Su
This is a short training for introduce Pi to use fluentd to collect data and use Google Cloud Logging and BigQuery as backend and then use Apps Script and Google Sheet as presentation layer.
Back To The Front - Javascript Test Driven Development is between us (workshop)Marco Cedaro
Javascript & browsers have been for years a complex and unsafe environment for a web developer, now we have the right tools to gain control on what we are distributing in our web applications. During the workshop you will learn first-hand basic Javascript Test Driven Development practices including testing, refactoring and related agile practices such as continuous integration and pair programming.
presented at italian Back To The Front conference /w @sirLisko
使用 Raspberry pi + fluentd + gcp cloud logging, big query 做iot 資料搜集與分析Simon Su
This is a short training for introduce Pi to use fluentd to collect data and use Google Cloud Logging and BigQuery as backend and then use Apps Script and Google Sheet as presentation layer.
8. With jQuery, it’s as
simple as this...
// Get the html data.
$.get('ajax/test.html',function(data){
$('#results').append(data);
});
13年8月23⽇日星期五
9. With JavaScript, you would
style elements like this...
var elems = document.getElementsByClassName(‘ethan’),
len = elems.length,
i = 0;
for( i = 0; i < len; i++ ){
elems[i].style.backgroundColor = ‘green’;
}; before
after
13年8月23⽇日星期五
10. With jQuery, it’s just a
simple one-liner...
$(‘.ethan’).css(‘backgroundColor’,‘green’);
before
after
13年8月23⽇日星期五
12. “What does that mean?”
jQuery allows you to easily
select elements on a page
and manipulate or add some
new behaviour to them.
13年8月23⽇日星期五
13. What the jQuery can do?
• Simplifies traversing the DOM
• Powerful selection engine
• Eases element styling through JavaScript
• Powerful methods for element animation
• Cross-browser Ajax interactions
• DOM data-storage
• and more!
13年8月23⽇日星期五
16. jQuery
• It’s open-source
• Great for beginners wishing to ‘break’ into
front-end web development
• Developers from any other language
background can start using it easily
13年8月23⽇日星期五
19. How to use it?
• Create a new HTML file
• Include jQuery using <script> tag
• Load it from the Google CDN.This can be faster than
self-hosting
<script src=‘javascript/jquery-1.10.1.min.js’></script>
<script src=‘http://code.jquery.com/jquery-1.10.1.min.js’></script>
13年8月23⽇日星期五
20. Using jQuery
In most cases, your code should run when the
document has finished loading
<script type=‘text/javascript’>
$(document).ready(function(){
// your code should go here
});
// alternatively
$(function(){
// your code should go here
});
</script>
13年8月23⽇日星期五
21. What is $?
• $ is an alias to jQuery
• Code can either use $ or just jQuery
$(document).ready(function(){
// your code should go here
});
// same as...
jQuery(document).ready(function(){
// your code should go here
});
13年8月23⽇日星期五
29. What if I want to select
an element that’s a child
of another element?...
13年8月23⽇日星期五
30. <div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’>Team</li>
<li class=‘ethan’>mitac</li>
<li class=‘ethan’>HI</li>
</ul>
<input type=‘text’
name=‘ethanName’ value=’hi’ />
Filter Selectors
//first element in a result set
$(‘ul li:first’)
//last element in a result set
$(‘ul li:last’)
//all odd elements in a result set
$(‘ul li:odd’)
//all even elements
$(‘ul li:even’)
13年8月23⽇日星期五
31. <div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’>Team</li>
<li class=‘ethan’>mitac</li>
<li class=‘ethan’>HI</li>
</ul>
<input type=‘text’
name=‘ethanName’ value=’hi’ />
Filter Selectors
//first element in a result set
$(‘ul li:first’)
//last element in a result set
$(‘ul li:last’)
//all odd elements in a result set
$(‘ul li:odd’)
//all even elements
$(‘ul li:even’)
13年8月23⽇日星期五
32. <div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’>Team</li>
<li class=‘ethan’>mitac</li>
<li class=‘ethan’>HI</li>
</ul>
<input type=‘text’
name=‘ethanName’ value=’hi’ />
Filter Selectors
//first element in a result set
$(‘ul li:first’)
//last element in a result set
$(‘ul li:last’)
//all odd elements in a result set
$(‘ul li:odd’)
//all even elements
$(‘ul li:even’)
13年8月23⽇日星期五
33. <div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’>Team</li>
<li class=‘ethan’>mitac</li>
<li class=‘ethan’>HI</li>
</ul>
<input type=‘text’
name=‘ethanName’ value=’hi’ />
Filter Selectors
//first element in a result set
$(‘ul li:first’)
//last element in a result set
$(‘ul li:last’)
//all odd elements in a result set
$(‘ul li:odd’)
//all even elements
$(‘ul li:even’)
13年8月23⽇日星期五
34. Selectors
• Element selector
• ID and Class selectors
• Attribute selectors
• Pseudo selectors
• $(‘p’)
• $(‘div #things’)
• $(‘input[type=text]’)
• $(‘input:focus’)
An extremely powerful way to specify which elements you want.
13年8月23⽇日星期五
35. Effects
• Show and Hide
• Fade
• Animate
• more...!
• $(‘#ethan’).show()
• $(‘#ethan’).fadeOut()
• $(‘#ethan’).animate(...)
Making things look pretty.
13年8月23⽇日星期五
36. Event
• Events in general
• A problem
• bind() and live()
• Introducing on()
$(‘button’).click(function(){alert(‘Clicked!’)})
$(‘.cat’).click(function(){alert(‘Clicked!’)})
$(...).bind(...) $(...).live(...)
$(‘button’).on(‘click’, function(){alert(‘Clicked!’)})
Responding to user actions
13年8月23⽇日星期五