Showing posts with label Web Programming. Show all posts
Showing posts with label Web Programming. Show all posts

Create a web page using two image files, which switch between one another as the mouse pointer moves over the images. Use the on Mouse Over and on Mouse Out

<html>
<head>
<script type = "text/javascript">
    function mouseover()
    {
        document.getElementById("img").src = "image.jpg";
    }
    function mouseout()
    {
        document.getElementById("img").src = image1.jpg;
    }
</script>
</head>
<body>
<img src = "image1.jpg" id = "img" onmouseover="mouseover()" onmouseout="mouseout()"/>
</body>
</html>
34 comments:
Labels: ,

Write a JavaScript code block, which checks the contents entered in a form’s Text element. If the text entered is in the lower case, convert to upper case. Make use of function to Uppercase ( ).

<html>
<head>
<script type = "text/javascript">
    function upper()
    {
        var upper = document.form1.string.value.toUpperCase();
        document.form1.string.value = upper;
    }
</script>
</head>
<body>
    <form name = "form1">
        <table>
            <tr>
                <td>Enter String</td>
                <td><input type = "text" name = "string" /></td>
            </tr>
            <tr>
                <td><input type = "button" value = "upper" onclick = "upper()"></td>
            </tr>
        </table>
    </form>
</body>
</html>
13 comments:
Labels: ,

Create a form consists of a two Multiple choice lists and one single choice list,

<html>
<head>
    <script type = "text/javascript">
        function findcost()
        {
            var major = document.getElementById("major");
            var Starters = document.getElementById("starters");
            var soft = document.getElementById("soft");
            var s = "Item \t \t \t Price \n--------------------------------\n";
            var totalcost = 0;
       
            for( var i = 0; i < major.options.length; i++)
            {
                var option = major.options[i];
                if(option.selected == true)
                {
                    var price = parseInt(option.value);
                    totalcost = totalcost + price;
                    s = s+ option.text + "\t \t" + price + "\n";
                }
            }
            for( var i = 0; i < starters.options.length; i++)
            {
                var option = starters.options[i];
                if(option.selected == true)
                {
                    var price = parseInt(option.value);
                    totalcost = totalcost + price;
                    s = s + option.text + "\t \t" + price + "\n";
                }
            }
            var softdrinkindex = soft.selectedIndex;
            if(softdrinkindex != null)
            {
                var selectedsoftdrink = soft.options[soft.selectedIndex].text;
                var price = parseInt(soft.options[soft.selectedIndex].value);
                totalcost = totalcost + price;
                s = s + selectedsoftdrink + "\t \t" + price + "\n";
            }
            s = s + "\n\n Total Cost \t \t" + totalcost;
            document.getElementById("ordereditems").value = s;
        }
    </script>
</head>
<body>
    <form name = "menuForm">
        <table border = "1" >
            <tr>
                <td colspan = "2" align = "center">
                    <h2>Restaurant Menu Details</h2>
                </td>
            </tr>
            <tr>
                <td> Major Dishes:</td>
                <td>
                    <select id = "major" size = "3" multiple = "multiple">
                        <option value = "100"> Vegetable Pulav</option>
                        <option value = "150"> Hyderabadi Biriyani</option>
                        <option value = "50"> Roti with Curry </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td> Starters </td>
                <td> <select id = "starters" size = "3" multiple = "multiple">
                    <option value = "80"> Gobi Manchurian </option>
                    <option value = "40"> Veg Clear Soup </option>
                    <option value = "30"> Masala Papad </option>
                </td>
            </tr>
            <tr>
                <td>Soft Drinks</td>
                <td>
                    <select id = "soft" size = "3" multiple = "multiple">
                        <option value = "20"> Pepsi</option>
                        <option value = "25"> Coke </option>
                        <option value = "30"> Lime Soda </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan = "2" align = "center">
                    <textarea id = "ordereditems" rows = "10" cols = "40">
                   
                    </textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input type = "button" value = "Find total Cost" onclick = "findcost()" />
                </td>
                <td>
                    <input type = "reset" value = "Clear" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
167 comments:
Labels: ,

Create a form for Employee information. Write JavaScript code to find DA, HRA, PF, TAX, Gross pay, Deduction and Net pay.

