Scribd Logo
Upload

Welcome to Scribd!

  • 53 views

    JS1

    Uploaded by

    meryroselicaros525
    JavaScript is a programming language used to build interactive effects into web pages. It can modify HTML content by changing element properties like innerHTML, and attributes like an image's src. Conditionals like if/else statements allow performing different actions depending on conditions. The setInterval() method calls a function repeatedly at specified time intervals. JavaScript can also access window properties like innerWidth and innerHeight to get information about the browser window size.

    Copyright:

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

    You might also like

    JS1

    Uploaded by

    meryroselicaros525
    53 views5 pages
    JavaScript is a programming language used to build interactive effects into web pages. It can modify HTML content by changing element properties like innerHTML, and attributes like an image's src. Conditionals like if/else statements allow performing different actions depending on conditions. The setInterval() method calls a function repeatedly at specified time intervals. JavaScript can also access window properties like innerWidth and innerHeight to get information about the browser window size.

    Original Description:

    Comprog

    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
    JavaScript is a programming language used to build interactive effects into web pages. It can modify HTML content by changing element properties like innerHTML, and attributes like an image's src. Conditionals like if/else statements allow performing different actions depending on conditions. The setInterval() method calls a function repeatedly at specified time intervals. JavaScript can also access window properties like innerWidth and innerHeight to get information about the browser window size.

    Copyright:

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

    JS1

    Uploaded by

    meryroselicaros525
    JavaScript is a programming language used to build interactive effects into web pages. It can modify HTML content by changing element properties like innerHTML, and attributes like an image's src. Conditionals like if/else statements allow performing different actions depending on conditions. The setInterval() method calls a function repeatedly at specified time intervals. JavaScript can also access window properties like innerWidth and innerHeight to get information about the browser window size.

    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 A Programming language for Web development

    I. Introduction
    JavaScript is the programming language of HTML and the Web. Programming makes computers
    do what you want them to do. JavaScript is easy to learn.

    JavaScript is one of the 3 languages all web developers must learn:


    1. HTML to define the content of web pages.
    2. CSS to specify the layout of web pages.
    3. JavaScript to program the behavior of web pages.

    II. JavaScript Can change HTML content


    This example uses the method(getElementById) to find an HTML element (with id="demo"), and
    changes the element’s content (innerHTML) to "Hello JavaScript":

    Example:

    sample1.html
    <html>
    <head>
    <script src=”functionality.js”></script>
    </head>
    <body>
    <h2>Change text using JavaScript.</h2>
    <div id="demo">JavaScript can change HTML content</div>
    <button type="button" id=”textChanger”>Click Me!</button>
    </body>
    </html>

    functionality.js
    window.onload = function() {
    var txt = document.getElementById(“demo”);
    var btn = document.getElementById(“textChanger”);

    btn.onclick = function() {
    txt.innerHTML =”Hello JavaScript”;
    }
    }
    JavaScript A Programming language for Web development

    III. JavaScript Can Change HTML Attribute Values


    This example changes the value of the src(source) attribute of an <img> tag:
    Example:
    sample2.html
    <html>
    <head>
    <script src="functionality.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"></link>
    </head>
    <body>
    <div id="div1">
    <h2>Change attribute value using JavaScript.</h2>
    <img id="bulb" src="..\JavaScriptFiles\src\pic_bulboff.gif"> </img><br><br>
    <button type="button" class="btn" id="lightOff">Off!</button>
    <button type="button" class="btn" id="lightOn">On!</button>
    </div>
    </body>
    </html>

    functionality.js
    window.onload = function() {
    var bulb = document.getElementById("bulb");
    var btnOff = document.getElementById("lightOff");
    var btnOn = document.getElementById("lightOn");

    btnOff.onclick = function() {
    bulb.src = "..\\JavaScriptFiles\\src\\pic_bulboff.gif";
    }

    btnOn.onclick = function() {
    bulb.src = "..\\JavaScriptFiles\\src\\pic_bulbon.gif";
    }
    }

    style.css
    #div1 {
    text-align:center;
    border:solid 2px;
    }

    #lightOff:hover {
    background-color:rgba(247, 33, 50, 0.849);
    }
    JavaScript A Programming language for Web development

    #lightOn:hover {
    background-color:rgb(159, 226, 34);
    }

    .btn {
    color:white;
    height:30px;
    width:90px;
    border-radius:5px;
    border:dotted;
    }

    IV. Conditions in JavaScript


    Condition statements are used to perform different actions based on different conditions.
    Example:
    sample3.html
    <html>
    <head>
    <script src="functionality.js"></script>
    </head>
    <body>
    <div id="firstDiv"></div>
    </body>
    </html>

    functionality.js
    window.onload = function() {
    var x = 5;
    if(x <= 5) {
    document.getElementById("firstDiv").innerHTML = "x is greater than or equal to 5";
    }
    }

    OR

    functionality.js
    window.onload = function() {
    var x = 5;
    if(x <= 5) {
    document.getElementById("firstDiv").innerHTML = "x is less than or equal to 5";
    }
    else {
    document.getElementById("firstDiv").innerHTML = "x is greater than 5";
    }
    }
    JavaScript A Programming language for Web development

    Try this!(30mins)
    Using the sample2.html and its corresponding resources, make the bulb turn on/off using only 1
    button.

    V. SetInterval in JavaScript
    The setInterval() method calls a function or evaluates an expression at specified intervals(milliseconds).
    Example:
    sample4.html
    <html>
    <head>
    <script src="functionality.js"></script>
    </head>
    <body>
    <p>A script on this page starts this clock:</p>
    <p id="demo"></p>
    </body>
    </html>

    functionality.js
    var myVar = setInterval(myTimer, 1000);

    function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
    }

    VI. Windows innerWidth and innerHeight


    The innerWidth property returns the width of a window's content area. The innerHeight property
    returns the height of a window's content area
    Example:
    sample5.html
    <html>
    <head>
    <script src="functionality.js"></script>
    </head>
    <body>
    <p>Click the button to display this frame's height and width.</p>
    <button type="button" id="btn">Try it</button>
    <p><strong>Note:</strong> The innerWidth and innerHeight properties.</p>
    <p id="demo"></p>
    </body>
    </html>
    JavaScript A Programming language for Web development

    functionality.js
    window.onload = function() {
    var btn = document.getElementById("btn");
    var w = window.innerWidth;
    var h = window.innerHeight;

    btn.onclick = function() {
    document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: "+ h;
    }
    }

    You might also like