title
jQuery Crash Course [2] - Events

description
In this video we will be working with jQuery events including mouse, form and input events My 10 Project jQuery/JS Course - https://www.eduonix.com/affiliates/id/16-10039 Project Files - https://github.com/bradtraversy/jquery_crash_course

detail
{'title': 'jQuery Crash Course [2] - Events', 'heatmap': [{'end': 1079.695, 'start': 1065.352, 'weight': 1}], 'summary': "Covers javascript events, document ready, and jquery event handling, demonstrating practical applications of mouse events, 'on' method for event handling, dom manipulation, form events, 'this' keyword usage, and handling focus, blur, key up, change, and submit events for creating interactive applications.", 'chapters': [{'end': 172.225, 'segs': [{'end': 123.673, 'src': 'embed', 'start': 65.221, 'weight': 1, 'content': [{'end': 66.681, 'text': "And then we're going to say .", 'start': 65.221, 'duration': 1.46}, {'end': 73.525, 'text': 'click And then inside this click, we need to put in a self-calling function.', 'start': 66.681, 'duration': 6.844}, {'end': 78.18, 'text': 'Now in here is what we want to happen when the button is clicked.', 'start': 75.379, 'duration': 2.801}, {'end': 84.523, 'text': "So let's do alert and we'll just say button clicked.", 'start': 78.401, 'duration': 6.122}, {'end': 88.345, 'text': "So let's save that and reload.", 'start': 86.124, 'duration': 2.221}, {'end': 91.326, 'text': 'If I click it we get button clicked.', 'start': 89.425, 'duration': 1.901}, {'end': 104.064, 'text': 'Now, before we move on, there is one thing I want to address, and that is that sometimes people, they like to put their JavaScript in the head.', 'start': 95.45, 'duration': 8.614}, {'end': 107.549, 'text': 'I prefer it down here in the body at the end.', 'start': 104.665, 'duration': 2.884}, {'end': 117.831, 'text': 'but if I were to move this up here like that and we reload and I click button one, nothing happens.', 'start': 107.549, 'duration': 10.282}, {'end': 123.673, 'text': "the reason for that is it's trying to grab button one before it actually loads on the page.", 'start': 117.831, 'duration': 5.842}], 'summary': 'Using self-calling function to handle button click, preferring javascript in the body for proper page loading.', 'duration': 58.452, 'max_score': 65.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E65221.jpg'}, {'end': 178.289, 'src': 'embed', 'start': 151.873, 'weight': 0, 'content': [{'end': 157.196, 'text': "So what it's saying is don't run any of this code until the document's ready, until it's loaded.", 'start': 151.873, 'duration': 5.323}, {'end': 161.479, 'text': 'So now if we go and reload, and now I click button 1, it works.', 'start': 157.797, 'duration': 3.682}, {'end': 168.003, 'text': "And even if you're going to put your JavaScript and jQuery down at the bottom, it's still a good idea to have this.", 'start': 162.92, 'duration': 5.083}, {'end': 172.225, 'text': "So I'm going to move it back, but I'm going to keep that document ready.", 'start': 168.783, 'duration': 3.442}, {'end': 178.289, 'text': 'I probably should have mentioned that in the last part, but better late than never.', 'start': 173.526, 'duration': 4.763}], 'summary': 'Wait for document ready before running code, ensures functionality, and adherence to best practices.', 'duration': 26.416, 'max_score': 151.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E151873.jpg'}], 'start': 0.333, 'title': 'Javascript events and document ready', 'summary': 'Covers the implementation of mouse events using jquery, adding click events to buttons, and utilizing document.ready to ensure code runs after page load, resulting in successful button click functionality.', 'chapters': [{'end': 172.225, 'start': 0.333, 'title': 'Javascript events and document ready', 'summary': 'Covers the implementation of mouse events using jquery, including adding click events to buttons and utilizing document.ready to ensure the code runs after the page has loaded, resulting in the successful execution of the button click functionality.', 'duration': 171.892, 'highlights': ['The importance of placing JavaScript and jQuery at the bottom of the body to ensure successful execution of code after page load, as exemplified by the click event on button one.', 'Demonstration of using document.ready to delay the execution of jQuery code until the document has fully loaded, ensuring the successful functionality of the button click event.', 'Step-by-step guidance on adding a click event to button one using jQuery, resulting in the display of an alert message upon button click.']}], 'duration': 171.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E333.jpg', 'highlights': ['Demonstration of using document.ready to delay the execution of jQuery code until the document has fully loaded, ensuring the successful functionality of the button click event.', 'Step-by-step guidance on adding a click event to button one using jQuery, resulting in the display of an alert message upon button click.', 'The importance of placing JavaScript and jQuery at the bottom of the body to ensure successful execution of code after page load, as exemplified by the click event on button one.']}, {'end': 646.311, 'segs': [{'end': 200.475, 'src': 'embed', 'start': 173.526, 'weight': 0, 'content': [{'end': 178.289, 'text': 'I probably should have mentioned that in the last part, but better late than never.', 'start': 173.526, 'duration': 4.763}, {'end': 183.727, 'text': 'Okay, so anyways, button.click, we run a function.', 'start': 180.225, 'duration': 3.502}, {'end': 188.449, 'text': "Now, behind the scenes, this actually runs what's called the on method.", 'start': 183.807, 'duration': 4.642}, {'end': 190.971, 'text': "All right, and I'm just going to give you an example of that.", 'start': 188.93, 'duration': 2.041}, {'end': 200.475, 'text': "So if we say btn1.on, and then that's going to take two parameters.", 'start': 191.751, 'duration': 8.724}], 'summary': 'Demonstrates using button.click to run a function, which in turn runs the on method with two parameters.', 'duration': 26.949, 'max_score': 173.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E173526.jpg'}, {'end': 399.871, 'src': 'embed', 'start': 361.251, 'weight': 1, 'content': [{'end': 363.151, 'text': "We've just covered click up to this point.", 'start': 361.251, 'duration': 1.9}, {'end': 366.512, 'text': "So let's comment these out.", 'start': 363.271, 'duration': 3.241}, {'end': 376.754, 'text': "And then we're going to take button 1 and we're going to say .", 'start': 368.572, 'duration': 8.182}, {'end': 378.774, 'text': 'dblclick for double click.', 'start': 376.754, 'duration': 2.02}, {'end': 381.515, 'text': 'And then put our function.', 'start': 379.874, 'duration': 1.641}, {'end': 388.507, 'text': "And let's just toggle paragraph 1.", 'start': 381.535, 'duration': 6.972}, {'end': 391.568, 'text': 'OK, so now if I reload, if I click once, nothing happens.', 'start': 388.507, 'duration': 3.061}, {'end': 393.969, 'text': 'If we double click, then it toggles.', 'start': 391.588, 'duration': 2.381}, {'end': 396.17, 'text': 'OK, pretty simple.', 'start': 393.989, 'duration': 2.181}, {'end': 399.871, 'text': 'Now the next one I want to look at is hover.', 'start': 397.97, 'duration': 1.901}], 'summary': 'Demonstrated click and double click functions in javascript, with double click toggling a paragraph.', 'duration': 38.62, 'max_score': 361.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E361251.jpg'}, {'end': 620.098, 'src': 'embed', 'start': 584.224, 'weight': 2, 'content': [{'end': 586.145, 'text': "So that's how mouse up and mouse down work.", 'start': 584.224, 'duration': 1.921}, {'end': 589.238, 'text': 'So those are mouse events.', 'start': 587.757, 'duration': 1.481}, {'end': 593.48, 'text': 'Now I want to show you that we can pass an optional parameter for the event.', 'start': 589.318, 'duration': 4.162}, {'end': 601.825, 'text': "So for instance, let's take a click event, which I'll just grab up here.", 'start': 594.201, 'duration': 7.624}, {'end': 604.466, 'text': 'Copy that.', 'start': 603.826, 'duration': 0.64}, {'end': 608.348, 'text': 'So we have this button, one click.', 'start': 606.887, 'duration': 1.461}, {'end': 611.31, 'text': "And what we're going to do is pass in an E parameter here.", 'start': 608.428, 'duration': 2.882}, {'end': 614.712, 'text': "And then let's do a console.log.", 'start': 612.29, 'duration': 2.422}, {'end': 620.098, 'text': 'E to see what that gives us.', 'start': 618.617, 'duration': 1.481}], 'summary': 'Demonstrating optional parameter for mouse events in javascript.', 'duration': 35.874, 'max_score': 584.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E584224.jpg'}], 'start': 173.526, 'title': 'Javascript and jquery event handling', 'summary': "Covers the usage of the 'on' method for event handling in javascript, demonstrating its functionality and also explores jquery event handlers like click, double click, hover, mouse move, mouse up, and mouse down, showcasing their practical applications and optional parameter passing for the event and associated data.", 'chapters': [{'end': 227.02, 'start': 173.526, 'title': 'Javascript event handling', 'summary': "Explains the usage of the 'on' method for event handling in javascript, demonstrating how it takes two parameters, the event type and the function, and how it can be used as an alternative to the shorthand method, showcasing its functionality through a practical example.", 'duration': 53.494, 'highlights': ["The 'on' method in JavaScript takes two parameters, the event type and the function, providing an alternative approach to event handling.", "The demonstration showcases the functionality of the 'on' method as a practical example of its usage in JavaScript event handling.", "The chapter mentions the shorthand method as an alternative to using the 'on' method for event handling in JavaScript."]}, {'end': 646.311, 'start': 228.761, 'title': 'Jquery events and methods', 'summary': 'Covers jquery event handlers like click, double click, hover, mouse move, mouse up, and mouse down, demonstrating their usage and practical applications, also showing how to pass an optional parameter for the event and the associated data it provides.', 'duration': 417.55, 'highlights': ['The chapter covers jQuery event handlers like click, double click, hover, mouse move, mouse up, and mouse down, demonstrating their usage and practical applications. It explains the usage of various jQuery event handlers such as click, double click, hover, mouse move, mouse up, and mouse down, providing practical demonstrations of their functionality.', "Also showing how to pass an optional parameter for the event and the associated data it provides. The chapter demonstrates how to pass an optional parameter for the event, such as 'E' for click event, and shows the associated data it provides, including the event's properties and information."]}], 'duration': 472.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E173526.jpg', 'highlights': ["The 'on' method in JavaScript takes two parameters, the event type and the function, providing an alternative approach to event handling.", 'The chapter covers jQuery event handlers like click, double click, hover, mouse move, mouse up, and mouse down, demonstrating their usage and practical applications.', 'Also showing how to pass an optional parameter for the event and the associated data it provides.']}, {'end': 907.529, 'segs': [{'end': 675.212, 'src': 'embed', 'start': 646.311, 'weight': 2, 'content': [{'end': 656.378, 'text': "so if we look at current target right here and we open that up, it's going to give us some information, such as the class name,", 'start': 646.311, 'duration': 10.067}, {'end': 659.02, 'text': "which it doesn't have one, but if it did, we could access that.", 'start': 656.378, 'duration': 2.642}, {'end': 665.405, 'text': 'We can access the ID, which is BTN1.', 'start': 660.321, 'duration': 5.084}, {'end': 668.587, 'text': 'We can get the inner HTML, the inner text.', 'start': 665.505, 'duration': 3.082}, {'end': 671.569, 'text': "So there's a lot of things we can get here.", 'start': 669.688, 'duration': 1.881}, {'end': 673.31, 'text': "So let's examine the ID.", 'start': 671.629, 'duration': 1.681}, {'end': 675.212, 'text': 'So we can say console log dot.', 'start': 673.391, 'duration': 1.821}], 'summary': 'Examining the current target reveals information like class name, id (btn1), inner html, and inner text.', 'duration': 28.901, 'max_score': 646.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E646311.jpg'}, {'end': 757.504, 'src': 'embed', 'start': 712.601, 'weight': 0, 'content': [{'end': 713.862, 'text': 'And it gives us button one.', 'start': 712.601, 'duration': 1.261}, {'end': 717.402, 'text': "Okay, let's copy that.", 'start': 713.882, 'duration': 3.52}, {'end': 723.924, 'text': 'And we can also get the outer HTML, which will basically include all the tags and stuff.', 'start': 718.643, 'duration': 5.281}, {'end': 733.999, 'text': "uh, let's see undefined.", 'start': 731.418, 'duration': 2.581}, {'end': 743.721, 'text': 'i put uppercase o and now you can see we get the actual button tag and all that stuff.', 'start': 733.999, 'duration': 9.722}, {'end': 757.504, 'text': "okay now, if we wanted to add a class, let's say for our first button, here we'll say class equals btn, class all right and down here.", 'start': 743.721, 'duration': 13.783}], 'summary': 'Demonstrating obtaining button attributes and adding a class in html.', 'duration': 44.903, 'max_score': 712.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E712601.jpg'}, {'end': 834.569, 'src': 'embed', 'start': 793.47, 'weight': 1, 'content': [{'end': 795.471, 'text': "And let's pass in that E.", 'start': 793.47, 'duration': 2.001}, {'end': 798.874, 'text': "And then we're going to say console.log.", 'start': 795.471, 'duration': 3.403}, {'end': 801.496, 'text': "And in here, let's say chords.", 'start': 798.894, 'duration': 2.602}, {'end': 812.571, 'text': 'And this will be the Y chord, which we can get.', 'start': 808.667, 'duration': 3.904}, {'end': 816.535, 'text': "Let's concatenate on E dot client Y.", 'start': 812.711, 'duration': 3.824}, {'end': 818.016, 'text': 'All right.', 'start': 816.535, 'duration': 1.481}, {'end': 823.361, 'text': "And then we're going to concatenate and say X.", 'start': 818.096, 'duration': 5.265}, {'end': 825.183, 'text': "And that'll be client or E.", 'start': 823.361, 'duration': 1.822}, {'end': 834.569, 'text': 'E.clientX And that should give us the coordinates of that button when we mouse move.', 'start': 827.165, 'duration': 7.404}], 'summary': 'Using javascript to log chord coordinates on mouse move.', 'duration': 41.099, 'max_score': 793.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E793470.jpg'}], 'start': 646.311, 'title': 'Javascript dom manipulation and mouse coordinates tracking', 'summary': 'Explores accessing and modifying html elements in javascript, including adding classes and tracking mouse coordinates, logging x and y coordinates in real-time, and demonstrating mouse move events.', 'chapters': [{'end': 710.261, 'start': 646.311, 'title': 'Accessing html elements in javascript', 'summary': 'Explores accessing and retrieving information from html elements using javascript, including obtaining class names, ids, and inner html content, and using console log and alert functions for output.', 'duration': 63.95, 'highlights': ['The chapter explains how to access and retrieve information from HTML elements using JavaScript, including obtaining class names, IDs, and inner HTML content.', 'It demonstrates using console log and alert functions for output, such as displaying the ID of an element and the inner HTML content through an alert.', 'The script provides examples of accessing the class name, ID, and inner HTML content of a target element, showcasing the functionality of retrieving specific information from the HTML structure.']}, {'end': 792.349, 'start': 712.601, 'title': 'Javascript dom manipulation', 'summary': 'Explores javascript dom manipulation, demonstrating how to access and modify html elements, including adding classes and utilizing mouse move events.', 'duration': 79.748, 'highlights': ['The chapter covers accessing and modifying HTML elements, including obtaining outer HTML and adding classes.', 'Demonstrates changing the class of an HTML element, showcasing the ability to manipulate element properties.', 'Introduces the functionality of mouse move events, showcasing a practical example of using this event in JavaScript.']}, {'end': 907.529, 'start': 793.47, 'title': 'Tracking mouse coordinates', 'summary': 'Covers tracking and displaying mouse coordinates in the console and browser, using javascript to log x and y coordinates and updating them in real-time.', 'duration': 114.059, 'highlights': ['Using console.log to display mouse coordinates in real-time, updating as the mouse moves, providing real-time feedback to the user.', 'Utilizing JavaScript to fetch and display the X and Y coordinates of the mouse, enhancing user experience with interactive elements on the web page.', 'Demonstrating how to log mouse coordinates in the console and then displaying them in the browser, providing practical examples of JavaScript usage in web development.']}], 'duration': 261.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E646311.jpg', 'highlights': ['The chapter covers accessing and modifying HTML elements, including obtaining outer HTML and adding classes.', 'Using console.log to display mouse coordinates in real-time, updating as the mouse moves, providing real-time feedback to the user.', 'The chapter explains how to access and retrieve information from HTML elements using JavaScript, including obtaining class names, IDs, and inner HTML content.']}, {'end': 1095.993, 'segs': [{'end': 933.574, 'src': 'embed', 'start': 908.309, 'weight': 0, 'content': [{'end': 913.292, 'text': "And this HTML, we're going to get into that in the DOM manipulation section, so don't worry about that.", 'start': 908.309, 'duration': 4.983}, {'end': 915.934, 'text': 'I just wanted to show you that we could, in fact, do that.', 'start': 913.312, 'duration': 2.622}, {'end': 922.137, 'text': 'And you can imagine this could be good for very interactive applications that use animation and stuff like that.', 'start': 916.474, 'duration': 5.663}, {'end': 925.642, 'text': "So let's now move on to form events.", 'start': 923.319, 'duration': 2.323}, {'end': 927.405, 'text': "Okay, so let's see.", 'start': 925.942, 'duration': 1.463}, {'end': 933.574, 'text': "We're going to put in, let's just put in a horizontal rule, and then we'll put in a form.", 'start': 927.445, 'duration': 6.129}], 'summary': 'Html dom manipulation for interactive applications. moving on to form events.', 'duration': 25.265, 'max_score': 908.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E908309.jpg'}, {'end': 1026.643, 'src': 'embed', 'start': 990.357, 'weight': 1, 'content': [{'end': 1006.453, 'text': "so all the inputs dot focus and in here we'll pass in a function and let's just do alert focus.", 'start': 990.357, 'duration': 16.096}, {'end': 1015.998, 'text': 'okay, so now, if I reload and I click in here, we get an alert that says focus.', 'start': 1006.453, 'duration': 9.545}, {'end': 1020.84, 'text': 'now, one common thing that I see a lot is, when you click in a field,', 'start': 1015.998, 'duration': 4.842}, {'end': 1026.643, 'text': "it'll change the color or add a border so that you know that you're in that field.", 'start': 1020.84, 'duration': 5.803}], 'summary': 'Using javascript to create an alert on focus in a form field.', 'duration': 36.286, 'max_score': 990.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E990357.jpg'}, {'end': 1103.735, 'src': 'heatmap', 'start': 1065.352, 'weight': 2, 'content': [{'end': 1069.733, 'text': 'Now, the way we did this is not ideal, because even if I click an email, that turns pink.', 'start': 1065.352, 'duration': 4.381}, {'end': 1079.695, 'text': "And this is a perfect case for this, using the keyword this, which means whatever element you're currently in.", 'start': 1070.413, 'duration': 9.282}, {'end': 1081.776, 'text': "So in this case, whatever input we're in.", 'start': 1079.735, 'duration': 2.041}, {'end': 1086.137, 'text': 'So we can just remove that and say this.css.', 'start': 1082.616, 'duration': 3.521}, {'end': 1091.632, 'text': 'OK, so now if we click in there, click in there.', 'start': 1088.971, 'duration': 2.661}, {'end': 1095.993, 'text': "OK, so it'll it'll pertain to whatever one you click in.", 'start': 1091.652, 'duration': 4.341}, {'end': 1103.735, 'text': "Now, notice that when we click out, it doesn't go back so we can handle that very easily with the blur event.", 'start': 1097.013, 'duration': 6.722}], 'summary': "Demonstrating handling of events and utilizing 'this' keyword in css, with focus on click and blur events.", 'duration': 38.383, 'max_score': 1065.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E1065352.jpg'}], 'start': 908.309, 'title': "Dom manipulation, form events, and 'this' keyword", 'summary': "Covers dom manipulation, form events, and the usage of 'this' keyword for element-specific styling. it includes adding interactive elements to html, using form events like focus, and applying 'this' keyword to change input field styling, useful for creating interactive applications.", 'chapters': [{'end': 1026.643, 'start': 908.309, 'title': 'Dom manipulation and form events', 'summary': 'Covers dom manipulation and form events, including the demonstration of adding interactive elements to html and using form events like focus to trigger alerts, potentially useful for creating interactive applications with animation.', 'duration': 118.334, 'highlights': ['The chapter covers DOM manipulation and adding interactive elements to HTML, which can be useful for very interactive applications that use animation and other interactive features.', 'The demonstration of using form events like focus to trigger alerts provides a practical example of enhancing user interaction in web applications.', 'The lecturer demonstrates the use of form events like focus to trigger alerts, highlighting the potential for practical application in user interface design and web development.']}, {'end': 1095.993, 'start': 1026.643, 'title': "Using 'this' keyword for element-specific styling", 'summary': "Discusses using the 'this' keyword for element-specific styling, demonstrating how to apply it to an input field to change its background color to pink and ensure that the styling pertains to the specific input field clicked.", 'duration': 69.35, 'highlights': ["Demonstrating how to apply 'this' keyword for element-specific styling The chapter explains how to use the 'this' keyword to ensure that the styling pertains to the specific input field clicked, preventing all input fields from being affected.", "Changing the background color of an input field to pink The chapter illustrates the process of using 'this' to change the background color of an input field to pink upon being clicked."]}], 'duration': 187.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E908309.jpg', 'highlights': ['The chapter covers DOM manipulation and adding interactive elements to HTML, useful for interactive applications.', 'Demonstration of using form events like focus to trigger alerts provides a practical example of enhancing user interaction.', "Demonstrating how to apply 'this' keyword for element-specific styling to prevent affecting all input fields."]}, {'end': 1458.328, 'segs': [{'end': 1225.718, 'src': 'embed', 'start': 1137.856, 'weight': 1, 'content': [{'end': 1142.037, 'text': "So now I'll click in, click out, and you can see that it's working correctly.", 'start': 1137.856, 'duration': 4.181}, {'end': 1145.538, 'text': "So that's an example of focus and blur.", 'start': 1143.037, 'duration': 2.501}, {'end': 1149.719, 'text': 'Now we also have a key up and key down event.', 'start': 1146.418, 'duration': 3.301}, {'end': 1153.8, 'text': 'So basically when you push a key in or when you release it when it goes up.', 'start': 1150.199, 'duration': 3.601}, {'end': 1158.721, 'text': "So I am going to, actually we'll just keep that, that's fine.", 'start': 1154.72, 'duration': 4.001}, {'end': 1161.262, 'text': "But then we're going to add another.", 'start': 1159.922, 'duration': 1.34}, {'end': 1170.481, 'text': "We're going to say input and then we're going to do dot key up.", 'start': 1164.36, 'duration': 6.121}, {'end': 1174.242, 'text': 'And inside here have a function.', 'start': 1172.201, 'duration': 2.041}, {'end': 1185.924, 'text': "And let's see, we'll do console dot log key up.", 'start': 1174.262, 'duration': 11.662}, {'end': 1192.785, 'text': "Okay, now if I go in, click, and I start to type, you'll see that key up keeps logging down here.", 'start': 1185.944, 'duration': 6.841}, {'end': 1199.867, 'text': "Now, what if we want to get the actual data that we're typing in??", 'start': 1193.965, 'duration': 5.902}, {'end': 1209.451, 'text': "We can do that by passing in e, and then we'll change this to console.log, e.target.value.", 'start': 1199.907, 'duration': 9.544}, {'end': 1216.094, 'text': "So now, if I start to type, you'll see that it's going to give us whatever we're typing in.", 'start': 1211.032, 'duration': 5.062}, {'end': 1223.034, 'text': 'All right, and the next event I want to look at is change, and we can actually pertain this to a select.', 'start': 1217.568, 'duration': 5.466}, {'end': 1225.718, 'text': 'So we have a select here with the ID of gender.', 'start': 1223.335, 'duration': 2.383}], 'summary': 'Demonstration of focus, blur, key up, key down, input, and change events with console logs and practical examples.', 'duration': 87.862, 'max_score': 1137.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E1137856.jpg'}, {'end': 1362.452, 'src': 'embed', 'start': 1315.426, 'weight': 0, 'content': [{'end': 1318.367, 'text': "now we're gonna deal with the form itself.", 'start': 1315.426, 'duration': 2.941}, {'end': 1321.389, 'text': "so we'll take that form which I think has an ID.", 'start': 1318.367, 'duration': 3.022}, {'end': 1323.109, 'text': "it doesn't.", 'start': 1321.389, 'duration': 1.72}, {'end': 1335.154, 'text': "so we'll just say ID equals form and then we'll go ID form.submit.", 'start': 1323.109, 'duration': 12.045}, {'end': 1352.886, 'text': "Okay, now if we were to console.log submitted, whoops, can't type today.", 'start': 1335.174, 'duration': 17.712}, {'end': 1356.249, 'text': "So let's try that and see what happens.", 'start': 1354.668, 'duration': 1.581}, {'end': 1359.13, 'text': 'You can fill in whatever we want and submit.', 'start': 1356.969, 'duration': 2.161}, {'end': 1362.452, 'text': 'I guess that has to be an email address.', 'start': 1360.571, 'duration': 1.881}], 'summary': "Demonstrating form submission with id 'form' and console logging 'submitted'.", 'duration': 47.026, 'max_score': 1315.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E1315426.jpg'}], 'start': 1097.013, 'title': 'Handling events and form submission', 'summary': 'Covers the implementation and practical usage of handling focus, blur, key up, change, and submit events in javascript.', 'chapters': [{'end': 1458.328, 'start': 1097.013, 'title': 'Handling events and form submission', 'summary': 'Covers handling focus, blur, key up, change, and submit events in javascript, demonstrating their implementation and practical usage.', 'duration': 361.315, 'highlights': ['By demonstrating the implementation of focus and blur events, the chapter illustrates the handling of clicking inside and outside of a box, providing a clear understanding of these events.', 'The practical usage of key up event is explained through an example of logging the data typed in, showcasing the dynamic nature of this event.', 'The chapter showcases the usage of the change event in relation to a select input, along with the practical demonstration of alerting when a specific value is chosen, providing a clear understanding of implementing this event.', 'The demonstration of preventing default form submission using the submit event highlights the ability to control form submission behavior in JavaScript, showcasing practical usage and implementation.']}], 'duration': 361.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VlWsJHsVb-E/pics/VlWsJHsVb-E1097013.jpg', 'highlights': ['The demonstration of preventing default form submission using the submit event highlights the ability to control form submission behavior in JavaScript, showcasing practical usage and implementation.', 'The practical usage of key up event is explained through an example of logging the data typed in, showcasing the dynamic nature of this event.', 'The chapter showcases the usage of the change event in relation to a select input, along with the practical demonstration of alerting when a specific value is chosen, providing a clear understanding of implementing this event.', 'By demonstrating the implementation of focus and blur events, the chapter illustrates the handling of clicking inside and outside of a box, providing a clear understanding of these events.']}], 'highlights': ['Demonstration of preventing default form submission using the submit event highlights the ability to control form submission behavior in JavaScript, showcasing practical usage and implementation.', 'The practical usage of key up event is explained through an example of logging the data typed in, showcasing the dynamic nature of this event.', 'The chapter showcases the usage of the change event in relation to a select input, along with the practical demonstration of alerting when a specific value is chosen, providing a clear understanding of implementing this event.', 'By demonstrating the implementation of focus and blur events, the chapter illustrates the handling of clicking inside and outside of a box, providing a clear understanding of these events.', 'Demonstration of using form events like focus to trigger alerts provides a practical example of enhancing user interaction.', "Demonstrating how to apply 'this' keyword for element-specific styling to prevent affecting all input fields.", "The 'on' method in JavaScript takes two parameters, the event type and the function, providing an alternative approach to event handling.", 'The chapter covers jQuery event handlers like click, double click, hover, mouse move, mouse up, and mouse down, demonstrating their usage and practical applications.', 'Also showing how to pass an optional parameter for the event and the associated data it provides.', 'The chapter covers accessing and modifying HTML elements, including obtaining outer HTML and adding classes.', 'Using console.log to display mouse coordinates in real-time, updating as the mouse moves, providing real-time feedback to the user.', 'The chapter explains how to access and retrieve information from HTML elements using JavaScript, including obtaining class names, IDs, and inner HTML content.', 'Demonstration of using document.ready to delay the execution of jQuery code until the document has fully loaded, ensuring the successful functionality of the button click event.', 'Step-by-step guidance on adding a click event to button one using jQuery, resulting in the display of an alert message upon button click.', 'The importance of placing JavaScript and jQuery at the bottom of the body to ensure successful execution of code after page load, as exemplified by the click event on button one.']}