A script is a small piece of program that can add interactivity to your website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu. This script could be written using JavaScript or VBScript.
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.
The HTML <script> Tag
- The <script> tag is used to define a client-side script (JavaScript).
- The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
- Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
- To select an HTML element, JavaScript very often uses the document.getElementById() method.
- JavaScript can change HTML content.
- JavaScript can change HTML style
- JavaScript can change HTML attributes.
Why JavaScript
Here we are not going to tell you actually what is JavaScript because it may make you confuse this time, we will understand it latter. Here we will learn use of JavaScript so let’s observe.
Now days if we are visiting on any website, maximum time we are getting some kind of popups like notification with asking some permission or they tell about use of cookies in website, how these popups are coming? These simply can be implement by JavaScript.
HTML JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script>
function Hello() {
alert (Hello, Your welcome!!!);
}
</script>
</head>
<body>
<input type="button" onclick= "Hello();" name="ok" value ="Click Me" />
</body>
</html>
Output
<script> document.getElementById("demo").innerHTML = "Hello JavaScript" </script>
JavaScript in External File
We can create JavaScript file with .js extension, and we can write whole JavaScript code within that file and then we can attach .js file to our HTML Page either in head section or just below to body closing tag. Below example shows that how we can link external .js file our HTML Page.
External File Example
<!DOCTYPE html>
<html>
<head>
<script src="../js/html_javascript_demo.js"></script>
</head>
<body>
<input type="button" onclick= "Hello();" name="ok" value ="Click Me" />
</body>
</html>
Output
You can write your script code directly into your HTML document. Usually we keep script code in header of the document using <script> tag, otherwise there is no restriction and you can put your source code anywhere in the document but inside <script> tag.
The <noscript> Element
You can also provide alternative info to the users whose browsers don't support scripts and for those users who have disabled script option their browsers. You can do this using the <noscript> tag.
<!DOCTYPE html>
<html>
<body>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>
HTML Script Tags
| Tags |
Description |
| <script> |
A Client-side Script |
| <noscript> |
An alternate content for users that do not support client-side scripts |
What we can do with JavaScript?
JavaScript is most flexible language in the world. We can do amazing things with JavaScript which makes our web-page more users friendly and more attractive. Basically JavaScript works on DOM- document object model, it will be a bit difficult for you to understand right now so we are just going to make you some understandable.
When web browser load any page from web server, it download all associated file and create a document in which it lists all thing which we are using to create HTML page like all tags, style etc. After creating this document browser use those information to render HTML Page in web browser. That document is called DOM and JavaScript works on that document and we can change anything without going to again server from DOM only.
Now from DOM we can change colour of Any Element and can apply any function or can call any event, which provides facilities to make our application more responsive, light waited, grate user experience and much more. We will learn all in JavaScript Tutorials.