Difference between revisions of "JavaScript/C3/Events-and-Event-Listeners-in-JS/English"
(Created page with "Title of the script:Events and Event Listeners Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, events, event listeners...") |
Nancyvarkey (Talk | contribs) |
||
(One intermediate revision by the same user 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, events, event listeners | Keywords: JavaScript, HTML, events, event listeners | ||
Line 24: | Line 24: | ||
Learning Objectives | Learning Objectives | ||
|| In this tutorial, we will learn about: | || In this tutorial, we will learn about: | ||
− | |||
− | |||
* '''Events ''' | * '''Events ''' | ||
* Adding '''Event Listeners '''and, | * Adding '''Event Listeners '''and, | ||
* Removing '''Event Listeners '''in '''JS''' | * Removing '''Event Listeners '''in '''JS''' | ||
− | |||
− | |||
|- | |- | ||
|| 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 46: | Line 40: | ||
|| 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 57: | Line 47: | ||
|| | || | ||
* 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 practising. | * Make a copy and then use them for practising. | ||
− | |||
− | |||
|- | |- | ||
Line 69: | Line 57: | ||
* '''DOM events''' are sent to notify '''code '''that have taken place. | * '''DOM events''' are sent to notify '''code '''that have taken place. | ||
* Technically, each '''event '''is represented by an '''object'''. | * Technically, each '''event '''is represented by an '''object'''. | ||
− | |||
− | |||
|- | |- | ||
|| Slide: Events | || Slide: Events | ||
− | |||
'''https://developer.mozilla.org/en-US/docs/Web/Events''' | '''https://developer.mozilla.org/en-US/docs/Web/Events''' | ||
|| | || | ||
* To know different '''types''' of '''DOM events''', visit this link. | * To know different '''types''' of '''DOM events''', visit this link. | ||
− | |||
− | |||
|- | |- | ||
|| Slide: Adding & Removing Event Listeners | || Slide: Adding & Removing Event Listeners | ||
− | |||
Line 91: | Line 73: | ||
* To add an '''event listener''' programmatically, we use the '''addEventListener method'''. | * To add an '''event listener''' programmatically, we use the '''addEventListener method'''. | ||
* To remove an '''event listener''', programmatically we use the '''removeEventListener method'''. | * To remove an '''event listener''', programmatically we use the '''removeEventListener method'''. | ||
− | |||
− | |||
|- | |- | ||
Line 100: | Line 80: | ||
|- | |- | ||
|| Show VS editor | || Show VS editor | ||
− | || Open '''Visual Studio Code editor''' | + | || Open '''Visual Studio Code editor'''. |
|- | |- | ||
Line 108: | Line 88: | ||
Welcome Page -> Open Folder -> '''Practice-JS''' | Welcome Page -> Open Folder -> '''Practice-JS''' | ||
|| In the '''editor, '''browse and open the folder “'''Practice-JS''' ”. | || In the '''editor, '''browse and open the folder “'''Practice-JS''' ”. | ||
− | |||
− | |||
|- | |- | ||
− | || <nowiki>[Editor] </nowiki>Click on | + | || <nowiki>[Editor] </nowiki>Click on '''Explorer '''pane -> '''Practice-JS''' -> '''index.html''' |
− | + | ||
− | + | ||
− | '''Explorer '''pane -> '''Practice-JS''' -> '''index.html''' | + | |
|| Under '''Practice-JS''' folder, open the file named '''index.html''' | || Under '''Practice-JS''' folder, open the file named '''index.html''' | ||
Line 173: | Line 148: | ||
− | Point to the | + | Point to the '''browser developer tools''' |
Click on the '''Console''' tab | Click on the '''Console''' tab | ||
− | || Now open the '''Browser developer tools''' panel and go to the '''console tab''' | + | || Now open the '''Browser developer tools''' panel and go to the '''console tab'''. |
|- | |- | ||
Line 250: | Line 225: | ||
|- | |- | ||
− | || Switch to ''' | + | || Switch to '''browser''' |
|| Switch back to the '''browser.''' | || Switch back to the '''browser.''' | ||
Line 266: | Line 241: | ||
'''You clicked on the Button!''' | '''You clicked on the Button!''' | ||
− | || We can see a '''log''' printed in the '''console '''on clicking | + | || We can see a '''log''' printed in the '''console '''on clicking the button. |
Line 272: | Line 247: | ||
− | And executed the '''function '''on the click | + | And executed the '''function '''on the click of the button. |
|- | |- | ||
Line 322: | Line 297: | ||
|| Switch to '''Browser''' | || Switch to '''Browser''' | ||
|| Switch back to the '''browser.''' | || Switch back to the '''browser.''' | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|- | |- | ||
Line 334: | Line 303: | ||
Show console | Show console | ||
− | || We cannot see any '''log''' printed in the '''console '''on clicking | + | || We cannot see any '''log''' printed in the '''console '''on clicking the button. |
− | This is because we have added and removed the event in one go. | + | This is because we have added and removed the '''event''' in one go. |
Line 356: | Line 325: | ||
* Adding '''Event Listeners '''and, | * Adding '''Event Listeners '''and, | ||
* Removing '''Event Listeners '''in '''JS''' | * Removing '''Event Listeners '''in '''JS''' | ||
− | |||
− | |||
|- | |- | ||
Line 366: | Line 333: | ||
* Clear the existing code | * Clear the existing code | ||
* Add a '''button '''named''' Click''' with '''id''' as '''click''' | * Add a '''button '''named''' Click''' with '''id''' as '''click''' | ||
− | |||
− | |||
|- | |- | ||
Line 378: | Line 343: | ||
* On '''even '''button clicks, log - '''Foo''' | * On '''even '''button clicks, log - '''Foo''' | ||
* On '''odd '''button clicks, log - '''Bar ''' | * On '''odd '''button clicks, log - '''Bar ''' | ||
− | |||
− | |||
|- | |- | ||
Line 386: | Line 349: | ||
* 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 394: | Line 355: | ||
* 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 402: | Line 361: | ||
* 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:08, 21 June 2021
Title of the script:Events and Event Listeners
Author: Jayesh Katta Ramalingaiah
Domain Reviewer: Ankita Maske
Novice Reviewer: Praveeen S.
Keywords: JavaScript, HTML, events, event listeners
|
|
Slide: Title | Hello and Welcome to the spoken tutorial on “Events and Event Listeners 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: Events |
|
Slide: Events |
|
Slide: Adding & Removing Event Listeners
|
|
Only Narration | Now let us take an example and understand events better. |
Show VS editor | Open Visual Studio Code editor. |
[Editor]
|
In the editor, browse and open the folder “Practice-JS ”.
|
[Editor] Click on Explorer pane -> Practice-JS -> index.html | Under Practice-JS folder, open the file named index.html
|
[Editor] Type:
<html lang="en"> <head> <title> Events and Event Listeners </title> </head> <body> <button id = "clickButton" > CLICK ME! </button> <script src = "main.js" > </script> </body> </html> |
In the index.html file, update the code as shown.
|
[Editor] Highlight:
|
Here, I have created a button with id clickButton. |
Press: Ctrl + S | Save the file. |
Press: Alt + L and Alt + O | Start the Live server. |
Show firefox | The default browser will open automatically and a new tab opens. |
[Firefox] Press Ctrl + Shift + I
|
Now open the Browser developer tools panel and go to the console tab. |
Switch to Editor | Switch back to the editor. |
[Editor] Click on
|
Under Practice-JS folder, open the file named main.js |
[Editor] Type:
console.log("You clicked on the Button!"); }
|
In the main.js file, update the code as shown. |
[Editor] [Highlight]:
console.log("You clicked on the Button!"); } |
Here, I have just declared a normal function, which logs - “You clicked on the Button!” |
[Editor] [Highlight]:
|
You are already aware that getElementById function returns an element with a specified ID. |
[Editor] [Highlight]:
|
For the returned element, I’m adding an event listener, using the addEventListener method. |
[Editor] [Highlight]:
|
addEventListener method accepts two mandatory parameters.
|
Press: Ctrl + S | Save the file. |
Switch to browser | Switch back to the browser. |
[Browser]
Click on Button [CLICK ME!] |
Click on the Click Me button in the webpage. |
[Browser] [Console Tab]:
You clicked on the Button! |
We can see a log printed in the console on clicking the button.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
|
Add this line in the main.js file after the last line. |
[Editor] [Highlight]:
|
You are already aware that getElementById function returns an element with specified ID. |
[Editor] [Highlight]:
|
For the returned element, I’m removing the event listener using the removeEventListener method. |
[Editor] [Highlight]:
|
removeEventListener method accepts two mandatory parameters.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
|
We cannot see any log printed in the console on clicking the button.
|
Only narration | With this we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have learnt:
|
Slide: Assignment | As an assignment,
|
Slide: Assignment |
|
Slide: 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. |