MSBTE notes and resources for students

Home
CSS

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

in this post we are going to learn about client slide scripting 1st practical simple JavaScript with HTML for arithmetic expression
14

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.