---
# System prepended metadata

title: Untitled

---

<!-- PDF DOWNLOAD (GITHUB COLORS)
https://cdn.discordapp.com/attachments/724548564964868207/899670135260995654/webep.pdf -->


## **Program 1:**
Write a JavaScript program to check whether given hours is less  than 18 or not.

**Source Code:**

```html
<html>
    <body>
    <h2>JavaScript if</h2>
    <p>Display "Good day!" if the hour is less than 18:00:</p>
    <p id="demo">Good Evening!</p>
    <script>
        if (new Date().getHours() < 18) {
            document.getElementById("demo").innerHTML = "Good day!";
        }
        else{
            document.getElementById("demo").innerHTML = "Good evening”;
        }
    </script>
    </body>
</html>
```
**Output:**



<img style="border:2px solid #ccc;border-radius:7px;" src=https://i.imgur.com/09cqqIo.png>



<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program2:**

Write a JavaScript program to display the current day.

**Source Code:**
```html
<html>
    <body>
        <h2>JavaScript switch</h2>
        <p id="demo"></p>
        <script>
            let 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>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/W563TpN.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 3:**
Write a JavaScript program to display the current time.

**Source Code:**
```html
<html>
    <body>
        <h2>JavaScript new Date()</h2>
        <p id="demo"></p>
        
        <script>
            const d = new Date();
            document.getElementById("demo").innerHTML = d;
        </script>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/lxS4fm4.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 4:**
Write a JavaScript program to unpack list elements.
<!DOCTYPE html>
```html
<html>
    <body>
        <h2>JavaScript For Loop</h2>
        <p id="demo"></p>
        <script>
            const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
            let text = "";
            for (let i = 0; i < cars.length; i++) {
                text += cars[i] + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        </script>
    </body>
</html>
```


**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/m6aaGOE.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 5:**
Write a JavaScript program to display the 25th of March 2015 in ISO date format.

**Source Code:**
```html
<html>
    <body>
        <h2>JavaScript ISO Dates</h2>
        <p id="demo"></p>
        <script>
            const d = new Date("2015-03-25");
            document.getElementById("demo").innerHTML = d;
        </script>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/ugeVstR.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 5.5:**
Write a JavaScript program to display number of milliseconds from January 1, 1970.

**Source Code:**

```html
<html>
    <body>
        <h2>JavaScript getTime()</h2>
        <p>The internal clock in JavaScript counts from midnight January 1,
        1970.</p>
        <p>The getTime() function returns the number of milliseconds since then:</p>
        <p id="demo"></p>
        <script>
            const d = new Date();
            document.getElementById("demo").innerHTML = d.getTime();
        </script>
    </body>
</html>
```

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/1bsHjs7.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 6:**
Write a JavaScript program displaying unpacking of values using a `for in` loop.

**Source Code**
```html
<html>
    <body>
        <h2>JavaScript For In Loop</h2>
        <p>The for in statement loops through the properties of an object:</p>
        <p id="demo"></p>
        <script>
            const person = {fname:"John", lname:"Doe", age:25};
            let txt = "";
            for (let x in person) {
                txt += person[x] + " ";
            }
            document.getElementById("demo").innerHTML = txt;
        </script>
    </body>
