Instructor: Dallas Tester

1. BEGINNING JAVASCRIPT
CLASS 4Javascript ~ Girl Develop It ~

3. WELCOME!
Girl Develop It is here to provide affordable and
accessible programs to learn software through
mentorship and hands-on instruction.
Some "rules"
We are here for you!
Every question is important
Help each other
Have fun

4. HTML FORMS
HTML Forms allow users to enter information
Enter a name
I like popcorn
Favorite Dinosaur
Tyrannosaurus Rex
Go!

5. HTML FORMS
HTML code for a form
<form action="serverSideHandler.aspx" id="about-me">
<input type = "text" id = "name" placeholder = "Enter a name"/>
<input type = "checkbox" id="popcorn" />I like popcorn
<label>Favorite Dinosaur</label>
<select id = "dinosaur">
<option value = "t-rex">Tyrannosaurus Rex</option>
<option value = "tri">Triceratops</option>
<option value = "stego">Stegosaurus</option>
<option value = "other">Other</option>
</select>
<input type = "submit" value = "Go!" style = "padding: 7px; font-size:1em"/>
</form>

6. VALUES FROM FORMS
You can use JavaScript to get values from a form
Or set values of a form
var name = document.getElementById('name').value;
document.write(name);
var popcorn = document.getElementById('popcorn').checked;
document.write(popcorn);
name.value = 'Another name!';
popcorn.checked = true;

7. FORM SUBMIT EVENT
Forms have a submit event.
The submit event fires when a user clicks on a submit
button or can be fired using the submit() method in
JavaScript.
Often, the submit event handler is used to validate
input before sending it to the server.
event.preventDefault() to prevent the form trying to
submit to a server.
function submitHandler(event) {
//Validate input values.
event.preventDefault();
}
var aboutMeForm = document.getElementById('about-me');
aboutMeForm.addEventListener('submit', submitHandler);

8. LET'S DEVELOP IT
Choose one of your functions made so far.
Create a form to send dynamic data to the function
when you click the button.
For example, take in the age, final age, and daily cost
for the supply calculator.
Don't forget to add parameters to your existing
functions!
<button id="calculate-supply" type="submit">Calculate Supply</button>
<form id="supply-calculator">
<label for="age">Age</label><input type="text" id="age" />
<label for="maxAge">Max Age</label><input type="text" id="maxAge" />
<label for="cost">Cost</label><input type="text" id="cost" />
</form>
var ageInput = document.getElementById('age');
var age = ageInput.value;

9. LET'S ANSWER IT (SUPPLY CALCULATOR)
<form id="supply-calculator">
<label for="age">Age:</label><input type="text" id="age" />
<label for="maxAge">Max Age:</label><input type="text" id="maxAge" />
<label for="cost">Cost:</label><input type="text" id="cost" />
</form>
document.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById('supply-calculator');
form.addEventListener('submit', getFormValues); });
function getFormValues(event) {
var ageInput = document.getElementById('age');
var age = ageInput.value;
var maxAgeInput = document.getElementById('maxAge');
var maxAge = maxAgeInput.value;
var costInput = document.getElementById('cost');
var cost = costInput.value;
calculate(age, maxAge, dailyCost);
event.preventDefault();
}
function calculate(age, maxAge, dailyCost) { ... }

10. WARNING
The following few slides have lots of acronyms and
jargon.
On behalf of developers everywhere, we apologize

11. WHAT IS AN API?
Application Programming Interface
Data structure and rules for accessing an application
How we can access information from sites that are
not our own (GitHub, Twitter, Meetup, Facebook,
Foursquare)
Primary role: a channel for applications to work
together

12. WHERE DO I LEARN ABOUT AN API?
All (good) APIs have documentation
GitHub ( )
Facebook ( )
Twitter ( )
Meetup ( )
FourSquare ( )
http://developer.github.com/
https://developers.facebook.com/
https://dev.twitter.com/
http://www.meetup.com/meetup_api/
https://developer.foursquare.com/

13. ACCESSING APIS
Most APIs require an API Key
A what?
API Key or Developer Key is a way for an API to
identify you
More secure for an API (Know who is using their API)
More secure for you -- people can't pretend to be
your website
Not all APIs require a key!
The APIs we'll be using today (GitHub) don't require
a key.

14. WHAT IS AJAX?
Asynchronous JavaScript and XML
Method to communicate to a server or API
Asynchronous means:
I ask Twitter for all the tweets ever!
That will take a while
My whole website could be locked up while I wait!
Or, my call can be 'asynchronous' and my website
will just listen for Twitter's response with one ear,
but go about normal business until the response
arrives.
Requests and results can be in JavaScript or XML

15. WHAT IS REST?
Representational State Transfer
REST is a way to ask an API for information by using
a URL.
REST Urls are created with the following syntax:
http://ApiSite.com/method?
parameter=value&parameter=value
Method -- what you want from the API. Defined by
API documentations
Parameter -- a type of filter or restraint. Defined by
API documentations
Value -- value for parameter. Defined by you!

