• Related Post

    Saturday, January 20, 2018

    How To Use JavaScript, How To Use JavaScript in Head Section, How To Use JavaScript in Body Section


    Where To use JavaScript

    JavaScript code always use between <script> and </script> tags. Mostly we use script tag in <head> section but we can use JavaScript inside <body> also.



    JavaScript in <head>

    You can place as many scripts you want in your HTML web page. In this example i will teach you how to place JavaScript inside <head> section.

    Example:- 


    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "changed Paragraph on button click.";
    }
    </script>
    </head>

    <body>

    <p id="demo">Your Paragraph Start...</p>

    <button type="button" onclick="myFunction()">Click</button>

    </body>
    </html> 

    JavaScript in <body>

    As i told you. You can use JavaScript inside <body> also. When you place JavaScript inside <body> element that improve display speed of your web page.

    Example:- 


    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo">Paragraph Start...</p>

    <button type="button" onclick="myFunction()">Try it</button>

    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "changed Paragraph on button click.";
    }
    </script>

    </body>
    </html> 

    External JavaScript

    Sometimes we have to use same javascript code for many pages or many place then we can use external javascript. To use external java script save all javascript code in file by .js extention.

    Suppose you have saved a javascript code in file by name script.js. Then you can call that javascript funtion anywhere you want. Follow the Example.

    Example:- 

    <!DOCTYPE html>
    <html>
    <body>

    <h2>External JavaScript</h2>

    <p id="demo">Paragraph Start.</p>

    <button type="button" onclick="myFunction()">Try it</button>

    <script src="script.js"></script>

    </body>
    </html>


    No comments:

    Post a Comment