By: Max Gruber and Adam Lis
Static webpages are great! Just as you saw in the HTML and CSS tutorial, we can make a pretty cool website with just HTML and CSS. However, as previously mentioned, those websites are static. What if we want dynamic webpages? What if we want users to be able to interact with our webpages? This is where JavaScript (JS) comes into the picture.
JavaScript is the programming language of the web. It allows us to react to user input from mice, keyboards, or other devices. Although knowledge of Java (or any other procedural programming language) will make it easier for you to learn JavaScript, it should be noted that Java and JavaScript are not the same. Now, with that out of the way, let’s learn some JS!
JS looks pretty similar to other languages in the C family of programming languages like Java, C#, and C++. Do not let these similarities trick you! A snippet of JS code may look similar to Java while behaving quite differently.
Variables in JS are created like this: var myVar = 2
. Pretty cool, right? We do not need to declare the type of a variable in JS! If you think that is cool, check this out.
var myVar = 2;
myVar = "Michigan Sucks";
myVar = 2.33;
myVar = [1, 3, 10];
Pretty crazy! In JS, variables can changes types on the fly as shown above.
In JS, types don’t appear to be very important (which is a common criticism of the language). As you saw above, variables are not declared with specific types and their types be changed at runtime. This can cause some pesky bugs! For that reason, we recommend that you try to stick to one type per variable when possible. Now we will go over a few important types in JS.
This one is pretty straightforward. JS Numbers can be integers (whole numbers, positive or negative) or floating-point numbers (numbers with fractional components).
This one isn’t too bad either. Booleans can be either true
or false
.
Arrays in JS are very different from arrays in other programming languages. An empty array is created like this: var myArray = []
. We can also initialize an array with values like this: var myArray = [2, "cool string", 3.9, true]
. You may notice something odd here; JS arrays can contain multiple types!
Array values are accessed like this: myArray[2]
. Since arrays are 0-indexed (meaning that the first element is at index 0), myArray[2]
returns 3.9
.
Arrays can also serve as stacks, queues, and other similar data structures by using methods like pop()
, push()
, shift()
, and unshift()
.
In JS, you can write a String literal in single quotes ('Hello, world!'
) or double quotes ("Hello, world!"
). To get the length of a string, you can access its length property like this: myString.length
.
JS Objects are also pretty different from Objects in other languages. A JS Object is created as follows:
var team = {
name: "Michigan",
good: false,
wins: 0,
type: "College Football"
};
Objects are comma-separated key-value pairs. The keys are strings (like name
, good
, and wins
), and the values are literals (like "Michigan"
, false
, and 0
) or variable names which evaluate to literals. For example, an object can contain another object or even an array! One major use case for JS Objects is in HTTP calls, but we will get to that later.
Object properties can be accessed like this: team["type"]
or team.type
. This would return "College Football"
. To access a property of a sub-object, we can do something like this: team["rival"]["name"]
or team.rival.name
!
Equality in JS can get a little tricky because variables are not strongly-typed. There are two equality operators in JS. ==
(double equals) is used to compare values and not types (if the values are the same, return true
). ===
(triple equals) is used to compare values and types (if the values and types are the same, return true
). If that doesn’t make sense,check out the examples below. A good rule of thumb is to always use ===
!
"2" == 2
=> true"2" === 2
=> false3.9 == "3.9"
=> true3.9 === "3.9"
=> false"test" == "test"
=> true"test" === "test"
=> trueJS control structures are very similar to those in other programming languages. The code snippets below show examples of a few if statements. When the condition
in parentheses is true
, that code block runs. Otherwise, it checks the condition
of the next code block.
// if statement
if (condition) {
...
}
// if-else statement
if (condition) {
...
} else {
...
}
// Chained if-else statements
if (condition) {
...
} else if (condition) {
...
} else if (condition) {
...
} else {
...
}
JS for loops are also very similar to those in other programming languages.
for (var i = 0; i < 10; i++){
...
}
For…in loops are used to iterate over the properties of an object. For example, if we have the following object:
var team = {
name: "Ohio State",
nickname: "Bucks"
}
We can use a for-in loop to iterate through the object like this:
var p;
for (p in team) {
console.log(team[p]);
}
That code snippet would print “Ohio State” and “Bucks” to the console.
For-of loops are for iterating over arrays. For example, if we have the following array:
var teams = ["Michigan", "Ohio State", "Rutgers"]
We can use a for-of loop to iterate through the array like this:
var p;
for (p of teams) {
console.log(p);
}
That code snippet would print “Michigan”, “Ohio State”, and “Rutgers” to the console.
While loops are the same as in other programming languages, so this will be brief. The syntax for while loops looks like this:
while (condition) {
...
}
Functions in JS are quite simple. You do not provide the return type or parameter types as you do in other programming languages. Functions will look something like this:
function myFunction(param1, param2) {
...
return param1 + param2;
}
Phaser is a JavaScript library for building games. We’ve used it for Brutus Ball and Cats and Mice. Your project group will probably use it as well! To get some hands-on time with JavaScript, you’re going to complete the “Making your first Phaser 3 game” tutorial. We’ll need to take care of a couple things before you get started on that…
Check the “Add Python to PATH” box (if you’re on Windows)
We’ll use Python’s built-in web server when we’re developing games using Phaser. You can learn more about using Python’s simple HTTP server here, but I’ll walk you through the basics.
python -m http.server
python3 -m http.server
You’ll take these steps whenever you want to look at a Phaser project in your web browser.
Now, you’re ready for the Phaser 3 tutorial! These extra steps covered Phaser’s Getting Started Guide, so you don’t need to worry about that. Good luck!
There is a lot of breadth and depth to JavaScript, so don’t worry if your’re not a JS master quite yet! While working on your projects, you can use this tutorial and other sites like MDN, W3Schools, and Stack Overflow as resources. In addition, you can always ask C4C leaders for help!
If you have any feedback for this tutorial, please create a GitHub issue or talk to one of the leaders of C4C.