How to put javascript in HTML
Understanding the Basics
Before diving into how to put JavaScript in HTML, let's take a moment to understand what JavaScript is. JavaScript, often abbreviated as JS, is a programming language that allows you to implement complex features on websites. Think about things like interactive maps, animated graphics, scrolling video jukeboxes, etc. That's JavaScript in action.
Now, imagine JavaScript as a chef and HTML as the kitchen. The chef (JavaScript) needs the kitchen (HTML) to prepare the food (website). They work together to give you the final product.
Embedding JavaScript Directly in Your HTML
One way to put JavaScript in HTML is by directly embedding it inside your HTML document. You can do this by using the <script> tag. Here's an example:
<!DOCTYPE html>
<html>
<body>
<script>
alert('Hello, World!');
</script>
</body>
</html>
In the above example, we're using the alert() function to display a message that says 'Hello, World!'. When you run this HTML file in a browser, you'll see a pop-up window with the message.
Using an External JavaScript File
While embedding JavaScript directly in your HTML works, it's not the most efficient way to do it, especially if you have a lot of JavaScript code. This is where external JavaScript files come in handy.
Imagine that you have a toolbox (an external JavaScript file) with all your tools (your JavaScript code). Instead of carrying all your tools separately (embedding the code directly), you carry your toolbox to the kitchen (HTML document).
Here's an example of how to link an external JavaScript file to your HTML document:
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
</body>
</html>
In the above example, script.js is the external JavaScript file that contains your JavaScript code. The src attribute in the <script> tag tells the browser where to find the JavaScript file.
Positioning Your JavaScript Code
Where you put your JavaScript code in your HTML document matters. You'll either place it in the <head> section or the <body> section of your HTML document.
Placing your JavaScript code in the <head> section means the browser will load and run your JavaScript code before it loads the body of your HTML document. Here's an example:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<!-- Your HTML code goes here -->
</body>
</html>
On the other hand, placing your JavaScript code at the end of the <body> section means the browser will load your HTML document first before running your JavaScript code. This is usually the preferred method as it allows your website to load faster.
Using the async and defer Attributes
The async and defer attributes allow you to control how your JavaScript code is loaded and run by the browser.
The async attribute tells the browser to continue loading the HTML document while also loading your JavaScript file. Once your JavaScript file is loaded, it's run immediately.
The defer attribute, on the other hand, tells the browser to hold off on running your JavaScript file until the HTML document has finished loading.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<script src="script.js" async></script>
</head>
<body>
<!-- Your HTML code goes here -->
</body>
</html>
In the above example, the browser will load the HTML document and the JavaScript file at the same time. However, it'll only run the JavaScript file once it's fully loaded.
Conclusion
JavaScript in HTML is like the secret sauce to your favourite dish. It's what gives your website its functionality and interactivity. Whether you're embedding your JavaScript code directly in your HTML document or using an external JavaScript file, remember to position your code correctly and use the async and defer attributes as needed to control how your JavaScript code is loaded and run by the browser. Happy coding!