Your assignment for this week is to finish all incomplete homework assignments. On Tuesday, I expect everyone to be done with the Blog (solution already posted below) and Movies. If you've done those assignments and are looking for a challenge, take a crack at building this spreadsheet (video).
Additionally, everyone should come to class with THREE final project ideas. Here are two great places to get inspiration:
If your idea involves a data source, please go find everything you can about that data source. You want to show us actually URLs that you can go to that return data back.
jQuery is a powerful, widely used library that makes a lot of common practices in javascript web development a bit easier. Here are some examples of how you can use jQuery for some common things we've already done:
Vanilla JS | jQuery | |
---|---|---|
xhr | see get function below... | $.get(url, success); |
get element | var span = document.querySelector('span'); |
var span = $('span').first(); |
create element | var a = document.createElement('a'); |
var a = $('<a>'); |
add child | span.appendChild(a); |
span.append(a); |
get text | var linkText = a.textContent; |
var linkText = a.text(); |
set text | a.textContent = linkText; |
a.text(linkText); |
get attribute | a.getAttribute('href'); |
a.attr('href'); |
set attribute | a.setAttribute('href', 'http://wikipedia.org/'); |
a.attr('href', 'http://wikipedia.org/'); |
add event listener | a.addEventListener('click', function() { console.log('click') }; |
a.on('click', function() { console.log('click') }; |
The easiest way to add jQuery to your page is by adding the following script tag to your HTML (put this tag before your own scripts):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Here are some examples on how to use jQuery to do basic DOM manipulation.
$("<li>").text("...").addClass("...").appendTo("ul")
$("button").on("click", doSomething);
var cars = [
{ "name": "Porsche" },
{ "name": "Miata" }
]
cars[0]["name"] // => "Porsche"