</html>
```

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/ZRjpaa4.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 7:**
Write a JavaScript program to unpack values of an array using a `for of` loop.

**Source Code:**
```html
<html>
    <body>
        <h2>JavaScript For Of Loop</h2>
        <p>The for of statement loops through the values of any iterable
        object:</p>
        <p id="demo"></p>
        <script>
            const cars = ["BMW", "Volvo", "Mini"];
            let text = "";
            for (let x of cars) {
                text += x + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        </script>
    </body>
</html>
```

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/QFKG8OD.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 8:**
Write a JavaScript program to unpack a string using a `for of` loop.

**Source code:**
```html
<html>
    <body>
    <h2>JavaScript For Of Loop</h2>
    <p>The for of statement loops through the values of an iterable object.</p>
    <p id="demo"></p>
    
    <script>
        let language = "JavaScript";
        let text = "";
        for (let x of language) {
            text += x + "<br>";
        }
        document.getElementById("demo").innerHTML = text;
    </script>
    </body>
</html>
```

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/A1n5tIC.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 9**
Write a JavaScript program to display iterations of a `while` loop.

**Source Code:**
```html
<html>
    <body>
    <h2>JavaScript While Loop</h2>
    <p id="demo"></p>
    <script>
        let text = "";
        let i = 0;
        while (i < 10) {
            text += "<br>The number is " + i;
            i++;
        }
        document.getElementById("demo").innerHTML = text;
    </script>
    </body>
</html>
```

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/UUhT6wU.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 10:**
Write a JavaScript program to display iterations throught a `do while` loop.

**Source Code:**
```html
<html>
    <body>
    10
    <h2>JavaScript Do While Loop</h2>
    <p id="demo"></p>
    <script>
        let text = ""
        let i = 0;
        do{
            text += "<br>The number is " + i;
            i++;
        } while (i < 10);
        document.getElementById("demo").innerHTML = text;
    </script>
    </body>
</html>
```

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/6Pm24XC.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## Program 11:
Write a JavaScript program to access a `<colgroup>` element from a html file.

**Source Code:**
```html
<html>
    <head>
        <style>
            table, th, td {
            border: 1px solid black;
            }
        </style>
    </head>
    <body>
    <h3>A demonstration of how to access a COLGROUP element</h3>
    <table>
        <colgroup id="myColgroup" span="2"
        style="background:red"></colgroup>
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr><tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr><tr>
            <td>5869207</td>
            <td>My first CSS</td>
            <td>$49</td>
        </tr>
    </table>
    <p>Click the button to get the number of columns a COLGROUP element
    should span.</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    
    <script>
        function myFunction() {
            var x = document.getElementById("myColgroup").span;
            document.getElementById("demo").innerHTML = x;
        }
        </script>
</body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/vK2Xkjz.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 12:**
Write a JavaScript program to access a `<form>` element.

**Source Code:**
```html
<html>
    <body>
        <h3>A demonstration of how to access a FORM element</h3>
        <form id="myForm" action="/action_page.php">
            First name: <input type="text" name="fname" value="Donald"><br>
            Last name: <input type="text" name="lname" value="Duck"><br>
            <input type="submit" value="Submit">
        </form>
        <p>Click the "Try it" button to get the URL for where to send the form data
        when the form above is submitted.</p>
        <button onclick="myFunction()">Try it</button>
        <p id="demo"></p>
        <script>

            function myFunction() {
            var x = document.getElementById("myForm").action;
            document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/eKWqT4h.png">

<div style="page-break-after: always; visibility: hidden"></div>

---

## **Program 13:**
Write a JavaScript program displaying checkbox input type in a form element.

**Source Code:**
```html
<html>
    <body>
    <h1>Show Checkboxes</h1>
    <form action="/action_page.php">
        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
        <label for="vehicle1"> I have a bike</label><br>
        <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
        <label for="vehicle2"> I have a car</label><br>
        <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
        <label for="vehicle3"> I have a boat</label><br><br>
        <input type="submit" value="Submit">
    </form>
    </body>
</html>
```

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/jq244H6.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 14:**
Write a JavaScript program displaying `select` tag under form element.

**Source Code:**
```html
<html>
    <body>
        <h1>The select element</h1>
        <p>The select element is used to create a drop-down list.</p>
        <form action="/action_page.php">
            <label for="cars">Choose a car:</label>
            <select name="cars" id="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
            <br><br>
            <input type="submit" value="Submit">
        </form>
        <p>Click the "Submit" button and the form-data will be sent to a page on
        the
        server called "action_page.php".</p>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/2taSNcG.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 15:**
Write a JavaScript program to call a function upon clicking a button element.

**Source Code:**
```html
<html>
    <body>
        <h1>Buttons</h1>
            <p>The button below runs a function when clicked.</p>
            <form>
                <input type="button" value="Click me" onclick="msg()">
            </form>
            <script>
                function msg() {
                    alert("Hello world!");
                }
            </script>
    </body>
</html>
``` 

**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/3CN67AL.png"><br>
<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/SLTS1PS.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 16:**
Write a JavaScript program to make a resizable webpage using the `addEventListener()` method to display a random number when resized.

**Source Code:**
```html
<html>
    <body>
        <h2>JavaScript Event Listeners</h2>
        <p>This example uses the addEventListener() method on the window
        object.</p>
        <p>Try resizing this browser window to trigger the "resize" event</p>
        <p id="demo"></p>
        <script>
            window.addEventListener("resize", function(){
                document.getElementById("demo").innerHTML = Math.random();
            });
        </script>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/NLTrDxm.png">

<div style="page-break-after: always; visibility: hidden"></div>

---
## **Program 17:**
Write a JavaScript program to display an alert upon clicking a button element.

**Source Code:**
```html
<html>
    <body>
        <p>Click the button to display an alert box.</p>
        <button onclick="myFunction()">Try it</button>
        <script>
            function myFunction() {
                alert("Hai Students! I am using alert box!");
            }
        </script>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/hKpqf1j.png"><br>

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/tgZGI6D.png">

<div style="page-break-after: always; visibility: hidden"></div>


---

## **Program 18:**
Write a JavaScript program to greet a user with their name.

**Source Code:**
```html
<html>
    <body>
        <h2>JavaScript Prompt</h2>
        <button onclick="myFunction()">Try it</button>
        <p id="demo"></p>
        <script>
            function myFunction() {
                let text;
                let person = prompt("Please enter your name:", "Sudha");
                if (person == null || person == "") {
                    text = "User cancelled the prompt.";
                } else {
                    text = "Hello " + person + "! How are you ?";
                }
                document.getElementById("demo").innerHTML = text;
            }
        </script>
    </body>
</html>

```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/x9hQGfo.png">

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/HuhR0iC.png">


If user cancels:

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/OnGRL4h.png">

<div style="page-break-after: always; visibility: hidden"></div>

---

## **Program 19**
Write a JavaScript program to request for passport number if user has passport using the radio input type.

**Source Code:**
```html
<html>
    <head>
        <title> Radio button</title>
    </head>
    <body>
        <script type="text/javascript">
            function ShowHideDiv() {
                var chkYes = document.getElementById("chkYes");
                var dvPassport = document.getElementById("dvPassport");
                dvPassport.style.display = chkYes.checked ? "block" : "https://cdn.discordapp.com/attachments/724548564964868207/899670135260995654/webep.pdfnone";
            }
        </script>
        <span>Do you have Passport?</span>
        <label for="chkYes">
            <input type="radio" id="chkYes" name="chkPassPort"
            onclick="ShowHideDiv()" />
                Yes
            </label>
        <label for="chkNo">
            <input type="radio" id="chkNo" name="chkPassPort"
            onclick="ShowHideDiv()" />
                No
        </label>
        <hr />
        <div id="dvPassport" style="display: none">
        Passport Number:
        <input type="text" id="txtPassportNumber" />
        </div>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/45g2Jh4.png">
<div style="page-break-after: always; visibility: hidden"></div>


---
## **Program 20:**
Write a JavaScript program, making use of `Math` module, for signum function.

**Source Code:**
```
<html>
    <body>
        <h2>JavaScript Math.sign()</h2>
        <p>Math.sign(x) returns if x is negative, null or positive:</p>
        <p id="demo"></p>
        <script>
            document.getElementById("demo").innerHTML = Math.sign(4);
        </script>
    </body>
</html>
```
**Output:**

<img style="border:2px solid #ccc;border-radius:7px;" src="https://i.imgur.com/mBHqzTJ.png">

---


