Write simple JavaScript with HTML for arithmetic expression evaluation and message printing | Client Side Scripting Language (22519)

Experiment No: 01 Write simple JavaScript with HTML for arithmetic expression evaluation and message printing.



What is HTML?


  • HTML stands for Hypertext markup language

  • HTML is the standard markup language for creating Web pages.

  • HTML describes the structure of a Web page.

  • HTML consists of a series of elements, and tags represent these elements.















    • css solved Manual
    Css solved practicals



    What is JavaScript?


  • JavaScript is interpreted.
  • You can use a client-side, event-based, object-oriented scripting language to add dynamic interactivity to your web pages.
  • It was designed to add interactivity to HTML pages.

  • It is an interpreted language (which means that scripts execute without preliminary compilation)
    JavaScript scripts are written in plain text, like HTML, XML, Java, PHP, and just about any
    other modern computer code.


    • Features of JavaScript:


    1. Light-weighted and object-based Scripting language

    2. Case sensitive.

    3. Control statement, looping statement

    4. Open source and cross Platform

    5. Client-side technology

    6. Event handling

    7. Interpreter based

    8. In build function

    9. JavaScript is a Scripting language, and it is not Java.


    Uses of JavaScript:


  • Client-side validation

  • Dynamic dropdown menus

  • Open and close new windows

  • Manipulated HTML layers

  • Enhance the interfaces HTML

  • Animated elements on a page

  • Fixed browser problems


    • Adding JavaScript to Webpage Using <script> tag


    To use JavaScript in your program just insert <script> …. </script> tag either in <HEAD>
    or <BODY> section of your webpage HTML file.



    <script language = “javascript” type=“text/javascript”>
    /* Javascript code */
    </script>
    Program:
    /* Hello World program in JavaScript */
    <html>
    <head>
    <title>First JavaScript Program</title>
    </head>
    <body>
    <script type=”text/javascript”>
    document.write(“Hello World!”);
    </script>
    </body>
    </html>




    Explanation:


    1. document.write This statement is used to display the desired message on a web browser.

    2. Comments in Java: The // is a single line of comments
    The /*…*/ can be used as multi-line comments

    3. The XHTML <!--> and <--> is also known as JavaScript

    JavaScript can "display" data in different ways:


  • Writing into an HTML element, using innerHTML.

  • To access an HTML element, JavaScript can use the document.getElementById(id)method.

  • The id attribute defines the HTML element. The innerHTML property defines the HTML content.

  • Writing into the HTML output using document.write().

  • Writing into an alert box, using a window. alert().

  • Writing into the browser console, using console.log().


    • JavaScript Variables


    In a programming language, variables are used to store data values.


    JavaScript uses the var keyword to declare variables.


    An equal sign is used to assign values to variables.


    Arithmetic Operators:


    1. Addition (+):-This operator is used to add two operands.

    2. Subtraction (-):-This operator is used to subtract two operands.

    3. Multiplication (*):-This operator is used to multiply two operands.

    4. Division (/):-This operator is used to divide two operands.

    5. Modulus (%):-This operator is used to check the Remainder.

    6. Increment (++):-This operator is used to increment the operand by 1.

    7. Decrement (--):-This operator is used to decrement operand by1.


    Conclusion:


    We understand how to write JavaScript with HTML for arithmetic expression evaluation and message printing.


    Exercise:

    Program Code:


    1. Develop a JavaScript program to display the ‘Hello World!’ message in an alert box.

    Ans:



    <html>
    <head>
    <title> Hello World </title>
    </head>
    <body>
    <script type="text/javascript">
    alert("Hello World");
    </script>
    </body>
    </html>


    2. Develop a JavaScript program to perform the following arithmetic operations: addition,subtraction, multiplication, and division.

    Ans:



    <html>
    <head>
    <title> Hello World </title>
    </head>
    <body>
    <script type="text/javascript">
    var a = parseInt(prompt("Enter the vlaue of a: "));
    var b = parseInt(prompt("Enter the vlaue of b: "));
    var c =  a + b;
    var d = a - b;
    var e = a * b;
    var f = a / b;
    var g = a % b;
    document.write("add is " +c);
    document.write("<br>");
    document.write("sub is " +d);
    document.write("<br>");
    document.write("mul is " +e);
    document.write("<br>");
    document.write("division is " +f);
    document.write("<br>");
    document.write("mod is " +g);
    document.write("<br>");
    </script>
    </body>
    </html>


    Questions:





    What are JavaScript Data Types?







    List any four features of JavaScript.

    1. Light-weighted and object-based Scripting language

    2. Case sensitive.

    3. Control statement, looping statement

    4. Open source and cross Platform

    5. Client-side technology

    6. Event handling

    7. Interpreter based

    8. In build function

    9. JavaScript is a Scripting language, and it is not Java.






    How to declare a variable in JavaScript?

    Syntax for declaring the variable:
    var variable_name = value;
    example

    var Msbte = 5;



    What are arithmetic operators?

    Arithmetic Operators:

    1. Addition (+):-This operator is used to add two operands.

    2. Subtraction (-):-This operator is used to subtract two operands.

    3. Multiplication (*):-This operator is used to multiply two operands.

    4. Division (/):-This operator is used to divide two operands.

    5. Modulus (%):-This operator is used to check the Remainder.

    6. Increment (++):-This operator is used to increment the operand by 1.

    7. Decrement (--):-This operator is used to decrement operand by1.




    Comments

    Post a Comment

    If you have any query, please let us know