Level: Beginner — Introductory
If your just getting started with JavaScript, you need to know where to write code within your webpage, application, or mobile app. If you are familiar with the mark-up languages CSS and HTML, you might already know that web developers often pair CSS and HTML with JavaScript to create interactive webpages. When used on the web, JavaScript often relies those mark-up languages to handle the visuals and content. JavaScript is added to provide developers with options for advanced interactions, calculations, and effects. Maybe you found a code snippet that you want to use and now you need help in putting it in your HTML page, but you do not know much about coding. This is the article for you.
So, let’s imagine you already have your HTML/CSS page and some JavaScript that you want to add to it. You have two choices for adding the JavaScript code: you can write the code inline or add it as a separate file.
Generally, inline code works in limited situations where you don’t have a lot of code to add. Your project can get messy if you need to add a lot of code in the HTML file. When you need to add more than a few lines of code, segmenting the code into a separate file can be a tidier approach.
To add JavaScript to inline you will use:
<script></script>Put your code between those tags. Add the tags and code in the <head> section of your HTML document. Occasionally, you will need to put the script in the body of the HTML document so the code runs at a certain time on the page (remember code runs linearly). The web application/page will run the code linearly from top to bottom. Depending on where you are using JavaScript, sometimes you do not have the option to link a separate file. For example, a Learning Management System which allows for customized HTML pages, but no separate CSS or JavaScript files. In these instances, you will have to use inline code.
Using a Separate JavaScript File
If you are using a platform where you can upload a folder with multiple files along with your HTML file (.css and .js), you can create a separate file for your code. Separate .js files can lead to quicker page loads. Also, if you need to use the same code on multiple pages, creating a separate file will allow you reference that code without having to put it on every HTML page in your site. In the same folder where your HTML file is located create a JavaScript file. To qualify as a JavaScript file, make sure to put .js at the end of the file name (eg. “dogfood.js“). You can create this file with a code editor like Visual Studio Code (one of the best). With your JavaScript in a .js file, you wont need the <script> brackets that you did in the HTML file around your code. So, at the very least, you will have one .html file and a .js file. If you are using a service such as WordPress, you might be required to upload the .js file to an add-in or plug-in, then be applied to your html pages.
After getting the .js file in the same folder as the .html file, you will need to add one small line of copy to your .html file body:
<script src="name_of_file.js"></script>This will allow the .hmtl file to reference the .js file. If the JavaScript file is stored in some sort of cloud location, you will be pasting the whole url between the quotes where it says name_of_file.js.
That is really all there is to it! Even if you do not know any code and are borrowing code from someone else, you can use these steps to get the borrowed code working on your webpage.
