How does inline JavaScript work with HTML ?

Inline JavaScript can be achieved by using Script tag inside the body of the HTML, and instead of specifying the source(src=”…”) of the JavaScript file in the Script tag, we have to write all the JavaScript code inside the Script tag.

Syntax:

<script>
    // JavaScript Code
</script>

Example:

<!DOCTYPE html>  
<html>  
    
<head>  
    <title>Inline JavaScript</title>  
    <meta charset="utf-8">  
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" 
          href=  
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
</head>  
    
<body>  
    <div class="container">  
        <h1 style="text-align:center;color:green;">  
          GeeksforGeeks  
      </h1>  
        <form>  
            <div class="form-group">  
                <label for="">Enter Your Name:</label>  
                <input id="name"
                       class="form-control" 
                       type="text" 
                       placeholder="Input Your Name Here">  
            </div>  
            <div class="form-group">  
                <button id="btn-alert"
                        class="btn btn-success btn-lg float-right" 
                        type="submit">  
                     Submit   
                </button>  
            </div>  
        </form>  
    </div>  
    <script> 
        var user_name = document.getElementById("name"); 
        document.getElementById("btn-alert").addEventListener("click", function(){ 
            var value=user_name.value.trim(); 
            if(!value) 
                alert("Name Cannot be empty!"); 
            else 
                alert("Hello, " + value + "!\nGreetings From GeeksforGeeks."); 
        }); 
    </script> 
</body>  
   
</html>  

Output:

inline_JS_output

As soon as we enter a name and press the submit button, the JavaScript code inside the script tag will be triggered and we will get a pop-up message with our name and greeting text.

Inline_JS_Ouput_Popup

For deeper knowledge, you can visit What is the inline function in JavaScript ?

Note: Using Inline JavaScript is a bad practice and it is not recommended. It can be used for demonstration purposes so that the demonstrator doesn’t have to deal with 2 separate files at a time. It is recommended to write JavaScript code in a separate .js file and then link the same using src attribute in the script tag.

My Personal Notes

Recommended Posts: