KEMBAR78
JavaScript Operators | PPTX
Java Script Operators
DR.G.JASMINE BEULAH
ASSISTANT PROFESSOR, KRISTU JAYANTI COLLEGE, BENGALURU
Assign values to variables and add them together:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
The assignment operator (=) assigns a value to
a variable.
<!DOCTYPE html>
<html>
<body>
<h2>The = Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript Arithmetic Operators
JavaScript Assignment Operators
Assignment
<!DOCTYPE html>
<html>
<body>
<h2>The += Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript String Operators
The + operator can also be used to add
(concatenate) strings.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>The + operator concatenates (adds) strings.</p>
<p id="demo"></p>
<script>
var txt1 = "John";
var txt2 = "Doe";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>
</body>
</html>
Adding Strings and Numbers
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>Adding a number and a string, returns a string.</p>
<p id="demo"></p>
<script>
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>
</body>
</html>
JavaScript Comparison Operators
JavaScript Logical Operators
JavaScript Type Operators
JavaScript if else and else if
Conditional statements are used to perform different actions based on different conditions.
 In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a specified condition is true
 Use else to specify a block of code to be executed, if the same condition is false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed
The If Statement
 Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
 Syntax
 if (condition) {
// block of code to be executed if the condition is true
}
The If Statement
<html>
<body>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18)
{
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>
<html>
<body>
<p>Click the button to display a time-based greeting:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>
The JavaScript Switch Statement
 Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
 The switch expression is evaluated once.
 The value of the expression is compared with the values of each case.
 If there is a match, the associated block of code is executed.
 If there is no match, the default code block is executed.
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>

JavaScript Operators

  • 1.
    Java Script Operators DR.G.JASMINEBEULAH ASSISTANT PROFESSOR, KRISTU JAYANTI COLLEGE, BENGALURU
  • 2.
    Assign values tovariables and add them together: <!DOCTYPE html> <html> <body> <h2>JavaScript Operators</h2> <p>x = 5, y = 2, calculate z = x + y, and display z:</p> <p id="demo"></p> <script> var x = 5; var y = 2; var z = x + y; document.getElementById("demo").innerHTML = z; </script> </body> </html>
  • 3.
    The assignment operator(=) assigns a value to a variable. <!DOCTYPE html> <html> <body> <h2>The = Operator</h2> <p id="demo"></p> <script> var x = 10; document.getElementById("demo").innerHTML = x; </script> </body> </html>
  • 4.
  • 5.
  • 6.
    Assignment <!DOCTYPE html> <html> <body> <h2>The +=Operator</h2> <p id="demo"></p> <script> var x = 10; x += 5; document.getElementById("demo").innerHTML = x; </script> </body> </html>
  • 7.
    JavaScript String Operators The+ operator can also be used to add (concatenate) strings. <!DOCTYPE html> <html> <body> <h2>JavaScript Operators</h2> <p>The + operator concatenates (adds) strings.</p> <p id="demo"></p> <script> var txt1 = "John"; var txt2 = "Doe"; document.getElementById("demo").innerHTML = txt1 + " " + txt2; </script> </body> </html>
  • 8.
    Adding Strings andNumbers <!DOCTYPE html> <html> <body> <h2>JavaScript Operators</h2> <p>Adding a number and a string, returns a string.</p> <p id="demo"></p> <script> var x = 5 + 5; var y = "5" + 5; var z = "Hello" + 5; document.getElementById("demo").innerHTML = x + "<br>" + y + "<br>" + z; </script> </body> </html>
  • 9.
  • 10.
  • 11.
  • 12.
    JavaScript if elseand else if Conditional statements are used to perform different actions based on different conditions.  In JavaScript we have the following conditional statements:  Use if to specify a block of code to be executed, if a specified condition is true  Use else to specify a block of code to be executed, if the same condition is false  Use else if to specify a new condition to test, if the first condition is false  Use switch to specify many alternative blocks of code to be executed
  • 13.
    The If Statement Use the if statement to specify a block of JavaScript code to be executed if a condition is true.  Syntax  if (condition) { // block of code to be executed if the condition is true }
  • 14.
    The If Statement <html> <body> <p>Display"Good day!" if the hour is less than 18:00:</p> <p id="demo">Good Evening!</p> <script> if (new Date().getHours() < 18) { document.getElementById("demo").innerHTML = "Good day!"; } </script> </body> </html>
  • 15.
    <html> <body> <p>Click the buttonto display a time-based greeting:</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var hour = new Date().getHours(); var greeting; if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; } </script> </body> </html>
  • 16.
    The JavaScript SwitchStatement  Use the switch statement to select one of many code blocks to be executed. Syntax switch(expression) { case x: // code block break; case y: // code block break; default: // code block } This is how it works:  The switch expression is evaluated once.  The value of the expression is compared with the values of each case.  If there is a match, the associated block of code is executed.  If there is no match, the default code block is executed.
  • 17.
    <html> <body> <p id="demo"></p> <script> var day; switch(new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break;
  • 18.
    case 4: day ="Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; } document.getElementById("demo").innerHTML = "Today is " + day; </script> </body> </html>