- Learn to connect a JS file to an HTML file,
- Start using JavaScript and use developer tools.
- Introduce the syntax of the JavaScript language.
Today we are going to get started with our first real programming language of the course! We've learned about HTML + CSS in previous classes this week, so we know how to make static webpages where there isn't much user interaction. Today we are going to move towards making our pages interactive and dynamic.
But first, we must start with the basics.
We'll start by creating a new directory with HTML and JS files. From the command line:
cd sandbox
mkdir js-data-types
cd js-data-types
touch index.html script.js
code .Go into the HTML file and enter HTML boilerplate code. If you're using VS Code
you can just type ! and hit tab, or you can enter all the boilerplate
below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>Next, we will link the JS file into the HTML file, by adding a script element
into the bottom of the body, as follows:
In index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>Once the file is linked, we can go into our JS file and begin coding. In
script.js, add the following line of code:
console.log("hello world")Back at the command line run:
open index.htmlYour default browser will open (we ask for this class you use Chrome but other browsers will have similar tools you should definitely explore).
You can bring up the Development Tools (DevTools) with the command Command +
Option + J (⌘ + ⌥ + J) and should see something that looks like this:
Again, back at the command line run:
touch script2.jsIn script2.js add:
console.log("hello world, from script2")In index.html, in the head, add:
<script defer src="script2.js"></script>Now let's do it a third time!
Create a script3.js and include it in head, this time without a defer
attribute.
<script src="script3.js"></script>Go back to the browser and refresh the page.
Placing the script at the bottom of the body allows your HTML to load first,
then it downloads and executes your JS file.
Putting defer on your script tag in the head executes it after the entire page
has loaded.
Placing a plain old script tag in the head, that doesn't have any attributes on it, runs the script before html loads. If you do this make sure that your script doesn't depend on HTML already being there.
Bonus Reading: async and defer attributes in a script tag
It is also possible to write JavaScript directly into your HTML file within the
script tags, but keeping all JS in a separate file makes it easier to edit and
more efficient when loading the page.
We have seen console.log frequently in the pre-work and we will see it much
more. The most difficult aspect of programming is not having insight into the
exact value of things in a running program. console.log provides us this
insight.
The console is also known as a REPL (Read-Eval-Print-Loop). When you hit Enter, you tell the computer:
- Read the JavaScript I just wrote (
42). - Evaluate it (calculate its value,
42). - Print the value that was evaluated (
42). - Loop, returning control to the user and wait to be asked to read the next line.
Let's try it out. In your script.js file:
const number = 9
console.log(number)Go back to the browser, and refresh the page. Type number into the console. It
will read, evaluate, and print 9.
Another example of a REPL is: https://repl.it/. This may be a helpful tool to use throughout class to test code.
Keyboard shortcut: Highlight code and press Command + / (⌘ + /)