JavaScript is a programming language that you can use in your websites. Basically, you write sets of instructions that the computer can carry out.
Functions are the most basic thing that you have to understand.
Instructions are written using lines; typically one instruction will be written on one line (there are exceptions)
Also every single line of instruction has a ; after it (there are a few exceptions).
You can define your own function by writing function, followed by the function name and parentheses (). After that, use braces to tell the computer what it is that is in your function.
function myCoolFunctionName(){
}
Remember, that functions ALWAYS have () after their name, whether you are calling them or defining them
Ok, so you defined your function. How do you call it? (use it). In order to call it, simply write the function name followed by ().
myCoolFunctionName();
There are a bunch of functions that are already built into JavaScript itself. One such function is console.log(). Use this to log information to your console.
to open a web console, press Ctrl + Shift + I, and then click the console tab
The usage of the console.log function is as follows:
console.log("text is always in quotation marks");
Good! Now try it yourself. Try to log, The quick brown fox jumps over the lazy dog, to the console.
Alright, so the next thing you want to do is create some variables.
To define a variable, simply declare it using var, your variable name, and an equals sign.
For example,
var mycoolvariable = 5;
This creates a variable called mycoolvariable, and sets it to 5.
If you wanted to use it, simply just write in the name, for example:
console.log(mycoolvariable);
This would log mycoolvariable to the console, therefore it logs 5. However, note that mycoolvariable is effectively replaced by 5. That means that you can add it to itself and not get problems. To add it to itself, simply do the following:
mycoolvariable = mycoolvariable + mycoolvariable;
While this may look confusing, consider this: a computer reads things in a line. mycoolvariable = tells the computer that it should set mycoolvariable to whatever is on the right of the = sign. What’s on the right of it is mycoolvariable + mycoolvariable. Notice, that since they are replaced by 5, it effectively is 5 + 5 on the right. Thus, the computer interprets this is as: mycoolvariable is set to 5+5, or 10.
Notice, that 5 doesn’t have quotation marks around it while “The quick brown fox…” does have quotation marks? Why is that? Well, it’s because they are different data types.
Data types are, as the name suggests, types of data. Information can be represented in a couple different ways.
5 is a number
“hello world” is text.
Text, or more formally called strings, are chains of characters, or strings of characters. Strings always have
quotation marks.
5 is a number, but there are actually different types of numbers. 5 by itself is called an integer. An integer is a number that does not have a decimal. 4 is an integer, but what about something like 3.14?
3.14 is a decimal number. In computers, there are two different ways to represent a decimal number. One is with a data type called a float. The other is a double. What’s the difference? Well, a double can contain more information, simply put, a double is bigger than a float. For 3.14, both can be used, but using a float is better since it takes less space in the computer. However, if we had 3.141592653589, you might want to store that as a double. In javascript, you do not need to specify the type, however in some other programming languages, you do have to do that.
There is one last data type, which is called a boolean. A boolean is a true or false value. We’ll get more into that in a second.
Here is a table of data types, examples, and a short description.
| Data type | Example | Description |
|---|---|---|
| integer | 5 | An integer stores an integer value, no decimal point. |
| float | 4.4 | Stores a decimal number with a small number of digits. |
| double | 3.14159265 | Stores a large decimal number. |
| boolean | false | A true or false value, used in logic. |
| string | “Hello world!” | A string of characters, or simply put, text. |
Booleans may not seem important, but they are by far, the most fundamental data type. They are used in logical comparisons, as we will now discuss.
Computers do most calculations using logic. Logic, for computers, means mostly comparisons. Basically, computers check if something is true, false, greater than something, less than something, etc.
These different things that the computer does with logic are called logical operators.
What you will use this for is mainly in if statements.
If statements in JavaScript, actually in all programming languages, is extremely fundamental. If statements are used to check if something is true, and if it is, then code inside of it will be executed.
To define an if statement, use if () {}. The () is where you will put your logic statements. The {} is where you will put your code that will run when the if statement is true.
For example,
if (5<6) {
console.log("5 is less than 6 ");
}
The above program will run console.log if 5 is less than 6. Since 5 is indeed less than 6, it will run the code. But that’s simple. A better application would be with boolean variables. Simply define a variable, set it to a boolean, then use it in an if statement.
But if an if statement runs only when something is true, then why have booleans at all? Why not just have if (true)? This is because we want to use booleans in combination with different logical operators.
Call me over if the following doesn’t make sense
Let’s say we have two variables,
var a = true;
var b = false;
One logical operator we can use is and. And checks if both inputs are true, and if input 1 and
input 2 are true, then it evaluates to true.
For example, true and true is true. true and false is false. false and false is false.
The and operator is && in javascript. To use this in an if statement, do the following:
if (a && b){
console.log("A and B must both be true if this code has run");
}
We set a to be true and b to be false. Will console.log be run in that case?
Another logical operator we can use is or. Or checks if one input or the other is true. If one or the other is indeed true, it evaluates to true.
In javascript, the or operator is denoted with ||. For example,
if (a || b){
console.log("a or b must be true since this has run.");
}
Will this run? Remember, a is true, and b is false.
One last logical operator is not. Not simply returns whatever the input is not. For example if the input is true, it returns false, since the input is not false. Basically, the opposite of what the input is.
In javascript, the not operator is !.
For example,
if (!b){
console.log("b must have been false since not false is true, thus making the if statement run");
}
You can actually use multiple of these operators at once inside an if statement. To do so, just wrap your logical operations with (). For example,
var a = true;
var b = true;
var c = false;
if ((a&&b)||c) {
console.log("Wow this ran!");
}
The if statement first checks the most inner parentheses. In this case, it is a&&b. a and b is true, since both a and b are true. Then, it checks the next parentheses, which is (a&&b) || c. This is the same as true || c, since we already know that a&&b is true. Since c is false, this expands to true or false. Since one of the inputs is true, then it evaluates to true, and therefore console.log is run.
There are a few other operators that make intuitive sense. Here is a table of those:
| Operator | Description | Example | What it evaluates to |
|---|---|---|---|
| == | Comparison operator. Checks if two inputs are the same. It has to be == rather than = because the = operator sets a variable, so == is used instead. | 5==4 | false, since 5 does not equal 4. |
| > | Greater than. If input 1 is greater than input 2, then true. | 5>4 | true, since 5 is greater than 4. |
| < | Less than. If input 1 is less than input 2, then true. | 5<5 | false, since 5 is not less than 5. 5 is equal to five. |
| >= | Greater than or equal. If input 1 is greater than OR equal to input 2, then it is true. | 5>=5 | true, since 5 is equal to 5. If it was 6>=5, it would also be true since 6 is greater than 5. |
| <= | Less than or equal. If input 1 is less than OR equal to input 2, then it is true. | 5<=2 | false, since 5 is not less than 2, nor is it equal to two. |
You can use multiple of the above operators at the same time as well using paranthesis and following the same idea as above.
Now, raise your hand and call me over. Tell me what the below evaluates to and why:
((true && false) || (5<=6)) && true
Now that you understand all this, it’s time to learn how to use JavaScript in your website.
The very easiest way to get started using JavaScript in your website is through buttons. When a person clicks on the button, you can assign a function to it so that that function is run when clicked.
For example, in your HTML file, somewhere in your body, add a button tag.
<button onclick="mycoolfunction()">Click me!</button>
The onclick part of the opening button tag tells the computer to call the function inside of it once the button is clicked. You could have a function called increase() that increases a variable (the basics of a clicker game).
Now, let’s say you want to change something on your website. The easiest way to do this is through element ids. You can assign an ID to an element so that you can find it fast in your javascript code.
Let’s say you have an HTML file that looks like this:
<h1>My cool clicker game</h1>
<p> Your money: </p>
<p id="money"></p>
Now, since we put an id on the second paragraph tag, we can easily call it from a javascript file.
In a linked javascript file, you can do the following to grab an element from its id:
document.getElementById("money")
This will return the element. By itself, the above won’t do anything and might error out. To change the text of the paragraph tag, simply access its innerHTML using the . operator. The . operator allows you to “walk” through an element, accessing all its properties and methods.
To change the paragraph tag’s text to 5, do the following:
document.getElementById("money").innerHTML = 5;
This will make the paragraph tag with the id of money set to 5.
Alright, now you can technically make a clicker game with this idea. That will be your assignment
If you already made a clicker game, add upgrades.
Here is the outline of your assignment: