JS Where To
The Tag
JavaScript code is entered into HTML in between the <script> and </script> elements.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
A type attribute might be used in older JavaScript examples, such as <script type=”text/javascript”>.
There is no need for the type attribute. The default programming language in HTML is called JavaScript.
JavaScript Functions and Events
A block of JavaScript code that can be run when “called” for is known as a JavaScript function.
A function could be mentioned for instance, whenever an event takes place, such as a button click by the user.
Later chapters will cover functions and events in much greater detail.
JavaScript in or
An HTML document can contain any number of scripts.
Scripts can be inserted into an HTML page’s <head>, <body>, or both sections.
JavaScript in
In this instance, an HTML page’s <head> element contains a JavaScript function.
When a button is clicked, the function is triggered, or called:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
JavaScript in
In this instance, an HTML page’s <body> element contains a JavaScript function.
When a button is clicked, the function is triggered, or called:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
External JavaScript
External file: myScript.js
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
In situations where the same code is utilized across multiple web pages, external scripts become useful.
The.js file extension is used for JavaScript files.
Put the name of the external script in the src (source) property of a <script> element in order to use it:
Example
<script src="myScript.js" defer></script>
You have the option to reference an external script inside the <head> or <body> sections.
The script will operate as though it were situated exactly at the location of the <script> element.
<script> tags cannot be present in external scripts.
External JavaScript Advantages
There are a few benefits to placing scripts in external files:
(1).It keeps HTML and code apart.
(2).It facilitates reading and maintaining HTML and JavaScript.
(3).Page loads can be sped up with cached JavaScript files.
To include multiple script files on a single page, using multiple script tags:
Example
<script src="myScript1.js" defer></script>
<script src="myScript2.js" defer></script>
External References
There are three ways to reference an external script:
- Using the complete URL (web address)
- Using a file path (such as /js/),
- Without a way
This example links to myScript.js using the complete URL:
Example
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/js/myScript.js?ver=1742844262" defer></script>
This example uses a file path to link to myScript.js:
Example
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/js/myScript.js?ver=1742844262" defer></script>
This example uses no path to link to myScript.js:
Example
<script src="myScript.js" defer></script>
