|
20 | 20 | Below you'll find the the current list of general topics in this handy collection of JavaScript recipes. Note that each of these general topics have multiple studies and extended studies, so be sure to browse through each folder for the subject you are interested in! |
21 | 21 |
|
22 | 22 | * [JavaScript Outlines](#JavaScript-Outlines) |
| 23 | +* [JavaScript Libraries](#JavaScript-Libraries) |
23 | 24 | * [Coding Studies](#Coding-Studies) |
24 | 25 | * [Methods Extended Study](#Methods-Extended-Study) |
25 | 26 |
|
@@ -105,6 +106,50 @@ Example: *JavaScript_Recipes > JavaScript Outlines > [**controlFlow.js**](https: |
105 | 106 | console.log(role("Tom")); // Unknown User! |
106 | 107 | ``` |
107 | 108 |
|
| 109 | +<br> |
| 110 | + |
| 111 | +## JavaScript Libraries |
| 112 | +* In [JavaScript Libraries](https://github.com/john-azzaro/JavaScript_Recipes/tree/master/JavaScript%20Libraries "JavaScript Libraries"), you'll find outlines of a growing number of JavaScript libraries organized in question-and-answer format (good for study and memory retention). |
| 113 | + |
| 114 | +Example: *JavaScript_Recipes > JavaScript Libraries > jQuery > [**jQuery.js**](https://github.com/john-azzaro/JavaScript_Recipes/blob/master/JavaScript%20Libraries/jQuery/jQuery.js "jQuery.js")*: |
| 115 | + |
| 116 | +```JavaScript |
| 117 | +/* |
| 118 | +7. What is an Event Listener? |
| 119 | +///////////////////////////// |
| 120 | + • An Event Listener listens for a specific event to happen (i.e. submit, click, etc.) and does something (i.e. callback function). |
| 121 | + • To take advantage of DOM manipulation, you need to be able to alter the DOM when EVENTS happen. |
| 122 | + • In order to update the DOM, you need to 'listen' for specific events happening. |
| 123 | + • For example: |
| 124 | + • an app LISTENS when the user submits a form |
| 125 | + • an app LISTENS for when the user inputs a search term. |
| 126 | + • an app LISTENS for when the user clicks on an element in the page to launch an animation. |
| 127 | + |
| 128 | + • So an EVENT LISTENER has 2 parts: |
| 129 | + 1. Specify what event to listen for. |
| 130 | + 2. provide a CALLBACK FUNCTION that runs when the event occurs. */ |
| 131 | + |
| 132 | + function handleClicks() { |
| 133 | + let clickCount = 0; // Stores click count. |
| 134 | + $('.click-counter').text(clickCount); // show current click count. |
| 135 | + $('main').on('click', '#clicker', function(event) { // On click... |
| 136 | + clickCount += 1; // ... increment by 1... |
| 137 | + $('.click-counter').text(clickCount); // ... show new click count. |
| 138 | + }); |
| 139 | + } |
| 140 | + |
| 141 | + function setUpEventHandlers3() { |
| 142 | + handleClicks(); |
| 143 | + } |
| 144 | + |
| 145 | + function initialize3() { |
| 146 | + setUpEventHandlers3(); |
| 147 | + } |
| 148 | + |
| 149 | + $(initialize3); |
| 150 | +``` |
| 151 | + |
| 152 | + |
108 | 153 | <br> |
109 | 154 |
|
110 | 155 | ## Coding Studies |
|
0 commit comments