Beginning Javascript

Class 4

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

Goals for the class

  • Week 1: Intro to JavaScript
  • Week 2: More JavaScript & the DOM
  • Week 3: Intro to jQuery
  • Week 4: AJAX and APIs

Note

Today's topics are a little more advanced.


We want to give you a taste of other awesome things you can do with JavaScript.


Remember to ask questions!

AJAX

  • Asynchronous JavaScript and XML
  • A group of client-side web development techniques used to create asynchronous web applications

AJAX

  • Client makes requests to the server asynchronously (without reloading the page)
  • Receives and works with data from the server
  • Sends and receives data in formats including: JSON, XML, HTML, text

JSON

  • JavaScript Object Notation
  • Data format
  • Frequently used for AJAX requests
  • Very similar to JavaScript objects
  {
    "firstName": "John",
    "lastName": "Smith",
    "age": 25,
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": 10021
    }
  }

Ajax Examples

What are some common uses of AJAX?

What sites use them?

  • web apps (e.g. gmail, google docs)
  • infinite scrolling (e.g. twitter, facebook)
  • autocomplete (e.g. amazon, google)
  • Voting, ratings, etc. (e.g. reddit, imdb)
  • Real-time updates (e.g. polling, stock tickers)

AJAX Examples: Autocomplete

  • Go to amazon.com
  • Open the developer tools and go to the network tab.
  • Click the clear button.
  • Start typing a query into the search box (do not submit by clicking enter)
  • Notice the new entries and click one.
  • Take a look at the headers to see your query.
  • Take a look at the response.

Why use AJAX?

  • Prevent unnecessary page reloads
  • Speed
  • Interactivity
  • Usability
  • Include information from other sites

AJAX Examples:
Data from Other Sites

GDI class data from Meetup

  • Go to http://girldevelopit.com/classes
  • Open the developer tools and go to the network tab.
  • Filter by "scripts".
  • Find the entry from api.meetup.com.
  • Take a look at the headers to see the request.
  • Take a look at the response.

API

  • Stands for Application Programming Interface
  • A set of routines, protocols, and tools for building software applications.
  • The building blocks that help a programmer
    build a program.

Web API

  • Data structure and rules for accessing a web-based application
  • How we can access information from sites that are not our own (Twitter, Meetup, Facebook, Foursquare)

Web API

  • Primary role: a channel for applications to work together
    • Your website and the Twitter API
    • Twitter's mobile app and the Twitter API
    • Hootsuite's mobile app and the Twitter API

Where do I learn about an API?

All (good) APIs have documentation

Getting started!

Get 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

Meetup API

We will be using the Meetup API

Get your API key.

Documentation

Meetup API

We will be finding interesting Meetups near us

Open Events

Meetup API

Try it in the meetup console

Open Events Console

Meetup API

Try it in the meetup console

jQuery: Ajax

jQuery's $.ajax method helps you make ajax requests


  $.ajax({
    url: 'http://site.com',
    data: {
      parameter: 'value',
      parameter: 'value'
    },
    crossDomain: true,
    dataType: 'jsonp',
    type: "GET",
    success: function (data) {
      // code with data returned
    },
    error: function(data) {
      // code with error returned
    }
  });

jQuery Ajax


  $.ajax({
    url: 'http://site.com',
    ...
  });
  • $.ajax() - jQuery method for sending AJAX requests
  • Takes one parameter - a JavaScript object
  • Note the {}
  • url - first property, the url where you will send the AJAX request

jQuery Ajax

  ...
  data: {
    parameter: 'value',
    parameter: 'value'
  },
  ...
  • data- a JavaScript object with all the parameters for the AJAX request
  • Some parameters in the Meetup open events
    • key (refers to api key)
    • city
    • topic

jQuery Ajax

  ...
  crossDomain: true,
  dataType: 'jsonp',
  type: "GET",
  ...
  • crossDomain - are you sending the request to a domain that is not your own?
  • dataType - how will you evaluate the data returned
  • type - what type of request is it?
    • GET - retrieve data
    • POST - post new data

jQuery Ajax

  ...
  success: function (data) {
    // code with data returned
  },
  error: function(data) {
    // code with error returned
  }
  ...
  • success - code that will execute if results are sent back successfully
  • error - code that will execute if results return an error

JSONP

It provides a method to request data from a server in a different domain.


A security rule called "same origin policy" prevents us from doing this using other methods.

Let's Develop It!

  • Create a new div with the id "events"
  • Create a new function in your javascript that calls Meetup open events method
  • Add zip code parameter to find meetups near you
  • Add the category or topic parameter to find meetups that you would be interested in
  • For now, just look at the results in the console.log()
  • Call this new function in document ready

Hints

  • Use the api console to determine what the url should look like.
  • Check out the next slide for an example ajax request

Hints

Your ajax request should look similar to this.

  $.ajax({
    url: "https://api.meetup.com/2/open_events",
    data: {
      key: apiKey,
      topic: "programming",
      zip: "15217"
    },
    crossDomain: true,
    dataType: 'jsonp',
    type: "GET",
    success: function (data) {
      console.log(data)
    },
    error: function(data) {
      console.log("Error", data);
    }
  });

Example

Are you done or really stuck?

Check out our example.

Let's Develop It!

Let's Develop It!

  • Create a new function that can display the results.
  • Remember that the results will be an array of objects
  • Loop through your results
  • For each result, create a new div
  • Get the name of the event, a link to the event, and the name of the group
  • Append them to your new div
  • Append the new div to the div "events"

Example

Are you done or really stuck?

Check out our example.

Additional Topics: jQuery UI

A set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library

Documentation

Additional Topics: jQuery Mobile

A touch-optimized HTML5 UI framework designed to make sites and apps that are accessible on all popular smartphone, tablet and desktop devices.

Documentation

Additional Topics: jQuery Plugins

One of the best things about jQuery is the developer community. They love to build!

Additional Topics: Code Quality

Useful References

Questions?

?