Scribd Logo
Upload

Welcome to Scribd!

  • 23 views

    HTML JavaScript

    Uploaded by

    VASANTHAKUMAR. A CSE 2020
    JavaScript can make HTML pages more dynamic and interactive by changing HTML content, styles, and attributes directly in the page. The <script> tag is used to define JavaScript code that can select HTML elements using methods like getElementById and then modify the element's innerHTML, style properties like font size and color, or attributes like an image's source. The <noscript> tag provides alternative content for users that have disabled scripts in their browser.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    HTML JavaScript

    Uploaded by

    VASANTHAKUMAR. A CSE 2020
    23 views5 pages
    JavaScript can make HTML pages more dynamic and interactive by changing HTML content, styles, and attributes directly in the page. The <script> tag is used to define JavaScript code that can select HTML elements using methods like getElementById and then modify the element's innerHTML, style properties like font size and color, or attributes like an image's source. The <noscript> tag provides alternative content for users that have disabled scripts in their browser.

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    JavaScript can make HTML pages more dynamic and interactive by changing HTML content, styles, and attributes directly in the page. The <script> tag is used to define JavaScript code that can select HTML elements using methods like getElementById and then modify the element's innerHTML, style properties like font size and color, or attributes like an image's source. The <noscript> tag provides alternative content for users that have disabled scripts in their browser.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    23 views5 pages

    HTML JavaScript

    Uploaded by

    VASANTHAKUMAR. A CSE 2020
    JavaScript can make HTML pages more dynamic and interactive by changing HTML content, styles, and attributes directly in the page. The <script> tag is used to define JavaScript code that can select HTML elements using methods like getElementById and then modify the element's innerHTML, style properties like font size and color, or attributes like an image's source. The <noscript> tag provides alternative content for users that have disabled scripts in their browser.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 5

    HTML JavaScript

     JavaScript makes HTML pages more dynamic and interactive.

    Example
    <!DOCTYPE html>
    <html>
    <body>
    <h1>My First JavaScript</h1>
    <button type="button"
    onclick="document.getElementById('demo').innerHTML = Date()">
    Click me to display Date and Time.</button>
    <p id="demo"></p>
    </body>
    </html>
    The HTML <script> Tag

     The <script> tag is used to define a client-side script (JavaScript).


     The <script> element either contains scripting statements, or it
    points to an external script file through the src attribute.
     Common uses for JavaScript are image manipulation, form
    validation, and dynamic changes of content.
     To select an HTML element, JavaScript very often use the
    document.getElementById(id) method.

    This JavaScript example writes "Hello JavaScript!" into an HTML


    element with id="demo":
    Example
    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    </body>
    </html>
    JavaScript can change HTML content
    <!DOCTYPE html>
    <html>
    <body>
    <h1>My First JavaScript</h1>
    <p>JavaScript can change the content of an HTML element:</p>
    <button type="button" onclick="myFunction()">Click Me!</button>
    <p id="demo">This is a demonstration.</p>
    <script>
    function myFunction()
    {
    document.getElementById("demo").innerHTML = "Hello
    JavaScript!";
    }
    </script>
    </body>
    </html>
    JavaScript can change HTML styles
    <!DOCTYPE html>
    <html>
    <body>
    <h1>My First JavaScript</h1>
    <p id="demo">JavaScript can change the style of an HTML
    element.</p>
    <script>
    function myFunction() {
    document.getElementById("demo").style.fontSize = "25px";
    document.getElementById("demo").style.color = "red";
    document.getElementById("demo").style.backgroundColor =
    "yellow";
    }
    </script>
    <button type="button" onclick="myFunction()">Click Me!</button>
    </body>
    </html>
    JavaScript can change HTML attributes
    <!DOCTYPE html>
    <html>
    <body>
    <script>
    function light(sw) {
    var pic;
    if (sw == 0) {
    pic = "bulb_off.jpg"
    } else {
    pic = "bulb_on.jpg"
    }
    document.getElementById('myImage').src = pic;
    }
    </script>
    <img id="myImage" src="bulb_off.jpg" width="100" height="180">
    <p>
    <button type="button" onclick="light(1)">Light On</button>
    <button type="button" onclick="light(0)">Light Off</button>
    </p>
    </body>
    </html>
    The HTML <noscript> Tag

     The <noscript> tag is used to provide an alternate content for


    users that have disabled scripts in their browser or have a browser
    that doesn't support client-side scripts:

    Example
    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>
    <p>A browser without support for JavaScript will show the text written
    inside the noscript element.</p>
    </body>
    </html>

    You might also like