Difference between revisions of "JavaScript/C2/Operators-in-JS/English"
Nancyvarkey (Talk | contribs) |
Pravin1389 (Talk | contribs) |
||
Line 525: | Line 525: | ||
− | In our example '''m | + | In our example '''m''' is greater than '''n ''', which is''' true '''and '''a''' is '''true. ''' |
Line 541: | Line 541: | ||
− | In our example ''' | + | In our example '''m''' is less than '''n''', which is''' false '''and '''a''' is '''true. ''' |
Line 638: | Line 638: | ||
m > n | m > n | ||
− | || Here we are checking whether the '''condition m | + | || Here we are checking whether the '''condition m greater than n''' is '''true.''' |
Revision as of 09:25, 3 February 2021
Title of the script:Operators in JS
Author: Jayesh Katta Ramalingaiah
Domain Reviewer:
Novice Reviewer:
Keywords: JavaScript, HTML, Operators, Arithmetic, Logical, Assignment, Comparison, Ternary
|
|
Slide: Title | Hello and Welcome to the spoken tutorial on “Operators in JS”. |
Slide:
Learning Objectives |
In this tutorial, we will learn about:
|
Slide: System Specifications | This tutorial is recorded using:
However you may use any other browser of your choice. |
Slide : Pre-requisites | To practice this tutorial,
|
Slide: Code files |
|
Slide: Types of Operators | The different types of operators used in JS are:
|
Slide: Assignment Operator | = (Equal to) is an assignment operator in JS. |
Slide: Arithmetic Operators | Arithmetic operators in JS are
Let us take an example and understand this better. |
Open the Visual Studio Code editor. | Open the Visual Studio Code editor. |
[Editor]
Open Folder -> Practice-JS |
In the Welcome page, click on the Open folder link at the top left corner.
|
[Editor] Click on
|
In the Explorer panel on the left, under Practice-JS click on the file named index.html
|
[Editor] Type:
<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.
|
Press: Ctrl + S | Save the file. |
Press: Alt + L and Alt + O
|
Now press the key combinations Alt + L and Alt + O.
|
Show firefox | The default browser will open automatically and a new tab opens. |
[Firefox] Press Ctrl + Shift + I
|
Now press Ctrl + Shift + I keys together.
|
[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
|
In the Explorer panel on the left, under Practice-JS click on the file named main.js |
[Editor] Type:
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); |
In the main.js file, replace the code as shown.
|
[Editor] Highlight:
var n = 10; |
Here we have created two variables m and n and assigned values to them.
|
[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); |
As seen in the slide, these are five arithmetic operators.
For example: m plus n, m minus n and so on and displaying the results. |
[Editor] Highlight:
|
Here, m+n is within quotes, so that it gets printed on the console for understanding purposes.
|
[Editor] Highlight:
|
Here, m and n are the variables which are first initialized.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
m - n 10 m * n 200 m / n 2 m % n 0 |
We can see the output displayed
|
Slide: Comparison Operators | Next let us learn about Comparison operators.
Let us take an example and understand this better. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
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 == 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.
Let me explain the code in detail.
|
[Editor] Highlight:
var n = 10; var z = "20"; |
Here we have created three variables m, n and z and assigned values to them.
|
[Editor] Highlight:
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.
|
[Editor] Highlight:
|
For example- how do we answer the question, “Is m > n?”
|
[Editor] Highlight:
|
In m == z, we are comparing whether m is equal to z or not.
|
[Editor] Highlight:
|
Equal value and equal type is a special case in JS.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
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.
|
Slide: Logical Operators | Next let us learn about Logical operators. These are
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;
console.log('m > n || a', m > n || a); console.log('!a', !a); |
In the main.js file, replace the code as shown.
|
[Editor] Highlight:
var m = 20; var n = 10; |
Here, we take three variables a, m and n and initialize each of them with some values.
|
[Editor] Highlight:
|
Logical AND is used between two or more conditions.
|
[Editor] Highlight:
|
Logical OR, is also used between two or more conditions.
|
[Editor] Highlight:
|
Logical NOT is always used to return the opposite boolean.
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 !a false |
This is the output we see.
|
Slide: Ternary Operator | Next, let’s learn about the Ternary operator.
The syntax is as shown.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
var n = 10;
|
In the main.js file, replace the code as shown.
|
[Editor] Highlight:
var n = 10; |
Here we have declared two variables and initialized them with some values. |
[Editor] Highlight:
|
Here we are checking whether the condition m greater than n is true.
|
[Editor] Highlight:
|
So, the code after the question mark, console.log("m is greater than n") gets executed. |
[Editor] Highlight:
|
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:
|
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:
|
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.
|
Slide: Summary | In this tutorial, we have learnt about:
|
Slide: Assignment | As an assignment:
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
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. |