Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    JavaScript Placement in HTML File

    Uploaded by

    101tutioncenter

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    JavaScript Placement in HTML File

    Uploaded by

    101tutioncenter
    2 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2 views5 pages

    JavaScript Placement in HTML File

    Uploaded by

    101tutioncenter

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    JavaScript Placement in HTML File

    There is flexibility to place JavaScript code anywhere in an HTML document.


    However, the most preferred ways to include JavaScript in an HTML file are
    as follows −

     Script in <head>...</head> section.


     Script in <body>...</body> section.
     Script in <body>...</body> and <head>...</head> sections.
     Script in an external file and then include in <head>...</head>
    section.

    You can follow the syntax below to add JavaScript code using the script tag.

    <script>
    // JavaScript code
    </script>

    In the following section, we will see how we can place JavaScript in an HTML
    file in different ways.

    Advertisement

    JavaScript in <head>...</head> section


    If you want to have a script run on some event, such as when a user clicks
    somewhere,then you will place that script in the head as follows −

    Open Compiler
    <html>
    <head>
    <script type = "text/javascript">
    function sayHello() {
    alert("Hello World")
    }
    </script>
    </head>

    <body>
    <input type = "button" onclick = "sayHello()" value = "Say Hello" />
    </body>
    </html>

    JavaScript in <body>...</body> section


    If you need a script to run as the page loads so that the script generates
    content in the page, then the script goes in the <body> portion of the
    document. In this case, youwould not have any function defined using
    JavaScript. Take a look at the following code.

    Open Compiler
    <html>
    <head>
    </head>
    <body>
    <script type = "text/javascript">
    document.write("Hello World")
    </script>
    <p>This is web page body </p>
    </body>
    </html>
    Advertisement

    JavaScript in <body> and <head> Sections


    You can put your JavaScript code in <head> and <body> sections altogether
    as follows −

    Open Compiler
    <html>
    <head>
    <script type = "text/javascript">
    function sayHello() {
    alert("Hello World")
    }
    </script>
    </head>

    <body>
    <script type = "text/javascript">
    document.write("Hello World")
    </script>
    <input type = "button" onclick = "sayHello()" value = "Say Hello" />
    </body>
    </html>

    JavaScript in External File


    As you begin to work more extensively with JavaScript, you will likely find
    cases where you are reusing identical JavaScript code on multiple pages of a
    site.

    You are not restricted to be maintaining identical code in multiple HTML files.
    The script tag provides a mechanism to allow you to store JavaScript in an
    external file and then include it in your HTML files.

    To use JavaScript from an external file source, you need to write all your
    JavaScript source code in a simple text file with the extension ".js" and then
    include that file as shown below.

    For example, you can keep the following content in the filename.js file, and
    then you can use the sayHello function in your HTML file after including
    the filename.js file.

    filename.js

    function sayHello() {
    alert("Hello World")
    }
    External JavaScript file doesn’t contain the <script> tag.

    Here is an example to show how you can include an external JavaScript file
    in your HTML code using the script tag and its src attribute.

    You may include the external script reference within the <head> or <body>
    tag.

    Open Compiler
    <html>
    <head>
    <script type = "text/javascript" src = "filename.js" ></script>
    </head>
    <body>
    ...
    </body>
    </html>

    Also, you can create different modules to maintain code better and import
    each module in another JavaScript file or import all modules in a single HTML
    file.

    You can follow the below code to add multiple scripts into a single HTML file.

    <head>
    <script src = "filename1.js" ></script>
    <script src = "filename2.js" ></script>
    <script src = "filename3.js" ></script>
    </head>

    External References
    You can add an external JavaScript file in the HTML using the below 3 ways.

    1. Using the full file path


    When you need to add any hosted JavaScript file or a file that doesn’t exists
    in the same project into the HTML, you should use the full file path.

    For example,

    <head>
    <script src = "C://javascript/filename.js" ></script>
    </head>

    2. Using the relative file path


    If you are working on the project and JavaScript and HTML both files are in
    different folders, you can use the relative file path.

    <head>
    <script src = "javascript\filename.js" ></script>
    </head>

    3. Using the filename only


    If HTML and JavaScript both files are in the same folder, you can use the file
    name.

    <head>
    <script src = "filename.js" ></script>
    </head>
    Advertisement

    Advantages of using the <script> tag


    Here are the advantages of using the <script> tag to add JavaScript in the
    HTML.
    Ease of Integration
    The <script> tag allows developers to integrate JavaScript into the HTML file
    easily. Adding JavaScript to the HTML file allows you to add behavior and
    interactivity to the web page.

    Immediate Execution
    Whenever the browser finds a <script> tag on the web page, it immediately
    executes the JavaScript code defined inside that. It enables website visitors
    to interact with the web pages and get real-time updates immediately.

    Inline and External scripts


    You can use the <script> tag to add the inline or external script into the
    HTML file. If you want to load JavaScript before the HTML of a web page, you
    can add the <script. Tag in the <head> tag. Otherwise, you can add the
    <script> tag in the <body> tag.

    External Libraries and Frameworks integration


    The <script> tag enables you to add external libraries and frameworks to the
    HTML web page.

    For example, in the below code, we have added JQuery to the web page
    using its CDN.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>

    Here, the "src" attribute contains the hosted link to the library.

    Global Scope Access


    Whatever code you define in the script tag has access to the global scope of
    the web page. You can access the global variables, functions, etc., anywhere
    in the code.

    You might also like