title
JavaScript DOM Crash Course - Part 3

description
In this lesson in the JavaScript DOM, we will be looking at different events and how to attach them to DOM elements with addEventListener(); CODE: Code for this video http://www.traversymedia.com/downloads/domcrashcourse3.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia COURSES & MORE INFO: http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia NEW DISCORD CHAT SERVER: https://discord.gg/traversymedia

detail
{'title': 'JavaScript DOM Crash Course - Part 3', 'heatmap': [{'end': 103.525, 'start': 80.533, 'weight': 0.707}, {'end': 162.856, 'start': 118.696, 'weight': 1}, {'end': 225.388, 'start': 182.887, 'weight': 0.742}, {'end': 347.87, 'start': 281.476, 'weight': 0.889}, {'end': 489.806, 'start': 462.643, 'weight': 0.867}, {'end': 528.117, 'start': 500.854, 'weight': 0.723}, {'end': 1827.01, 'start': 1798.692, 'weight': 0.925}], 'summary': 'This javascript dom crash course - part 3 covers adding event listeners to elements, focusing on mouse and keyboard events, and emphasizes the importance of interactive javascript. it demonstrates event handling basics, event parameter usage, detecting key presses and mouse actions, testing different event types and mouse events, and handling form input events, providing practical insights into creating functional applications.', 'chapters': [{'end': 54.515, 'segs': [{'end': 54.515, 'src': 'embed', 'start': 7.455, 'weight': 0, 'content': [{'end': 12.217, 'text': 'hey guys, welcome to part three of this javascript and dom crash course.', 'start': 7.455, 'duration': 4.762}, {'end': 15.178, 'text': 'now, in this part, what i want to do is talk about events.', 'start': 12.217, 'duration': 2.961}, {'end': 21.1, 'text': "okay, we're going to look at all the different types of mouse events, keyboard events, and i know this doesn't.", 'start': 15.178, 'duration': 5.922}, {'end': 30.044, 'text': "this isn't going to be as relative to just the dom as the last two videos, but it is a very important part of interactive javascript.", 'start': 21.1, 'duration': 8.944}, {'end': 33.865, 'text': 'um, you know, adding event listeners to elements from the dom.', 'start': 30.704, 'duration': 3.161}, {'end': 38.527, 'text': "so that's what we're going to do in this video and hopefully you enjoy it.", 'start': 33.865, 'duration': 4.662}, {'end': 41.568, 'text': "so what we're going to do is just go into our dom js.", 'start': 38.527, 'duration': 3.041}, {'end': 49.631, 'text': "this is all our previous code from the last two videos and i'm going to show you how to add an event listener all right now.", 'start': 41.568, 'duration': 8.063}, {'end': 54.515, 'text': 'this is the the, i guess, the best practice for adding an event.', 'start': 49.631, 'duration': 4.884}], 'summary': 'Part three covers adding event listeners to elements in the dom for interactive javascript.', 'duration': 47.06, 'max_score': 7.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss7455.jpg'}], 'start': 7.455, 'title': 'Javascript dom events', 'summary': 'Covers adding event listeners to elements in the dom, focusing on mouse and keyboard events, emphasizing the importance of interactive javascript.', 'chapters': [{'end': 54.515, 'start': 7.455, 'title': 'Javascript dom events', 'summary': 'Covers adding event listeners to elements in the dom, focusing on mouse and keyboard events, emphasizing the importance of interactive javascript.', 'duration': 47.06, 'highlights': ['Adding event listeners to elements in the DOM is a crucial part of interactive JavaScript.', 'The chapter discusses different types of mouse events, keyboard events, and the best practice for adding an event listener.', 'The content is part three of a JavaScript and DOM crash course.']}], 'duration': 47.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss7455.jpg', 'highlights': ['The chapter discusses different types of mouse events, keyboard events, and the best practice for adding an event listener.', 'Adding event listeners to elements in the DOM is a crucial part of interactive JavaScript.', 'The content is part three of a JavaScript and DOM crash course.']}, {'end': 303.434, 'segs': [{'end': 103.525, 'src': 'heatmap', 'start': 76.712, 'weight': 4, 'content': [{'end': 80.053, 'text': 'So btn, also a class of btn.', 'start': 76.712, 'duration': 3.341}, {'end': 83.935, 'text': "We'll do btn dark, I guess.", 'start': 80.533, 'duration': 3.402}, {'end': 87.637, 'text': "And let's see, I'm also going to give it an idea button.", 'start': 85.075, 'duration': 2.562}, {'end': 88.997, 'text': "And I'm using Emmet, by the way.", 'start': 87.737, 'duration': 1.26}, {'end': 91.278, 'text': "That's why I'm able to use this syntax.", 'start': 89.057, 'duration': 2.221}, {'end': 96.741, 'text': "So we can do this, and then we can type tab, and it'll turn it into an actual tag.", 'start': 91.678, 'duration': 5.063}, {'end': 99.362, 'text': "All right, so let's just say click here.", 'start': 96.761, 'duration': 2.601}, {'end': 103.525, 'text': "Actually, I'm going to make this a block button, too.", 'start': 101.563, 'duration': 1.962}], 'summary': 'Using emmet syntax to create buttons, including a block button.', 'duration': 26.813, 'max_score': 76.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss76712.jpg'}, {'end': 162.856, 'src': 'heatmap', 'start': 118.696, 'weight': 1, 'content': [{'end': 122.459, 'text': "We could say alert1 like that, and you'll see it'll actually run.", 'start': 118.696, 'duration': 3.763}, {'end': 124.781, 'text': 'Or you could set it to a function.', 'start': 123.06, 'duration': 1.721}, {'end': 126.682, 'text': "Let's say..", 'start': 126.162, 'duration': 0.52}, {'end': 138.778, 'text': "we'll just call it button click and save and then we can go into our javascript and we can say function,", 'start': 129.091, 'duration': 9.687}, {'end': 151.831, 'text': "button click and we'll go ahead and just console.log and we'll say button clicked and save, and if I click it, you'll see we get it down here.", 'start': 138.778, 'duration': 13.053}, {'end': 156.373, 'text': 'now this is, I guess, the old way of doing it.', 'start': 151.831, 'duration': 4.542}, {'end': 161.656, 'text': "it's it's better to use an event listener, because you don't need to have this in your markup.", 'start': 156.373, 'duration': 5.283}, {'end': 162.856, 'text': 'okay, you want to keep everything.', 'start': 161.656, 'duration': 1.2}], 'summary': 'Using event listeners is better than inline functions for button click handling.', 'duration': 44.16, 'max_score': 118.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss118696.jpg'}, {'end': 161.656, 'src': 'embed', 'start': 129.091, 'weight': 1, 'content': [{'end': 138.778, 'text': "we'll just call it button click and save and then we can go into our javascript and we can say function,", 'start': 129.091, 'duration': 9.687}, {'end': 151.831, 'text': "button click and we'll go ahead and just console.log and we'll say button clicked and save, and if I click it, you'll see we get it down here.", 'start': 138.778, 'duration': 13.053}, {'end': 156.373, 'text': 'now this is, I guess, the old way of doing it.', 'start': 151.831, 'duration': 4.542}, {'end': 161.656, 'text': "it's it's better to use an event listener, because you don't need to have this in your markup.", 'start': 156.373, 'duration': 5.283}], 'summary': 'Using event listeners is better than inline functions for button clicks in javascript.', 'duration': 32.565, 'max_score': 129.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss129091.jpg'}, {'end': 225.388, 'src': 'heatmap', 'start': 182.887, 'weight': 0.742, 'content': [{'end': 189.812, 'text': "And we'll say document.getElementById of button.", 'start': 182.887, 'duration': 6.925}, {'end': 193.054, 'text': "And we're going to say .addEventListener.", 'start': 189.832, 'duration': 3.222}, {'end': 196.956, 'text': "And we're going to listen for a click event.", 'start': 193.934, 'duration': 3.022}, {'end': 199.758, 'text': 'And then we want to run a function.', 'start': 197.817, 'duration': 1.941}, {'end': 202.019, 'text': 'Okay, so we can do this.', 'start': 200.678, 'duration': 1.341}, {'end': 203.86, 'text': 'And then we can say console.log.', 'start': 202.359, 'duration': 1.501}, {'end': 209.042, 'text': 'one, two, three, and now, if i click it, we get one, two, three.', 'start': 204.981, 'duration': 4.061}, {'end': 218.006, 'text': 'now this is one way of doing it just having a function like this, or you can use a named function, so i can replace this with button.', 'start': 209.042, 'duration': 8.964}, {'end': 219.646, 'text': 'click like that.', 'start': 218.006, 'duration': 1.64}, {'end': 225.388, 'text': "so now, if i save now, we get button clicked, because it's actually calling this function all right.", 'start': 219.646, 'duration': 5.742}], 'summary': "Using javascript, an event listener is added to a button to log 'one, two, three' when clicked.", 'duration': 42.501, 'max_score': 182.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss182887.jpg'}, {'end': 218.006, 'src': 'embed', 'start': 189.832, 'weight': 0, 'content': [{'end': 193.054, 'text': "And we're going to say .addEventListener.", 'start': 189.832, 'duration': 3.222}, {'end': 196.956, 'text': "And we're going to listen for a click event.", 'start': 193.934, 'duration': 3.022}, {'end': 199.758, 'text': 'And then we want to run a function.', 'start': 197.817, 'duration': 1.941}, {'end': 202.019, 'text': 'Okay, so we can do this.', 'start': 200.678, 'duration': 1.341}, {'end': 203.86, 'text': 'And then we can say console.log.', 'start': 202.359, 'duration': 1.501}, {'end': 209.042, 'text': 'one, two, three, and now, if i click it, we get one, two, three.', 'start': 204.981, 'duration': 4.061}, {'end': 218.006, 'text': 'now this is one way of doing it just having a function like this, or you can use a named function, so i can replace this with button.', 'start': 209.042, 'duration': 8.964}], 'summary': "Using .addeventlistener to listen for click event and run a function to print 'one, two, three'.", 'duration': 28.174, 'max_score': 189.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss189832.jpg'}, {'end': 303.434, 'src': 'embed', 'start': 246.931, 'weight': 3, 'content': [{'end': 253.553, 'text': "and we'll say textContent equals changed.", 'start': 246.931, 'duration': 6.622}, {'end': 257.296, 'text': "okay, so now, if I click the button, you'll see that the header gets changed.", 'start': 253.553, 'duration': 3.743}, {'end': 277.133, 'text': "if we want to do, let's say document dot query selector, and we'll get the ID of main and we'll set the style dot background, our background color,", 'start': 257.296, 'duration': 19.837}, {'end': 281.476, 'text': "and we'll set that to light, gray and save.", 'start': 277.133, 'duration': 4.343}, {'end': 288.179, 'text': 'so now, if I click the button, it changes the title and it changes the background color of the of the main ID.', 'start': 281.476, 'duration': 6.703}, {'end': 289.18, 'text': 'all right.', 'start': 288.179, 'duration': 1.001}, {'end': 290.86, 'text': 'so of course you can.', 'start': 289.18, 'duration': 1.68}, {'end': 300.371, 'text': "you can integrate, you know, dot, all these Dom selectors and properties that we've learned and you can attach them to events, and All right.", 'start': 290.86, 'duration': 9.511}, {'end': 303.434, 'text': "so what I want to do now is, I'm just going to comment those out.", 'start': 300.371, 'duration': 3.063}], 'summary': 'Using javascript, button click changes header and main background color.', 'duration': 56.503, 'max_score': 246.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss246931.jpg'}], 'start': 54.515, 'title': 'Javascript event handling basics', 'summary': 'Covers the basics of event handling in javascript, including adding event listeners for click events, using named functions, and manipulating the dom. it also demonstrates using dom selectors and properties to change content and style based on events.', 'chapters': [{'end': 189.812, 'start': 54.515, 'title': 'Creating and using a custom button with event listeners', 'summary': 'Covers creating a custom button with event listeners using javascript, including adding classes to style the button and utilizing event listener instead of onclick attribute. it also emphasizes the importance of separating javascript from html.', 'duration': 135.297, 'highlights': ['Emphasizing the importance of using event listeners over onclick attribute for better separation of JavaScript from HTML. Benefits of using event listeners, separating JavaScript from HTML', 'Demonstrating the process of creating a custom button with Bootstrap classes and styling options including btn dark, btn block, and adding text content. Creating custom button, using Bootstrap classes for styling', 'Illustrating how to define a function to handle button click events and showing the implementation using console.log to display a message when the button is clicked. Defining button click function, displaying message using console.log']}, {'end': 303.434, 'start': 189.832, 'title': 'Javascript event handling basics', 'summary': 'Covers the basics of event handling in javascript, including adding event listeners for click events, using named functions, and manipulating the dom based on user interaction. it also demonstrates using dom selectors and properties to change the content and style based on events.', 'duration': 113.602, 'highlights': ['The chapter covers the basics of event handling in JavaScript, including adding event listeners for click events, using named functions, and manipulating the DOM based on user interaction.', 'Demonstrates using DOM selectors and properties to change the content and style based on events.', 'Shows how to change the header title and background color of the main ID based on button clicks.']}], 'duration': 248.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss54515.jpg', 'highlights': ['Covers the basics of event handling in JavaScript, including adding event listeners for click events, using named functions, and manipulating the DOM based on user interaction.', 'Emphasizing the importance of using event listeners over onclick attribute for better separation of JavaScript from HTML. Benefits of using event listeners, separating JavaScript from HTML', 'Illustrating how to define a function to handle button click events and showing the implementation using console.log to display a message when the button is clicked. Defining button click function, displaying message using console.log', 'Demonstrates using DOM selectors and properties to change the content and style based on events.', 'Demonstrating the process of creating a custom button with Bootstrap classes and styling options including btn dark, btn block, and adding text content. Creating custom button, using Bootstrap classes for styling', 'Shows how to change the header title and background color of the main ID based on button clicks.']}, {'end': 654.848, 'segs': [{'end': 352.453, 'src': 'embed', 'start': 325.455, 'weight': 0, 'content': [{'end': 332.679, 'text': "so let's go ahead and save that and click, and now you'll see we get basically all of these different properties all right.", 'start': 325.455, 'duration': 7.224}, {'end': 335.261, 'text': 'so we can get all kinds of stuff from here.', 'start': 332.679, 'duration': 2.582}, {'end': 341.565, 'text': 'we can get like the class name of the, of the element, we can get the ids or attributes.', 'start': 335.261, 'duration': 6.304}, {'end': 343.907, 'text': 'we can get the the position of the mouse.', 'start': 341.565, 'duration': 2.342}, {'end': 347.87, 'text': 'client x, client y will give us the position of the mouse when we click it.', 'start': 343.907, 'duration': 3.963}, {'end': 352.453, 'text': 'so i just want to kind of take a look at some of the things that we can get from this.', 'start': 347.87, 'duration': 4.583}], 'summary': 'Demonstrating accessing different properties and mouse position from the element.', 'duration': 26.998, 'max_score': 325.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss325455.jpg'}, {'end': 402.685, 'src': 'embed', 'start': 375.771, 'weight': 2, 'content': [{'end': 383.713, 'text': 'if this was like a key down on an input, a key down event, it would give us the input, okay, instead of the button.', 'start': 375.771, 'duration': 7.942}, {'end': 386.053, 'text': 'So whatever element the event is fired from.', 'start': 383.813, 'duration': 2.24}, {'end': 390.756, 'text': "So let's say we wanted to get the ID.", 'start': 388.514, 'duration': 2.242}, {'end': 399.523, 'text': "We could say console.log and we can say e.target.id and we'll save.", 'start': 391.176, 'duration': 8.347}, {'end': 402.685, 'text': "We'll click the button and you can see the ID is button.", 'start': 399.563, 'duration': 3.122}], 'summary': 'Capturing target id from key down event.', 'duration': 26.914, 'max_score': 375.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss375771.jpg'}, {'end': 472.527, 'src': 'embed', 'start': 438.963, 'weight': 4, 'content': [{'end': 444.287, 'text': 'i probably should have did this earlier, but you can get the class name or the class list from any element.', 'start': 438.963, 'duration': 5.324}, {'end': 449.912, 'text': "so let's say class list and save click, and it's basically going to give us this.", 'start': 444.287, 'duration': 5.625}, {'end': 454.835, 'text': 'um, this dom token list, kind of like an array of the classes.', 'start': 449.912, 'duration': 4.923}, {'end': 458.381, 'text': "all right, So let's see some other stuff we can get.", 'start': 454.835, 'duration': 3.546}, {'end': 462.603, 'text': 'Now, we can output this stuff into the DOM if we want.', 'start': 458.401, 'duration': 4.202}, {'end': 472.527, 'text': "So for example, if we wanted to, let's put, let's see, let's just put a div here with an ID of output.", 'start': 462.643, 'duration': 9.884}], 'summary': 'The transcript covers accessing class names from elements and outputting into the dom.', 'duration': 33.564, 'max_score': 438.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss438963.jpg'}, {'end': 489.806, 'src': 'heatmap', 'start': 462.643, 'weight': 0.867, 'content': [{'end': 472.527, 'text': "So for example, if we wanted to, let's put, let's see, let's just put a div here with an ID of output.", 'start': 462.643, 'duration': 9.884}, {'end': 489.806, 'text': "And we'll go ahead and we'll say, let's see, we'll say var output equals document dot get element by D output.", 'start': 475.698, 'duration': 14.108}], 'summary': 'Demonstrating how to create a div with an id of output using javascript.', 'duration': 27.163, 'max_score': 462.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss462643.jpg'}, {'end': 600.557, 'src': 'heatmap', 'start': 500.854, 'weight': 1, 'content': [{'end': 511.263, 'text': "And then we'll just concatenate in, let's say, E dot target dot ID.", 'start': 500.854, 'duration': 10.409}, {'end': 515.986, 'text': "All right, so if I click, and now you'll see the ID will get output to the DOM.", 'start': 511.283, 'duration': 4.703}, {'end': 518.708, 'text': "So we're just experimenting here.", 'start': 516.047, 'duration': 2.661}, {'end': 523.033, 'text': "I mean, I don't really know why you would use this, but just to know that you can.", 'start': 518.749, 'duration': 4.284}, {'end': 528.117, 'text': "All right, so let's look at some other stuff now in the event object.", 'start': 524.434, 'duration': 3.683}, {'end': 530.539, 'text': 'So we have the type.', 'start': 528.638, 'duration': 1.901}, {'end': 537.786, 'text': 'So if we say console.log and we can get e.type.', 'start': 531.14, 'duration': 6.646}, {'end': 539.968, 'text': "Okay, we're not using the target anymore.", 'start': 537.886, 'duration': 2.082}, {'end': 541.99, 'text': "We're just doing e.type.", 'start': 540.308, 'duration': 1.682}, {'end': 544.412, 'text': "If we click, you'll see that it's a click.", 'start': 542.71, 'duration': 1.702}, {'end': 547.234, 'text': "Okay, so it's basically going to tell us whatever type of event that it is.", 'start': 544.652, 'duration': 2.582}, {'end': 553.756, 'text': 'All right.', 'start': 553.376, 'duration': 0.38}, {'end': 557.158, 'text': 'Another thing that we can look at is the position of the mouse.', 'start': 553.836, 'duration': 3.322}, {'end': 565.484, 'text': "So if we say E dot client X, this is going to get the position on the X axis when it's clicked.", 'start': 557.839, 'duration': 7.645}, {'end': 567.825, 'text': "So you'll see one nine four.", 'start': 566.385, 'duration': 1.44}, {'end': 571.388, 'text': 'If I go over here, three, four, nine, five, five, four.', 'start': 567.865, 'duration': 3.523}, {'end': 577.792, 'text': 'So the client X is actually the position from the with the browser window.', 'start': 572.128, 'duration': 5.664}, {'end': 587.719, 'text': "So from here over and if we do client Y, Let's try client y.", 'start': 577.852, 'duration': 9.867}, {'end': 590.643, 'text': "That's going to be from the top down.", 'start': 587.719, 'duration': 2.924}, {'end': 592.525, 'text': 'So you can see that.', 'start': 591.264, 'duration': 1.261}, {'end': 595.369, 'text': 'Actually, let me just comment the x out.', 'start': 592.785, 'duration': 2.584}, {'end': 600.557, 'text': "So they're all pretty much around the same area, because it's coming from the top down.", 'start': 596.693, 'duration': 3.864}], 'summary': 'Experimenting with event object properties: id, type, and mouse position.', 'duration': 89.274, 'max_score': 500.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss500854.jpg'}], 'start': 304.135, 'title': 'Javascript event handling', 'summary': 'Covers event parameter usage for logging properties like class name, ids, and mouse position, accessing class name and class list from an element, and working with event properties such as type, client x and y, and offset x and y to track mouse events in javascript dom manipulation.', 'chapters': [{'end': 402.685, 'start': 304.135, 'title': 'Event parameter in javascript', 'summary': 'Discusses the event parameter in javascript, highlighting its usage in logging various properties such as class name, ids, and mouse position, and how to retrieve specific elements and their attributes from the event.', 'duration': 98.55, 'highlights': ['The event parameter allows accessing various properties such as class name, ids, and mouse position, providing valuable data for event handling and manipulation.', 'Using the event parameter, developers can log the target element and retrieve its specific attributes, such as the ID, for effective event handling.', 'The event parameter in JavaScript enables logging and accessing specific elements based on the triggered event, enhancing the functionality and interactivity of web applications.']}, {'end': 511.263, 'start': 403.326, 'title': 'Javascript dom manipulation', 'summary': 'Demonstrates accessing class name and class list from an element, outputting information into the dom, and concatenating data into html using javascript.', 'duration': 107.937, 'highlights': ['Accessing class name and class list from an element, and outputting information into the DOM using JavaScript', 'Demonstrating the use of console.log to display the class name and class list from an element', 'Outputting information into the DOM using JavaScript by accessing element and setting inner HTML']}, {'end': 654.848, 'start': 511.283, 'title': 'Working with event object in javascript', 'summary': 'Explains how to access event properties such as type, client x and y, and offset x and y to track mouse events, providing practical examples and insights into their usage.', 'duration': 143.565, 'highlights': ['Accessing event properties such as type, client X and Y, and offset X and Y to track mouse events is explained.', 'Practical examples of using console.log to obtain event properties like e.type, e.clientX, e.clientY, e.offsetX, and e.offsetY are demonstrated.', 'Insights into differentiating between client X and Y, which are relative to the browser window, and offset X and Y, which are relative to the actual element, are provided.']}], 'duration': 350.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss304135.jpg', 'highlights': ['The event parameter allows accessing various properties such as class name, ids, and mouse position, providing valuable data for event handling and manipulation.', 'Accessing event properties such as type, client X and Y, and offset X and Y to track mouse events is explained.', 'Using the event parameter, developers can log the target element and retrieve its specific attributes, such as the ID, for effective event handling.', 'Practical examples of using console.log to obtain event properties like e.type, e.clientX, e.clientY, e.offsetX, and e.offsetY are demonstrated.', 'Accessing class name and class list from an element, and outputting information into the DOM using JavaScript', 'Insights into differentiating between client X and Y, which are relative to the browser window, and offset X and Y, which are relative to the actual element, are provided.']}, {'end': 915.871, 'segs': [{'end': 683.209, 'src': 'embed', 'start': 654.948, 'weight': 0, 'content': [{'end': 663.379, 'text': "Another thing we can do is we can test to see if when you click it, if you're holding down the alt key or the or the shift key or the control key.", 'start': 654.948, 'duration': 8.431}, {'end': 670.047, 'text': "So if we say console dot log, let's say E dot alt key.", 'start': 663.799, 'duration': 6.248}, {'end': 672.686, 'text': 'and save.', 'start': 671.966, 'duration': 0.72}, {'end': 674.627, 'text': 'If I click it, we get false.', 'start': 673.306, 'duration': 1.321}, {'end': 679.028, 'text': "Now what I'm going to do is hold down my alt key and click and we get true.", 'start': 674.727, 'duration': 4.301}, {'end': 683.209, 'text': "So you can do things based on if you're holding these keys down or not.", 'start': 679.468, 'duration': 3.741}], 'summary': 'Testing for key presses can determine user actions.', 'duration': 28.261, 'max_score': 654.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss654948.jpg'}, {'end': 798.402, 'src': 'embed', 'start': 708.369, 'weight': 1, 'content': [{'end': 712.133, 'text': 'Okay So you can do an if statement to see if a shift was held down.', 'start': 708.369, 'duration': 3.764}, {'end': 716.256, 'text': 'If it was, then you can have different functionality in your script.', 'start': 712.253, 'duration': 4.003}, {'end': 717.377, 'text': 'All right.', 'start': 717.077, 'duration': 0.3}, {'end': 719.479, 'text': "So that's something that may be useful to you.", 'start': 717.397, 'duration': 2.082}, {'end': 721.151, 'text': 'All right.', 'start': 720.851, 'duration': 0.3}, {'end': 725.154, 'text': "So that's pretty much all I want to look at as far as the event object.", 'start': 721.271, 'duration': 3.883}, {'end': 728.756, 'text': 'Let me put a comment up here just to separate.', 'start': 725.814, 'duration': 2.942}, {'end': 732.418, 'text': 'So this is where we started events.', 'start': 730.517, 'duration': 1.901}, {'end': 734.959, 'text': 'All right.', 'start': 734.639, 'duration': 0.32}, {'end': 742.804, 'text': "I know this is messy, this script guys, but it's just kind of a reference for you guys to use when you're actually building something.", 'start': 736.28, 'duration': 6.524}, {'end': 751.352, 'text': "Let's see, what do we want to do next? So next, let's just take a look at some of the different mouse events.", 'start': 745.427, 'duration': 5.925}, {'end': 758.477, 'text': 'All right, because we have different events based on different actions.', 'start': 752.213, 'duration': 6.264}, {'end': 760.599, 'text': 'So we want to look at some of the mouse actions.', 'start': 758.597, 'duration': 2.002}, {'end': 761.8, 'text': 'We already looked at click.', 'start': 760.639, 'duration': 1.161}, {'end': 768.245, 'text': "But what I'm going to do is actually comment out this whole button click function.", 'start': 762.34, 'duration': 5.905}, {'end': 773.629, 'text': "I guess we'll get rid of this too, comment that out.", 'start': 768.265, 'duration': 5.364}, {'end': 778.397, 'text': "Notice I'm not deleting anything because I want you guys to have this.", 'start': 775.576, 'duration': 2.821}, {'end': 782.818, 'text': "But I'm going to create a new function here called runEvent.", 'start': 779.037, 'duration': 3.781}, {'end': 790.14, 'text': "And we're going to pass in our event object here.", 'start': 786.219, 'duration': 3.921}, {'end': 793.341, 'text': "And we're going to just console.log.", 'start': 790.88, 'duration': 2.461}, {'end': 798.402, 'text': "And we're going to say eventType.", 'start': 795.101, 'duration': 3.301}], 'summary': 'Demonstrates using if statement for shift key, and exploring mouse events.', 'duration': 90.033, 'max_score': 708.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss708369.jpg'}], 'start': 654.948, 'title': 'Javascript event handling', 'summary': 'Demonstrates how to detect key presses and mouse actions in javascript, including detecting if the alt, shift, or control key is being held down, exploring mouse events such as click, double click, mouse down, and mouse up, and creating functions to run these events with corresponding console logs.', 'chapters': [{'end': 707.589, 'start': 654.948, 'title': 'Detecting key press in javascript', 'summary': 'Demonstrates how to detect if the alt, shift, or control key is being held down while clicking, allowing for conditional actions based on the key pressed, with examples showing how to log the status of each key press.', 'duration': 52.641, 'highlights': ['The chapter illustrates how to detect if the alt, shift, or control key is being held down while clicking, enabling conditional actions based on the key pressed.', "The examples in the chapter show how to log the status of each key press, with 'true' being logged when a key is held down and 'false' when it's not."]}, {'end': 915.871, 'start': 708.369, 'title': 'Javascript events: mouse actions', 'summary': 'Covers how to use if statements to detect shift key, exploring mouse events such as click, double click, mouse down, and mouse up, and creating a function to run these events with corresponding console logs.', 'duration': 207.502, 'highlights': ['Using if statements to detect if a shift key was held down in order to trigger different functionality in the script.', 'Demonstrating the use of mouse events such as click, double click, mouse down, and mouse up, with corresponding console logs for each event type.', 'Creating a function called runEvent to handle different mouse events and provide console logs for each event type.']}], 'duration': 260.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss654948.jpg', 'highlights': ['The chapter illustrates how to detect if the alt, shift, or control key is being held down while clicking, enabling conditional actions based on the key pressed.', 'Using if statements to detect if a shift key was held down in order to trigger different functionality in the script.', 'Demonstrating the use of mouse events such as click, double click, mouse down, and mouse up, with corresponding console logs for each event type.', "The examples in the chapter show how to log the status of each key press, with 'true' being logged when a key is held down and 'false' when it's not.", 'Creating a function called runEvent to handle different mouse events and provide console logs for each event type.']}, {'end': 1341.879, 'segs': [{'end': 945.694, 'src': 'embed', 'start': 918.433, 'weight': 0, 'content': [{'end': 925.178, 'text': 'The next thing I want to do is test some other types of events, but not with a button.', 'start': 918.433, 'duration': 6.745}, {'end': 928.401, 'text': "What I'm going to do is go and I'm going to create under the button.", 'start': 925.198, 'duration': 3.203}, {'end': 934.726, 'text': "I'm going to put in a div and I'm going to give it an inline style.", 'start': 929.562, 'duration': 5.164}, {'end': 940.79, 'text': "I'm going to give it a width of, let's say, one second.", 'start': 934.746, 'duration': 6.044}, {'end': 943.773, 'text': 'Let me just check my thing here.', 'start': 940.83, 'duration': 2.943}, {'end': 945.694, 'text': "We're going to give it a width of 400 pixels.", 'start': 943.833, 'duration': 1.861}], 'summary': 'Testing non-button events by creating a div with an inline style of 400 pixels width.', 'duration': 27.261, 'max_score': 918.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss918433.jpg'}, {'end': 1064.432, 'src': 'embed', 'start': 1014.646, 'weight': 1, 'content': [{'end': 1018.148, 'text': "So as soon as I enter the box, you'll see it fires off.", 'start': 1014.646, 'duration': 3.502}, {'end': 1019.228, 'text': 'All right.', 'start': 1018.948, 'duration': 0.28}, {'end': 1022.25, 'text': "If I go out and I keep going in, it'll keep firing that event off.", 'start': 1019.268, 'duration': 2.982}, {'end': 1024.431, 'text': 'So we have mouse enter.', 'start': 1023.45, 'duration': 0.981}, {'end': 1025.712, 'text': 'We also have mouse leave.', 'start': 1024.451, 'duration': 1.261}, {'end': 1027.953, 'text': 'So if I go ahead and I..', 'start': 1027.092, 'duration': 0.861}, {'end': 1032.066, 'text': "paste that in, let's change this to mouse leave.", 'start': 1029.444, 'duration': 2.622}, {'end': 1036.147, 'text': 'So we enter and then we leave and then that gets fired off.', 'start': 1032.987, 'duration': 3.16}, {'end': 1037.769, 'text': 'So enter, leave, enter, leave.', 'start': 1036.188, 'duration': 1.581}, {'end': 1045.132, 'text': 'Now, in addition to mouse enter and mouse leave, we also have mouse over and mouse out.', 'start': 1038.929, 'duration': 6.203}, {'end': 1050.755, 'text': "So let's say mouse over and mouse out.", 'start': 1045.813, 'duration': 4.942}, {'end': 1053.366, 'text': "Alright, so we'll save that.", 'start': 1052.085, 'duration': 1.281}, {'end': 1061.491, 'text': "And then you'll see that when I enter both of those mouse over and mouse enter fire when I leave both mouse out and mouse leave fire off.", 'start': 1053.506, 'duration': 7.985}, {'end': 1064.432, 'text': "So what the hell's the difference? They're doing the same thing.", 'start': 1061.971, 'duration': 2.461}], 'summary': 'Interacting with mouse events triggers various firing events, demonstrating differences between mouse enter/leave and mouse over/out.', 'duration': 49.786, 'max_score': 1014.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1014646.jpg'}], 'start': 918.433, 'title': 'Testing different event types and mouse events in javascript', 'summary': "Explores testing different event types such as creating a div element with inline style and dimensions of 400 pixels width and 200 pixels height, and giving it an id of 'box' for further manipulation in javascript. it also covers the various mouse events in javascript including mouse enter, mouse leave, mouse over, mouse out, and mouse move, with examples and explanations of their differences and usage, demonstrating the tracking of mouse position and changing background color based on mouse movement.", 'chapters': [{'end': 981.658, 'start': 918.433, 'title': 'Testing different event types', 'summary': "Explores testing different event types such as creating a div element with inline style and dimensions of 400 pixels width and 200 pixels height, and giving it an id of 'box' for further manipulation in javascript.", 'duration': 63.225, 'highlights': ["The chapter explores testing different event types such as creating a div element with inline style and dimensions of 400 pixels width and 200 pixels height, and giving it an ID of 'box' for further manipulation in JavaScript.", 'Creating a div element with inline style and dimensions of 400 pixels width and 200 pixels height.', "Giving the div element an ID of 'box' for further manipulation in JavaScript."]}, {'end': 1341.879, 'start': 981.838, 'title': 'Mouse events in javascript', 'summary': 'Covers the various mouse events in javascript including mouse enter, mouse leave, mouse over, mouse out, and mouse move, with examples and explanations of their differences and usage, demonstrating the tracking of mouse position and changing background color based on mouse movement.', 'duration': 360.041, 'highlights': ['The chapter covers the various mouse events in JavaScript including mouse enter, mouse leave, mouse over, mouse out, and mouse move. The chapter introduces and explains the different types of mouse events in JavaScript.', 'Demonstrating the tracking of mouse position and changing background color based on mouse movement. A demonstration of how to track the mouse position and change the background color based on mouse movement using JavaScript.', 'Explanation of the differences between mouse enter, mouse leave, mouse over, and mouse out events with examples. Detailed explanation and examples showcasing the differences between mouse enter, mouse leave, mouse over, and mouse out events in JavaScript.']}], 'duration': 423.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss918433.jpg', 'highlights': ["The chapter explores testing different event types such as creating a div element with inline style and dimensions of 400 pixels width and 200 pixels height, and giving it an ID of 'box' for further manipulation in JavaScript.", 'The chapter covers the various mouse events in JavaScript including mouse enter, mouse leave, mouse over, mouse out, and mouse move. The chapter introduces and explains the different types of mouse events in JavaScript.', 'Explanation of the differences between mouse enter, mouse leave, mouse over, and mouse out events with examples.']}, {'end': 1572.035, 'segs': [{'end': 1390.515, 'src': 'embed', 'start': 1342.9, 'weight': 3, 'content': [{'end': 1347.504, 'text': "And you'll see that the color is actually changing because it's changing the value of this RGB.", 'start': 1342.9, 'duration': 4.604}, {'end': 1352.349, 'text': "It's changing the first two parameters based on wherever the mouse is.", 'start': 1348.005, 'duration': 4.344}, {'end': 1354.07, 'text': 'all right.', 'start': 1353.67, 'duration': 0.4}, {'end': 1364.115, 'text': 'now we could actually take this a step further and instead of doing just the box, we could say document dot, body.', 'start': 1354.07, 'duration': 10.045}, {'end': 1369.418, 'text': "remember, we can access the body of the document and we'll change the style of that,", 'start': 1364.115, 'duration': 5.303}, {'end': 1375.26, 'text': 'and now the entire body will change the background color as we move all right.', 'start': 1369.418, 'duration': 5.842}, {'end': 1376.581, 'text': "so let's, i think that's pretty cool.", 'start': 1375.26, 'duration': 1.321}, {'end': 1379.842, 'text': 'Is it practical and useful??', 'start': 1378.18, 'duration': 1.662}, {'end': 1383.146, 'text': "Maybe not, but that's not what this series is about.", 'start': 1379.902, 'duration': 3.244}, {'end': 1384.347, 'text': 'This is just about learning.', 'start': 1383.186, 'duration': 1.161}, {'end': 1387.651, 'text': "All right, so that's it for that.", 'start': 1384.367, 'duration': 3.284}, {'end': 1390.515, 'text': "Now what we're going to do is look at keyboard and input events.", 'start': 1387.691, 'duration': 2.824}], 'summary': 'Javascript code changes rgb value based on mouse position for background color', 'duration': 47.615, 'max_score': 1342.9, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1342900.jpg'}, {'end': 1475.228, 'src': 'embed', 'start': 1418.251, 'weight': 0, 'content': [{'end': 1422.933, 'text': 'querySelector, and we can use any selector we want in here.', 'start': 1418.251, 'duration': 4.682}, {'end': 1427.595, 'text': "So I'm going to say input, and I want to grab the input that has the type of text.", 'start': 1422.973, 'duration': 4.622}, {'end': 1431.917, 'text': "All right, let's also create a variable for the form itself.", 'start': 1429.016, 'duration': 2.901}, {'end': 1443.222, 'text': "We're going to need that at some point, so we'll say querySelector, and we're just going to grab, let's say, form.", 'start': 1432.738, 'duration': 10.484}, {'end': 1446.524, 'text': "All right, we only have one form, so that's fine.", 'start': 1444.683, 'duration': 1.841}, {'end': 1455.905, 'text': "So let's see, let's go down here and let's create let's take our item input and let's add an event listener.", 'start': 1448.363, 'duration': 7.542}, {'end': 1461.547, 'text': 'And we want to listen for a key down event.', 'start': 1458.006, 'duration': 3.541}, {'end': 1465.888, 'text': "OK, so we'll say key down and then we're going to run.", 'start': 1462.447, 'duration': 3.441}, {'end': 1475.228, 'text': "event. let's go ahead and save and i'm gonna go and i'm gonna just click a key and you see that it fires right off.", 'start': 1468.26, 'duration': 6.968}], 'summary': 'Using queryselector to select input and form, adding key down event listener', 'duration': 56.977, 'max_score': 1418.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1418251.jpg'}], 'start': 1342.9, 'title': 'Interactive webpage elements', 'summary': "Explores changing rgb values based on mouse position and extends to altering the webpage's background color. it also demonstrates handling form input events using javascript, including event listeners, capturing input values, and updating the dom based on user input.", 'chapters': [{'end': 1390.515, 'start': 1342.9, 'title': 'Changing rgb values and background color', 'summary': 'Explores changing rgb values based on mouse position to alter the color of an element, and then extends the concept to change the background color of the entire webpage. the focus is on learning and experimentation rather than practical application.', 'duration': 47.615, 'highlights': ['The concept involves changing RGB values based on mouse position to alter the color of an element.', 'The tutorial then extends the concept to change the background color of the entire webpage.', 'The emphasis is on learning and experimentation rather than practical application.']}, {'end': 1572.035, 'start': 1390.735, 'title': 'Interactive form event handling', 'summary': 'Demonstrates how to handle form input events using javascript, including adding event listeners, capturing input values, and updating the dom based on user input.', 'duration': 181.3, 'highlights': ['The chapter demonstrates adding event listeners for key down events to capture input values, illustrating how each keystroke triggers the event and logs the input value.', 'The speaker shows how to update the DOM by outputting the captured input value to a specified HTML element, providing a practical example of interacting with form input using JavaScript.', 'The chapter introduces the process of selecting form elements using querySelector and demonstrates how to grab input and form elements using different selectors.']}], 'duration': 229.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1342900.jpg', 'highlights': ['The chapter introduces the process of selecting form elements using querySelector and demonstrates how to grab input and form elements using different selectors.', 'The chapter demonstrates adding event listeners for key down events to capture input values, illustrating how each keystroke triggers the event and logs the input value.', 'The speaker shows how to update the DOM by outputting the captured input value to a specified HTML element, providing a practical example of interacting with form input using JavaScript.', 'The tutorial then extends the concept to change the background color of the entire webpage.', 'The concept involves changing RGB values based on mouse position to alter the color of an element.', 'The emphasis is on learning and experimentation rather than practical application.']}, {'end': 2024.578, 'segs': [{'end': 1603.514, 'src': 'embed', 'start': 1572.035, 'weight': 0, 'content': [{'end': 1573.557, 'text': "so let's look at some other inputs.", 'start': 1572.035, 'duration': 1.522}, {'end': 1578.645, 'text': 'we have key down, so, as you would probably guess, we also have key up.', 'start': 1573.557, 'duration': 5.088}, {'end': 1583.571, 'text': 'So key up is going to run when you release the key.', 'start': 1580.41, 'duration': 3.161}, {'end': 1587.051, 'text': "So what I'm going to do is I'm going to push down and hold the key.", 'start': 1583.651, 'duration': 3.4}, {'end': 1589.132, 'text': 'You get key down.', 'start': 1587.071, 'duration': 2.061}, {'end': 1592.052, 'text': "If I let go, there's key up.", 'start': 1589.192, 'duration': 2.86}, {'end': 1594.053, 'text': "So that's key down, key up.", 'start': 1592.972, 'duration': 1.081}, {'end': 1595.293, 'text': 'We also have key press.', 'start': 1594.073, 'duration': 1.22}, {'end': 1603.514, 'text': "So if we say key press, let's comment these two out.", 'start': 1598.433, 'duration': 5.081}], 'summary': 'Explaining key down, key up, and key press events in coding.', 'duration': 31.479, 'max_score': 1572.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1572035.jpg'}, {'end': 1659.87, 'src': 'embed', 'start': 1630.476, 'weight': 1, 'content': [{'end': 1637.003, 'text': "and we'll save focus is when you just click inside of an input like that, okay, you can see how it's alive.", 'start': 1630.476, 'duration': 6.527}, {'end': 1639.385, 'text': "it's, it's, it's active, it's focused.", 'start': 1637.003, 'duration': 2.382}, {'end': 1640.506, 'text': "okay, so that's gonna run.", 'start': 1639.385, 'duration': 1.121}, {'end': 1642.308, 'text': 'then now we also have blur.', 'start': 1640.506, 'duration': 1.802}, {'end': 1651.177, 'text': 'so if we say blur, we click in, we get focus, we click out, we get blur.', 'start': 1642.308, 'duration': 8.869}, {'end': 1653.079, 'text': 'okay, so in focus out blur.', 'start': 1651.177, 'duration': 1.902}, {'end': 1659.87, 'text': 'Now, two other pretty cool events we have are cut and paste.', 'start': 1654.924, 'duration': 4.946}], 'summary': 'Learning about focus, blur, cut, and paste events in javascript.', 'duration': 29.394, 'max_score': 1630.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1630476.jpg'}, {'end': 1827.01, 'src': 'heatmap', 'start': 1798.692, 'weight': 0.925, 'content': [{'end': 1802.314, 'text': "And we'll just say 123 this this doesn't really matter.", 'start': 1798.692, 'duration': 3.622}, {'end': 1808.057, 'text': "And let's actually add a class to make it look good a bootstrap class of form control.", 'start': 1803.274, 'duration': 4.783}, {'end': 1811.632, 'text': 'and save.', 'start': 1809.83, 'duration': 1.802}, {'end': 1818.26, 'text': "let's also add a margin right to class, just to push that button over a little, and there we go.", 'start': 1811.632, 'duration': 6.628}, {'end': 1821.904, 'text': 'so now we have a select item, our select list.', 'start': 1818.26, 'duration': 3.644}, {'end': 1827.01, 'text': 'so if you want something to fire off when you choose here, you can use the change event.', 'start': 1821.904, 'duration': 5.106}], 'summary': 'Adding a bootstrap class of form control and a margin right to push the button over, creating a select list with a change event trigger.', 'duration': 28.318, 'max_score': 1798.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1798692.jpg'}, {'end': 1922.66, 'src': 'embed', 'start': 1891.944, 'weight': 2, 'content': [{'end': 1897.409, 'text': 'And I believe if we do this, the input, that should work as well.', 'start': 1891.944, 'duration': 5.465}, {'end': 1900.472, 'text': 'If we listen for input.', 'start': 1899.431, 'duration': 1.041}, {'end': 1903.274, 'text': "Let's see.", 'start': 1900.492, 'duration': 2.782}, {'end': 1906.897, 'text': 'Yep, so that will run input and change.', 'start': 1904.775, 'duration': 2.122}, {'end': 1908.779, 'text': 'When we select, those will both run.', 'start': 1907.278, 'duration': 1.501}, {'end': 1915.672, 'text': 'Alright, so the last thing I want to show you is a submit event, which is going to be on the form.', 'start': 1911.007, 'duration': 4.665}, {'end': 1917.454, 'text': 'Okay, we set a form value here.', 'start': 1915.692, 'duration': 1.762}, {'end': 1922.66, 'text': "So we're going to go form dot add event listener.", 'start': 1918.095, 'duration': 4.565}], 'summary': 'Demonstrating input and submit events on a form.', 'duration': 30.716, 'max_score': 1891.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1891944.jpg'}, {'end': 1979.166, 'src': 'embed', 'start': 1948.769, 'weight': 3, 'content': [{'end': 1952.09, 'text': "okay, it's just working like a regular HTML form.", 'start': 1948.769, 'duration': 3.321}, {'end': 1955.491, 'text': 'in order for it not to do that, you have to prevent that from happening.', 'start': 1952.09, 'duration': 3.401}, {'end': 1964.637, 'text': "And the way that you do that is, you take this event parameter that's passed in and you call E dot prevent default,", 'start': 1956.051, 'duration': 8.586}, {'end': 1968.459, 'text': "which is a function that's going to stop that from happening.", 'start': 1964.637, 'duration': 3.822}, {'end': 1973.943, 'text': "So now if we go ahead and save and now we submit, you'll see that it actually works.", 'start': 1968.939, 'duration': 5.004}, {'end': 1979.166, 'text': "It's not submitting to an external file or whatever it does by default.", 'start': 1974.083, 'duration': 5.083}], 'summary': 'Prevent default behavior in html form with e.preventdefault()', 'duration': 30.397, 'max_score': 1948.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1948769.jpg'}], 'start': 1572.035, 'title': 'Javascript input and event handling', 'summary': 'Covers various input events in javascript, such as key down, key up, key press, focus, blur, cut, paste, and input, along with event listeners for input, select, and form elements, and the use of event.preventdefault() to stop default form submission, offering insights into creating a functional application.', 'chapters': [{'end': 1756.026, 'start': 1572.035, 'title': 'Javascript input events', 'summary': 'Covers various input events in javascript, such as key down, key up, key press, focus, blur, cut, paste, and input, each demonstrating their respective functionalities and interactions with user inputs.', 'duration': 183.991, 'highlights': ['The chapter covers key down, key up, and key press events in JavaScript, each showcasing the functionality of these events when interacting with user inputs. The chapter explains the key down event being triggered when a key is pressed, the key up event when the key is released, and the key press event when any key is pressed, providing a comprehensive understanding of these input events.', 'It discusses the focus and blur events, demonstrating their functionality when a user clicks inside and outside of an input field. The chapter demonstrates the focus event being triggered when a user clicks inside an input, and the blur event when the user clicks outside, showcasing their functionality in handling input focus and blur actions.', 'The chapter explores the cut and paste events, illustrating their functionality when cutting and pasting content within an input field. The chapter explains the cut event being triggered when content is cut within an input field and the paste event when content is pasted, showcasing their usage and potential interactions with input content.', 'It explains the input event, which is triggered whenever any action is performed within an input field. The chapter describes the input event being triggered whenever any action is performed within an input field, providing a comprehensive understanding of this versatile input event.']}, {'end': 2024.578, 'start': 1756.026, 'title': 'Event handling in javascript', 'summary': 'Covers adding event listeners for input, select, and form elements, demonstrating the change and submit events, and highlighting the use of event.preventdefault() to stop default form submission, offering a glimpse into future plans for turning the code into a functional application.', 'duration': 268.552, 'highlights': ['The chapter demonstrates adding event listeners for input, select, and form elements, showcasing the change and submit events in JavaScript, providing practical insights into event handling.', 'The speaker explains the use of event.preventDefault() to stop the default form submission, enhancing the understanding of controlling form behavior in JavaScript.', 'Future plans for turning the code into a functional application are mentioned, offering a glimpse into upcoming learning opportunities and practical implementation in JavaScript development.', 'The demonstration of adding a select list with options and applying bootstrap classes like form-control and margin-right to enhance the visual appearance of the select box, showcasing practical front-end development techniques.']}], 'duration': 452.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wK2cBMcDTss/pics/wK2cBMcDTss1572035.jpg', 'highlights': ['The chapter covers key down, key up, and key press events in JavaScript, providing a comprehensive understanding of these input events.', 'The chapter explores the cut and paste events, illustrating their functionality within an input field.', 'The chapter demonstrates adding event listeners for input, select, and form elements, providing practical insights into event handling.', 'The use of event.preventDefault() to stop default form submission enhances the understanding of controlling form behavior in JavaScript.']}], 'highlights': ['The chapter discusses different types of mouse events, keyboard events, and the best practice for adding an event listener.', 'Adding event listeners to elements in the DOM is a crucial part of interactive JavaScript.', 'The content is part three of a JavaScript and DOM crash course.', 'Emphasizing the importance of using event listeners over onclick attribute for better separation of JavaScript from HTML. Benefits of using event listeners, separating JavaScript from HTML', 'Illustrating how to define a function to handle button click events and showing the implementation using console.log to display a message when the button is clicked. Defining button click function, displaying message using console.log', 'Demonstrates using DOM selectors and properties to change the content and style based on events.', 'Practical examples of using console.log to obtain event properties like e.type, e.clientX, e.clientY, e.offsetX, and e.offsetY are demonstrated.', 'Accessing class name and class list from an element, and outputting information into the DOM using JavaScript', 'Insights into differentiating between client X and Y, which are relative to the browser window, and offset X and Y, which are relative to the actual element, are provided.', 'The chapter illustrates how to detect if the alt, shift, or control key is being held down while clicking, enabling conditional actions based on the key pressed.', 'Using if statements to detect if a shift key was held down in order to trigger different functionality in the script.', "The examples in the chapter show how to log the status of each key press, with 'true' being logged when a key is held down and 'false' when it's not.", 'Creating a function called runEvent to handle different mouse events and provide console logs for each event type.', "The chapter explores testing different event types such as creating a div element with inline style and dimensions of 400 pixels width and 200 pixels height, and giving it an ID of 'box' for further manipulation in JavaScript.", 'The chapter covers the various mouse events in JavaScript including mouse enter, mouse leave, mouse over, mouse out, and mouse move. The chapter introduces and explains the different types of mouse events in JavaScript.', 'Explanation of the differences between mouse enter, mouse leave, mouse over, and mouse out events with examples.', 'The chapter introduces the process of selecting form elements using querySelector and demonstrates how to grab input and form elements using different selectors.', 'The chapter demonstrates adding event listeners for key down events to capture input values, illustrating how each keystroke triggers the event and logs the input value.', 'The speaker shows how to update the DOM by outputting the captured input value to a specified HTML element, providing a practical example of interacting with form input using JavaScript.', 'The tutorial then extends the concept to change the background color of the entire webpage.', 'The concept involves changing RGB values based on mouse position to alter the color of an element.', 'The emphasis is on learning and experimentation rather than practical application.', 'The chapter covers key down, key up, and key press events in JavaScript, providing a comprehensive understanding of these input events.', 'The chapter explores the cut and paste events, illustrating their functionality within an input field.', 'The chapter demonstrates adding event listeners for input, select, and form elements, providing practical insights into event handling.', 'The use of event.preventDefault() to stop default form submission enhances the understanding of controlling form behavior in JavaScript.']}