<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
    function calc()
    {
        var bp,DA,HRA,GP,PF,Tax,Deduction,NetPay,name,id,desg;
        name = document.form1.firstname.value;
        id = document.form1.userid.value;
        desg = document.form1.designation.value;
        bp = parseInt(document.form1.bp.value);

        DA = bp * 0.5;
        HRA = bp * 0.5;
        GP = bp + DA + HRA;
        PF = GP * 0.02;
        Tax = GP * 0.01;
        Deduction = Tax + PF;
        NetPay = GP - Deduction;

        document.form1.da.value = DA;
        document.form1.hra.value = HRA;
        document.form1.gp.value = GP;
        document.form1.pf.value = PF;
        document.form1.tax.value = Tax;
        document.form1.deduction.value = Deduction;
        document.form1.netpay.value = NetPay
    }
</script>
</head>
<body >
    <form name = "form1">
        <table border = "1">
            <tr>
                <td>Name</td>
                <td><input type = "text" name = "firstname" /></td>
            </tr>
            <tr>
                <td>User ID</td>
                <td><input type = "text" name = "userid" /></td>
            </tr>
            <tr>
                <td>Designation</td>
                <td><input type = "text" name = "designation" /></td>
            </tr>
            <tr>
                <td>Basic Pay</td>
                <td><input type = "text" name = "bp"></td>
            </tr>
            <tr>
                <td colspan = "2" align = "center">
                <input type = "button" name = "calculate" value = "Click Here To Calculate"onclick ="calc()"></td>

            </tr>
            <tr>
                <td>Dearness Allowance </td>
                <td><input type = "text" name = "da"/></td>
            </tr>
            <tr>
                <td>House Rent Allowance </td>
                <td><input type = "text" name = "hra"></td>
            </tr>
            <tr>
                <td>GP</td>
                <td><input type = "text" name = "gp"></td>
            </tr>
            <tr>
                <td>Provident Fund</td>
                <td><input type = "text" name = "pf" /></td>
            </tr>
            <tr>
                <td>Tax</td>
                <td><input type = "text" name = "tax" /></td>
            </tr>
            <tr>
                <td>Deduction</td>
                <td><input type = "text" name = "deduction" /></td>
            </tr>
            <tr>
                <td>NetPay</td>
                <td><input type = "text" name = "netpay" /></td>
            </tr>           
        </table>
    </form>
</body>
</html>
126 comments:
Labels: ,

Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade.

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
    function calc()
    {
        var m1,m2,m3,avg = 0,total = 0, result = "",grade = "";
        m1 = parseInt(document.form1.wp.value);
        m2 = parseInt(document.form1.sp.value);
        m3 = parseInt(document.form1.cg.value);
        total = m1+m2+m3;
        avg = total/3;
        if( m1 < 35 || m2 < 35 || m3 < 35)
        {
            result = "fail";
            grade = "D";
        }
        else if(avg >= 75)
        {
            result = "Distinction";
            grade = "A+";
        }
        else if(avg >= 60 && avg < 75)
        {
            result = "First class";
            grade = "A";
        }
        else if(avg >= 50 && avg < 60)
        {
            result = "Second class";
            grade = "B";
        }
        else if(avg >=35 && avg < 50)
        {
            result = "Pass class";
            grade = "C";
        }
        else  if (avg < 35)
        {
            result = "Fail";
            Grade = "D";
        }
        document.form1.result.value = result;
        document.form1.grade.value = grade;
        document.form1.total.value = total;
        document.form1.average.value = avg;
       
    }
</script>
</head>
<body>
    <form name = "form1">
        <table border = "1">
            <tr>
                <td> Student Name</td>
                <td><input type = "text"  /></td>
            </tr>
            <tr>
                <td colspan = "2" align = "center">Subject Marks</td>
            </tr>
            <tr>
                <td>Web Programming</td>
                <td><input type = "text" name = "wp" /></td>
            </tr>
            <tr>
                <td>Computer Graphics</td>
                <td><input type = "text" name = "cg" /></td>
            </tr>
            <tr>
                <td>System Programming</td>
                <td><input type = "text" name = "sp" /></td>

            </tr>
            <tr>
                <td colspan = "2" align = "center"><input type = "button"   onclick = "calc()" value = "calculte" /></td>
            </tr>           
            <tr>
                <td>Total</td>
                <td><input type = "text" name = "total"/></td>

            </tr>
            <tr>
                <td>Average</td>
                <td><input type = "text" name = "average" /></td>
            </tr>
            <tr>
                <td>Result</td>
                <td><input type = "text" name = "result" /></td>
            </tr>
            <tr>
                <td>Grade</td>
                <td><input type = "text" name = "grade"/></td>
            </tr>

        </table>
    </form>
</body>
</html>
14 comments:
Labels: ,

Write a JavaScript code block using arrays and generate the current date in words, this should include the day, month and year.

<html>
<head>
<script type = "text/javascript">
    var d = new Date();
    var weekday = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
    var monthname = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
    document.write(weekday[d.getDay()] + " ");
    document.write(d.getDate() + ". ");
    document.write(monthname[d.getMonth()] + " ");
    document.write(d.getFullYear());;
</script>
</head>
<body>
   
</body>
</html>
7 comments:
Labels: ,

Write a JavaScript code to find factorial of N. (Use recursive function)

<html>
    <body>
        <script type = "text/javascript">
            var n = parseInt(window.prompt("Enter the Number:"));
            var result = fact(n);
            window.alert("Factorial of the given number " + result);
            function fact(n)
            {
                if(n == 0)
                    return 1;
                else
                    return (n*fact(n-1));
            }
        </script>
    </body>
</html>
7 comments:
Labels: ,

Write a JavaScript code to find the sum of N natural Numbers. (Use user-defined function)

<html>
<head>
<script type = "text/javascript">
    var num = window.prompt("Enter the number:","");
    var n = parseInt(num);
    result = sumnaturalno(n);
    window.alert("The sum of " + n + "natural number is" + result);
    function sumnaturalno(n)
    {
        var i;
        var sum = 0;
        for(i = 1;i <= n; i++){
            sum = sum + i;}
        return (sum);
    }
</script>
</head>
</html>
10 comments:
Labels: ,

Create a page with dynamic effects. Write the code to include layers and basic animation.

<html>
<head>
<style>
    .moveable{
        position: absolute;
    }
</style>
<script type = "text/javascript">
    var x = 5;
    var y = 5;
    var dest_x = 300;
    var dest_y = 300;
    var interval = 10;
    function moveImage()
    {
        if(x < dest_x)
            x = x + interval;
        if(y < dest_y)
            y = y + interval;
      
        document.getElementById("ufo").style.top = y + "px";
        document.getElementById("ufo").style.left = x + "px";
        if((x + interval < dest_x) && (y + interval < dest_y))
        {
            window.setTimeout("moveImage()", 100);
        }
    }
</script>
</head>
<body onload = "moveImage()">
    <div id = "ufo" class = "moveable">
        <img src = "image.jpg" alt = "please link to a valid image" />
    </div>
</body>
</html>
2 comments:
Labels: ,

Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript code to Evaluates the expression and Displays the result.

<html>
<head>
<title>Mathematical Expression</title>
<script type = "text/javascript">
    function math_exp()
    {
        var x = document.form1.exptext.value;
        var result = eval(x);
        document.form1.resulttext.value = result;
    }
</script>
</head>
<body >
    <form name = "form1">
        <table>
            <tr>
                <td>Expression</td>
                <td><input type = "text" name = "exptext" /></td>
            </tr>
            <tr>
                <td>Result</td>
                <td><input type = "text" name = "resulttext" /></td>
            </tr>
            <tr>
                <td><input type = "button" value = "calculate" onclick = "math_exp()" /></td>
            </tr>
        </table>
    </form>
</body>
</html>
1 comment:
Labels: ,

Create a HTML form that has number of Textboxes. When the form runs in the Browser fill the textboxes with data. Write JavaScript code that verifies that all textboxes has been filled. If a textboxes has been left empty, popup an alert indicating which textbox has been left empty.

<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
    function validate()
    {
        if(document.myForm.Name.value == "")
        {
            alert("Please Provide Your Name");
            document.myForm.Name.focus();
            return false;
        }
        if(document.myForm.Email.value == "")
        {
            alert("Please Provide Your Email ID");
            document.myForm.Email.focus();
            return false;
        }
        if ((document.myForm.Zip.value == "")||(document.myForm.Zip.value.length != 5))
        {
            alert("Please Provide a valid zip code format #####");
            document.myForm.Zip.focus();
            return false;
        }
        if(document.myForm.Country.value == "-1")
        {
            alert("Please Provide Your Country Name");
            return false;
        }
        return true;
    }
    function validateEmail()
    {
        var emailID = document.myForm.Email.value;
        atpos = emailID.indexOf("@");
        dotpos = emailID.lastIndexOf(".");
        if(atpos < 1 || (dotpos - atpos < 2))
        {
            alert("Please Enter Correct Email ID");
            document.myForm.Email.focus();
            return false;
        }
        return true;
    }
