Scribd Logo
Upload

Welcome to Scribd!

  • Programs 3&4

    Uploaded by

    Rahul Sharma
    10 views6 pages

    Original Title

    Programs_3&4

    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
    10 views6 pages

    Programs 3&4

    Uploaded by

    Rahul Sharma

    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

    Program 3: Install and configure JavaScript on the Server side, Use server side

    JavaScript to create a dynamic web page with forms Use document. getElementByID,
    document. getElementsByTagName

    1. In the "New Project" dialog:

    2. Choose "Node.js" from the categories.

    3. Choose "Node.js Application" and click "Next >".

    4. Open the main.js file and write the below content with the server-side JavaScript
    code:

    Code:

    const http = require('http');

    const fs = require('fs');

    const server = http.createServer((req, res) => {

    fs.readFile('index.html', 'utf8', (err, data) => {

    if (err) {

    res.writeHead(404, {'Content-Type': 'text/plain'});

    res.end('File not found');

    } else {

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end(data);

    });

    });
    server.listen(3000, () => {

    console.log('Server running at http://localhost:3000/');

    });

    5. Right-click on the project again, choose "New > File...", and name the file

    index.html.

    6. Open the index.html file and add the HTML and client-side JavaScript code:

    Code:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-


    scale=1.0">

    <title>Server-side JavaScript Example</title>

    </head>

    <body>

    <h1>Dynamic Web Page with Forms</h1>

    <form id="myForm">

    <label for="inputText">Enter Text: </label>


    <input type="text" id="inputText" name="inputText" required>

    <button type="button"
    onclick="submitForm()">Submit</button>

    </form>

    <script>

    function submitForm() {

    var inputValue =
    document.getElementById('inputText').value;

    alert('You entered: ' + inputValue);

    </script>

    </body>

    </html>

    Output:
    Program 4: Clock App, Students will learn how to Use JS objects
    Code:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Clock App</title>

    <style>

    body {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

    margin: 0;

    #clock {

    font-size: 2em;

    </style>

    </head>

    <body>

    <div id="clock"></div>
    <script>

    // Clock object definition

    function Clock() {

    this.updateTime = function () {

    const now = new Date();

    const hours = now.getHours().toString().padStart(2, '0');

    const minutes = now.getMinutes().toString().padStart(2, '0');

    const seconds = now.getSeconds().toString().padStart(2, '0');

    return `${hours}:${minutes}:${seconds}`;

    };

    this.displayTime = function () {

    const clockElement = document.getElementById('clock');

    clockElement.textContent = this.updateTime();

    };

    this.startClock = function () {

    // Update the clock every second

    setInterval(() => {

    this.displayTime();

    }, 1000);

    };

    }
    // Create an instance of the Clock object

    const myClock = new Clock();

    // Start the clock

    myClock.startClock();

    </script>

    </body>

    </html>

    Output:

    You might also like