Scribd Logo
Upload

Welcome to Scribd!

  • Lab 06

    Uploaded by

    Muhammad Abubakar
    3 views5 pages
    python lab

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    python lab

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    3 views5 pages

    Lab 06

    Uploaded by

    Muhammad Abubakar
    python lab

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    LAB # 06

    Statement Purpose:
    This lab will give you practical implementation of javascript as internal or external file in web
    pages
    Activity Outcomes:
    This lab teaches you the following topics:

     JavaScrip Event Handling


    What is JavaScript?
     JavaScript was designed to add interactivity to HTML pages
     JavaScript is a scripting language
     A scripting language is a lightweight programming language
     JavaScript is usually embedded directly into HTML pages
     JavaScript is an interpreted language (means that scripts execute without preliminary
    compilation)
     Everyone can use JavaScript without purchasing a license

    Start End Tag:


    <script type="text/javascript">
    </script>

    JavaScript is Case Sensitive


    Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you
    write JavaScript statements, create or call variables, objects and functions.

    JavaScript Statements
    A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser
    what to do.
    This JavaScript statement tells the browser to write "Hello " to the web page: document.write("Hello
    ");
    It is normal to add a semicolon at the end of each executable statement. Most people think this is a
    good programming practice, and most often you will see this in JavaScript examples on the web. The
    semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret
    the end of the line as the end of the statement. Because of this you will often see examples without the
    semicolon at the end.

    JavaScript Code
    JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
    Each statement is executed by the browser in the sequence they are written.


    Event and Event Handling:
    • Events handlers are placed in the BODY part of a Web page as attributes in HTML tags
    • Events can be captured and responded to directly with JavaScript embedded in HTML tags in
    the BODY portion

    Activity 1:

    <html><head>
    <script type = "text/javascript" >
    function myFun()
    {
    alert("Samsung Button was Clicked");
    }
    </script>
    <head><body>
    <form>
    <input type = "button" value="SAMSUNG" onclick="myFun();" />
    </form>
    </body></html>

    Activity 2:
    <html>
    <head>
    <script type = "text/javascript" >
    function chkpasswords() {
    if (document.getElementById("firstpwd").value == ""){
    alert('You have not entered a password, please enter ');
    document.getElementById("firstpwd").focus();
    return false;
    }
    if (document.getElementById("firstpwd").value !=
    document.getElementById("secondpwd").value)
    {
    alert('Two password you entered are not same, re-enter');
    document.getElementById("firstpwd").focus();
    document.getElementById("firstpwd").select();
    return false;
    }

    else {
    alert('Two password you entered are same');
    return true;
    }
    }
    </script> </head>
    <body>
    <form name = "myForm" action="" onsubmit = "return(chkpasswords());">
    <p>
    </label> User Name: <input type = "text" id="username"> </label>
    <br /><br />
    </label> Password: <input type = "password" id = "firstpwd" /> </label>
    <br /><br />
    <label> Retype Password: <input type = "password" id = "secondpwd" /> </label>
    <br /><br />
    <input type = "submit" name = "submit" />
    </p>
    </form> </body> </html>
    Activity 3:
    <html> <head>
    <script type = "text/javascript" >
    </script> </head>
    <body>
    <form name = "myForm" action="" onsubmit="return(chkpasswords());">
    <p>
    </label> User Name:
    <input type = "text" id="username"> </label>
    <br /> <br />
    </label> Password:
    <input type = "password" id = "firstpwd" /> </label>
    <br /> <br />
    <label> Retype Password:
    <input type = "password" id = "secondpwd" /> </label>
    <br /><br />
    <input type = "submit" name = "submit" />
    </p> </form>
    </body></html>
    <script type = "text/javascript" >
    function chkpasswords() {
    if (document.getElementById("firstpwd").value == ""){
    alert('You have not entered a password, please enter ');
    document.getElementById("firstpwd").focus();
    return false;
    }
    if (document.getElementById("firstpwd").value !=
    document.getElementById("secondpwd").value)
    {
    alert('The two password you entered are not same, please re-enter');
    document.getElementById("firstpwd").focus();
    document.getElementById("firstpwd").select();
    return false;
    }
    else {
    alert('The two password you entered are same');
    return true;
    }
    }
    </script>

    Activity 4:
    <html>
    <body>
    <script type="text/javascript">
    //function to print the position of the leftmost vowel in the string
    function firstvowel(){
    var find = 0,pos,i;
    var str=prompt("Enter the string: ");
    str=str.toLowerCase();
    for(i=0;i<str.length;i++) {
    if(str[i]=='a' || str[i]=='e' || str[i]=='i' || str[i]=='o' || str[i]=='u')
    {
    find=1; pos=i; break;
    }
    }
    if(find)
    document.write("Position of first vowel in the string ", str, " was ",(pos+1));
    else
    document.write("Vowel Not found");
    return;
    }
    document.write("Function to find first vowel in a String","<br />");
    firstvowel();
    </script>
    </body>
    </html>
    Lab Task:

    Create a web-based shopping cart application that allows users to dynamically add, remove, and
    update items in their cart. The application should calculate the total price of the items and provide
    feedback to the user.

    Implement he following functionality.


     Display a list of products with details such as name, price, and quantity available.
     Implement "Add to Cart" buttons next to each product, allowing users to add items to their
    shopping cart.
     Enable users to view their shopping cart, modify item quantities, and remove items.
     Calculate the total price of items in the cart, including quantity adjustments, and display it to the
    user.
     Utilize event handling to handle button clicks for adding/removing items, as well as textbox
    changes for quantity adjustments.
     Provide feedback to the user on successful addition/removal of items, and dynamically update the
    total price as changes are made.

    Instructions:
     Create HTML markup for product listing, shopping cart display, and interactive elements
    (buttons, textboxes).
     Use CSS for styling to enhance the user interface.
     Implement JavaScript logic to handle events such as button clicks and textbox changes.
     Utilize arrays or objects to manage the shopping cart data.
     Implement functions for adding, removing, and updating items in the cart.
     Calculate the total price dynamically based on the items in the cart and update the display
    accordingly.

    You might also like