Scribd Logo
Upload

Welcome to Scribd!

  • 472 views

    HSC Sop2 JS

    Uploaded by

    avnishdhumal2006
    The document describes two experiments using JavaScript: 1. The first experiment involves creating a web page with two buttons - when the mouse hovers over the first button, the background color changes every seconds between 7 distinct colors, and clicking the second button displays a message in the browser status bar. 2. The second experiment involves creating a web page where the background color automatically changes every seconds between 7 distinct colors after page load, and an alert message is displayed when the page unloads. The document then provides theory on JavaScript, examples of JavaScript code, and another experiment involving form validation in JavaScript.

    Copyright:

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

    HSC Sop2 JS

    Uploaded by

    avnishdhumal2006
    472 views14 pages
    The document describes two experiments using JavaScript: 1. The first experiment involves creating a web page with two buttons - when the mouse hovers over the first button, the background color changes every seconds between 7 distinct colors, and clicking the second button displays a message in the browser status bar. 2. The second experiment involves creating a web page where the background color automatically changes every seconds between 7 distinct colors after page load, and an alert message is displayed when the page unloads. The document then provides theory on JavaScript, examples of JavaScript code, and another experiment involving form validation in JavaScript.

    Original Title

    HSC SOP2 JS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes two experiments using JavaScript: 1. The first experiment involves creating a web page with two buttons - when the mouse hovers over the first button, the background color changes every seconds between 7 distinct colors, and clicking the second button displays a message in the browser status bar. 2. The second experiment involves creating a web page where the background color automatically changes every seconds between 7 distinct colors after page load, and an alert message is displayed when the page unloads. The document then provides theory on JavaScript, examples of JavaScript code, and another experiment involving form validation in JavaScript.

    Copyright:

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

    HSC Sop2 JS

    Uploaded by

    avnishdhumal2006
    The document describes two experiments using JavaScript: 1. The first experiment involves creating a web page with two buttons - when the mouse hovers over the first button, the background color changes every seconds between 7 distinct colors, and clicking the second button displays a message in the browser status bar. 2. The second experiment involves creating a web page where the background color automatically changes every seconds between 7 distinct colors after page load, and an alert message is displayed when the page unloads. The document then provides theory on JavaScript, examples of JavaScript code, and another experiment involving form validation in JavaScript.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 14

    EXPERIMENT NO 6

    Create a web page in HTML having a white background and Two Button
    Objects.Write code using JavaScript such that when the mouse is placed
    over the first button object without clicking, the color of the background of
    the page should change after every _ seconds. There should at least be 7
    different and visibly distinct background colors excluding the default color.
    When the second button object is clicked, appropriate message should be
    displayed in Browsers status bar.
    Create another web page using JavaScript where the background color
    changes automatically after every _ seconds. This event must be triggered
    automatically after the page gets loaded in the browser. There should at
    least be 7 different and visibly distinct background colors. When the page is
    unloaded, the appropriate alert message should be displayed.

    Theory:

    JavaScript (js) is a light-weight object-oriented programming language


    which is used by several websites for scripting the webpages. It is an
    interpreted, full-fledged programming language that enables dynamic
    interactivity on websites when applied to an HTML document. It was
    introduced in the year 1995 for adding programs to the webpages in the
    Netscape Navigator browser. Since then, it has been adopted by all other
    graphical web browsers. With JavaScript, users can build modern web
    applications to interact directly without reloading the page every time. The
    traditional website uses js to provide several forms of interactivity and
    simplicity.

    There are following features of JavaScript:

    1. All popular web browsers support JavaScript as they provide built-in


    execution environments.
    2. JavaScript follows the syntax and structure of the C programming
    language. Thus, it is a structured programming language.
    3. JavaScript is a weakly typed language, where certain types are
    implicitly cast (depending on the operation).
    4. JavaScript is an object-oriented programming language that uses
    prototypes rather than using classes for inheritance.
    5. It is a light-weighted and interpreted language.
    6. It is a case-sensitive language.

    7. JavaScript is supportable in several operating systems including,


    Windows, macOS, etc.
    8. It provides good control to the users over the web browsers.

    Application of JavaScript

    JavaScript is used to create interactive websites. It is mainly used for:

    o Client-side validation,
    o Dynamic drop-down menus,
    o Displaying date and time,
    o Displaying pop-up windows and dialog boxes (like an alert dialog
    box, confirm dialog box and prompt dialog box),
    o Displaying clocks etc.

    Javascript Example:

    <html>
    <body>
    <script type="text/javascript">
    document.write("JavaScript is a simple language for javatpoint learners");
    </script>
    </body>
    </html>
    JS1.HTML

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body id="background">
    <h1>Background Color is being changed every 1 seconds</h1>
    <script>
    var i = 0;
    function change() {

    var doc = document.getElementById("background");

    var color = ["red", "blue", "brown", "green","yellow","pink","orange"];


    doc.style.backgroundColor = color[i];
    i = i+1;
    if(i==7){
    doc.style.backgroundColor = "white";
    }

    }
    function click_btn() {
    window.status = "Background Color is being changed every 1
    seconds";
    }
    </script>
    <input type="button" name="b1" value="over here"
    onmouseover="setInterval(change, 1000)">
    <input type="submit" name="b2" value="click here" onclick="click_btn()">
    </body>
    </html>
    OUTPUT:
    JS2.HTML

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body id="background" onload="setInterval(change, 1000)">
    <h1>Background Color is being changed every 1 seconds</h1>
    <script>
    var i =
    0;
    function change() {

    var doc = document.getElementById("background");

    var color = ["red", "blue", "brown",


    "green","yellow","pink","orange"]; doc.style.backgroundColor =
    color[i];
    i = i+1;
    if(i==7)
    {
    doc.style.backgroundColor =
    "white"; alert("Page unload")
    }
    }
    </script>
    </body>
    </html>
    EXPERIMENT NO 7

    Create JavaScript program for the following form validations. Make use of HTML5
    properties to do the following validations:
    1) Name, address, contact number and email are required fields of the form.
    2) Address field should show the hint value which will disappear when field gets focus or key
    press event.
    3) Telephone number should be maximum 10 digit number only.
    4) Email field should contain valid email address, @ should appear only once and not at the
    beginning or at end. It must contain at least one dot(.).
    5) Make use of pattern attribute for email to accept lowercase, uppercase alphabets, digits
    and specified symbols.

    Theory:

    JavaScript Form Validation


    HTML form validation can be done by JavaScript.
    If a form field (fname) is empty, this function alerts a message, and returns false, to
    prevent the form from being submitted
    Example:
    function validateForm() {
    let x = document.forms["myForm"]["fname"].value;
    if (x == "") {
    alert("Name must be filled out");
    return false;
    }
    }

    Data Validation:
    Data validation is the process of ensuring that user input is clean, correct, and useful.
    Typical validation tasks are:
    • has the user filled in all required fields?
    • has the user entered a valid date?
    • has the user entered text in a numeric field?
    Most often, the purpose of data validation is to ensure correct user input.
    Validation can be defined by many different methods, and deployed in many different ways.
    Server side validation is performed by a web server, after input has been sent to the
    server.
    Client side validation is performed by a web browser, before input is sent to a web server.
    Program:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Form Validation</title>
    </head>
    <body>
    <h1>Information Form</h1>
    <form name="myForm" onsubmit="return validateForm()">
    <label for="txt_name">Your Name</label>
    <input type="text" id="txt_name" name="txt_name" required>
    <br><br>

    <label for="txt_address">Address</label>
    <textarea id="txt_address" name="txt_address"

    placeholder="Permanent Address" onfocus="this.placeholder=''"

    onkeypress="this.placeholder=''" required></textarea>
    <br><br>

    <label for="telephone">Contact</label>
    <input type="tel" id="telephone" name="telephone"

    maxlength="10" required>
    <br><br>

    <label for="txt_email">Email</label>
    <input type="email" id="txt_email" name="txt_email"

    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}"

    required>
    <br><br>

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


    </form>

    <script>
    function validateForm() {
    // Validate name, address, contact, and email fields
    var name = document.forms["myForm"]["txt_name"].value;
    var address = document.forms["myForm"]["txt_address"].value;
    var contact = document.forms["myForm"]["telephone"].value;
    var email = document.forms["myForm"]["txt_email"].value;

    if (name == "") {
    alert("Name must be filled out");
    return false;
    }

    if (address == "") {
    alert("Address must be filled out");
    return false;
    }

    if (contact == "") {
    alert("Contact number must be filled out");
    return false;
    }

    if (contact.length !== 10) {


    alert("Contact number must be a 10-digit number");
    return false;
    }

    if (email == "") {
    alert("Email must be filled out");
    return false;
    }

    return true;
    }
    </script>
    </body>
    </html>
    EXPERIMENT NO 8

    Create event driven JavaScript program for the following. Make use of
    appropriate variables, JavaScript inbuilt string functions and control
    structures.

    ➢ To accept string from user and count number of vowels in the given
    string.

    Theory:

    A JavaScript variable is simply a name of storage location. There are


    two types of variables in JavaScript : local variable and global variable.

    There are some rules while declaring a JavaScript variable (also known as identifiers).

    1. Name must start with a letter (a to z or A to Z), underscore( _ ), or


    dollar( $ ) sign.
    2. After first letter we can use digits (0 to 9), for example value1.

    3. JavaScript variables are case sensitive, for example x and X are


    different variables.
    JSVAR.HTML

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>

    </head>
    <body>
    <script type="text/javascript">
    function getVowels() {
    var vowelsCount = 0;
    var str = document.getElementById("t1").value;
    var string = str.toString();
    for (var i = 0; i <= string.length - 1; i++) {
    if (string.charAt(i) == "a" || string.charAt(i) == "e" || string.charAt(i) ==
    "i" || string.charAt(i) == "o" || string.charAt(i) == "u") {
    vowelsCount += 1;
    }
    }
    //document.write("Total Vowels : "+vowelsCount);
    document.getElementById('demo').innerHTML = "Total Vowels :
    "+vowelsCount;
    return vowelsCount;
    }
    </script>
    <tr>
    <td><input type="text" id="t1"></td>
    <td><input type="submit" name="submit"
    onclick="getVowels()"></td>
    </tr>
    <p id="demo"></p>
    </body>
    </html>
    OUTPUT:
    EXPERIMENT NO 9

    Create JavaScript program which computes the average marks of students. Accept
    six subject marks of student from user. Calculate average marks of student which
    is used to determine the corresponding grades.

    <!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>

    Output:

    You might also like