HTML JavaScript

    JavaScript is a scripting language that can make webpages more interactive and dynamic. However, it has Java in its name but has nothing to do with Java. It is also referred to as a programming language because it contains mostly all the concepts of High-Level programming language. Using JavaScript, we can create a popup, alert messages, dropdown menus and many more other interactive functionalities. JavaScript considered as one of the most popular programming languages. It is mostly used for front end development but with the introduction of node.js JavaScript now also used at server side.

    HTML <script> element or Internal JavaScript

    In HTML we have a <script> tag that specify the JavaScript code for specific HTML document. JavaScript is a completely different language, so it follows some syntax and rules. Generally <script> define inside the <head> tag, but it can be put anywhere in the HTML document according to the page requirement.

    Example

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>Internal JavaScript</title>
          
          <script type = "text/JavaScript">
             function say_hello() {
                alert("Hello TechGeekBuzz");
             }
          </script>
       </head>
    
       <body>
           <button onclick="say_hello();"> Click Here </button>
       </body>
    
    </html>

    External JavaScript or src attribute

    If you want to define the same JavaScript functionality for various HTML documents, then it would be a great practice to define a separate JavaScript file and import it into the document. <script> tag has a src attribute that specifies the JavaScript file that needs to be imported in the HTML document.

    Example Create a separate file with .js extension. script.js

    function say_hello() 
    { 
       alert("Hello TechGeekBuzz"); 
    }

    HTML Document

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>Extarnal JavaScript</title>
          <script src = "script.js" type = "text/javascript"/></script>
       </head>
    
       <body>
          <button onclick="say_hello();"> Click Here </button>
        </body>
    
    </html>

    JavaScript: Change the content and style of HTML element

    In JavaScript, we have some builtin functions which are known as event and event handlers that can manipulate the element content and style. Change Element Content.

    Example

    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>JavaScript</title> 
    
    <script type = "text/JavaScript"> 
         function change_content() 
         { 
         document.getElementById("change").innerHTML = "Hello TechGeekbuzz!"; 
         } 
    </script> 
    </head> 
    
    <body>
        <p id ="change">Hello TGB!!</p>
        <button onclick="change_content();"> Click Here </button> 
    </body> 
    
    </html>
    Change Element style Example
    <!DOCTYPE html>
    <html>
    
       <head>
          <title>JavaScript</title>
          
          <script type = "text/JavaScript">
             function change_style() {
                 document.getElementById("change").style.color = "red";
               
             }
          </script>
       </head>
    
       <body>
         <p id ="change">Hello TGB!!</p>   
         <button onclick="change_style();"> Click Here </button>    
    </body>
    </html>

    Summary

    • JavaScript is a programming language.
    • The code of javascript must be mentioned inside the <script> element.
    • To import an external JavaScript file in the document, we need to specify the file name using the src attribute.
    • JavaScript can select the HTML element and manipulate its content.
    • JavaScript can also alter the styling of an element.

    People are also reading: