Javascript is a programming language used to develop dynamic website. We use JavaScript to add interactivity to our website design. With Javascript, we can perform tasks like:
- DOM Manipulation
DOM manipulation lets us change the structures and content of the website after it is loaded. We can add new elements, remove existing ones, or change their style and content. - Event Handling
Javascript allows us to respond and decide what operation we need to perform for user interaction, such as mouse click, keyboard input, form submission, etc. - Form Validation
With JavaScript, we can ensure that the data the user inputs in the web form meets the specific requirement before sending it to the server. We can validate inputs like email, passwords, etc., and decide what to do if the data is invalid.
These are some of the tasks we can perform using Javascript, and there are many more. Let’s learn how to link JavaScript to your HTML.
Including Javascript in your HTML
There are 3 ways we can include Javascript in our HTML.
- Embedding Code
- External Script
- Event Handlers
1. Embedding Code
Embedding Code is the way to add Javascript code within the HTML document. We use the script tag to define it in our HTML. It is like a container of our Javascript code; every Javascript code we write should be inside the script tag.
Example of embedding Javascript using script tag:
The type attribute specifies the scripting language we are using inside the script tag. In the code above, we specified that we use Javascript “text/javascript”. Nowadays, we don’t have to write the type attribute explicitly for modern browsers.
2. External Script
External script links Javascript in our HTML document where we create a separate Javascript file and then link it to our HTML document using script tag and “scr” attribute of the script file.
Inside the “scr” attribute, we have to specify the path of our external Javascript file. One advantage of using external script is that we can use the same Javascript code for multiple HTML documents, too.
Example of an external script:
Javascript file:
3. Event Handlers
Event Handlers allow us to execute Javascript code when user performs actions such as mouse click or keyboard input. Event handlers are defined as attribute inside HTML tags. This is an example of an event handler:
In the code above, when we click the button, an alert box with the message “Good Morning” will be displayed. With event handlers, we can also specify the name of a function defined inside the embedded code inside the script tag, and it will be triggered when the event occurs.
Where to place the script tag?
As we know, script tag is used for both embedded code and external script, so deciding where to place our script tag is very important as it will affect our webpage too.
1. Head Section:
If we place the script tag inside the head section, our Javascript code will be executed before the HTML page. It may cause problems as Javascript may not be able to find the element inside the body tag as it would still be loading.
One way to fix this is by using the “defer” attribute inside the script tag. If the “defer” attribute is present, the browser will execute the Javascript code only after the HTML is fully loaded.
2. Body Section
Placing the script tag inside the body just before closing the body tag is a more common approach. It ensures that the Javascript code inside the script tag is only executed right after all the content of the body is rendered. This approach minimises the risk of Javascript code blocking the rendering process when the browser parses HTML.
Conclusion
In summary, integrating JavaScript with our HTML document is essential for creating an interactive website. Utilising the script tag enables us to incorporate JavaScript directly into our HTML. It is recommended to place the script tag at the end of the body tag to prevent interference with the loading of HTML content by JavaScript. By mastering these methods, we can seamlessly link our JavaScript code to our HTML!