Let’s dive right in to JavaScript!
This section contains a general overview of topics that you will learn in this lesson.
==
and ===
?All JavaScript we will be writing in the majority of the Foundations course will be run via the browser. Later lessons in Foundations and the NodeJS path will show you how to run JavaScript outside of the browser environment. Outside of these lessons, for now you should always default to running your JavaScript in the browser unless otherwise specified, otherwise you may run into unexpected errors.
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>
<meta charset="UTF-8">
<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 (you can use Live Server to do this!) 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. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
<script src="javascript.js"></script>
JavaScript files have the extension .js
similar to .css
for stylesheets. External JavaScript files are used for more complex scripts.
You can think of variables as simply “storage containers” for data in your code. Until recently there was only one way to create a variable in JavaScript — the var
statement. But in the newest JavaScript versions we have two more ways — let
and const
.
The above tutorial mentioned this, but it’s important enough to note again: let
and const
are both relatively new ways to declare variables in JavaScript. In many tutorials (and code) across the internet you’re likely to encounter var
statements. Don’t let it bother you! There’s nothing inherently wrong with var
, and in most cases var
and let
behave the same way. But sometimes the behavior of var
is not what you would expect. Just stick to let
(and const
) for now. The precise differences between var
and let
will be explained later.
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.
Try the following exercises (and don’t forget to use console.log()
!):
console.log(23 + 97)
into your html file)(4 + 6 + 9) / 77
0.24675
let a = 10
console.log(a)
should print 10
9 * a
let b = 7 * a
(returns undefined
*) and then console.log(b)
max
with the value 57
actual
to max - 13
percentage
to actual / max
percentage
in the console and press enter you should see a value like 0.7719
* As you might have noticed by running Javascript code in the console, the console prints the result of the code it executes (called a return statement). You will learn more about these in the next lessons, however for now it is good to remember that a declaration with an assignment (such as let b = 7 * a
) returns undefined
and so you cannot declare and assign a value to a variable and read its value in the same line.
This section contains helpful links to other content. It isn’t required, so consider it supplemental.
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
+
operator with numbers and strings?%
operator work?==
and ===
.NaN
result?5-6 months
Job Guarantee
1-on-1 Mentorship