A script is a little program that can enhance our web site interactivity. For example, a script can generate a pop-up alertbox message or display a download menu. We could write this script via JavaScript or VBScript.
We can write several smaller functions, called event handlers with any of the scripting languages and then trigger those with HTML attributes.
In the past few days, most web developers use JavaScript and related frames only, VBScript is not even supported by several major browsers.
We can store JavaScript code in a different file and then include it wherever it needs to be, or we can set features within the HTML document itself.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
To display Date and Time, Click me!</button>
<p id="demo"></p>
</body>
</html>
Output:
First JavaScript
The HTML <script> Tag
The <script> tag is used to define a script (JavaScript) on the client side.
The element <script> either contains scripts, or points to the external script file via src attribute.
JavaScript commonly uses image processing, form validation, and dynamic content changes. JavaScript often uses the document.getElementById() method to select an HTML element.
"Welcome JavaScript!" is written in a HTML element with id="demo "in this example:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>"Welcome JavaScript!" is written in this example in HTML with id="demo:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Welcome JavaScript!";
</script>
</body>
</html>
Output:
Use JavaScript to Change Text
"Welcome JavaScript!" is written in this example in HTML with id="demo:
External JavaScript
If we define a feature that is used for different HTML documents, it is better to keep this feature in a separate JavaScript file and then include this file in our HTML documents. A.js extension to a JavaScript file is included in HTML files with <script> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "https://ukacademe.com/Sources/js/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>
Output:
Internal Script
Our script code can be written straight into the HTML document. We generally hold script code in a document header using <script> tag, else we can place our source code inside <script> and anywhere on the document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.ukacademe.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>
Output:
Event Handlers
Event handlers are nothing but functions that can be called for any mouse or keyboard event. Within our event handler, we can define our business logic which can vary from one to one thousand line codes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.ukacademe.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>
Output:
Bring your mouse here to see an alert
The HTML <noscript> Tag
Users who have a script disabled or browser that does not support client scripting have the <noscript> tag provided alternative content: A browser without support for JavaScript will show the text written inside the noscript element.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Welcome JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
</body>
</html>
Output:
A browser without support for JavaScript will show the text written inside the noscript element.