Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

The Language of Programming

5:11 with Andrew Chalkley, Dave McFarland, and Joel Kraft

Learn basic concepts shared by all programming languages — values, variables, functions and control structures. Learn how changing values can change how a program works by experimenting with a JavaScript game.

Concepts

  • Syntax — a programming languages vocabulary and grammar. Every programming language has its own syntax. For example, JavaScript has special keywords like var, if, and function that all do different things to in a program.
  • Values — the data in your program. For example, a number like 375 is a numeric value; a logical value like true, or false is called a boolean value; and a collection of letters inside of quote marks are called a string: 'Hello there!'.
  • Variables — variables hold values. They are like boxes you store information in like the current score in a game, or the name of the player. For example, to create a variable and store a number 0 in it, you could write this JavaScript code: var currentScore = 0
  • Control structures — control the flow of the program: what happens and when it happens. For example, if you're playing a game and your character dies, the game ends. The flow of the program is controlled by actions that happen in the program.
  • Commands (functions) — the commands we ask a program to complete, like adding two numbers together or validating a person's email address.

Downloading and Running the Project Files

Because of how the Phaser.JS library handles files, you need to be running a web server locally to view a working copy of this project. You can't just open the index.html file in your web browser as you might a basic HTML page. There are several simple ways to get a web server up and running on your computer:

  • The Web Server for Chrome is an easy-to-install extension for Chrome that lets you select a folder on your computer (like the folder with the game files in them) and deliver them through a basic web server. This is probably the easiest way to get started — but you'll need to use the Chrome web browser.
  • If you don't want to use Chrome, check out a simple guide for getting a local web server set up for several other methods.
  • 0:00

    Launch the work space on this page and then let's talk about programming.

  • 0:05

    But before we get started, take a look at all the words and

  • 0:07

    symbols in front of you, this is our program.

  • 0:11

    Now, if you're beginning to panic because it all looks like a foreign language and

  • 0:15

    you're feeling like maybe this is too difficult for you.

  • 0:18

    Don't worry, as I mentioned in the last video,

  • 0:21

    you don't need to understand everything you see here to have fun in this course.

  • 0:25

    In fact, when we're done you still won't understand everything here.

  • 0:29

    This course is intended to just give you a taste of programming.

  • 0:32

    All you need to do is follow along, experiment a little, and have fun.

  • 0:37

    You can preview the webpage,

  • 0:38

    this index.html file, by clicking the preview button.

  • 0:45

    Here's the current state of our game, the score is zero,

  • 0:48

    there's one coin, one platform, and one player.

  • 0:50

    The game.js file contains the programming that makes our current game work

  • 0:54

    It’s written in JavaScript, but

  • 0:56

    there are literally hundreds of different programming languages.

  • 1:00

    All programing languages,

  • 1:01

    however, share some basic features which I'll introduce to you in this course.

  • 1:06

    Syntax is the vocabulary, punctuation and grammar of a programming language.

  • 1:11

    The syntax includes key words which are the languages vocabulary.

  • 1:15

    For example, here var, function,

  • 1:24

    And if are keywords in the JavaScript language.

  • 1:27

    They all have special meanings, and we'll look at each of these in this course.

  • 1:33

    Values, values are the data in your program.

  • 1:36

    They could be numbers, like 375 Or 300 here.

  • 1:41

    Or they could be letters inside of quote marks, like 'coin'.

  • 1:46

    This is called a string value, because it's a set of letters strung together.

  • 1:50

    There are many different types of values.

  • 1:53

    Variables, variables hold values, they're like boxes that you put a value into.

  • 1:58

    You can look inside the box to see the value it contains, and

  • 2:01

    even replace the current value with a new value.

  • 2:04

    For example, in the last video,

  • 2:06

    you saw that when a player collected a coin, the score changed.

  • 2:10

    The current score is a variable or box in our game.

  • 2:15

    A program uses these boxes to pass information around and

  • 2:19

    control what the program does and how it works.

  • 2:22

    The var keyword you see here, in fact, is a JavaScript keyword,

  • 2:26

    part of the syntax that creates a variable named current score.

  • 2:31

    The equal sign, puts a value into a variable.

  • 2:35

    So this code stores the value zero into the variable named, current score.

  • 2:41

    Change the score to 5000,

  • 2:46

    Save the file, And preview it.

  • 2:53

    The score's now 5000.

  • 2:55

    Changing the value in the variable changes the game.

  • 2:59

    Hey let's look at another example.

  • 3:00

    Let's go back to work space and set the score back to zero.

  • 3:05

    Notice this other variable named won, as in I won the game.

  • 3:11

    It's set to false, which is another type of value, called a boolean.

  • 3:15

    Let's change it to true.

  • 3:19

    Save the file.

  • 3:23

    And preview it.

  • 3:26

    Look, you won the game!

  • 3:27

    Okay, that doesn't make for a very fun game, but

  • 3:30

    you can see how values affect how programs work.

  • 3:33

    Changing this won variable to true changes the information of our program and

  • 3:39

    causes it to end the game.

  • 3:41

    Working with data, values, and variables is one of the most common features you'll

  • 3:45

    use in any programming language.

  • 3:47

    Let's set the value back to false and save the file.

  • 3:55

    Another feature of programming languages, and programming in general,

  • 3:59

    are control structures.

  • 4:00

    Control structures control the flow of the program, what happens and

  • 4:04

    when it happens in a program.

  • 4:06

    For example, in our game, if we grab a coin, the score changes.

  • 4:13

    Likewise, if the value of the variable won is set to false, the player

  • 4:17

    can run around the screen, jumping onto platforms and collecting coins.

  • 4:22

    However, when the value of one is true, then a message appears on the screen and

  • 4:27

    the game is over.

  • 4:29

    These are both examples of a type of control structure called

  • 4:33

    a conditional statement.

  • 4:34

    There are other types of control structures but

  • 4:36

    the important thing to keep in mind is that we can control the flow or

  • 4:40

    the steps a program follows as the program runs.

  • 4:43

    This is one of the things that makes computer programs flexible and useful.

  • 4:48

    Finally there are commands which are often called functions.

  • 4:51

    Functions are the heart of a program.

  • 4:53

    They're the commands we ask the computer to complete.

  • 4:57

    A function can be as simple as adding two numbers together, and giving you a result.

  • 5:02

    Or it could be as complex as adding information to a database.

  • 5:06

    In the next video, I'll introduce you to functions, as we build out our game

You need to sign up for Treehouse in order to download course files.

Sign up