Difference between revisions of "JavaScript/C2/Operators-in-JS/English"
(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...") |
Nancyvarkey (Talk | contribs) |
||
Line 8: | Line 8: | ||
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 | + | * 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 | + | || '''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. |
|- | |- | ||
Line 178: | Line 159: | ||
|| <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 289: | ||
* '''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 | + | || 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 337: | ||
− | 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 371: | ||
console.log('m != z', m != n); | console.log('m != z', m != n); | ||
− | || Here we are comparing '''m''' and ''' | + | || Here we are comparing '''m, n''' and '''z''' with all the possible '''operators'''. |
Line 437: | Line 413: | ||
console.log('m === z', '''m === z'''); | console.log('m === z', '''m === z'''); | ||
− | || ''' | + | || '''Equal value and equal type''' is a special case in '''JS'''. |
− | So if we compare '''m === | + | 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 422: | ||
− | 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 461: | ||
* '''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 | + | || 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. | Let us take an example and understand this better. | ||
Line 546: | Line 518: | ||
− | Only if all the '''conditions''' are satisfied | + | Only if all the '''conditions''' are satisfied, the '''JS compiler '''will return '''true.''' |
Line 578: | Line 550: | ||
− | Since we have declared '''a''' is '''true, '''adding''' ! '''would become !'''true''' | + | Since we have declared '''a''' is '''true, '''adding''' (!) exclamation '''would become !'''true'''. |
+ | |||
+ | And so the result will be '''false.''' | ||
|- | |- | ||
Line 729: | Line 703: | ||
|| 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 708: | ||
* '''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 721: | ||
* 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 727: | ||
* 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 733: | ||
* 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. | ||
− | |||
− | |||
|- | |- |
Revision as of 08:55, 17 January 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. |
[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 > 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. |