In this chapter, we will learn how to embed Javascript in our HTML page.
Using javaScript, we can implement the dynamic behavior of any website. Like changing the background color, hiding the button, changing the font size of any text after a fully loaded page or upon click, etc,
This chapter is a part of the JS Complete tutorial. if you want to learn complete JavaScript then please go through topic-wise. Hope so, you will learn in an easy way.
Embed JavaScript in our page
There are three ways to embed javascript in an HTML page.
- Inline
- Internal
- External
Inline JavaScript Embed
Let’s start with the internal JS. We can add the internal JavaScript in any HTML element using the HTML attribute like:
onclick, onmouseover, onload, etc.,
These are called events in JavaScript.
Syntax to embed Internal JS into an HTML element.
<tagname event = "javascript code" > There are a few more events that are commonly used.
- onclick
- onload
- onmouseover
- onmouseout
- onchange
- onkeydown
- onfocus etc,
We will discuss all these in a later chapter. For now, let’s see how to use events in HTML.
Example:
<p onmouseover="this.style.fontSize ='30px'" >Hover on this paragraph. it will change their font size to 30px </p>here, this keyword refers to the current element. In JavaScript, it is used to refer to the current object.
We will learn about this later.
For now, you don’t need to understand this. We will explain all these again in the JS events chapter.
Embed javascript using Internal method
JavaScript can be added anywhere in the script. Either in the <head> section or anywhere in the <body> section. Also, we can add the JS code in both the <head> and <body> sections.
In HTML page, JavaScript code is inserted using the <script> tag.
<script>
//javascript code goes here
</script>Earlier developers use the old style to insert the JavaScript using the type attribute like:
<script type = ” text/javascript ” > // JS Code Goes here </script>
But, Now, JavaScript is the default programming language for all modern web browsers. So we don’t need to add the type attribute.
In the <head> section
We can insert the JavaScript code inside the <head> section like this.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function myfunction() {
document.getElementById('heading').innerHTML = "Event in JavaScript";
}
</script>
</head>
<body>
<h1 id ="heading" onclick= "myfunction()">Event in JS</h1>
<p onclick="this.style.fontSize ='30px'" >Click on this paragraph</p>
</body>
</html>In the <body> section
We can also insert the JavaScript code at the beginning or at the end of the closing </body> tag.
Note that, all the javaScipt code must be written inside the <script> and </script>.
At the beginning of the <body> section
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal JS</title>
</head>
<body>
<script>
//JS code goes Here
</script>
<h1>Event in JS</h1>
<p onclick="this.style.fontSize ='30px'" >Click on this paragraph</p>
</body>
</html>At the bottom of </body> tag.
We can write the same code at the bottom. Make sure to write inside the closing body tag. Otherwise, JS code will not execute.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal JS</title>
</head>
<body>
<h1>Event in JS</h1>
<p onclick="this.style.fontSize ='30px'" >Click on this paragraph</p>
<script>
//JS code goes Here
</script>
</body>
</html>Inserting the JavaScript code at the bottom will increase the page load times. Also, improves the user experience. Because the execution (interpretation) of the JS code will slow down the page display.
Do you know? User don't prefer to visit the website again if the page load time more than 3 seconds.
However, developers will insert JS code depending on their needs. There is no restriction to insert JS code at the bottom of the body tag only.
Note that – All the above code is not pure javascript code so make sure to create an HTML page(.html) to implement these. Otherwise, it will not work!
How to Add External JavaScript Code?
We can also insert the external JavaScript. To add the external JavaScript code, we have to create a file name followed by the extension .js. Also, there is no need to write the <script> and </script> tag.
the filename should look like: myScript.js
External JavaScript file should contain the pure JS code. We can write the JS code like:
Now, we can use this external file in our webpage in the src attribute of the <script> tag.
<script src="./myScript.js"></script>Here, the address contains a relative url. ./myScript.js
We have put one dot(.) at the first to move the location at the root of the folder and then the file name followed by the forward slash.
We have created an HTML file and a JS file in the same folder. That’s why we use one dot at the starting of the relative URL.
Also, we can add the absolute URL like: https://fokatguru.com
<script src="https://fokatguru.com/myJs.js"></script>External JavaScript is very useful if the same code is to be used on the multi-page. Then create files and insert the JS file in each as you want.
Also, you can place the external JavaScript files in the head or in the body section.
That’s all about how to add JavaScript to Our HTML file. In the next chapter, we will learn about how to print data in JS.
Reminder
Hi Developers, We are working to cover every single concept in JavaScript with examples for quick and easy learning.
Kindly do a google search for:
This motivates us to add more technologies and cheat sheets.