HTML is static, it means elements default behavior cannot be changed. so to change its default behavior and to manipulate its properties and content JavaScript is used. to add javascript, <script> tag is used.
javascript can be added to an html page in three ways.
- inside head tag
- javascript file
- inline javascript
inside head tag
JavaScript will be applied to the current webpage only. For small script it is alright but this approach is not good for large scripts, because code maintenance, error finding and debugging is difficult and time consuming too, and also readability decreases. Code duplicacy because same code can be used in different webpages.
<html>
<head>
<script>
alert("Hello JavaScript!");
</script>
</head>
<body>
</body>
</html>External javascript file
A file with .js extension is javascript file, it can be used with multiple webpages of a website. Following are the benefits of this approach:
- Easy Code maintainance
- Error Finding and debugging becomes easier.
- Less time consuming.
- Readability increases.
- No code duplicacy or redundancy.
<html>
<head>
<script src="filename.js"></script>
</head>
<body>
</body>
</html>inline javascript
javascript events or code can be used or applied to HTML elements directly.
<html>
<head>
</head>
<body>
<button onclick="alert('Hello World from inline javascript')">Click me</button>
</body>
</html>