Where to use JavaScript, Internal JavaScript, External JavaScript

admin admin Jun 30, 2020 2225 1

Where to use JavaScript, Internal JavaScript, External JavaScript

Where to put JavaScript..?

JavaScript can be placed between <head> or <body> or both tags in HTML pages.

Enter the JavaScript code in the <script> tag.

If you want to use JavaScript code in HTML, you must write the JavaScript code between the <script> and </script> tags.

Example:

  1.     <script>
  2.         document.getElementById("test").innerHTML = "My First JavaScript";
  3.     </script>

 

JavaScript in <head> or <body>

 

You can write / put as many JavaScript code as you want in the HTML document.

JavaScript can be placed in HTML <body> or <head> or both.

yes The best practice is to keep all the code in one place.

<head> Element JavaScript

In this example, the JavaScript function is placed in the <head> section of the HTML page.

enlightenedIf you click the button, the function will respond to your call 

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.       <script>
  5.         function myFunc() {
  6.             document.getElementById("test").innerHTML = "The paragraph has changed ";
  7.         }
  8.       </script>
  9.   </head>
  10.   <body>
  11.     <h1>The head section is written in JavaScript code</h1>
  12.     <p id="test">General paragraph</p>
  13.     <button type="button" onclick="myFunc()">Let's try</button>
  14.   </body>
  15. </html>

 

Output:

 

JavaScript in <body>

In this example the JavaScript function is placed in the <body> element of the HTML page.

If you click the button, the function will respond to your call enlightenedenlightened

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.   </head>
  5.   <body>
  6.     <h1>The bodysection is written in JavaScript code</h1>
  7.     <p id="test">General paragraph</p>
  8.     <button type="button" onclick="myFunc()">Let's try</button>
  9.     <script>
  10.       function myFunc() {
  11.           document.getElementById("test").innerHTML = "The paragraph has changed ";
  12.       }
  13.     </script>
  14.       
  15.   </body>
  16. </html>

 

Output:

enlightenedIt is best to keep JavaScript at the bottom of the <body> element.
This makes your page load faster. This is because the JavaScript compiler can slow down your page.

 

External JavaScript:

JavaScript key can be placed in an external file

 

script.js

 

  1.       function myFunc() {
  2.           document.getElementById("test").innerHTML = "The paragraph has changed ";
  3.       }

 

External JavaScript must be used when the same type of script code needs to be used on multiple web pages.

The file extension of the JavaScript file is .js.

To use external JavaScript, place the JavaScript file in the src attribute of the <script> tag:

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.   </head>
  5.   <body>
  6.     <h1>This is External JavaScript</h1>
  7.     <p id="test">General paragraph</p>
  8.     <button type="button" onclick="myFunc()">Let's try</button>
  9.     <script src="Script.js"></script>
  10.   </body>
  11. </html>

Output:

 

You can place external JavaScript references / files in <head> or <body> of your choice.

Reference codes behave as if they were placed in a <script> tag.yes

enlightenedThe <script> tag cannot be used in external scripts.

 

Advantages of External JavaScript:

There are some special benefits to placing JavaScript in an external file:

                  yes It separates HTML and JavaScript code.

                 yes HTML and JavaScript code are more readable and can be easily maintained.

                 yes Cached JavaScript file speeds up page loading.

 

 

External Js, internal javascript, internal js, javascript installations, js installations, js basic, javascript basic, External javascript 

Thank You.......

Tags: