Scribd Logo
Upload

Welcome to Scribd!

  • Assignment No - 10 Aim: Write A Javascript Program To Demonstrate Array in Javascript. Program: 1)

    Uploaded by

    pankaj yadav
    25 views19 pages
    The document contains programs demonstrating arrays, events, forms validation, basic calculations, and finding the square of a number in JavaScript. The programs include: 1) Creating arrays and accessing array elements. 2) Demonstrating event handling like click and mouseover events. 3) Validating form fields like name, email, password using JavaScript. 4) Performing basic math operations like addition, subtraction, multiplication and division of two numbers entered in a form. 5) Finding the square of a number entered in a form by multiplying the number by itself.

    Original Description:

    Original Title

    10-14.docx

    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 contains programs demonstrating arrays, events, forms validation, basic calculations, and finding the square of a number in JavaScript. The programs include: 1) Creating arrays and accessing array elements. 2) Demonstrating event handling like click and mouseover events. 3) Validating form fields like name, email, password using JavaScript. 4) Performing basic math operations like addition, subtraction, multiplication and division of two numbers entered in a form. 5) Finding the square of a number entered in a form by multiplying the number by itself.

    Copyright:

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

    Assignment No - 10 Aim: Write A Javascript Program To Demonstrate Array in Javascript. Program: 1)

    Uploaded by

    pankaj yadav
    The document contains programs demonstrating arrays, events, forms validation, basic calculations, and finding the square of a number in JavaScript. The programs include: 1) Creating arrays and accessing array elements. 2) Demonstrating event handling like click and mouseover events. 3) Validating form fields like name, email, password using JavaScript. 4) Performing basic math operations like addition, subtraction, multiplication and division of two numbers entered in a form. 5) Finding the square of a number entered in a form by multiplying the number by itself.

    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 19

    Assignment no -10

    Aim: Write a javascript program to demonstrate array in javascript.


    Program:
    1)
    <html>
    <head>
    </head>
    <body>
    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
    var stud=["girish","akshith","vivek"]; var
    studdet=["girish","bhandup",22];
    document.getElementById("demo").innerHTML=stud;

    document.getElementById("demo1").innerHTML=stud[0]+"<br>"+stud[1]+"<br>"+stud
    [2];
    document.getElementById("demo2").innerHTML="Student name: "+studdet[0]+"<br>"+
    "Student address: "+studdet[1]+"<br>"+
    "Student age: "+studdet[2];
    var stud1={name:"girish",add:"remo",age:22};
    document.getElementById("demo2").innerHTML="Student name:
    "+stud1["name"]+"<br>"+
    "Student address: "+stud1["add"]+"<br>"+
    "Student age: "+stud1["age"];
    </script>
    </body>
    </html>
    Output:

    2) array methods:
    <html>
    <body>
    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    <p id="demo4"></p>
    <p id="demo5"></p>
    <p id="demo6"></p>
    <p id="demo7"></p>
    <script>
    var stud=["girish","akshith","vivek"]; var
    stud1=["remo","Kundar","bhanse"];
    document.getElementById("demo").innerHTML="Array Element Before Push
    method: "+stud;
    stud.push("amey");
    document.getElementById("demo1").innerHTML="Array Element After Push method:
    "+stud;
    stud.pop("amey");
    document.getElementById("demo2").innerHTML="Array Element After pop method:
    "+stud;
    stud.shift("nitin");
    document.getElementById("demo3").innerHTML="Array Element After shift method:
    "+stud;
    stud.unshift("abhishek");
    document.getElementById("demo4").innerHTML="Array Element After unshift method:
    "+stud;
    document.getElementById("demo5").innerHTML="Array Element After concat method:
    "+stud.concat(stud1);
    document.getElementById("demo6").innerHTML="Array Element After sort method:
    "+stud;
    stud1.reverse();
    document.getElementById("demo7").innerHTML="Array Element After reverse method:
    "+stud1;
    </script>
    </body>
    </html>

    Output:
    Practical No:11
    Aim: Write a program to demonstrate event handling in javascript.
    Program:
    1)
    <html>
    <body>
    <script>
    </script>
    <button onclick="alert('eventdemo')">Click here</button><br><br>
    <button ondblclick="alert('eventdemo')">Click</button>
    </body>
    </html>
    Output:
    2)
    <html>
    <body>
    <img src="Lighthouse.jpg" onmouseover="changeImg(this)"
    onmouseout="normalImg(this)" width="200" height="200">
    <script>
    function changeImg(a)
    {
    a.style.height="300px";
    a.style.width="300px";
    }
    function normalImg(a)
    {
    a.style.height="200px";
    a.style.width="200px";
    }
    </script>
    </body>
    </html>
    Output:
    Practical No-12
    Aim: Write a program to demonstrate form field validation
    Program:
    <html>
    <head>
    <script>
    function validate()
    {
    var name=document.forms["form1"]["t1"];
    var address=document.forms["form1"]["t2"];
    var email=document.forms["form1"]["t3"];
    var password=document.forms["form1"]["t4"];
    var mobile=document.forms["form1"]["t5"];
    var course=document.forms["form1"]["s1"];

    if(name.value=="")
    {
    alert("please enter your name");
    name.focus();
    return false;
    }

    if(address.value=="")
    {
    alert("please enter your address");
    address.focus();
    return false;
    }
    if(email.value=="")
    {
    alert("please enter your email");
    email.focus();
    return false;
    }

    if(email.value.indexOf("@",0)<0)
    {
    alert("please enter valid email");
    email.focus();
    return false;
    }
    if(email.value.indexOf(".",0)<0)
    {
    alert("please enter correct email id");
    email.focus();
    return false;
    }
    if(password.value=="")
    {
    alert("please enter password");
    password.focus();
    return false();
    }
    if(mobile.value=="")
    {
    alert("please enter mobile number");
    mobile.focus();
    return false();
    }
    if(course.value=="")
    {
    alert("please select course");
    course.focus();
    return false();
    }
    }
    </script>
    </head>
    <body>
    <form name="form1">
    <h1 align="center">Registration Form</h1>
    <table align="center">
    <tr>
    <td><font color="red">*</font>Name:</td>
    <td><input type="text" name="t1" required></td>
    <td><p id="p1" style="color:red;"></p></td>
    </tr>
    <tr>
    <td><font color="red">*</font>Address:</td>
    <td><textarea rows="5" cols="22"
    name="t2"></textarea></td>
    <td><p id="p6" style="color:red;"></p></td>
    </tr>
    <tr>
    <td><font color="red">*</font>Email:</td>
    <td><input type="text" name="t3" required></td>
    <td><p id="p2" style="color:red;"></p></td>
    </tr>
    <tr>
    <td><font color="red">*</font>Password:</td>
    <td><input type="password" name="t4" required></td>
    <td><p id="p4" style="color:red;"></p></td>
    </tr>
    <tr>
    <td><font color="red">*</font>Mobile:</td>
    <td><input type="text" name="t5" required></td>
    <td><p id="p3" style="color:red;"></p></td>
    </tr>

    <tr>
    <td><font color="red">*</font>Select Your
    Course:</td>
    <td><select id="s1" required>
    <option value="">Select</option>
    <option value="MCA">MCA</option>
    <option value="MMS">MMS</option>
    <option value="BBI">BBI</option>
    </select></td>
    <td><p id="p5" style="color:red;"></p></td>
    </tr>
    <tr>
    <td>Comment:</td>
    <td><textarea rows="5" cols="22"
    name="t6"></textarea></td>
    <td><p id="p6" style="color:red;"></p></td>
    </tr>
    <tr>
    <td colspan="3" align="center">
    <button type="button" onclick="validate()">SUBMIT</button>
    <input type="reset" value="RESET"></input>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    Output:
    Practical NO-13
    Aim: Write a program to demonstrate the simple calculating operation of addition
    subtraction, multiplication and division.
    Program:
    <html>
    <head>
    <title>JavaScript program to calculate multiplication and division of two
    numbers </title>
    <style type="text/css">
    body {margin: 30px;}
    </style>
    <script>
    function additionBy()
    {
    num1 = document.getElementById("firstNumber").value;
    num2 = document.getElementById("secondNumber").value;
    document.getElementById("result").innerHTML = Number(num1)
    + Number(num2);
    }

    function substractBy()
    {
    num1 = document.getElementById("firstNumber").value;
    num2 = document.getElementById("secondNumber").value;
    document.getElementById("result").innerHTML = Number(num1) -
    Number(num2); }

    function multiplyBy()
    {
    num1 = document.getElementById("firstNumber").value; num2 =
    document.getElementById("secondNumber").value;
    document.getElementById("result").innerHTML = num1 * num2;
    }

    function divideBy()
    {
    num1 = document.getElementById("firstNumber").value;
    num2 = document.getElementById("secondNumber").value;
    document.getElementById("result").innerHTML = num1 / num2;
    }
    function modulusBy()
    {
    num1 = document.getElementById("firstNumber").value;
    num2 = document.getElementById("secondNumber").value;
    document.getElementById("result").innerHTML = num1 % num2;
    }

    </script>
    </head>
    <body>
    <form>
    1st Number : <input type="text" id="firstNumber" /><br><br>
    2nd Number: <input type="text" id="secondNumber" /><br>
    <input type="radio" onClick="additionBy()" Value="r1" name="r1" />Addition
    <input type="radio" onClick="substractBy()" Value="r1" name="r1" />Substract
    <input type="radio" onClick="multiplyBy()" Value="r1" name="r1" />Multiply
    <input type="radio" onClick="divideBy()" Value="r1" name="r1" />Division
    <input type="radio" onClick="modulusBy()" Value="r1" name="r1" />Modulus
    </form>
    <p>The Result is : <br>
    <span id = "result"></span>
    </p>
    </body>
    </html>
    Output:
    Practical No-14
    Aim: Write a program to demonstrate to find square of a number.
    Program:
    <html>
    <head>
    <script>
    function square()
    {
    num1 = document.getElementById("number").value;
    document.getElementById("result").innerHTML=num1 * num1;
    }
    </script>
    <head>
    <body>
    <h1> Square Of Number</h1>
    Enter Number: <input type="text" id="number"><br><br>
    <input type="button" onClick="square()" value="square">
    <p>The Result is : <br>
    <span id = "result"></span>
    </p>
    </body>
    </html>
    Output:

    You might also like