Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    Js Lab

    Uploaded by

    shyam bk
    This document provides a summary of 17 JavaScript code examples for learning purposes. The examples cover topics like displaying alert boxes, prompts, changing HTML elements, timers, loops, arrays, validation, and more. Each example includes the code, a brief description, and the expected output.

    Copyright:

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

    Js Lab

    Uploaded by

    shyam bk
    33 views12 pages
    This document provides a summary of 17 JavaScript code examples for learning purposes. The examples cover topics like displaying alert boxes, prompts, changing HTML elements, timers, loops, arrays, validation, and more. Each example includes the code, a brief description, and the expected output.

    Original Description:

    Good for education

    Original Title

    js lab

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides a summary of 17 JavaScript code examples for learning purposes. The examples cover topics like displaying alert boxes, prompts, changing HTML elements, timers, loops, arrays, validation, and more. Each example includes the code, a brief description, and the expected output.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    33 views12 pages

    Js Lab

    Uploaded by

    shyam bk
    This document provides a summary of 17 JavaScript code examples for learning purposes. The examples cover topics like displaying alert boxes, prompts, changing HTML elements, timers, loops, arrays, validation, and more. Each example includes the code, a brief description, and the expected output.

    Copyright:

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

    JS LAB

    Lab Practical with Code

    BCA Notes Nepal


    WWW.bcanotesnepal.com
    Also android Application available on Playstore
    1. Write a javascript code to show alert message.

    <html>
    <head>
    <title>Display Alert Message on Button Click Event.</title>
    <script type="text/javascript">
    function showMessage(){
    alert("Hello friends, this is alert message.");
    }
    </script>
    </head>
    <body>
    <h1>Display Alert Message on Button Click Event.</h1>
    <input type="button" id="btnShowMsg" value="Click Me!" onClick='showMessage()'/>
    </body>
    </html>
    OutPut

    2. javascript message to get prompt message.


    <!DOCTYPE html>
    <script>
    "use strict";globalThis.__codeBoxId = "o3a3pecyod";

    let age = prompt('How old are you?', 100);

    alert(`You are ${age} years old!`); // You are 100 years old!
    </script>

    JS LAb
    3. Click button to get innerHtml example
    <!DOCTYPE html>
    <html>
    <body>
    <h1>My Web Page</h1>
    <p id="myP">This is a p element.</p>
    <div id="myDIV">This is a div element.</div>
    <script>
    document.getElementById("myP").innerHTML = "Hello BCA Notes Nepal .";
    document.getElementById("myDIV").innerHTML = "I need NOtes?";
    </script>
    </body>
    </html>
    Output

    4. Adding 10 each time whenever you click the Sum Button


    <!DOCTYPE html>
    <title>Document</title>
    <body>
    <h1> Adding 10 each time whenever you click the Sum
    Button......</h1>
    <b id="firstValue">10</b>
    <button type="button" onclick="addTheValue(10)">Sum </button>
    <script>
    function addTheValue(secondValue) {
    var fValue = document.getElementById("firstValue");
    firstValue.innerHTML = parseInt(fValue.innerHTML) + parseInt(secondValue);
    }
    </script>
    </body>
    </html>

    JS LAb
    OutPut

    5. Click button to get Todays date and show


    <html>
    <head>
    <h1> Click button to get Todays date and show </h1>
    <script type="text/javascript">
    function show_now() {
    var my_time = new Date();
    document.getElementById('display').innerHTML=my_time
    }
    </script>
    </head>
    <body>
    <input type=button value="Show Time" onclick="show_now();">
    <div id=display></div>
    </body>
    </html>
    OutPut

    6. Write number of day of a week in js


    Code
    <p>Write Number of day of a week.</p>
    <input id="userInput" type="text">
    <button onclick="switchCase()">Try it</button>
    <p id="switchCaseID"></p>

    JS LAb
    Function
    function switchCase() {
    var text;
    var fruits = document.getElementById("userInput").value;

    switch(fruits) {
    case "1":
    text = "Today is Sunday";
    break;
    case "2":
    text = "Today is Monday";
    break;
    case "3":
    text = "Today is Tuesday";
    break;
    case "4":
    text = "Today is Wednesday";
    break;
    case "5":
    text = "Today is Thursday";
    break;
    case "6":
    text = "Today is Friday";
    break;
    case "7":
    text = "Today is Saturday";
    break;
    default:
    text = "Invalid Input";
    }
    document.getElementById("switchCaseID").innerHTML = text;
    }
    OutPut

    7. x = 15, calculate y = x + 1, and Show Value of y:


    Code

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


    <p id="addNumbersID"></p>

    JS LAb
    Function
    function addNumbers() {
    var x = 15;
    var y = x + 1;
    document.getElementById("addNumbersID").innerHTML = y;
    }
    OutPut

    8. Click the button to convert the string to lowercase letters.


    Code
    <p>Word = Hello World!</p>
    <button onclick="changeToLowerCase()">Change to lowercase</button>
    <p id="changeToLowerCaseID"></p>
    Function Code
    function changeToLowerCase() {
    var str = "Hello World!";
    var res = str.toLowerCase();
    document.getElementById("changeToLowerCaseID").innerHTML = res;
    }
    OutPut

    9. Click the button to display a random number.


    Code
    <button onclick="randomNumber()">Generate a random Number</button>
    <p id="randomNumberID"></p>
    Function
    function randomNumber() {
    document.getElementById("randomNumberID").innerHTML = Math.random();
    10. Show hello world after 3 seconds.
    Code
    <button onclick="createTimeout()">Try it</button>
    Function
    function createTimeout() {
    setTimeout(function(){ alert("Hello"); }, 1000);
    }

    JS LAb
    OutPut

    11. Click on button to wait 3 seconds, then alert "Hi"

    Code
    <button onclick="createInterval()">Try it</button>
    Function
    function createInterval() {

    setInterval(function(){ alert("Hi"); }, 2000);

    }
    OutPut

    12. Click on button to get sum of 1 to 10.


    Code

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

    <p id="printSumID"></p>
    Function
    function printSum() {
    var total = 0;
    for(var i = 1; i <= 10; i++){
    total += i;
    }
    document.getElementById("printSumID").innerHTML = total;
    }

    Output

    JS LAb
    13 . Form validation
    Code

    <form name="myform" method="post" onsubmit="return Formvalidate()" >

    Name: <input type="text" name="name" required><br>

    Password: <input type="password" name="password" required><br>

    <input type="submit" value="register">

    </form>

    <form name="myform2" method="post" action="#" onsubmit="return validateEmail();">

    Email: <input type="text" name="email" required><br/>

    <input type="submit" value="register">

    </form>
    Function
    function Formvalidate(){

    var name=document.myform.name.value;

    var password=document.myform.password.value;

    if (name==null || name==""){

    alert("Name can't be blank");

    return false;

    }else if(password.length<6){

    alert("Password must be at least 6 characters long.");

    return false;

    JS LAb
    }

    function validateEmail()

    var x=document.myform2.email.value;

    var atposition=x.indexOf("@");

    var dotposition=x.lastIndexOf(".");

    if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){

    alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);

    return false;

    }
    OutPut

    14. input a number between 15 and 20:


    Code

    <input id="tryCatchID" type="text">

    <button type="button" onclick="tryCatch()">Test Input</button>

    <p id="p01"></p>
    Funtion
    function tryCatch() {

    JS LAb
    var message, x;

    message = document.getElementById("p01");

    message.innerHTML = "";

    x = document.getElementById("tryCatchID").value;

    try {

    if(x == "") throw "empty";

    if(isNaN(x)) throw "not a number";

    x = Number(x);

    if(x < 15) throw "too low";

    if(x > 20) throw "too high";

    catch(err) {

    message.innerHTML = "Input is " + err;

    }
    OutPut

    15. Click on button to get confirmation message


    Code
    <input type="button" value="click me" onclick="viewConfirmationBox()"/>
    Function
    function viewConfirmationBox()

    if (confirm('Are you sure you want to proceed')) {

    JS LAb
    console.log('You clicked yes.');

    else {

    console.log('You clicked no.');

    }
    OutPut

    16. Write a JS program to generate conform () dialog box. Code:


    Code
    <input type="button" value="click me" onclick="myFun()"/>
    Function
    function myFun(){

    confirm('Do you wnat to delete this file?');

    }
    Output

    17. Write a program using JavaScript array and for each.

    Code:

    <html>

    JS LAb
    <body>
    <script>
    var numbers = [65, 44, 12, 4];
    numbers.forEach(myFunction)
    function myFunction(item, index, arr) {
    arr[index] = item + 10;
    document.write(arr[index] + " ");
    }
    </script>
    </body>
    </html>

    OutPut

    JS LAb

    You might also like