HTML JavaScript
A script is a program that can add interactivity to your website.
The script could be written using JavaScript or VBScript.
Note: Now-a-days, only JavaScript and associated frameworks are being used by most of the web developers, VBScript is not even supported by various major browsers.
This example shows how to use JavaScript:
Example
<script>
document.write("Hello World");
</script>
HTML JavaScript Functions
You can write various small functions, called event handlers using any of the scripting language and then you can trigger those functions using HTML attributes.
Example
<script>
function myFunction(){
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
Using JavaScript
You can keep JavaScript code in a separate file and then include it wherever it's needed, or you can define functionality inside HTML document itself.
You can use JavaScript in three ways in your HTML document:
- Inline JavaScript: Define script directly along-with the HTML elements using events attribute.
- Internal JavaScript: Define script in head or body section of the HTML document using
<script>tag. - External JavaScript: Define script in a separate .js file and then include that file in your HTML document using HTML
<script>tag with url(see src attribute).
Inline JavaScript
You can apply JavaScript directly to any HTML element using event attribute of the relevant tag.
This should be done only when you are interested to make a particular change in any HTML element only.
This example shows how to use inline JavaScript:
Example
<button onclick="document.getElementById('demo').innerHTML = 'Hello World';">Click me!</button>
Internal JavaScript
You can apply JavaScript to a single document only, then you can include those script in <head> or <body> section of the HTML document using <script> tag.
This example shows how to use internal JavaScript:
Example
<button onclick="myFunction()">Click me!</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
External JavaScript
An external JavaScript is used to define the script for many HTML pages.
If you need to use your scripts to various pages, then its always recommended to define a common JavaScript in a separate file. A JavaScript file will have extension as .js and it will be included in HTML files using <script> tag.
This example shows how to use external JavaScript:
Example
<button onclick="myFunction()">Click me!</button>
<script src="script.js"></script>
HTML <noscript> tag
<noscript> element is used to specify content that should be rendered on browsers that do not support scripting or that have scripting turned off.
The noscript element content will not be visible if scripting is enabled in the browsers. It is used to present different contents and guide the user on what he should be seeing.
The noscript element is not permitted in XML modes.
If you need to display a message to non-scripting user-agents, consider a “loading” message that gets removed by scripting.
Example
<script>
document.write("Hello World!")
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>
Note: Browsers that don’t support the noscript tag will render the content regardless of whether the javascript is supported.
Set Default Scripting Language
You can set default scripting language for all your script tags.
There may be a situation when you will include multiple script files.
This saves you from specifying the language every time you use a script tag within the page.
HTML: <meta http-equiv="Content-Script-Type" content="text/JavaScript">
XHTML: <meta http-equiv="Content-Script-Type" content="text/JavaScript" />
Note: That you can still override the default by specifying a language within the script tag.