Since you know how to use a
<script> element with embedded code, let’s talk about linking code. Linking code is preferable because of a programming concept called Separation of Concerns (SoC). Instead of having messy code that is all in the same file, web developers separate their code into different files, making each “concern” easier to understand and more convenient when changes must be made.
If this seems familiar, that’s because you may have been linking to external files with the
<link> elements. The attribute is exactly the same, but now its value specifies the location of your script file.
If the file is in the same project folder, the
<script> above would look for a file called exampleScript.js that is in the same folder/directory as our index.html file.
<script> element with a
src attribute that points to script.js.