Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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:
- Launch a local development server with the Live Server VS Code extension
- Launch a simple development http server with atom-live-server
Concepts
-
Syntax — a programming languages vocabulary and grammar. Every programming language has its own syntax. For example, JavaScript has special keywords like
var,if, andfunctionthat all do different things to in a program. -
Values — the data in your program. For example, a number like
375is a numeric value; a logical value liketrue, orfalseis 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.
Launch the work space on this page and
then let's talk about programming.
0:00
But before we get started,
take a look at all the words and
0:05
symbols in front of you,
this is our program.
0:07
Now, if you're beginning to panic because
it all looks like a foreign language and
0:11
you're feeling like maybe this
is too difficult for you.
0:15
Don't worry,
as I mentioned in the last video,
0:18
you don't need to understand everything
you see here to have fun in this course.
0:21
In fact, when we're done you still
won't understand everything here.
0:25
This course is intended to just
give you a taste of programming.
0:29
All you need to do is follow along,
experiment a little, and have fun.
0:32
You can preview the webpage,
0:37
this index.html file,
by clicking the preview button.
0:38
Here's the current state of our game,
the score is zero,
0:45
there's one coin,
one platform, and one player.
0:48
The game.js file contains the programming
that makes our current game work
0:50
It’s written in JavaScript, but
0:54
there are literally hundreds of
different programming languages.
0:56
All programing languages,
1:00
however, share some basic features which
I'll introduce to you in this course.
1:01
Syntax is the vocabulary, punctuation and
grammar of a programming language.
1:06
The syntax includes key words which
are the languages vocabulary.
1:11
For example, here var, function,
1:15
And if are keywords in
the JavaScript language.
1:24
They all have special meanings, and we'll
look at each of these in this course.
1:27
Values, values are the data
in your program.
1:33
They could be numbers,
like 375 Or 300 here.
1:36
Or they could be letters inside
of quote marks, like 'coin'.
1:41
This is called a string value, because
it's a set of letters strung together.
1:46
There are many different types of values.
1:50
Variables, variables hold values, they're
like boxes that you put a value into.
1:53
You can look inside the box to
see the value it contains, and
1:58
even replace the current
value with a new value.
2:01
For example, in the last video,
2:04
you saw that when a player collected
a coin, the score changed.
2:06
The current score is a variable or
box in our game.
2:10
A program uses these boxes to
pass information around and
2:15
control what the program does and
how it works.
2:19
The var keyword you see here,
in fact, is a JavaScript keyword,
2:22
part of the syntax that creates
a variable named current score.
2:26
The equal sign,
puts a value into a variable.
2:31
So this code stores the value zero into
the variable named, current score.
2:35
Change the score to 5000,
2:41
Save the file, And preview it.
2:46
The score's now 5000.
2:53
Changing the value in
the variable changes the game.
2:55
Hey let's look at another example.
2:59
Let's go back to work space and
set the score back to zero.
3:00
Notice this other variable named won,
as in I won the game.
3:05
It's set to false, which is another
type of value, called a boolean.
3:11
Let's change it to true.
3:15
Save the file.
3:19
And preview it.
3:23
Look, you won the game!
3:26
Okay, that doesn't make for
a very fun game, but
3:27
you can see how values
affect how programs work.
3:30
Changing this won variable to true changes
the information of our program and
3:33
causes it to end the game.
3:39
Working with data, values, and variables
is one of the most common features you'll
3:41
use in any programming language.
3:45
Let's set the value back to false and
save the file.
3:47
Another feature of programming languages,
and programming in general,
3:55
are control structures.
3:59
Control structures control the flow
of the program, what happens and
4:00
when it happens in a program.
4:04
For example, in our game,
if we grab a coin, the score changes.
4:06
Likewise, if the value of the variable
won is set to false, the player
4:13
can run around the screen, jumping
onto platforms and collecting coins.
4:17
However, when the value of one is true,
then a message appears on the screen and
4:22
the game is over.
4:27
These are both examples of a type
of control structure called
4:29
a conditional statement.
4:33
There are other types of
control structures but
4:34
the important thing to keep in mind
is that we can control the flow or
4:36
the steps a program follows
as the program runs.
4:40
This is one of the things that makes
computer programs flexible and useful.
4:43
Finally there are commands which
are often called functions.
4:48
Functions are the heart of a program.
4:51
They're the commands we ask
the computer to complete.
4:53
A function can be as simple as adding two
numbers together, and giving you a result.
4:57
Or it could be as complex as
adding information to a database.
5:02
In the next video, I'll introduce you
to functions, as we build out our game
5:06
You need to sign up for Treehouse in order to download course files.
Sign up