Swapping Using Bitwise XOR in TypeScript

Swapping Using Bitwise XOR in TypeScript

 
The bitwise XOR operator is indicated by a caret ( ^ ) and it works directly on the binary digits of a number. A TypeScript program can swap two numbers with and without using a third variable in a function and using the bitwise XOR operator.
 
We use swapping while sorting. Swapping can re-arrange numbers in a specified order either in descending order or in ascending order.
 
Example
The following example shows how to use swapping using bitwise XOR in TypeScript. For example, if in your TypeScript program you have two variables x and y where x = 2 and y = 9, then
 
before swapping:
x = 4
y = 5
 
After swapping:
x = 9
y = 2
 
To see how it works to use the following instructions.
 
Step 1
 
Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is subsequently opened. Provide a name for your application like "Swapping", then click on the Ok button.
 
Step 2
  
After Step 1 your project has been created. Solution Explorer, which is at the right side of Visual Studio, contains the following:
  • CSS: This is the design style sheet file. Styles define how to display HTML elements.
  • ts: This is the TypeScript file. All classes and functions are defined in this file.
  • js: This is the JavaScript file. This file is created from the TypeScript file.
Step 3
 

swapping.ts

  1. class Swapping {  
  2.  swap() {  
  3.   var x, y;  
  4.   x = parseInt(prompt("Enter the First Number"));  
  5.   y = parseInt(prompt("Enter the Second Number"));  
  6.   var span = document.createElement("span");  
  7.   span.style.color = "Green";  
  8.   span.innerText = "Before Swapping \n" + "First number x ->" + x + "\n" + "Second number y ->" + y + "\n";  
  9.   document.body.appendChild(span);  
  10.   x = x ^ y;  
  11.   y = x ^ y;  
  12.   x = x ^ y;  
  13.   var span = document.createElement("span");  
  14.   span.style.color = "Blue";  
  15.   span.innerText = "After Swapping \n" + "First number x ->" + x + "\n" + "Second number y ->" + y + "\n";  
  16.   document.body.appendChild(span);  
  17.  }  
  18. }  
  19. window.onload = () => {  
  20.  var change = new Swapping();  
  21.  change.swap();  
  22. }  

Demo.html

  1. < !DOCTYPEhtml >  
  2.  <  
  3.  htmllang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  metacharset = "utf-8" / >  
  9.  <  
  10.  title > Swapping < /title>  
  11.  <  
  12.  linkrel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  scriptsrc = "app.js" > < /script>  
  17.  <  
  18.  /head>  
  19.  <  
  20.  body >  
  21.  <  
  22.  h2 > Swapping using bitwise XOR in TypeScript < /h2>  
  23.  <  
  24.  divid = "content" / >  
  25.  <  
  26.  /body>  
  27.  <  
  28.  /html>  

app.js

  1. var Swapping = (function() {  
  2.  function Swapping() {}  
  3.  Swapping.prototype.swap = function() {  
  4.   var x;  
  5.   var y;  
  6.   x = parseInt(prompt("Enter the First Number"));  
  7.   y = parseInt(prompt("Enter the Second Number"));  
  8.   var span = document.createElement("span");  
  9.   span.style.color = "Green";  
  10.   span.innerText = "Before Swapping \n" + "First number x ->" + x + "\n" + "Second number y ->" + y + "\n";  
  11.   document.body.appendChild(span);  
  12.   x = x ^ y;  
  13.   y = x ^ y;  
  14.   x = x ^ y;  
  15.   var span = document.createElement("span");  
  16.   span.style.color = "Blue";  
  17.   span.innerText = "After Swapping \n" + "First number x ->" + x + "\n" + "Second number y ->" + y + "\n";  
  18.   document.body.appendChild(span);  
  19.  };  
  20.  return Swapping;  
  21. })();  
  22. window.onload = function() {  
  23.  var change = new Swapping();  
  24.  change.swap();  
  25. };  
Output 1
Enter the first number:
 
enter-first-num.jpg
 
Output 2 
Enter the second number:
 
enter-second-num.jpg
 
Then click on the ok button.
 
Output 3
After the swapping:
 
result.jpg


Similar Articles