Dom2.html

<!DOCTYPE html>
<html>

<body>
    <script defer src='Dom2.js'></script>
    <div id='container'
        style="height: 300px;width: 400px; border: 2px solid black; background: black; margin-top: 30px;">
    </div>

    <input oninput="changeHandler(event)" placeholder="Enter Name" id='color' />
    <button onclick="changeColor(event)">Change Color</button>

</body>


</html>

<!-- Async  -->
<!-- it is independent to another script -->
<!--  If you use async inside the script tag , than script will not block html parser to build dom , script is download and execurted in the background-->
<!--  if you put the two script with async tag than document orders does not matter the script which downloaded first in  executed firsrt and second will executed after that 
 -->
<!-- Defer -->
<!--  If you use defer inside the script tag , than script will not block html parser to build dom , script is download and execurted in the background-->
<!--  if you put the two script with defer tag than document orders matter the script which comes first in documnet executed firsrt and second will executed adfter that 
 -->