Scribd Logo
Upload

Welcome to Scribd!

  • b002 - Web Programming - 3 - 816344

    Uploaded by

    Vadlamudi Jagadeesh
    16 views8 pages

    Original Title

    b002 - Web Programming - 3 -816344

    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
    16 views8 pages

    b002 - Web Programming - 3 - 816344

    Uploaded by

    Vadlamudi Jagadeesh

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    1.

    Create a page that supports the following hyperlinks depicted


    _ Link to the document list_graphic_bullets.htm

    _ Create link to Amazon.com

    _ Link to a place in your document (use the book1.gif)

    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hyperlinks depicted</title>
    </head>

    <body>
    <a href="list_graphic_bullets.htm">Link to list_graphic_bullets.htm</a><br>
    <a href="https://www.amazon.com/">Link to an Amazon.com</a><br>
    <img src="images/book1.gif" alt="book" style="width:48px;height:48px;">
    <p>He we are at our jump...</p>
    <a href="back to top">back to top</a><br>
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p>D</p>
    </body>
    </html>
    2.Create a page that looks like the one depicted below.

    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>One depicted</title>
    </head>

    <body>
    <ol>
    <li>One

    <ol type= "a">

    <li>Uno</li>
    <li>hanna</li>

    </ol>
    </li>

    <li>Two
    <ol type = "a">
    <li>dos</li>
    <li>dool</li>
    </ol>
    </li>

    <li>Three
    <ol type = "a">
    <li>tres</li>
    <li>set</li>
    </ol>
    </li>
    <ul>
    <li>Cherry
    <ul>
    <li>Cavalier</li>
    <li>Malibu</li>
    </ul>
    </li>

    <li>Ford
    <ul>
    <li>Escort</li>
    <li>F100</li>
    </ul>
    </li>

    <li>Marda
    <ul>
    <li>626</li>

    </ul>
    </li>
    </ul>
    <ul>
    <l><u>Fruits</u></l>
    <ul>Apples,Oranges,Pears,Plums </ul>
    <l><u>Vegetables</u></l>
    <ul>
    <ol>Corn</ol>
    <ul style="list-style-type:Italic;">
    <ol>on the cob</ol>
    <ol>Cream</ol>
    </ul>
    </li>

    <ol>Carrots</ol>
    <ol>Green Beans</ol>
    </ul>
    </li>

    </ul>
    </body>

    </html>
    3.Create a form that includes 2 textboxes (one for name, one for email address), a
    Textarea, a dropdown box (<select> tag), a set of radio buttons, and a set of
    Checkboxes. Format the form using a table. Use the GET method for form submit.

    Add JavaScript event handlers to the form to validate the form before it is Submitted.
    If the validation fails, display the problem details as a pop-up box by displaying the
    problems in a new window in red text and having the user use the back button to go
    back to the original page displaying the problems in the current window at the top of
    the page in red text

    a) Validate that an entry has been made in each form element


    b) Validate that the email address contains @ sig

    <html lang="en"><head>

    meta charset="utf-8">

    <title>JavaScript Form Validation using a sample registration form</title>

    <meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />

    <meta name="description" content="This document is an example of JavaScript Form Validation using

    a sample registration form. " />

    <link rel='stylesheet' href='js-form-validation.css' type='text/css' />

    <script src="sample-registration-form-validation.js"></script>

    </head>

    <body onload="document.registration.userid.focus();">

    <h1>Registration Form</h1>
    Use tab keys to move from one input field to the next.
    <form name='registration' onSubmit="return formValidation();">

    <ul>

    <li><label for="userid">User id:</label></li>


    <li><input type="text" name="userid" size="12" /></li>
    <li><label for="passid">Password:</label></li>
    <li><input type="password" name="passid" size="12" /></li>
    <li><label for="username">Name:</label></li>
    <li><input type="text" name="username" size="50" /></li>
    <li><label for="address">Address:</label></li>
    <li><input type="text" name="address" size="50" /></li>
    <li><label for="country">Country:</label></li>
    <li><select name="country">

    <option selected="" value="Default">(Please select a country)</option>


    <option value="AF">Australia</option>
    <option value="AL">Canada</option>
    <option value="DZ">India</option>
    <option value="AS">Russia</option>
    <option value="AD">USA</option>
    </select></li>

    <li><label for="zip">ZIP Code:</label></li>


    <li><input type="text" name="zip" /></li>
    <li><label for="email">Email:</label></li>
    <li><input type="text" name="email" size="50" /></li>
    <li><label id="gender">Sex:</label></li>
    <li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
    <li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
    <li><label>Language:</label></li>
    <li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
    <li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
    <li><label for="desc">About:</label></li>
    <li><textarea name="desc" id="desc"></textarea></li>
    <li><input type="submit" name="submit" value="Submit" /></li>

    </ul>

    </form>
    </body>
    </html>
    4a)Use a pop-up box to take info from user to replace all ‘a’ in a sentence to ‘x’
    Sol:- const string = 'Mr raja has a orange hat and a red car';
    const regex = /a/gi;
    const newText = string.replace(regex, 'x');
    console.log(newText);

    4b)Create a variable age, and set it to 17. Now create a conditional statement that
    displays the message “You are too young”, if the value of age is less than 18. If the
    value is 18 or more, display the message “You may enter”. Change the value of age to
    test that the statement works as specified
    <html lang="en">
    <head>
    <script>
    function validate(age){
    var ans="your are too young";
    if(age>=18){
    ans="you may enter";
    }
    return(ans);
    }
    </script>
    </head>
    <body>
    <script>
    var age=parseInt(prompt("Enter age"));
    var status=validate(age);
    document.write("You are <b>"+status+"</b> for age");
    </script>
    </body>
    </html>
    5.Create a page with JavaScript to do the following. These can all be on one page.
    1. Prompt the user for their name.
    2. Use a pop-up box to welcome the user by name.

    5 Question (1 and 2) answer

    <html>
    <head>
    <title>Javascript Prompt Box example</title>
    </head>
    <body>
    <script type="text/javascript">
    name = prompt("What is your name ? ")
    if(name != null && name != "")
    alert("Welcome : "+name);
    else
    alert("Welcome Unknown!!")
    </script>
    </body>
    </html>

    3. Display the current date on the page in the following format: October 30, 2000. Do
    not display the time. Do not "hard code" the date; if I load the page tomorrow, I
    should get a different date than if I load it today.

    let myDate = (dateObj.getMonth() + 1) + "/" + (dateObj.getUTCFullYear())+ "/" +


    (dateObj.getUTCDate());
    console.log(myDate)

    4. Display the last modified date and time of the document.

    Sol:- <html>
    <body>
    <script>
    var date = document.lastModified;
    document.write("Last Modified: "+date);
    </script>
    </body>
    </html>
    5. Display a message saying Good Morning if the time is before 12:00, Good
    Afternoon if the time is between 12:00 and 18:00 and Good Evening otherwise.
    Sol:-<html>
    <head>
    <title> Message using JavaScript</title>
    </head>
    <body>
    <label id="lblMassage"></label>
    </body>

    <script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var greet;

    if (hrs < 12)


    greet = 'Good Morning';
    else if (hrs >= 12 && hrs <= 18)
    greet = 'Good Afternoon';
    else if (hrs >= 18 && hrs <= 24)
    greet = 'Good Evening';

    document.getElementById('lblMassage').innerHTML =
    '<b>' + greet + '</b> !';
    </script>
    </html>

    You might also like