</script>
</head>
<body >
    <form  name = "myForm" onsubmit = "return(validate());" >
        <table cellspacing = "2" cellpadding = "2" border = "1">
            <tr>
                <td>Name</td>
                <td><input type = "text" name = "Name"   /></td>
            </tr>
            <tr>
                <td>Email ID</td>
                <td><input type = "text" name = "Email" onchange = "validateEmail();"/></td>
            </tr>
            <tr>
                <td>Zip Code</td>
                <td><input type = "text" name = "Zip" /></td>
            </tr>
            <tr>
                <td>Country</td>
                <td><select name = "Country" >
                        <option value = "-1" selected> [Choose Yours]</option>
                        <option value = "1" >INDIA</option>
                        <option value = "2" >USA</option>
                        <option value = "3" >Srilanka</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
            </tr>
        </table>
    </form>
</body>
</html>
3 comments:
Labels: ,

Create a form having number of elements (Textboxes, Radio buttons, Checkboxes, and so on). Write JavaScript code to count the number of elements in a form.

<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
    function display()
    {
        alert(document.getElementById("form1").length);
    }
</script>
</head>
<body onload = "display()">
    <form id = "form1">
        <table border = "1">
            <tr>
                <td>Name</td>
                <td><input type = "text" value = "firstname" /></td>
            </tr>
            <tr>
                <td>Choose Your Username</td>
                <td><input type = "text" value = "Username" /></td>
            </tr>
            <tr>
                <td>Create Password</td>
                <td><input type = "password" value = "password" /></td>
            </tr>
            <tr>
                <td>Confirm Password</td>
                <td><input type = "password" value = "confirmPass"></td>
            </tr>
            <tr>
                <td>Birthday</td>
                <td><select name = "date"><option value = "7" >11</td>
                <td><select name = "month"><option value = "November">November</td>
                <td><select name = "year"><option value = "1991">1991</td>
            </tr>
            <tr>
                <td>Gender</td>
                <td><input type = "radio" name = "gender"/>Male</td>
                <td><input type = "radio" name = "gender"/>Female</td>
            </tr>
            <tr>
                <td>Mobile</td>
                <td><input type = "text" ></td>
            </tr>
            <tr>
                <td>Location</td>
                <td><input type = "text"></td>
            </tr>
            <tr>
                <td><input type = "checkbox" /> I agree the terms and policy</td>
            </tr>
            <tr>
                <td><input type = "button" value = "create" /></td>
            </tr>
        </table>
    </form>
</body>
</html>
8 comments:
Labels: ,

Syllabus of Web Programming

Fundamentals of Web 
Internet, WWW, Web Browsers, and Web Servers, URLs, MIME, HTTP, Security, The Web Programmers Toolbox. XHTML: Origins and evolution of HTML and XHTML, Basic syntax, Standard XHTML document structure, Basic text markup, Images, Hypertext Links, Lists, Tables, Forms, Frames, Syntactic
differences between HTML and XHTML.

CSS 
Introduction, Levels of style sheets, Style specification formats, Selector forms, Property value forms, Font properties, List properties, Color, Alignment of text, The Box model, Background images, The <span> and <div> tags, Conflict resolution.

JavaScript 
Overview of JavaScript; Object orientation and JavaScript; General syntactic characteristics; Primitives, operations, and expressions; Screen output and keyboard input; Control statements; Object creation and modification; Arrays; Functions; Constructor; Pattern matching using regular expressions; Errors in scripts; Examples.

Java Script and HTML Documents, Dynamic Documents with JavaScript
The JavaScript execution environment; The Document Object Model; Element access in JavaScript; Events and event handling; Handling events from the Body elements, Button elements, Text box and Password elements; The DOM 2 event model; The navigator object; DOM tree traversal and modification.
Introduction to dynamic documents; Positioning elements; Moving elements; Element visibility; Changing colors and fonts; Dynamic content; Stacking elements; Locating the mouse cursor; Reacting to a mouse click; Slow movement of elements; Dragging and dropping elements.

XML 
Introduction; Syntax; Document structure; Document Type definitions; Namespaces; XML schemas; Displaying raw XML documents; Displaying XML documents with CSS; XSLT style sheets; XML processors; Web services.

Lab Programs

Create a form consists of a two Multiple choice lists and one single choice list,
  • The first multiple choice list, displays the Major dishes available.
  • The second multiple choice list, displays the Starters available.
  • The single choice list, displays the Soft drinks available.
  • The selected items from all the lists should be captured and displayed in a Text
  • Area along with their respective costs. On clicking the ‘Total Cost’ button, the
  • total cost of all the selected items is calculated and displayed at the end in the Text
  • Area. A ‘Clear’ button is provided to clear the Text Area.
Write a JavaScript code block, which checks the contents entered in a form’s Text element. If the text entered is in the lower case, convert to upper case. Make use of function to Uppercase ( ).
27 comments:
Labels: ,
Subscribe to: Posts (Atom)