- You can write it directly into your HTML using a special tag, or
- You can link to it as an external file
You can use the
<script> tag is very similar to the
<link> tag used to include your CSS files.
Don't forget to use the attribute
src. This is the same
src attribute used with images and takes a path to a file. Here's an example:
Notice that the
type attribute is still present, but nothing is between the two script tags.
If your script file was inside of a folder called
src (short for "source"), the tag would look like this:
That corresponds to this file structure:
There are two places in your HTML file you can put the
- Between the
- Just before the
Generally speaking, here is how to decide:
- Put scripts in the
<head>when they need to do something before the page starts being rendered. This happens a lot with libraries like Modernizr, which detects the features available in a user's browser. Because this affects other ways in which the website displays on the screen, it needs to happen immediately.
- Put scripts at the end of the
<body>if they don't affect other things loading or displaying.
I usually add scripts to the body by default and move them if something breaks.
A framework is a library of code that provides basic tools for you so you don't have to write them yourself. For example, if you wanted to build a web application from scratch, you'd have to figure out how to do things like save information about a user even when they close the browser. A framework provides functions and systems for these types of things.
All of these frameworks are valuable; try them all and dig into your favorite!
If you're curious about web development, you might like my article What is a Full Stack Developer?.
To get weekly ways to improve as a developer and developer advocate, sign up for my newsletter Developer Microskills below!