1.

Should I always put my JavaScript in the head tag of my HTML file?

Answer»

Use CSS and jQuery to replace the DEFAULT JavaScript alert pop up. Let us first see how to create an alert in JavaScript and how the default looks:

<!DOCTYPE html> <html> <body> <h1>Alerts in JavaScript</h1> <button onclick="show()">Display</button> <script> function show() {   alert("This is an alert box!"); } </script> </body> </html>

The output displays a button, which is to be clicked to generate an alert: 

On clicking the above button, the following alert generates: 


Let us now see how we can create a fancy alert box using JavaScript library jQuery and CSS: 

<!DOCTYPE html> <html>    <HEAD>       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">       </script>       <script>          function myAlertBox(msg, myYes) {             var box = $("#test");             box.find(".msg").text(msg);             box.find(".yes").unbind().click(function() {                box.hide();             });             box.find(".yes").click(myYes);             box.show();          }       </script>       <style>          #test {             display: none;             background-color: BLUE;             border: 2px solid #aaa;             color: white;             position: fixed;             width: 250px;             height: 80px;             left: 50%;             margin-left: -80px;             margin-top: 50px;             padding: 10px 10px 10px;             box-sizing: border-box;             text-align: center;          }          #test button {             background-color: white;             display: inline-block;             border-radius: 5px;             border: 1px solid #aaa;             padding: 5px;             text-align: center;             width: 80px;             CURSOR: pointer;          }          #confirm .msg {             text-align: left;          }       </style>    </head>    <body>       <DIV id = "test">          <div class = "message">Welcome to the website!</div>          <button class  ="yes">OK</button>       </div>       <h2>Fancy Alert Box</h2>       <input type = "button" value = "Display" onclick = "myAlertBox();" />    </body> </html>

Under <style> above, we added the CSS code.

The output displays a button which is to be clicked to generate an alert:

On clicking the above “Display” button, the following alert is visible which we styled. The background color is not blue. The button color and style is also changed: 


Discussion

No Comment Found

Related InterviewSolutions