16. WHAT IS JSON?
JavaScript Object Notation
Format for data returned from APIs
You've seen it before!
JavaScript objects
{
"status": "active",
"title": "Instructor",
"bio": "Hi, everybody! I'm an instructor for GDI. My teaching background spans from high school to the present. M
y professional background spans back-end, front-end, testing, and technical writing.",
"name": "Dallas Tester",
"group": {
"id": 7208692,
"name": "Girl Develop It Seattle",
"urlname": "Girl-Develop-It-Seattle",
"who": "Nerdettes"
}
}

17. MAKING AJAX CALLS WITH JAVASCRIPT
Use the XMLHttpRequest object built in to JavaScript
We're using the onreadystatechange event handler to
wait until the request is finished (readyState === 4) and
then log the JSON result to the console.
var serverRequest = new XMLHttpRequest();
serverRequest.onreadystatechange = function() {
if(serverRequest.readyState === 4) {
console.log(serverRequest.responseText);
}
}
serverRequest.open('GET', 'URLToEndPoint', true);
serverRequest.send();

18. LET'S DEVELOP IT
Let's make a call to GitHub's API.
We will get all of the events for the Girl Develop It
organization.
Your API is here:
https://api.github.com/orgs/girldevelopit/events
var serverRequest = new XMLHttpRequest();
serverRequest.onreadystatechange = function() {
if(serverRequest.readyState === 4) {
console.log(serverRequest.responseText);
}
}
serverRequest.open('GET', 'URL', true);
serverRequest.send();

19. LET'S ANSWER IT!
var serverRequest = new XMLHttpRequest();
serverRequest.onreadystatechange = function() {
if(serverRequest.readyState === 4) {
console.log(serverRequest.responseText);
}
}
serverRequest.open('GET', 'https://api.github.com/orgs/girldevelopit/events', true);
serverRequest.send();
[
{
"id": "1837010532",
"type": "WatchEvent",
"actor": {
"id": 3051672,
"login": "celiala",
"url": "https://api.github.com/users/celiala",
"avatar_url": "https://2.gravatar.com/avatar/d22540938c49eba7da81d45fa1f0f245?d=https%3A%2…kamai.net%2Fasse
ts.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png"
}
...
}
]

20. WHAT IS A LIBRARY?
Software libraries contain functions (not books).
When you include a library, you can use all the
functions in that library
That means: you get to take advantage of other
people's experience!
And... Save time!

21. WHAT IS JQUERY?
jQuery is a library of JavaScript functions.
It contains many functions to help simplify your
JavaScript programming, including:
HTML element selection & manipulation
CSS manipulation
HTML events
Calling APIs

22. WHY USE JQUERY?
The most popular JavaScript library
jQuery empowers you to "write less, do more."
Great
Used by nearly 20 million websites
documentation and tutorials

23. INCLUDING JQUERY
Two ways to include jQuery on your page:
Download the library, store it locally:
Include the the live library:
Note: live code can change so be aware when deciding
on how you include the code.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

24. WHAT CAN JQUERY DO FOR ME?
Remember document.getElementById() and
documet.getElementsByTagName()?
jQuery makes it this easy:
Element name (div, p)
ID name (#mainpicture, #results)
Class name (.result, .picture)
var divs = $('div'); // All divs on page
var img = $('#mainpicture'); //img with id mainpicture
var images = $('.picture'); //All images with class picture

25. WHAT CAN JQUERY DO FOR ME?
Get and set attributes easily:
Get and set CSS properties:
Create elements:
Get and set the value (replaces innerHTML)
var img = $('#mainpicture');
var imageUrl = img.attr('src');
img.attr('src', 'http://www.website.com/newImage.png');
var imageWidth = img.css('width');
img.css('width', '200px');
var newDiv = $('<div></div>');
var div = $('#results');
var divHTML = div.html();
div.html('<b>This is new HTML!</b>');

26. WHAT CAN JQUERY DO FOR ME?
Append and prepend text (no more createTextNode):
Simplify adding events...
...and the DOMContentLoaded event:
Data access is easy, too:
var div = $('#results');
div.append('This is new text at the end!');
div.prepend('This is new text at the beginning!');
var button = $('#calculate-button');
button.click(function() { ... });
$(document).ready(function() { ... });
$.ajax({
url: 'https://api.github.com...',
success: function(data) { //Event handler here }
});
Along with a LOT more!

27. LET'S DEVELOP IT
Include the jQuery library on your page. jquery.com
has a nice shortcut called Quick Access at the bottom
of every page.
Update your previous code to use $.ajax for the
GitHub API call.
jQuery returns an array of objects from this particular
API. Utilize looping to get objects and output their id
property.
Feel free to play around with the other functionality of
jQuery.
$(document).ready(function() {
$.ajax({
url: 'https://api.github.com/orgs/girldevelopit/events',
success: function(data) {
//Do something with the data...
}
});
});

28. LET'S ANSWER IT
$(document).ready(function() {
$.ajax({
url: 'https://api.github.com/orgs/girldevelopit/events',
success: function(data) {
for(var i = 0; i < data.length; i++) {
console.log(data[i].id);
} //end for loop
} //end success function
}); //end AJAX call
}); //end document ready call

29. QUESTIONS?

30. ?