JavaScript is one of the most popular interpreted, lightweight, and compiled programming languages. It is synchronous and single-threaded. The programs in JavaScript are called scripts which are executed as plain texts. We can write these scripts directly on our HTML page or use an external JavaScript file. JavaScript can execute in the browser, and also on the server, or actually on any device that has a special program called the JavaScript engine. JavaScript is used for server-side as well as in client-side developments.
There are 2 ways to use the javascript in the HTML file:
- Internal JavaScript: JavaScript can be added directly to the HTML file by writing the code inside the <script> tag . We can place the <script> tag either inside <head> or the <body> tag according to the need.
- External JavaScript: The other way is to write JavaScript code in another file having a .js extension and then link the file inside the <head> or <body> tag of the HTML file in which we want to add this code.
Example: This example describes the use of Internal Javascript.
HTML
<!DOCTYPE html> <html> <head> <title>Internal JS</title> </head> <body> <h2>neveropen</h2> <script> /*Internal Javascript*/ console.log("Hi Geeks, Welcome to GfG"); </script> </body> </html> |
Output :
Hi Geeks, Welcome to GfG
Example: This example describes the use of External Javascript.
HTML
<!DOCTYPE html> <html> <head> <title>External JS</title> </head> <body> <h2>neveropen</h2> <script src="GfG.js"></script> /* External Javascript */ </body> </html> |
External file: GfG.js
Javascript
console.log("Hi Geeks, Welcome to GfG"); |
Output :
Hi Geeks, Welcome to GfG
What is External JavaScript?
External JavaScript is when the JavaScript Code(script) is written in another file having an extension .js and then we link this file inside the <head> or<body> tag of our HTML file in which the code is to be added. The use of external JavaScript is more practical when the same code is to be used in many different web pages. Using an external script is easy , just put the name of the script file(our .js file) in the src (source) attribute of <script> tag. External JavaScript file can not contain <script> tags.
Syntax :
<script type="media_type" src="URL"> </script>
Attribute values:
- type: It is used to specify the MIME type of script and identify the content of the Tag. It has a default value which is “text/javascript”.
- src: It is used to specify the URL of an external JavaScript file.
- async: It is a boolean attribute. When present, it specifies that the script will be executed asynchronously when it is available.
- defer: It is a boolean attribute that is used to specify that script is executed when the page has finished parsing.
- integrity: It is used to give permission to the Browser to check the fetched script to make ensure the source code is never loaded.
- referrerpolicy: It is used to specify the reference information that will be sent to the server when fetching the script.
Multiple script files can also be added to one page using several <script> tags.
<script src="file1.js"> </script> <script src="file2.js"> >/script>
Example: This example describes the use of the External javascript files where a pointer hovers the specific text then the text alters to a different text.
HTML
<!DOCTYPE html> <html> <head> <title>External JavaScript</title> <style> h2 { box-sizing: border-box; width: 250px; height: 150px; background-color: green; color: white; margin: auto; font-size: 15px; font-family: sans-serif; text-align: center; padding: 20px; } </style> </head> <body> <h2 class="external">neveropen</h2> <script src="GfG.js"></script> </body> </html> |
JS Code:
GfG.js
let h2 = document.querySelector(".external"); h2.addEventListener("mouseenter", function (e) { h2.innerText = "Hi Geeks, Welcome to GfG"; }); |
Output: When the pointer has hovered on the element, the text inside the element (i.e neveropen) changes to “Hi Geeks, Welcome to GfG”.
Advantages of using Internal JS:
- Browser does not have to make an extra HTTP request for JavaScript code.
- It does not allow caching.
Disadvantages of Internal JS:
- The readability of code becomes poor.
- Maintenance of code becomes hard when there is a lot of code.
Advantages of using External JS:
- HTML and JavaScript files become more readable and easy to maintain.
- Page loads speed up due to Cached JavaScript files.
Disadvantages of External JS:
- Coders can easily download your code using the url of the script(.js) file.
- An extra HTTP request is made by the browser to get this JavaScript code.
