Lesson #1: JavaScript — The Basics

This is part one of Learning to Program with DataFire

My aim in this lesson is to demystify programming for the non-coders out there, as well as provide a fun and tangible way to get started writing code. We’ll use spreadsheets as an analogy throughout this lesson in order to keep things familiar. And at the end we’ll put what we’ve learned to use by building a Dataflow on DataFire to send us the news every morning.

If you’re already a JavaScript programmer, you might find this a little slow...feel free to skip ahead to the Putting it into Action section.

If you’ve never programmed before, no problem! We’ll start from the beginning.

What is JavaScript?

JavaScript is a language that was initially built for the web - it’s what controls the logic behind nearly every webpage out there. Because of its widespread success on the web, it’s being used increasingly in other environments (such as in desktop and mobile apps), and has one of the strongest communities.

We’ll go into some of the basics of writing code in JavaScript below.

Variables

Variables are how we name and store data. For example, we might write:

var message = "Hello, world!"

This just says, take the data “Hello world!” and store it under the name message. We can then refer back to it later:

var message = "Hello, world!"
console.log(message)

console.log will print variables to the screen. It’s a good way to see what’s going on inside your code.

This is similar to typing Hello World! into the top-left cell of a spreadsheet, then typing =A1 in another cell - we’re just referring to information we stored elsewhere.

One big advantage programming has over spreadsheets is that we can call our data anything we want. We could just as well have written

var myMessageThatWillGetPrinted = “Hello, world!”
console.log(myMessageThatWillGetPrinted)

Types of Variables

Just as in a spreadsheet, we can store all kinds of data, from words, to numbers, to more complex things. In JavaScript, there are a three simple types of variables:

• Strings - just a string of characters, inside quotation marks:

var message = "Hello, world!"

• Numbers - either whole or decimals, negative or positive:

var numberOfStooges = 3
var balance = -101.55

• Booleans - either true or false:

var isAwake = true

These types of variables are great for storing simple bits of data, but what if we want to group a bunch of data together, like we can with rows and columns in spreadsheets? What if we want to have a list of names, or a person with both a name and an age? What we need are Arrays and Objects.

• Arrays - a list of anything, inside square brackets:

var stooges = ["Larry", "Curly", "Moe"]

• Objects - a map from Strings (keys) to anything (values), inside curly brackets:

var user = {"name": "Linus Torvalds", "age": 46}

If we’re thinking in terms of spreadsheets, then Arrays are columns and Objects are rows. For instance, you might write the examples above in a spreadsheet like this:

|List of Stooges  |
|Larry            |
|Curly            |
|Moe              |
|name             |age       |
|Linus Torvalds   |46        |

Arrays and Objects can get pretty big, so sometimes it helps to write them using multiple lines:

var stooges = [
  "Larry",
  "Curly",
  "Moe"
]
var user = {
  "name": "Linus Torvalds",
  "age": 46
}

But how do we get at the data inside of them?

Accessing Data

You can always get at the data inside of Objects and Arrays by using square brackets: []

For Arrays, just use the number of the element you want, starting at zero:

var stooges = ["Larry", "Curly", "Moe"]
var larry = stooges[0]

For Objects, just use the key you want:

var user = {"name": “Linus Torvalds”, "age": 46}
var nameOfUser = user["name"]

To make Objects bit easier to work with, JavaScript provides a couple shortcuts: You can leave out the quotes around keys and use dots instead of brackets:

var user = {name: “Linus Torvalds”, age: 46}
var nameOfUser = user.name

Nested Data

What if we don’t want just a list of names, but a list of people? We can easily do this in a spreadsheet:

|name             |age       |
|Linus Torvalds   |46        |
|Steve Wozniak    |65        |

So how do we do it in JavaScript? We just need an Array of Objects!

var users = [{
  name: "Linus Torvalds",
  age: 46
}, {
  name: "Steve Wozniak",
  age: 65
}]

