reources: http://rubular.com/ https://github.com/TheOdinProject/curriculum http://colourco.de/
DOM Event Handler List: http://arantius.com/misc/webref/domref/dom_event_ref33.html (do not use the 'on' prefixes)
Dave's solution to Hangman problem: https://gist.github.com/davidmferris/5910840
##JQuery jquery is like CSS for JS
jquery drills: http://jqexercise.droppages.com/ & notes(from Lauren): https://gist.github.com/laurenhavertz/5915419
//it's important to specify your button as a button in html, otherwise it refreshes the page.
JS best practices: top of page- declare all variables middle- write all your functions bottom - executable s, actions
JavaScript is not procedural, not executing in order. The functions happen when certain events trigger on the DOM. It listens for user inputs then calls the function.
HTML
<h1>Sleepy zzzz</h1>
<button type="button">Clear</button>
<div>Your message: <input type="text" value="rahrah"/></div>
<div>Your Copy: <span>__</span></div>
</body>
CSS
div{
border: 1px solid green;
}
span{
border: 1px solid black;
}
JS
function update(){
var message = $('input').val(); //getter
$('span').text(message);
}
function clear() {
$('input').val('');
$('span').text('');
}
// same event selector action
$('body').on('keyup', 'input', update);
$('body').on('click', 'button', clear);
// event-handler
$('input').val(''); //setter
$('span').text('');
to make the previous JS more 'dry':
var events = $('body');
function update(){
var message = $('input').val(); //getter
$('span').text(message);
}
function clear() {
$('input').val('');
$('span').text('');
}
//object event selector action
events.on('keyup', 'input', update);
events.on('click', 'button', clear);
// event-handler
$('input').val(''); //setter
$('span').text('');
instead of calling $('body') every single time, which goes through the DOM every single time that is called, we can store it into a variable called 'events' and reuse it accordingly. It helps with loading speed on the page, so the browser doesn't have to look through the DOM every single time. **performance.
Javascript usually doesn't use 's... use 's instead. good industry practice to pre-fix your class name with "js-xxx", just to distinguish them with css classes. http://oli.jp/2011/ids/
<body>
<h1>Hello World!</h1>
<div><button type="button">Clear</button></div>
<span>Happiness</span>
<div>Your message: <input type="text" value="blah"/></div>
<div>Your copy: <span class="js-copy">xxxx</span></div>
</body>
div {
border: 1px dashed blue;
}
span {
border: 1px solid black;
}
var $events = $('body')
, $copy = $('span.js-copy')
;
function update() {
var message = $('input').val()
;
$copy.text(message);
}
function clear() {
$('input').val('');
$copy.text('');
}
// same eventname selector action
$events.on('keyup', 'input', update);
$events.on('click', 'button', clear);
Lab: https://github.com/aikalima/memory_template_lab (Memory Game)
HW: To-Do List https://gist.github.com/bridgpal/3e377a9dea50c1cad82a
Anil: "there is this concept of a delegate in Jquery-- when you bind to an object, it binds to the object currently created
so if you create new objects, those new objects need new bindings.
We use the delegate/on in this manner: http://api.jquery.com/delegate/
This way, when new objects are created, they will have the same properties and if you're doing the todo list hw, new objects from the todolist need to have have bindings written in the above way. so on the delete option for the todo list you might need to do something like this:
$(this).parent().remove();
});```
this is the object of the delete button. parent is the encapsulating object like the div or li. remove deletes it