JavaScript/C2/Operators-in-JS/English

From Script | Spoken-Tutorial
Revision as of 21:04, 17 January 2021 by Nancyvarkey (Talk | contribs)

Jump to: navigation, search

Title of the script:Operators in JS

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, Operators, Arithmetic, Logical, Assignment, Comparison, Ternary


Visual Cue
Narration
Slide: Title Hello and Welcome to the spoken tutorial on “Operators in JS”.
Slide:

Learning Objectives

In this tutorial, we will learn about:
  • Different types of Operators in JS
  • And their usage
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.51.1 (code editor)
  • Firefox web browser

However you may use any other browser of your choice.

Slide : Pre-requisites To practice this tutorial,
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the files.
  • Make a copy and then use them for practicing.
Slide: Types of Operators The different types of operators used in JS are:
  • Assignment operator
  • Arithmetic operators
  • Comparison operators
  • Logical operators
  • Ternary operator
Slide: Assignment Operator = (Equal to) is an assignment operator in JS.
Slide: Arithmetic Operators Arithmetic operators in JS are
  • + (Addition)
  • - (Subtraction)
  • * (Multiplication)
  • / (Division)
  • % (Modulo)

Let us take an example and understand this better.

Open the Visual Studio Code editor. Open the Visual Studio Code editor.
[Editor]


Welcome Page ->

Open Folder ->

Practice-JS

In the Welcome page, click on the Open folder link at the top left corner.


Browse and locate the folder “Practice-JS ”.


Then click on the OK button at the top right corner.

[Editor] Click on


Explorer panel-> Practice-JS -> index.html

In the Explorer panel on the left, under Practice-JS click on the file named index.html


We had created this file earlier. The same is available in the Code files link for practice.

[Editor] Type:


<!DOCTYPE html>

<html lang="en">

<head>

<title> Operators</title>

</head>

<body>

<script src="main.js"></script>

</body>

</html>

In the index.html file, replace the code as shown.


In this code we have written a sample HTML code and linked the JS file.



Press: Ctrl + S Save the file.
Press: Alt + L and Alt + O


Now press the key combinations Alt + L and Alt + O.


The Live server gets started.

Show firefox The default browser will open automatically and a new tab opens.
[Firefox] Press Ctrl + Shift + I


Point to the Browser developer tools

Now press Ctrl + Shift + I keys together.


The Browser developer tools panel opens.

[Firefox] Click on the Console tab Now click on the console tab in the developer tools.
Switch to Editor Switch back to the editor.
[Editor] Click on


Explorer panel-> Practice-JS -> main.js

In the Explorer panel on the left, under Practice-JS click on the file named main.js
[Editor] Type:


var m = 20;

var n = 10;


console.log('m + n', m + n);

console.log('m - n', m - n);

console.log('m * n', m * n);

console.log('m / n', m / n);

console.log('m % n', m % n);

In the main.js file, replace the code as shown.


This code will execute all 5 arithmetic operators.


Let me explain in detail.

[Editor] Highlight:


var m = 20;

var n = 10;

Here we have created two variables m and n and assigned values to them.


Here, equal to is the assignment operator.


That is the reason we are able to assign a value to m and n respectively.


We would then be using these assigned values with the arithmetic operators.

[Editor] Highlight:


console.log('m + n', m + n);

console.log('m - n', m - n);

console.log('m * n', m * n);

console.log('m / n', m / n);

console.log('m % n', m % n);

As seen in the slide, these are five arithmetic operators.


We are calculating the resultant values.

For example: m plus n, m minus n and so on and displaying the results.

[Editor] Highlight:


console.log('m + n', m + n);

Here, m+n is within quotes, so that it gets printed on the console for understanding purposes.


Likewise, we are printing all the values one after another.

[Editor] Highlight:


console.log('m + n', m + n);

Here, m and n are the variables which are first initialized.


Then the values are computed and the results are displayed.


Like in other programming languages, in JS also it is not necessary to have any format specifiers for values.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


m + n 30

m - n 10

m * n 200

m / n 2

m % n 0

We can see the output displayed


  • m + n is 30
  • m - n is 10
  • m * n is 200
  • m / n is 2
  • m % n is 0
Slide: Comparison Operators Next let us learn about Comparison operators.


These are

  • > (Greater than)
  • < (Less than)
  • >= (Greater than or equal to)
  • <= (Less than or equal to)
  • == (Equal to)
  • === (Equal value and Equal type)
  • != (Not equal to)

Let us take an example and understand this better.

Switch to Editor Switch back to the editor.
[Editor] Type:


var m = 20;

var n = 10;

var z = "20";


console.log('m > n', m > n);

console.log('m < n', m < n);

console.log('m >= n', m >= n);

console.log('m <= n', m <= n);

console.log('m == z', m == z);

console.log('m === z', m === z);

console.log('m != z', m != n);

In the main.js file, replace the code as shown.


This code will execute all the comparison operators one after another.

Let me explain the code in detail.



[Editor] Highlight:


var m = 20;

var n = 10;

var z = "20";

Here we have created three variables m, n and z and assigned values to them.


We would be using these values with the comparison operators.

[Editor] Highlight:


console.log('m > n', m > n);

