Let's dive right in!
Look through these now and then use them to test yourself after doing the assignment:
- How do you declare a variable in javascript?
- What are three different ways to declare a variable?
- Which one should you use when?
- What are the rules for naming variables?
- What are operators, operands, and operations?
- What is concatenation and what happens when you add numbers and strings together?
- What are the different type of operators in Javascript?
- What is the difference between
==
and===
? - What are operator precedence values?
- What are the increment/decrement operators?
- What is the difference between prefixing and postfixing them?
- What are assignment operators?
- What is the "Unary +" Operator?
Numbers are the building blocks of programming logic! In fact, it's hard to think of any useful programming task that doesn't involve at least a little basic math... so knowing how numbers work is obviously quite important. Luckily, it's also fairly straightforward.
- This W3Schools lesson followed by this one, are good introductions to what you can accomplish with numbers in JS
- This MDN article covers the same info from a slightly different point of view. There's much more that you can do with numbers, but this is all you need at the moment.
- Read through (and code along with!) this article about operators in Javascript. Don't forget to do the "Tasks" at the bottom of the page! It will give you a pretty good idea of what you can accomplish with numbers (among other things!) in JavaScript.
You can think of variables simply as "storage containers" for data in your code. Until recently there was only one way to declare and use a variable in Javascript (the var
keyword) but the latest versions of JavaScript include 2 more keywords that can be used depending on the situation. The following resources will tell you what you need to know!
- Read through this variable tutorial as well. It covers the other methods of variable creation. Be sure to do the Tasks at the end of this article! Information won't stick without practice!
- Sidenote: It's mentioned in the above tutorial, but important enough to note specifically here.
let
andconst
are both relatively new ways to declare variables in JavaScript. In many tutorials and in code across the internet you are likely to encountervar
. Don't let it bother you! You should stick tolet
andconst
for now. There is nothing inherently wrong withvar
, but in a few small cases it's behavior is not what you would expect. In most casesvar
andlet
behave exactly the same. The precise difference will be explained later.
You can easily run your own JavaScript code from files that you create on your own computer. The simplest way to get started is to simply create an html file with the JavaScript code inside of it. Type the basic html skeleton into a file on your computer somewhere:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
// Your JavaScript goes here!
console.log("Hello, World!")
</script>
</body>
</html>
Save and open this file up in a web browser and then open up the browser's console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the developer tools pane find and select the 'console' tab, where you should see the output of our console.log
statement.
console.log()
is the command to print something to the developer console in your browser. Use it for all of the following exercises.
Try the following exercises.
- Add 2 numbers together! (just type
console.log(23 + 97)
into your html file) - Add a sequence of 6 different numbers together.
- Print the solution to the following equation:
(4 + 6 + 9) / 77
- answer should be approximately
0.24675
- answer should be approximately
- Let's use variables!
- Type the following at the top of the script tag:
let a = 10
console.log(a)
should print10
- Try the following:
9 * a
- and this:
let b = 7 * a
(returns undefined) and thenconsole.log(b)
- Type the following at the top of the script tag:
- You should be getting the hang of this by now... try this sequence:
- Declare a constant variable
max
with the value 57. - Set another variable
actual
tomax - 13
- Set another variable
percentage
toactual / max
- If you type
percentage
in the console and press enter you should see a value like0.7719
- Declare a constant variable
- Take a few minutes to keep playing around with various things in your script tag. Eventually we will learn how to actually make those numbers and things show up on the webpage, but all of this logic will remain the same, so make sure you're comfortable with it before moving on.