Difference between revisions of "JavaScript/C2/Operators-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "Title of the script:Operators in JS Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, Operators, Arithmetic, Logical, Assig...")
 
 
(3 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
Author: Jayesh Katta Ramalingaiah
 
Author: Jayesh Katta Ramalingaiah
  
−
Domain Reviewer:  
+
Domain Reviewer: Ankita Maske
  
−
Novice Reviewer:  
+
Novice Reviewer: Praveeen S.
  
 
Keywords: JavaScript, HTML, Operators, Arithmetic, Logical, Assignment, Comparison, Ternary
 
Keywords: JavaScript, HTML, Operators, Arithmetic, Logical, Assignment, Comparison, Ternary
−
 
  
  
Line 24: Line 23:
 
Learning Objectives
 
Learning Objectives
 
|| In this tutorial, we will learn about:
 
|| In this tutorial, we will learn about:
−
 
−
 
 
* Different '''types''' of '''Operators''' in '''JS'''
 
* Different '''types''' of '''Operators''' in '''JS'''
 
* And their usage
 
* And their usage
−
 
−
 
  
 
|-
 
|-
 
|| Slide: System Specifications
 
|| Slide: System Specifications
 
|| This tutorial is recorded using:
 
|| This tutorial is recorded using:
−
 
−
 
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Visual Studio Code''' version 1.51.1 ('''code editor''')
 
* '''Visual Studio Code''' version 1.51.1 ('''code editor''')
Line 45: Line 38:
 
|| Slide : Pre-requisites
 
|| Slide : Pre-requisites
 
|| To practice this tutorial,
 
|| To practice this tutorial,
−
 
+
* You should be familiar with writing and executing''' JS''' files.
−
 
+
−
* You should be familiar with writing and executing''' JS''' files'''.'''
+
 
* If not, please go through the prerequisite tutorials on this website.
 
* If not, please go through the prerequisite tutorials on this website.
−
 
−
 
  
 
|-
 
|-
Line 56: Line 45:
 
||  
 
||  
 
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
 
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
−
* Pls download and extract the file.
+
* Pls download and extract the files.
 
* Make a copy and then use them for practicing.
 
* Make a copy and then use them for practicing.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Types of Operators
 
|| Slide: Types of Operators
 
|| The different '''types''' of '''operators''' used in '''JS''' are:
 
|| The different '''types''' of '''operators''' used in '''JS''' are:
−
 
−
 
 
* '''Assignment operator'''
 
* '''Assignment operator'''
 
* '''Arithmetic operators'''
 
* '''Arithmetic operators'''
Line 71: Line 56:
 
* '''Logical operators'''
 
* '''Logical operators'''
 
* '''Ternary operator'''
 
* '''Ternary operator'''
−
 
−
 
  
 
|-
 
|-
Line 80: Line 63:
 
|-
 
|-
 
|| Slide: Arithmetic Operators
 
|| Slide: Arithmetic Operators
−
|| '''Arithmetic''' '''operators''' in '''JS''' are  
+
|| '''Arithmetic operators''' in '''JS''' are  
−
 
+
−
 
+
 
* '''+ '''(Addition)
 
* '''+ '''(Addition)
 
* '''- '''(Subtraction)
 
* '''- '''(Subtraction)
Line 89: Line 70:
 
* '''% '''(Modulo)
 
* '''% '''(Modulo)
  
−
Let us take an example and understand this better..
+
Let us take an example and understand this better.
 +
 
 +
|-
 +
||Open the '''Visual Studio Code editor'''.
 +
||Open the '''Visual Studio Code editor'''.
  
 
|-
 
|-
Line 100: Line 85:
  
 
'''Practice-JS'''
 
'''Practice-JS'''
−
|| In the '''Welcome page, '''click on the '''Open folder link '''at the top left corner'''.'''
+
|| In the '''Welcome page, '''click on the '''Open folder link '''at the top left corner.
  
  
Line 178: Line 163:
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| Now click on the '''console tab''' in the '''developer tools.'''
 
|| Now click on the '''console tab''' in the '''developer tools.'''
−
 
−
 
−
 
  
 
|-
 
|-
Line 311: Line 293:
 
* '''m / n is 2'''
 
* '''m / n is 2'''
 
* '''m % n is 0'''
 
* '''m % n is 0'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Comparison Operators
 
|| Slide: Comparison Operators
−
|| Next let us learn about '''Comparison''' '''operators'''.
+
|| Next let us learn about '''Comparison operators'''.
  
  
 
These are
 
These are
−
 
−
 
 
* '''> '''(Greater than)
 
* '''> '''(Greater than)
 
* '''<nowiki>< </nowiki>'''(Less than)
 
* '''<nowiki>< </nowiki>'''(Less than)
Line 363: Line 341:
  
  
−
This code will execute all the '''comparison operators''' one after another. Let me explain the code in detail.
+
This code will execute all the '''comparison operators''' one after another.  
 +
 
 +
Let me explain the code in detail.
  
  
Line 395: Line 375:
  
 
console.log('m != z', m != n);
 
console.log('m != z', m != n);
−
|| Here we are comparing '''m''' and '''n '''with all the possible '''operators'''.
+
|| Here we are comparing '''m, n''' and '''z''' with all the possible '''operators'''.
  
  
Line 437: Line 417:
  
 
console.log('m === z', '''m === z''');
 
console.log('m === z', '''m === z''');
−
|| '''<nowiki>=== </nowiki>'''is a special case in '''JS'''.
+
|| '''Equal value and equal type''' is a special case in '''JS'''.
  
  
−
So if we compare '''m === n, JS compiler''' does not check '''values''' alone, it even checks the '''type'''.
+
So if we compare '''m (===) equal value and equal type z, JS compiler''' does not check '''values''' alone, it even checks the '''type'''.
  
  
Line 446: Line 426:
  
  
−
This is the major difference between '''<nowiki>== </nowiki>'''and '''<nowiki>=== operators</nowiki>'''
+
This is the major difference between '''<nowiki>(==) equal to </nowiki>'''and '''<nowiki>(===) equal value and equal type operators</nowiki>'''
  
 
|-
 
|-
Line 485: Line 465:
 
* '''m === z is false'''
 
* '''m === z is false'''
 
* '''m != z is true'''
 
* '''m != z is true'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Logical Operators
 
|| Slide: Logical Operators
−
|| Next let us learn about '''Logical''' '''operators'''. These are  
+
|| Next let us learn about '''Logical operators'''. These are  
−
 
+
* '''&& (Logical AND)'''
−
 
+
* '''|| (Logical OR)''' and  
−
* '''&& '''(Logical AND)
+
* '''! (Logical NOT)'''
−
* '''|| '''(Logical OR)''' '''and''' '''
+
−
* '''! '''(Logical NOT)
+
  
 
Let us take an example and understand this better.
 
Let us take an example and understand this better.
Line 546: Line 522:
  
  
−
Only if all the '''conditions''' are satisfied will the '''JS compiler '''return '''true.'''
+
Only if all the '''conditions''' are satisfied, the '''JS compiler '''will return '''true.'''
  
  
−
In our example '''m>n '''is''' true '''and '''a''' is '''true. '''
+
In our example '''m''' is greater than '''n ''', which is''' true '''and '''a''' is '''true. '''
  
  
Line 565: Line 541:
  
  
−
In our example '''<nowiki>m<n </nowiki>'''is''' false '''and '''a''' is '''true. '''
+
In our example '''m''' is less than '''n''', which is''' false '''and '''a''' is '''true. '''
  
  
Line 578: Line 554:
  
  
−
Since we have declared '''a''' is '''true, '''adding''' ! '''would become !'''true''', and so the result will be '''false.'''
+
Since we have declared '''a''' is '''true, '''adding''' (!) exclamation '''would become !'''true'''.
 +
 
 +
And so the result will be '''false.'''
  
 
|-
 
|-
Line 660: Line 638:
  
 
m > n  
 
m > n  
−
|| Here we are checking whether the '''condition m > n''' is '''true.'''
+
|| Here we are checking whether the '''condition m greater than n''' is '''true.'''
  
  
Line 729: Line 707:
 
|| Slide''': '''Summary''' '''
 
|| Slide''': '''Summary''' '''
 
|| In this tutorial, we have learnt about:
 
|| In this tutorial, we have learnt about:
−
 
−
 
 
* '''Assignment Operator'''
 
* '''Assignment Operator'''
 
* '''Arithmetic Operators'''
 
* '''Arithmetic Operators'''
Line 736: Line 712:
 
* '''Logical Operators'''
 
* '''Logical Operators'''
 
* '''Ternary Operator''' in '''JS'''
 
* '''Ternary Operator''' in '''JS'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Assignment
 
|| Slide: Assignment
 
|| As an assignment:
 
|| As an assignment:
−
 
−
 
 
* Open the file '''assignment.js''' which you have created earlier
 
* Open the file '''assignment.js''' which you have created earlier
 
* Clear the existing code
 
* Clear the existing code
Line 753: Line 725:
 
* Open the file '''MyPage.html '''in a '''web''' '''browser'''.
 
* Open the file '''MyPage.html '''in a '''web''' '''browser'''.
 
* Observe the output in the '''browser’s console'''.
 
* Observe the output in the '''browser’s console'''.
−
 
−
 
  
 
|-
 
|-
Line 761: Line 731:
 
* The video at the following link summarises the Spoken Tutorial project.
 
* The video at the following link summarises the Spoken Tutorial project.
 
* Please download and watch it
 
* Please download and watch it
−
 
−
 
  
 
|-
 
|-
Line 769: Line 737:
 
* We conduct workshops using spoken tutorials and give certificates.
 
* We conduct workshops using spoken tutorials and give certificates.
 
* For more details, please write to us.
 
* For more details, please write to us.
−
 
−
 
  
 
|-
 
|-

Latest revision as of 11:11, 21 June 2021

Title of the script:Operators in JS

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

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 is greater than n , which 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 is less than n, which 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 greater than 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=55276"