console.log('m < n', m < n);

console.log('m >= n', m >= n);

console.log('m <= n', m <= n);

console.log('m != z', m != n);

Here we are comparing m, n and z with all the possible operators.


When comparing the values using these comparison operators, the compiler only returns true or false.



[Editor] Highlight:


console.log('m > n', m > n);

For example- how do we answer the question, “Is m > n?”


We know that m is 20 and n is 10. So we say, YES.


Similarly JS returns boolean value true.


Please note. Comparison operators compare only the value not the type.

[Editor] Highlight:


console.log('m == z', m == z);

In m == z, we are comparing whether m is equal to z or not.


Though the values are the same that is 20, m is of type number and z is of type string.


The comparison operator compares only the values and this returns true in the console.

[Editor] Highlight:


console.log('m === z', m === z);

Equal value and equal type is a special case in JS.


So if we compare m (===) equal value and equal type z, JS compiler does not check values alone, it even checks the type.


Only if the values and types are both the same, the compiler returns true.


This is the major difference between (==) equal to and (===) equal value and equal type operators

Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


m > n true

m < n false

m >= n true

m <= n false

m == z true

m === z false

m != z true

We can see the output on the console.


  • m > n is true
  • m < n is false
  • m >= n is true
  • m <= n is false
  • m == z is true
  • m === z is false
  • m != z is true
Slide: Logical Operators Next let us learn about Logical operators. These are
  • && (Logical AND)
  • || (Logical OR) and
  • ! (Logical NOT)

Let us take an example and understand this better.

Switch to Editor Switch back to the editor.
[Editor] Type:


var a = true;

var m = 20;

var n = 10;


console.log('m > n && a', m > n && a);

console.log('m > n || a', m > n || a);

console.log('!a', !a);

In the main.js file, replace the code as shown.


In this code, we will use the logical operators in different combinations and see the results.

[Editor] Highlight:


var a = true;

var m = 20;

var n = 10;

Here, we take three variables a, m and n and initialize each of them with some values.


We will be using these variable values with the logical operators.

[Editor] Highlight:


console.log('m > n && a', m > n && a);

Logical AND is used between two or more conditions.


Only if all the conditions are satisfied, the JS compiler will return true.


In our example m>n is true and a is true.


So since both are true, JS compiler concludes the result as true.

[Editor] Highlight:


console.log('m > n || a', m > n || a);

Logical OR, is also used between two or more conditions.


If any one condition is satisfied, the JS compiler will return true.


In our example m<n is false and a is true.


So since we have one true, JS compiler concludes the result as true.

[Editor] Highlight:


console.log('!a', !a);

Logical NOT is always used to return the opposite boolean.


Since we have declared a is true, adding (!) exclamation would become !true.

And so the result will be false.

Press: Ctrl + S Save the file.
Switch to Browser Switch to the browser.
[Browser] [Console Tab]:

Highlight:


m > n && a true

m > n || a true

!a false

This is the output we see.


  • m > n && a is true
  • m > n || a is true
  • !a is false


Slide: Ternary Operator Next, let’s learn about the Ternary operator.


Ternary operator takes three operands -

  • A condition followed by a question mark
  • Expression 1 to be executed if the condition is satisfied followed by a colon
  • Expression 2 to be executed if the condition is satisfied

The syntax is as shown.


This operator can also be used as a shortcut for the if statement.


Let us take an example and understand this better.

Switch to Editor Switch back to the editor.
[Editor] Type:


var m = 20;

var n = 10;


m > n ? console.log("m is greater than n") : console.log("m is less than n");

In the main.js file, replace the code as shown.



[Editor] Highlight:


var m = 20;

var n = 10;

Here we have declared two variables and initialized them with some values.
[Editor] Highlight:


m > n

Here we are checking whether the condition m > n is true.


As per the values, it will return true.

[Editor] Highlight:


? console.log("m is greater than n")

So, the code after the question mark, console.log("m is greater than n") gets executed.
[Editor] Highlight:


console.log("m is less than n");
If the condition were to return false, the code after the colon would be executed.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


m is greater than n

Here, we can see the output m is greater than n because the condition is true.
Switch to Editor Switch back to the editor.
var m = 20;

var n = 100;

Change the value of n as shown.
Press: Ctrl + S Save the file and observe the change in the console.
[Browser] [Console Tab]:

Highlight:


m is less than n

We can see the output m is less than n because the condition is false.
Only narration With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Assignment Operator
  • Arithmetic Operators
  • Comparison Operators
  • Logical Operators
  • Ternary Operator in JS
Slide: Assignment As an assignment:
  • Open the file assignment.js which you have created earlier
  • Clear the existing code
  • Create three variables a, b and c
  • Assign two random numbers to a and b
  • Assign a boolean value to c
  • Only if the sum of a and b is more than 20 and, c is true, log the sum of a and b
  • Else log “unable to display result”
  • Open the file MyPage.html in a web browser.
  • Observe the output in the browser’s console.
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
Slide: Forum questions Pls post your timed queries in this forum
Slide: Acknowledgement Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India
Slide: Thanks The script for this tutorial is contributed by Jayesh.

And this is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C2/Operators-in-JS/English&oldid=54726"