Scribd Logo
Upload

Welcome to Scribd!

  • Java Script Loops

    Uploaded by

    she
    9 views6 pages
    The document discusses several JavaScript concepts including loops, switch statements, variables, functions, events, and GET/POST requests. It provides code examples to output text using a for loop, display the day of the week using a switch statement, add variables and output their sum, define and call functions to handle events like clicks and mouse movement, and make an AJAX GET request to a PHP file to return suggestions.

    Original Description:

    fdf for the char

    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
    The document discusses several JavaScript concepts including loops, switch statements, variables, functions, events, and GET/POST requests. It provides code examples to output text using a for loop, display the day of the week using a switch statement, add variables and output their sum, define and call functions to handle events like clicks and mouse movement, and make an AJAX GET request to a PHP file to return suggestions.

    Copyright:

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

    Java Script Loops

    Uploaded by

    she
    The document discusses several JavaScript concepts including loops, switch statements, variables, functions, events, and GET/POST requests. It provides code examples to output text using a for loop, display the day of the week using a switch statement, add variables and output their sum, define and call functions to handle events like clicks and mouse movement, and make an AJAX GET request to a PHP file to return suggestions.

    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 6

    JAVA SCRIPT LOOPS

    <!DOCTYPE html>
    <html>
    <body>

    <h2>JavaScript Loops</h2>

    <p id="demo"></p>

    <script>
    var text = "";
    var i;
    for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
    </script>

    </body>
    </html>
    Var I’;

    RESULT :

    JavaScript Loops
    The number is 0
    The number is 1
    The number is 2
    The number is 3
    The number is 4
    <!DOCTYPE html>
    <html>
    <body>

    <p id="demo"></p>

    <script>
    var day;
    switch (new Date().getDay()) {
    case 0:
    day = "Sunday";
    break;
    case 1:
    day = "Monday";
    break;
    case 2:
    day = "Tuesday";
    break;
    case 3:
    day = "Wednesday";
    break;
    case 4:
    day = "Thursday";
    break;
    case 5:
    day = "Friday";
    break;
    case 6:
    day = "Saturday";
    }
    document.getElementById("demo").innerHTML = "Today is " + day;
    </script>

    </body>
    </html>

    RESULT:
    Today is Sunday

    <!DOCTYPE html>
    <html>
    <body>

    <h2>JavaScript Alert</h2>

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

    <script>
    function myFunction() {
    alert("I am an alert box!");
    }
    </script>

    </body>
    </html>

    RESULT

    JavaScript Alert
    Try it  BUTTON
    JAVASCRIPT VARIABLES

    <!DOCTYPE html>
    <html>
    <body>

    <h2>JavaScript Variables</h2>

    <p>In this example, x, y, and z are variables.</p>

    <p id="demo"></p>

    <script>
    var x = 5;
    var y = 6;
    var z = x + y;
    document.getElementById("demo").innerHTML =
    "The value of z is: " + z;
    </script>

    </body>
    </html>

    RESULT:

    In this example, x, y, and z are variables.

    The value of z is: 11

    5 EVENT HANDLER

    <!DOCTYPE html>
    <html>
    <body>

    <button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

    <p id="demo"></p>

    </body>
    </html>

    2.
    <!DOCTYPE html>
    <html>
    <body>

    <button onclick="this.innerHTML=Date()">The time is?</button>

    </body>
    </html>
    3.
    <!DOCTYPE html>
    <html>
    <body>

    <p>Click the button to display the date.</p>

    <button onclick="displayDate()">The time is?</button>

    <script>
    function displayDate() {
    document.getElementById("demo").innerHTML = Date();
    }
    </script>

    <p id="demo"></p>

    </body>
    </html>

    MOUSE EVENTS

    <!DOCTYPE html>
    <html>
    <body>

    <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>

    </body>
    </html>

    4. mouse event: alert which button when mouse is clicked

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction(e) {
    x = e.clientX;
    y = e.clientY;
    coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor
    }

    function clearCoor() {
    document.getElementById("demo").innerHTML = "";
    }
    </script>
    </head>
    <body style="margin:0px;">

    <div id="coordiv" style="width:199px;height:99px;border:1px solid" onmousemove="myFunction(event)"


    onmouseout="clearCoor()"></div>

    <p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>

    <p id="demo"></p>

    </body>
    </html>

    5. ONCLICK EVENTS
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
    }
    </script>
    </head>
    <body>

    <p>Click the button to trigger a function.</p>

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

    <p id="demo"></p>

    </body>
    </html>

    PHP GET AND POST

    <!DOCTYPE HTML>
    <html>
    <body>

    <form action="welcome.php" method="post">


    Name: <input type="text" name="name"><br>
    E-mail: <input type="text" name="email"><br>
    <input type="submit">
    </form>

    </body>
    </html>

    Php get and post

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function showHint(str) {
    if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
    } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
    }
    xmlhttp.open("GET", "gethint.php?q="+str, true);
    xmlhttp.send();
    }
    }
    </script>
    </head>
    <body>

    <p><b>Start typing a name in the input field below:</b></p>


    <form>
    First name: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
    </body>
    </html>

    You might also like