JavaScript Functions & Events

Function is a block of JavaScript code, that can be executed when it is called. A function can be called when the event occurs i.e. click on button.

JavaScript Functions & Events

<head> or <body> in JavaScript:

The JavaScript  code or script can be placed in the body or head section of HTML page.

head in Js: The JavaScript function can be placed in the head Section of a HTML page and the function is called when the button is clicked:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph added.";
}
</script>
</head>
<body>
<h2>Welcome To JavaScript tutorial</h2>
<p id="darkweb">A hello Paragraph.</p>
<button type="button" onclick="myFunction()">Click me Here</button>

</body>
</html>

body in JavaScript:

In this example, in the <body> section of the HTML page, the JavaScript Function is placed and when we click on the button then the JavaScript function is called.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript hour of code body section</h2>

<p id="darkweb">A new text.</p>

<button type="button" onclick="myFunction()">Click me Here</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Text has beeen changed.";
}
</script>

</body>
</html>

External JavaScript:

In JavaScript the script can also be placed in the external files.

When one code is used for many different web pages then the External JavaScript is used and its Extension is .Js.

Syntax:


<script src=”mymailscript.js”></script>

Example:

<!DOCTYPE html>
<html>
<body>

<h2>An External the JavaScript</h2>

<p id="demo">New helloParagraph.</p>

<button type="button" onclick="myFunction()">Try for it</button>

<p>(myFunction is added in an external proprty called "myeScript.js")</p>

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

</body>
</html>

Advantages of External JavaScript:

  • Helps to read or maintain easily HTML & JavaScript.
  • It Separates the HTML & JavaScript code.
  • Speed up the Page loading

If we want multiple or more than one external JavaScript files than we use multiple script tags.

Example:  

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

External Refrences:

The External Script can also be referenced by URL of any web page or website:

Syntax:

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

Example:

<!DOCTYPE html>
<html>
<body>

<h1>External hello JavaScript</h1>

<p id="demo">A hello Paragraph.</p>

<button type="button" onclick="myFunction()">Try for it</button>

<p>(myFunction is stored in an external stuff called "myeScript.js")</p>

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

</body>
</html>

Hope the above javascript functions will help you to undersand how to call javascript and How it works, Join us on social media apps to get more updated news on more tutorial.

Stay in touch. Ask Questions.
Lean on us for help, strategies and expertise.

Leave a Reply

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