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

HTML forms

HTML Forms allow users to enter information


<form id ="about-me">
  <input type="text" id="name" placeholder="Enter a name"/>
  <input type="submit" value="Go!" style="font-size:1em"/>
</form>
            

Values from Forms

You can use JavaScript to get values from a form


    var myName = $('#name').val();
    console.log( myName );
            
Or set values of a form

    $('#name').val('Mitch');
            

Values from Forms

jQuery has an event for form submission


      $('#about-me').submit(function(event){
            // code to execute after submission
             
            return false;
        });
            
"return false" to prevent the form trying to submit to a server.

Values from select elements


      <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>
        
Add the type before the id (select)

    var dinoValue = $('select#dinosaur').val(); // gets the value
    $('select#dinosaur').val('other');  // sets the value to "other"
            

Read more

Plugins

From the jQuery website:
  • A jQuery plugin is simply a new method that we use to extend jQuery's prototype object
  • You can make your own plugins and use them privately in your code or you can release them into the wild
  • The quality of jQuery plugins varies widely
  • Some plugins, mainly jQuery UI, are maintained by the jQuery team. The quality of these plugins is as good as jQuery itself.

Plugins and Libraries

  • Most plugins have step-by-step installation guides
  • Installation varies between plugin, but is often very similar
  • Generally, add any dependencies (CSS, jQuery files) in your header, then link the plugin or library
  • We will be integrating a javascript library for creating image Lightboxes

Download and Install

  • Go to the Lightbox2 website and download the latest version (currently v2.6)
  • Unzip/Extract the zip file.
  • Place the entire unzipped folder in the folder you plan on programming from
  • We will continue instructions from the developer's website

What is an API?

  • Application Programming Interface
  • 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)

What is an 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

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

What is JSON?

  • JavaScript Object Notation
  • Format for data returned from APIs
  • You've seen it before!
  • JavaScript objects

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

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 method to perform an AJAX call


    $.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
    • country
    • 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

function getMeetups(){
  var api_key = "50722e1d56c194e61763a2ee1e4535";
  var url = "https://api.meetup.com/2/";
  var method = "open_events"
  $.ajax({
    url: url + method,
    data: {
      key: api_key,
      lat: 40.7143528,
      lon: -74.0059731,
      topic: 'JavaScript'
    },
    crossDomain: true,
    dataType: 'jsonp',
    type: "GET",
    success: function (data) {
      console.log(data.results)
    },
    error: function(data) {
      console.log("Error", data);
    }       
  });
}
getMeetups();
          
You'll end up with something like the above
Surround this with a $(document).ready(function(){ ... });

Let's Develop It!

Let's Develop It!

  • Create a new function that can parse 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, description, group name, and url of each event
  • Append them to your new div
  • Append the new div to the div "events"

Let's Develop It!

  • Create a form for users to enter in their location and a topic of their choosing
  • On submit, call the same Meetup open events method, but with the user's values

Bonus

Still have time? Can't stop learning?

One of the best things about jQuery is the developer community

They love to build!

Check out some great plugins:

Questions?

?