Switch ,Array, Events in JavaScript

 Switch 

<html>
<head>
  <title>Switch Case with Buttons</title>
</head>
<body>
<label for="a">Enter the first number:</label>
<input type="number" id="num1"><br>
<label for="b">Enter the second number:</label>
<input type="number" id="num2"><br><br>
  <button id="button1">Add</button>
  <button id="button2">Mod</button>
  <button id="button3">Del</button><br><br>

  <div id="show"></div>

  <script>
  function fun1()
  {
  const a = parseFloat(document.getElementById("num1").value);

  const b = parseFloat(document.getElementById("num2").value);
  
  const c=a+b;
  document.getElementById('show').innerHTML =  'Addition is ='+c ;
  }
   function fun2()
  {
  const a = parseFloat(document.getElementById("num1").value);

  const b = parseFloat(document.getElementById("num2").value);
  
  const c=a*b;
  document.getElementById('show').innerHTML = 'Modification is = '+c ;
  }
  function fun3()
  {
  const a = parseFloat(document.getElementById("num1").value);

  const b = parseFloat(document.getElementById("num2").value);
  
  const c=a-b;
  
  document.getElementById('show').innerHTML = 'Deletion is = '+c ;
  }
    
    document.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', function() {
        switch (this.id) {
          case 'button1':
  fun1();
             break;
          case 'button2':
  
  
fun2();

                        break;
          case 'button3':
  
            fun3();
            break;
                  }
      });
    });
  </script>
</body>
</html>
OUTPUT

Array

<html>
<body>
<h1> Array</h1> 
<p>Display an array elements individually:</p>
<p id="ar1"></p>
<p>Display an array elements with toString() method:</p>
<p id="ar2"></p>
<script>
const color = ["Red", "Orange", "green", "blue"];
document.getElementById("ar1").innerHTML = color[0]+','+color[1];
const fruits = ["Red", "Orange", "green", "blue"];
document.getElementById("ar2").innerHTML = fruits.toString();
</script>
</body>
</html>

JavaScript Events

OnLoad Event

<html>
<head><title>onload event</title></head>
<body onload="show()">

<h1>The onload Event</h1>
<h2><p id="show"></h2>
<script>
function show() {
  document.getElementById('show').innerHTML = 'wel come';
}
</script>

</body>
</html>
OUTPUT

Onchange Event

<html>
<head>
<title>Onchange Event</title>
</head>
<body>

<label for="num1">Enter first number:</label>
<input type="number" id="num1" name="num1"><br><br>

<label for="num2">Enter second number:</label>
<input type="number" id="num2" name="num2"><br><br>

<label for="operation">Select operation:</label>
<select id="operation" name="operation" onchange="calculate()">
  <option value="add">Addition</option>
  <option value="mod">Modification</option>
  <option value="del">Deletion</option>
</select><br><br>


<p id="result"></p>

<script>
function calculate() {
  let num1 = parseFloat(document.getElementById("num1").value);
  let num2 = parseFloat(document.getElementById("num2").value);
  let operation = document.getElementById("operation").value;
  let result;
  function add()
  {
  result = num1 + num2;
   }
  function mod()
  {
  result = num1 * num2;
    }
  function del()
  {
  result = num1 - num2;
   }

  switch (operation) {
    case "add":
      add();
      break;
    case "mod":
      mod();
      break;
  case "del":
      del();
      break;
    default:
      result = "Invalid operation";
  }

 document.getElementById("result").textContent = "Result: "+result ;
}


calculate();
</script>

</body>
</html>
OUTPUT
OnMouseover ,OnMouseout Event

<html>
<head>
<title>onmouseover onmouseout Event</title>
<style>
#myDiv {
  background:url("p11.jpg");
width:250px;
height:250px;
background-size:cover;
background-position:center;
display: none; /* Initially hidden */
}
button{
height:60px;
width:80px;
}
</style>
</head>
<body>
<p>Move the mouse over the button to display the image.</p>


<div id="myDiv">
  This is the hidden div.
</div>
<button id="button1"onmouseover="showDiv()" onmouseout="hideDiv()">Display</button>
<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
 button1.style.display = "none"
}

function hideDiv() {
  document.getElementById("myDiv").style.display = "none";
 button1.style.display = "block"
}
</script>

</body>
</html>
OUTPUT
OnMouseover ,OnMouseout Event
<html>
<head>
<title>Onchange Event</title>
<style>
#myDiv{
background:url("p11.jpg");
width:250px;
height:250px;
background-size:cover;
background-position:center;
display ="block";
}
</style>
</head>
<body>

<div id="myDiv">
  
</div>

<script>
  const myDiv = document.getElementById("myDiv");

  myDiv.onmouseover = function() {
   
document.getElementById("myDiv").style.width = "500px";
document.getElementById("myDiv").style.height = "500px";

  };

  myDiv.onmouseout = function() {
document.getElementById("myDiv").style.width = "250px";
document.getElementById("myDiv").style.height = "250px";

  };
</script>
</body>
</html>
OUTPUT
OnMouseout

OnMouseover
 

















Comments

Post a Comment

Popular posts from this blog

The structure of HTML and some basic tags

Image
The structure of HTML ·         The structure of HTML   defined by a set of nested tags  like html ,head and a body tag  . What is tag? Tags are used to create elements, such as paragraphs, headings, links, images, and tables.   It is made up of the pair < ​​(less than sign)> (greater than sign).   Most HTML tags have an opening tag and a closing tag. The closing tag has the same text as the opening tag, but with an extra forward-slash (/) character. Structure of html  <html> <head><title> title </title></head> <body> </body> </html> Structure components  <!DOCTYPE html> : Declares the document as an HTML document. <html> : It is the root element of an HTML page. <head> : It contains meta information about the page. <title> : Display the title of the page. <body...
Read more

Frame tag and Example

Image
  Frame tag  Elements of frame tag The <frameset> tag provides us with the facility to divide our windows into multiple sections and each section has the same capability to execute individually. Attribute rows:  Rows divide our window into rows and the format of division is  <frameset rows=”50%,*”> or<frameset rows=”50%,50%”> Cols:  Cols divide our window into columns and the format of division                is  <frameset Cols =”50%, *”>   or <frameset Cols =”50%,50%”>   Border: Border provides border format at a pixel rate. Example:                                     <frameset border="1> <frame> tag: The frame tag provides a window frame with the src attribute. Attributes:  src: Src provides the URL of the to-be e...
Read more

Introduction and objective of HTML

Image
  Introduction to html What is HTML? HTML stand for Hypertext Markup Language. It is a computer language that defines the structure and content of web pages. It's language to build block of the web. In HTML, text can be structured into paragraphs, lists, images, and data tables. HTML can structure formatted content like paragraphs, lists, images, and data tables. HTML can create interactive elements like buttons that users can click to perform actions.  HTML can create links that connect web pages to one another.  We can customize  its appearance with CSS and JavaScript. Cascading Style Sheets (CSS) are used to describe a web page's appearance.  JavaScript provides us  functionality  to describe a web page's. JavaScript programming language provide functional to describe a web page's .  Characteristic of HTML  HTML uses markup to describe how to display text, images, and other content in a web browser.  Markup ...
Read more