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

Easier UI

  • jQuery is powerful but binding the form started to get complicated.
  • With larger pages that only grows.
  • When trying to keep data in inputs in sync with you script there needs to be some sort of binding.
  • jQuery can do this but you have to wire it all up your self
  • Also with all the .HTML assignments you start to write the layout in your code. Yuck!

Angular.js

  • Angular was built by Google to allow designers a way to interact with the layout
  • It's a simple concept but it's use has grown exponentially.
  • All the information for layout goes directly into the page, no markup in code!
  • Actions are added to the page though "directives"
  • They add features to the elements in the page

ng-model and expressions

  • This is a directive that binds an input to a variable

  <input type="text" ng-model="name"/>
  <br/>
  My name is: {{name}}
          	
  • Notice the {{x}} in the markup
  • This is an expression and it allows you to use values you have created
  • You can also write calculations {{daysInYear * favoritesFoodPerDay}}

Let's Develop It!

ng-repeat

  • Since we alwyas work with collections there is a directive for that
  • This directive will create a copy of the element you tag with it for each item in the list.

    <ul>
      <li ng-repeat="friend in friends"></li>
      {{friend}}
    </ul>
          	
  • just like in our .forEach the value in the list is passed to each element

ng-controller

  • Controllers are how you bind the data to the page from script
  • The controller is a function in your code that you call from the page
  • The function has a $scope parameter that is accessable by your expressions

    <div ng-controller="ctrl">
          	

    function ctrl($script) {
    $script.myValue = 5;
    }
          	

Let's Develop It!

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 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

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 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!

Where do I learn about an API?

All (good) APIs have documentation

What is JSON?

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

What is JSONP?

  • Unless the server is configured to allow it, you can't access JSON on another domain
  • But, there is a pattern for that.
  • JSONP adds the response as a script tag in the page

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

We dont need no stinking key

Because we are going to use Reddit's API!

http://www.reddit.com/dev/api

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

Let's Develop It!

  • Use the example code to show content from /r/aww/
  • Create a link to select other sub reddits: e.g. funny, AdviceAnimals
  • http://jsbin.com/kikogi/latest

Questions?

?

Give away!

What is the current version of JavaScript? v5.1 What is the name for the next version of JavaScript? Harmony