Exercise

let's jump right into connecting a JS script to our HTML file. this way you can follow along, play around, test things out and experiment
if you did the HTML & CSS exercises, you have a folder called a-dope-site with two files: index.html and styles.css. if you are starting here, no biggie, I'll provide everything you need

Create your JavaScript file

if you still have the a-dope-site open in VS Code, you can right click in the side bar navigator to create a new file
or you can do it in the terminal

$ # go home
$ cd ~
$ # navigate to your dope site: change into the Coding folder
$ cd Coding
$ # change into the dope site directory
$ cd my-dope-site
$ # make sure you are in the folder with index.html and styles.css
$ ls
$ # create the JS file
$ touch script.js
$ # open the finder here
$ open .

drag all 3 files into VS Code

Connect the script in the HTML file

if you are jumping in here, copy and paste this entire file, if not, just add the new line

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>A dope site</title>
 
    <!-- this "imports" the styles.css file -->
    <link rel="stylesheet" href="styles.css" />
 
    <!-- this "imports" the script.js file -->
    <script defer src="script.js"></script>
    <!-- 👆 defer allows entire html doc to load before js-->
  </head>
  <body>
    <h1>My first web page</h1>
    <p>coding rules</p>
  </body>
</html>

ok so a few notes already:

you probably noticed we are importing the JavaScript file differently than the CSS file. to use JavaScript in an HTML file, you use the <script></script> tags
- the <script></script> tags cannot self close like the link tag can
- the <script></script> tags are cool bc you can open them up and write JavaScript anywhere in them without external JS files
the next thing you might notice is that defer attribute
- generally computers read files from top to bottom. if you have a ton of JS or some JS code doing things that might take a while, your page might take a long time to load. defer will tell the computer not to worry about that yet and just load the HTML
- defer is optional but it is good practice
the last thing I want to mention about this single line of code is that we put it in the <head></head>, but <script></script> tags can also go in the <body></body> (or both). there is also no limit on how many scripts you can have in an HTML file

Optional CSS

if you followed along with the CSS exercise, we left off with some really wacky shit. let's straighten that out a little. I'm also going to take my own advice and switch to hex colors

styles.css

body {
  background-color: #1e2429;
}
 
h1 {
  color: #57ac48;
}
 
p {
  color: #cbcbcb;
}

Write some JavaScript

open up that fresh script.js file in VS Code and type or paste the following:

script.js

console.log("JavaScript is connected!");

make sure all your files are saved and drag index.html into your browser (or refresh the page)
now open up the developer tools in the browser (on mac: option + command + i)
if you see our little JavaScript is connected! message int the console, sick you connected your first script!
like last time, let's have a little fun before we move on. add this code to your JavaScript file:

script.js

console.log("JavaScript is connected!");
 
document.addEventListener("DOMContentLoaded", function () {
  document.querySelector("h1").addEventListener("click", function () {
    this.textContent = "whoooaaaaa 🤯!";
    this.style.color = "#ECC246";
    this.style.fontSize = "3em";
  });
 
  document.querySelector("p").addEventListener("click", function () {
    this.textContent = "And now the paragraph is different! 🌈";
    this.style.color = "#D522DC";
    this.style.fontStyle = "italic";
    this.style.fontSize = "2em";
  });
});

save the file and refresh the page in the browser.
everything should look the same, but now click the text on the page 😎

3. JavaScript 3.2 Data Types & Syntax