Another major advantage we have over spreadsheets is that we can go as deep as we want, putting Arrays inside of Objects inside of Objects inside of Arrays…it sounds complicated, but it’s much simpler than sheet after sheet of VLOOKUPs!

var users = [{
  name: "Linus Torvalds",
  age: 46
}, {
  name: "Steve Wozniak",
  age: 65,
  nicknames: ["Woz", "Berkeley Blue"]
}]

Functions

If you’ve ever typed =SUM(A1, A2) into a spreadsheet, you’re already familiar with functions. When programming though, we’re not just limited to a set of functions provided to us - we can create our own!

function sum(num1, num2) {
  return num1 + num2
}
var answer = sum(1, 1)

We’ll dive deeper into functions in a later lesson.

Putting it into Action

Enough learning. Let’s build!

We’ll use DataFire to send ourselves an e-mail with the top headline from CNN. Open datafire.io/editor in a new tab to follow along.

Inside the editor, click Add Link:

Then use the search bar to pick the CNN Link:

And choose the GET /rss/cnn_topstories.rss Operation:

Now we’re back at the editor page, with the CNN Link selected:

The editor at the bottom of the page is where we’ll be writing JavaScript. DataFire expects to find a function named request, which will return whatever data we want to pass to CNN.

Since the CNN feed doesn’t have any parameters, we can leave the code as-is, and just return an empty Object:

function request() {
  return {}
}

Click Fire Now to see how CNN responds.

Look at that, CNN speaks JavaScript! Well, not quite…what you see on the right is called JSON, and it’s how most data is sent over the web. It was made specifically for JavaScript, and you can see we got back an Object, something like:

{
  "feed": {
    "entries": [
      {
        "title": "Oregon protest: What the town thinks",
        "link": "http://rss.cnn.com/c/35492/f/676961/s/4caffe3b/sc"
      }
    ]
  }
}

Now let’s put the data to use! Click Back to get back to the editor, then click Add Link again, but this time select the E-mail Link:

And choose the POST /send Operation:

You’ll find yourself back on the editor page, this time with the E-mail Link selected:

Now let’s write some code! We want to get the stories from CNN, then pass the first story to the E-mail Link so we can see it in our inbox.

Note that in this step, the request function now has access to a new variable, data. This is an Array of all the responses from previous steps; data[0] contains the stories from CNN.

function request(data) {
  var stories = data[0].feed.entries
}

Whoa! We just accessed an Array inside an Object inside an Array. How did we know to use the keys feed and entries? If you look at the response from CNN that’s where our data is! If you forget what the response looked like, you can click the Sample Responses tab on the code editor:

Now we need to send our request to the E-mail Link. Click the View Parameters tab on the code editor to see how to pass in data:

So we can give it a message, a subject, and an Array of e-mail addresses. Let’s click Edit Request to start coding:

function request(data) {
  var stories = data[0].feed.entries
  var topStory = stories[0]
  var emailRequest = {
    body: {
      message: topStory.link,
      subject: topStory.title,
      to: [
        "myEmail@gmail.com"
      ]
    }
  }
  return emailRequest
}

That’s it! Just be sure to replace myEmail@gmail.com with your own e-mail address. Note how emailRequest looks a lot like the Object we saw in View Parameters.

Click Fire Now to to run the Dataflow:

You should have a new e-mail in your inbox! Click Save to stash your work. You can also schedule your Dataflow to run automatically:

Conclusion

We covered a lot here, but we’ve really only scratched the surface of what’s possible. In the next lesson, we’ll learn about APIs - the way different web services like Gmail, Twitter, and Salesforce are able to talk to one another. We’ll also dive a bit further into JavaScript with another programming challenge.

If you’re looking to beef up your JavaScript skills some more, I’d also suggest checking out the JavaScript intro on Codecademy. If you want to practice a bit more, try creating a Dataflow that gets stories from a Reddit sub.

If you have any trouble or questions, let us know in the comments!