Javascript Resources

Embedding Javascript in your project

Loading your own Javascript file:

Add a Javascript file in your folder structure
After the <body> tag containing the structure of your webpage, add a <script> tag referencing your Javascript file
If you want to use multiple Javascript files, simply add multiple <script> tags referencing each file. Note that order matters: files are loaded in sequential order. So if you are referencing one file within another, make sure to load the reference first.

Loading an external Javascript file:

Generally, external libraries are delivered in three ways.
1. You can download the file directly, and embed it as if it’s your own file.
2. Instead of downloading the file, reference an external URL (via a CDN, or Content Delivery Network)
3. You install via a package manager like npm or yarn
I recommend options 1 or 2. Option 1 will have the best performance since it’s loaded locally. But Option 2 is more convenient if you want to quickly try out a library, and aren’t sure if you’ll commit to using it.
Here’s an example using Option 2: I copy-pasted the URL for the Draggable JS library from their website

Here’s a working sample project with a Javascript file properly linked:

Javascript fundamentals - link
Javascript Linkedin Learning training - link
- Section 5 and 7 cover selectors and interactivity

The core elements of interactivity are: DOM selectors (document.querySelector..) and event listeners.