what is External Javascript ?This is 4th Post

by

Hello friends, in today’s post, we are starting you about JS(what is External Javascript) , what happens. How does the key work, so today you should tell about JavaScript.

External Javascript

You can also save the code of Javascript in an external file i.e. by creating an extension .js file for JavaScript, you can keep the code of JavaScript and link it in any file through script tag.

You understand this through the below example

function demoFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

External scripts in JavaScript are practical when the same Javascript code is to be used on different web pages, for that we keep JavaScript’s code in the .js file and the file in which to use it. So we link it in the src attribute in the <script> tag

That is, to use external scripts, the script file is named in the src attribute of the <script> tag.

We explain this to you through the example below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fullstackgyan</title>
</head>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">fullstackgyan website</p>

<button type="button" onclick="demoFunction()">click here</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="script.js"></script>
</body>
</html>

You can use JavaScript to reference an external script in both the <head> tag or <body> tag, but in any website, the html and css are first loaded only after that JavaScript is loaded.

The JavaScript script behaves as if it is located exactly where the <script> tag is located.

Javascript does not contain <script> tags in external scripts

External JavaScript in Advantage

What is the advantage of keeping the code of JavaScript in an external file, you are being given below about it?

1.With external JavaScript, the html code is separated

2. Makes html and javascript code easier to read and maintain

3. Cached JavaScript files speed up the loading of pages, so to add multiple script files to a page, the JavaScript file name is given in the src attribute of multiple <script> tags.

Its example is being given below

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

JS external references

You can make JSreferenced in an external script in three ways.

1. In this you will give its full url (a full web address)

2. In this you give the path of that file (ie like/js)

3. There will be no path in it

See More Topics–

In this, this example uses a full url in the script.js file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h2>External JavaScript</h2>
<p id="demo">this is the paragraph</p>

<button type="button" onclick="demoFunction()">Click Me</button>

<p>This example uses a full web URL to link to "script.js".</p>
<p>(myFunction is stored in "script.js")</p>

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

</body>
</html>

The path of the file is used only to link it to another example script.js

Its example is also being given below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h2>External JavaScript</h2>

<p id="demo">this is the paragraphp</p>

<button type="button" onclick="demoFunction()">click here</button>

<p>This example uses a file path to link to "script.js".</p>
<p>(myFunction is stored in "script.js")</p>

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

</body>
</html>

Below you have been given another example in which no path has been used to link to script.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">this is the paragraph here</p>

<button type="button" onclick="demoFunction()">click here</button>

<p>This example links to "script.js".</p>
<p>(myFunction is stored in "script.js")</p>

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

</body>
</html>
what is External Javascript

reference- https://javahindi.com/javascript-all-topics-in-hindi/

Request – If you found this post useful for you(), then do not limit it to yourself, do share it

Leave a Comment