BEGINNING JAVASCRIPT
CLASS 4Javascript ~ Girl Develop It ~
WELCOME!
Girl Develop It is here to provide affordable and
accessible programs to learn software through
mentorship and ha...
HTML FORMS
HTML Forms allow users to enter information
Enter a name
I like popcorn
Favorite Dinosaur
Tyrannosaurus Rex
Go!
HTML FORMS
HTML code for a form
<form action="serverSideHandler.aspx" id="about-me">
<input type = "text" id = "name" plac...
VALUES FROM FORMS
You can use JavaScript to get values from a form
Or set values of a form
var name = document.getElementB...
FORM SUBMIT EVENT
Forms have a submit event.
The submit event fires when a user clicks on a submit
button or can be fired ...
LET'S DEVELOP IT
Choose one of your functions made so far.
Create a form to send dynamic data to the function
when you cli...
LET'S ANSWER IT (SUPPLY CALCULATOR)
<form id="supply-calculator">
<label for="age">Age:</label><input type="text" id="age"...
WARNING
The following few slides have lots of acronyms and
jargon.
On behalf of developers everywhere, we apologize
WHAT IS AN API?
Application Programming Interface
Data structure and rules for accessing an application
How we can access ...
WHERE DO I LEARN ABOUT AN API?
All (good) APIs have documentation
GitHub ( )
Facebook ( )
Twitter ( )
Meetup ( )
FourSquar...
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 secu...
WHAT IS AJAX?
Asynchronous JavaScript and XML
Method to communicate to a server or API
Asynchronous means:
I ask Twitter f...
WHAT IS REST?
Representational State Transfer
REST is a way to ask an API for information by using
a URL.
REST Urls are cr...
WHAT IS JSON?
JavaScript Object Notation
Format for data returned from APIs
You've seen it before!
JavaScript objects
{
"s...
MAKING AJAX CALLS WITH JAVASCRIPT
Use the XMLHttpRequest object built in to JavaScript
We're using the onreadystatechange ...
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.
Yo...
LET'S ANSWER IT!
var serverRequest = new XMLHttpRequest();
serverRequest.onreadystatechange = function() {
if(serverReques...
WHAT IS A LIBRARY?
Software libraries contain functions (not books).
When you include a library, you can use all the
funct...
WHAT IS JQUERY?
jQuery is a library of JavaScript functions.
It contains many functions to help simplify your
JavaScript p...
WHY USE JQUERY?
The most popular JavaScript library
jQuery empowers you to "write less, do more."
Great
Used by nearly 20 ...
INCLUDING JQUERY
Two ways to include jQuery on your page:
Download the library, store it locally:
Include the the live lib...
WHAT CAN JQUERY DO FOR ME?
Remember document.getElementById() and
documet.getElementsByTagName()?
jQuery makes it this eas...
WHAT CAN JQUERY DO FOR ME?
Get and set attributes easily:
Get and set CSS properties:
Create elements:
Get and set the val...
WHAT CAN JQUERY DO FOR ME?
Append and prepend text (no more createTextNode):
Simplify adding events...
...and the DOMConte...
LET'S DEVELOP IT
Include the jQuery library on your page. jquery.com
has a nice shortcut called Quick Access at the bottom...
LET'S ANSWER IT
$(document).ready(function() {
$.ajax({
url: 'https://api.github.com/orgs/girldevelopit/events',
success: ...
QUESTIONS?
?
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4
Upcoming SlideShare
Loading in …5
×

GDI Seattle - Intro to JavaScript Class 4

539 views
423 views

Published on

Instructor: Dallas Tester

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
539
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GDI Seattle - Intro to JavaScript Class 4

  1. 1. BEGINNING JAVASCRIPT CLASS 4Javascript ~ Girl Develop It ~
  2. 2. 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
  3. 3. HTML FORMS HTML Forms allow users to enter information Enter a name I like popcorn Favorite Dinosaur Tyrannosaurus Rex Go!
  4. 4. 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>
  5. 5. 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;
  6. 6. 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);
  7. 7. 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;
  8. 8. 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) { ... }
  9. 9. WARNING The following few slides have lots of acronyms and jargon. On behalf of developers everywhere, we apologize
  10. 10. 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
  11. 11. 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/
  12. 12. 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.
  13. 13. 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
  14. 14. 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!
  15. 15. 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" } }
  16. 16. 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();
  17. 17. 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();
  18. 18. 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" } ... } ]
  19. 19. 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!
  20. 20. 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
  21. 21. 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
  22. 22. 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>
  23. 23. 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
  24. 24. 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>');
  25. 25. 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!
  26. 26. 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... } }); });
  27. 27. 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
  28. 28. QUESTIONS?
  29. 29. ?

×