HtmlCssMonk

JavaScript : Where to Write it | Learn Basic JavaScript

laptop, desk, workspace

DESCRIPTION

JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script> HTML tags in a web page.

There are various ways to write Script statements

  1. Internal JavaScript
  2. External JavaScript

Internal JavaScript

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.

1. JavaScript in Head tag

Below , a JavaScript function is placed in the Head tag . The function is invoked when a button is clicked.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("monk").innerHTML = "HtmlCssMonk";
}
</script>
</head>
<body>

<h1>Script in Head tag</h1>
<p id="monk">I am</p>
<button type="button" onclick="myFunction()">Click Me to change text</button>

</body>
</html>

This Code will produce the following result on your webpage –

After Clicking The Button –


2. JavaScript in Body tag

Below , a JavaScript function is placed in the Body tag . The function is invoked when a button is clicked.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Script in Head tag</h1>
<p id="monk">I am</p>
<button type="button" onclick="myFunction()">Click Me to change text</button>

<script>
  function myFunction() {
    document.getElementById("monk").innerHTML = "HtmlCssMonk";
  }
</script>

</body>
</html>

This Code will produce the following result on your webpage –

After Clicking The Button –


External JavaScript

As you begin to work more extensively with JavaScript, you will be likely to find that there are cases where you are reusing identical JavaScript code on multiple pages of a site.

You are not restricted to be maintaining identical code in multiple HTML files. The script tag provides a mechanism to allow you to store JavaScript in an external file and then include it into your HTML files.

  • External scripts are practical when the same code is used in many different web pages.
  • JavaScript files have the file extension .js.
  • To use an external script, put the name of the script file in the src (source) attribute of a <script> tag.

Example –

<script src="myScript.js"></script>

External scripts cannot contain <script> tags.


External References

External scripts can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a script:

<script src="https://www.w3schools.com/js/myScript1.js"></script>

Advantages of External JavaScript

Placing scripts in external files has some advantages:

  • It helps in the reusability of code in more than one HTML file.
  • It allows easy code readability.
  • It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.
  • It enables both web designers and coders to work with html and js files parallelly and separately, i.e., without facing any code conflictions.
  • The length of the code reduces as only we need to specify the location of the js file.

Disadvantages of External JavaScript

  • The stealer may download the coder’s code using the url of the js file.
  • If two js files are dependent on one another, then a failure in one file may affect the execution of the other dependent file.
  • The web browser needs to make an additional http request to get the js code.
  • A tiny to a large change in the js code may cause unexpected results in all its dependent files.
  • We need to check each file that depends on the commonly created external javascript file.
  • If it is a few lines of code, then better to implement the internal javascript code.

Next topic – Basics of JS

Previous topic – Introduction to JS


Leave a Comment

Your email address will not be published. Required fields are marked *