How to insert JavaScript code in HTML code?

0 votes
29 views
Ravi Vishwakarma asked 13 days ago in Web Application by Ravi Vishwakarma

how to insert javascript code in html page.

1 Answer

1 votes
Ethan Karla answered 12 days ago by Ethan Karla
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 : 
How to insert JavaScript code in HTML code?