In HTML, JavaScript code is inserted between script tag (<script> and </script>). We can placed any number of JavaScript file in HTML. Script can be placed in the <body> and <head> tags of a HTML page. JavaScript code is written in two way.
1. Internal
2. External
Internal way
In this way write the script code in script tag but script tag placed in head or body tags. If we placed script code in head tag then first of all load the JS file then load the body tag data and if placed in body tag then load the body tag, after loading the body tag then load the script code.
<script>
//variable
//function
//objects
//class
//properties
//message box
</script>
Example:
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title>JS Demo</title>
</head>
<body>
<p>JS demo</p>
<p id='id1'></p>
<script>
document.getElementById('id1').innerHTML = 'this is body tag occur';
</script>
</body>
</html>
External way
In this way write the script code in a .js file (JavaScript Extension) but doesn’t use the script tag.
First-js-file.js (creating this file)
//variable
//function
//objects
//class
//properties
//message box
Example:
JavaScript.js
function changeColor() {
var name = window.document.getElementById('color');
alert('Your selected color is : ' + name.value);
name.style.backgroundColor = name.value;
window.document.body.style.backgroundColor = name.value;
}
htmlDemo.html
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title>JS Demo</title>
<style type='text/css'>
* {
margin:10px;
padding:0px;
}
select {
width:100px;
}
</style>
<script src='JavaScript.js' type='text/javascript'></script>
</head>
<body>
<span>Select Color name : </span>
<select name='color' id='color' >
<option value='red'>Red</option>
<option value='yellow'>Yellow</option>
<option value='white'>White</option>
<option value='pink'>Pink</option>
<option value='green'>Green</option>
</select>
<button type='button' onclick='changeColor()' value=' Submit '> Submit </button>
</body>
</html>
Output :
