📝 Core 1 Interaction Week 11 Notes — JavaScript Continued

Harmonic Collection Midterms are graded!

  • Except if you didn’t submit a google doc that includes a summary and link to your collection. Please do this ASAP and make sure that it is shared with me.
  • “In addition to being on time and refining your collection,  you will also prepare a short written doc (one paragraph) that explains your collection’s theme so far and explains three other avenues you can explore the theme for the remaining weeks of the semester.”

Harmonic Collection Show and Tell




Using JavaScript – Linking to your script

You can use JavaScript by embedding it into the HTML document, or linking it externally like we’ve done with CSS. This is the preferred method because it won’t clutter your HTML document.

Linking Externally

Place this before the end of the body tag.
<script type="text/javascript" src="INSERT PATH TO YOUR JS FILE HERE"></script>

Create a JavaScript file → Open up a blank sublime text document and save it as main.js then link to its location in the above path. Go ahead and link and create a CSS doc, too.
  • (Hint: if you type in link and tab in Sublime text, it generates the code for you. And if you do script it does so, too, but you need to add “src”)

You can try something simple in your js document to see if it worked:
console.log("hello!");

This is a helpful way of getting feedback and information on your code when debugging.


Interacting with HTML / querySelector

We use querySelector to interact with HTML elements. This is a tool to “query” or search the document by a CSS selector.

If you want to search your whole page, you can refer to it as the document.

let myNav = document.querySelector(".nav");

in the HTML
<div class="nav">
  ...
</div>

Example JS
let myNav = document.querySelector(".nav");