title
jQuery Full Course | jQuery Tutorial For Beginners | jQuery Certification Training | Edureka

description
🔥 Edureka Full Stack Developer Training (Use Code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎"): https://www.edureka.co/masters-program/full-stack-developer-training This Edureka video is a complete guide to jQuery which covers in-depth knowledge about jQuery DOM Manipulation & jQuery Effect, jQuery Forms & Events, jQuery AJAX & Utilities, etc. Topics covered in this video are: 00:00 Introduction 1:37 Intro to HTML, CSS & JS 2:52 Basic DOM Structure 9:50 Intro to jQuery & History 10:56 Why jQuery 13:52 CSS Selector 16:12 The jQuery Object 19:30 IDE's for jQuery 20:06 jQuery CDN & Installation 23:11 jQuery Functions 33:54 Querying DOM 35:34 jQuery Selector 44:19 Traversing the DOM 53:53 Introduction to DOM Manipulation 54:53 Content Manipulation 59:59 Adding & Removing DOM Elements 1:06:17 Modifying Properties & Attributes 1:17:24 Copying Elements 1:21:29 Moving Elements 1:22:04 Iterating with each( ) 1:26:09 jQuery Filters 1:32:24 jQuery Data API 1:34:52 jQuery Effects 1:39:12 Fading & Sliding Methods 1:43:30 jQuery Animate 1:48:04 Chaining Animations 1:48:14 jQuery Form Validation 1:48:51 jQuery Form Selectors 1:59:02 Regular Expressions 2:10:37 Regex Validation 2:11:27 Event Handling 2:19:22 jQuery on( ) & off( ) 2:22:07 Event Object 2:27:02 jQuery Events 2:33:07 jQuery Custom Event 2:33:47 AJAX 2:39:32 jQuery AJAX 2:40:27 AJAX Concepts 2:53:22 AJAX Methods 2:57:18 jQuery AJAX & Forms 3:00:38 jQuery Utilities 3:05:43 Deferred Object 3:15:18 Promise 3:23:23 Deferred Chaining Subscribe to our channel to get video updates. Hit the subscribe button above: https://goo.gl/6ohpTV ---------------- JavaScript Certification Training ----------------- 🔵 Edureka Angular Training: http://bit.ly/38mi3sw 🔵 Edureka ReactJS Training: http://bit.ly/2DVP6Wz 🔵 Edureka NodeJS Training: http://bit.ly/35ehwXX 🔵 Edureka Web Development Training: https://bit.ly/3zCqNr3 🔵 Edureka Full Stack Training: http://bit.ly/2YveVpL 🔵 Edureka Python Django Training: http://bit.ly/2RAk6Do Instagram: https://www.instagram.com/edureka_learning Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka Castbox - https://castbox.fm/networks/505 - - - - - - - - - - - - - - - - - #edureka #jQuery #jQueryTutorial #jQueryTutorialForBeginners #jQuery #jQueryCompleteCourse About The Course: Full Stack Web Development Masters Program makes you proficient in skills to work with back-end and front-end web technologies. It includes training on: 1. Web Development, 2. jQuery, Angular, 3. NodeJS, 4. ExpressJS, and 5. MongoDB. The curriculum has been determined by extensive research on 5000+ job descriptions across the globe. ------------------------------------------------------------------------------------------------------- How It Works? 1. This is a 21 Week Instructor-led Online Course, 125 hours of assignment and 125 hours of project work 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of each course, there will be a project, post completion of that project you will be given a certificate ---------------------------------------------------------------------------------------------------------- For more information, Please write back to us at sales@edureka.co or call us at IND: 9606058406 / US: 18338555775 (toll-free).

detail
{'title': 'jQuery Full Course | jQuery Tutorial For Beginners | jQuery Certification Training | Edureka', 'heatmap': [{'end': 1117.154, 'start': 988.928, 'weight': 0.798}, {'end': 2593.312, 'start': 1357.58, 'weight': 1}, {'end': 2964.187, 'start': 2714.918, 'weight': 0.814}, {'end': 3838.132, 'start': 3455.591, 'weight': 0.719}, {'end': 4692.026, 'start': 4567.446, 'weight': 0.72}, {'end': 5063.64, 'start': 4814.818, 'weight': 0.808}, {'end': 5686.974, 'start': 5550.491, 'weight': 0.785}], 'summary': 'This jquery full course covers a comprehensive session on jquery, web development, cdn benefits, functions, css selectors, dom traversal, javascript dom manipulation, form validation, event handling, ajax, http requests, deferred concept, callback hell, and deferred objects, presented by varun with expertise in various languages, including practical examples and techniques.', 'chapters': [{'end': 64.647, 'segs': [{'end': 64.647, 'src': 'embed', 'start': 11.087, 'weight': 0, 'content': [{'end': 14.19, 'text': 'Hi guys, welcome to this comprehensive session on jQuery.', 'start': 11.087, 'duration': 3.103}, {'end': 17.853, 'text': "So in this session, we'll cover the following topics that you can see on the screen.", 'start': 14.41, 'duration': 3.443}, {'end': 25.339, 'text': "So we'll start this session by understanding the introduction to jQuery and then we'll understand the DOM manipulation and jQuery effect.", 'start': 18.173, 'duration': 7.166}, {'end': 33.506, 'text': "Once you understand these concepts, we'll go through the jQuery forms and events and finally end the session with jQuery Ajax and utilities.", 'start': 25.799, 'duration': 7.707}, {'end': 38.07, 'text': "So today we have a special guest Varun who's going to take this session forward.", 'start': 34.347, 'duration': 3.723}, {'end': 39.391, 'text': 'So over to you Varun.', 'start': 38.43, 'duration': 0.961}, {'end': 44.135, 'text': "Hello everyone, welcome to Edureka's on jQuery UI development.", 'start': 40.333, 'duration': 3.802}, {'end': 46.137, 'text': 'I will be your instructor for this course.', 'start': 44.376, 'duration': 1.761}, {'end': 50.72, 'text': 'My name is Varun and before we begin, I would like to share a short introduction about myself.', 'start': 46.377, 'duration': 4.343}, {'end': 56.003, 'text': 'I have been doing development for about six years now and I have done development in several languages.', 'start': 51, 'duration': 5.003}, {'end': 64.647, 'text': "These include Python, JavaScript, PHP, Ruby, Java, Android and for the past two years or so, I've also been working on Angular 1.x.", 'start': 56.023, 'duration': 8.624}], 'summary': 'Comprehensive session on jquery covering dom manipulation, effects, forms, events, ajax, and utilities with varun as the instructor.', 'duration': 53.56, 'max_score': 11.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11087.jpg'}], 'start': 11.087, 'title': 'Jquery comprehensive session', 'summary': 'Covers jquery topics such as introduction, dom manipulation, effects, forms, events, ajax, and utilities. varun, with six years of development experience, will lead the session and has expertise in various languages including python, javascript, php, ruby, java, android, and angular 1.x.', 'chapters': [{'end': 64.647, 'start': 11.087, 'title': 'Jquery comprehensive session', 'summary': 'Covers jquery topics including introduction, dom manipulation, effects, forms, events, ajax, and utilities. varun, with six years of development experience, will lead the session and has expertise in various languages including python, javascript, php, ruby, java, android, and angular 1.x.', 'duration': 53.56, 'highlights': ['Varun has six years of development experience in various languages including Python, JavaScript, PHP, Ruby, Java, and Android, and has worked on Angular 1.x for the past two years.', 'The session covers topics such as introduction to jQuery, DOM manipulation, jQuery effects, forms, events, Ajax, and utilities.', 'Varun will be the instructor for the jQuery UI development course.']}], 'duration': 53.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11087.jpg', 'highlights': ['Varun has six years of development experience in various languages including Python, JavaScript, PHP, Ruby, Java, and Android, and has worked on Angular 1.x for the past two years.', 'The session covers topics such as introduction to jQuery, DOM manipulation, jQuery effects, forms, events, Ajax, and utilities.', 'Varun will be the instructor for the jQuery UI development course.']}, {'end': 1300.535, 'segs': [{'end': 91.955, 'src': 'embed', 'start': 65.669, 'weight': 0, 'content': [{'end': 69.715, 'text': 'JavaScript continues to be one of my favorite go-to languages for its ease of use.', 'start': 65.669, 'duration': 4.046}, {'end': 76.745, 'text': "And jQuery is something that I used extensively in the past and I believe that it's a very, very,", 'start': 70.235, 'duration': 6.51}, {'end': 81.191, 'text': "very important stepping stone when you're learning about front-end development.", 'start': 76.745, 'duration': 4.446}, {'end': 84.632, 'text': 'It is one of the key stepping stones that you need to.', 'start': 81.531, 'duration': 3.101}, {'end': 91.955, 'text': 'I think every developer needs to know a little bit of at least before they go on to things like AngularJS or ReactJS and VueJS.', 'start': 84.632, 'duration': 7.323}], 'summary': 'Javascript and jquery are important stepping stones for front-end development, essential before learning advanced frameworks like angularjs, reactjs, and vuejs.', 'duration': 26.286, 'max_score': 65.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM65669.jpg'}, {'end': 130.951, 'src': 'embed', 'start': 102.662, 'weight': 1, 'content': [{'end': 108.607, 'text': 'okay, this in the sense that, okay, i want a box here, i want a round shape here, and this is the layout.', 'start': 102.662, 'duration': 5.945}, {'end': 119.437, 'text': "right, css adds any sort of styling to that structure, whether it's from color or shadowing, or font size or font weight, multiple, multiple things.", 'start': 108.607, 'duration': 10.83}, {'end': 122.841, 'text': 'JavaScript, however, brings your website to life, right?', 'start': 119.838, 'duration': 3.003}, {'end': 130.951, 'text': "So, of course, you can make a pretty HTML and CSS webpage, but then, if it doesn't do anything and by doing I mean when you click on a button,", 'start': 123.002, 'duration': 7.949}], 'summary': 'Css adds styling, javascript brings website to life.', 'duration': 28.289, 'max_score': 102.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM102662.jpg'}, {'end': 190.913, 'src': 'embed', 'start': 163.523, 'weight': 2, 'content': [{'end': 170.005, 'text': 'and as, as the image goes right, html is a structure, css is for presentation and javascript is for behavior.', 'start': 163.523, 'duration': 6.482}, {'end': 172.306, 'text': "so let's look at the basic dom structure.", 'start': 170.005, 'duration': 2.301}, {'end': 181.329, 'text': 'so basic dom structure, this is just a simple html document here and they have laid it out in a tree sort of pattern.', 'start': 172.306, 'duration': 9.023}, {'end': 182.65, 'text': 'okay, there is the document.', 'start': 181.329, 'duration': 1.321}, {'end': 185.471, 'text': "it's the parent of everything else, the document tag.", 'start': 182.65, 'duration': 2.821}, {'end': 190.913, 'text': 'Within the document tag, then you have HTML tag, which further contains head and body.', 'start': 185.891, 'duration': 5.022}], 'summary': 'Html is a structure, css is for presentation, and javascript is for behavior. the basic dom structure is laid out in a tree pattern with the document as the parent, containing html, head, and body.', 'duration': 27.39, 'max_score': 163.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM163523.jpg'}, {'end': 532.091, 'src': 'embed', 'start': 509.907, 'weight': 5, 'content': [{'end': 518.969, 'text': 'sort of at least 90 to 99 percent of the time, behave in a similar way across browsers, because if you were to build for different browsers, it,', 'start': 509.907, 'duration': 9.062}, {'end': 525.11, 'text': 'or if you were to write separate code, say doing the same thing for different browsers, it would be just too much work,', 'start': 518.969, 'duration': 6.141}, {'end': 527.791, 'text': 'and developers are supposed to be lazy, right?', 'start': 525.11, 'duration': 2.681}, {'end': 530.131, 'text': 'so jquery helps us out.', 'start': 527.791, 'duration': 2.34}, {'end': 532.091, 'text': 'jquery really really helps us out.', 'start': 530.131, 'duration': 1.96}], 'summary': 'Jquery ensures consistent behavior across browsers, saving developers time and effort.', 'duration': 22.184, 'max_score': 509.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM509907.jpg'}, {'end': 692.41, 'src': 'embed', 'start': 643.111, 'weight': 3, 'content': [{'end': 650.574, 'text': 'it improves developer efficiency, of course, easy to learn, because it relies on a lot of css based syntax.', 'start': 643.111, 'duration': 7.463}, {'end': 655.096, 'text': "we'll come across this soon, so let's move ahead now.", 'start': 650.574, 'duration': 4.522}, {'end': 656.457, 'text': 'the next question is why jquery?', 'start': 655.096, 'duration': 1.361}, {'end': 661.318, 'text': "I've already answered this a little bit, but let me still go through it.", 'start': 657.197, 'duration': 4.121}, {'end': 666.62, 'text': 'So jQuery is a JavaScript library designed to simplify the client-side scripting,', 'start': 661.919, 'duration': 4.701}, {'end': 671.121, 'text': 'naturally because of the syntax being similar to CSS cross-browser support.', 'start': 666.62, 'duration': 4.501}, {'end': 673.462, 'text': 'It helps in creating dynamic web pages.', 'start': 671.642, 'duration': 1.82}, {'end': 684.488, 'text': 'Now, dynamic in terms of Whenever you are able to manipulate the DOM, that is what adds a dynamic nature to your web page and your web application.', 'start': 673.722, 'duration': 10.766}, {'end': 692.41, 'text': 'So that is one of the fundamentals again, that it creates dynamic web pages which respond to user input.', 'start': 684.788, 'duration': 7.622}], 'summary': 'Jquery improves developer efficiency with css-based syntax, creating dynamic web pages.', 'duration': 49.299, 'max_score': 643.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM643111.jpg'}, {'end': 783.568, 'src': 'embed', 'start': 751.938, 'weight': 6, 'content': [{'end': 755.918, 'text': 'Again, a lot of problems across browsers and across OS as well.', 'start': 751.938, 'duration': 3.98}, {'end': 763.94, 'text': "So what happens is that jQuery, because it's so easy to use and there are so many functions already built in,", 'start': 756.458, 'duration': 7.482}, {'end': 770.581, 'text': 'it provides us with a lot of functionality to create animation, which is similar to Flash, but without using Flash.', 'start': 763.94, 'duration': 6.641}, {'end': 775.904, 'text': 'So in terms of you learning newer things, it reduces the number of newer things that you have to learn.', 'start': 771.221, 'duration': 4.683}, {'end': 783.568, 'text': "You don't have to learn slash and you're still able to create beautiful animations using jQuery, which is also a part of a dynamic web page right?", 'start': 775.924, 'duration': 7.644}], 'summary': 'Jquery simplifies animation, reducing need to learn flash, across os and browsers.', 'duration': 31.63, 'max_score': 751.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM751938.jpg'}, {'end': 888.543, 'src': 'embed', 'start': 861.801, 'weight': 7, 'content': [{'end': 868.062, 'text': 'how do you link the HTML and CSS together? In terms of what style is to be applied on what element?', 'start': 861.801, 'duration': 6.261}, {'end': 869.683, 'text': 'That happens through selectors.', 'start': 868.343, 'duration': 1.34}, {'end': 874.124, 'text': 'Now there are multiple ways to select or identify a tag.', 'start': 870.203, 'duration': 3.921}, {'end': 881.285, 'text': "So imagine it in this way that there are eight boxes that you're telling your friend to, that you told your friend to paint on the canvas.", 'start': 874.164, 'duration': 7.121}, {'end': 885.361, 'text': 'now you want, uh, one of the boxes to be of red color.', 'start': 881.678, 'duration': 3.683}, {'end': 888.543, 'text': 'naturally, the friend will ask hey, which box?', 'start': 885.361, 'duration': 3.182}], 'summary': 'Html and css are linked through selectors, which can be used to apply styles to specific elements. selectors are used to identify tags, and they allow for precise styling of elements.', 'duration': 26.742, 'max_score': 861.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM861801.jpg'}, {'end': 1142.268, 'src': 'heatmap', 'start': 988.928, 'weight': 8, 'content': [{'end': 991.749, 'text': 'okay, so this is an empty web page right now,', 'start': 988.928, 'duration': 2.821}, {'end': 1002.391, 'text': 'but just to quickly show you what I mean is that this is an object in JavaScript right curly braces open, curly braces closed,', 'start': 991.749, 'duration': 10.642}, {'end': 1006.052, 'text': 'and it essentially contains key value pairs.', 'start': 1002.391, 'duration': 3.661}, {'end': 1015.215, 'text': 'so if I had to count the number of fruits, I could store it like this and then if I do a dot Apple,', 'start': 1006.052, 'duration': 9.163}, {'end': 1022.733, 'text': 'it should print one a.banana will print 2 and a.guava will print 3..', 'start': 1015.215, 'duration': 7.518}, {'end': 1028.016, 'text': 'So similarly what you have is something called as a jQuery object.', 'start': 1022.733, 'duration': 5.283}, {'end': 1031.901, 'text': 'now there are two ways to use the jquery object.', 'start': 1029.039, 'duration': 2.862}, {'end': 1039.366, 'text': 'one is the dollar symbol and the other one is jquery, written in this particular casing, that is, j, cap, j small and q capital,', 'start': 1031.901, 'duration': 7.465}, {'end': 1040.347, 'text': 'and the rest of them small.', 'start': 1039.366, 'duration': 0.981}, {'end': 1045.91, 'text': 'again, you can use either it is fine if you use dollar or if you use jquery,', 'start': 1040.347, 'duration': 5.563}, {'end': 1050.373, 'text': 'but a lot of times the examples that you will find on the internet will be using dollar.', 'start': 1045.91, 'duration': 4.463}, {'end': 1053.635, 'text': 'so i think For this course we will stick to $.', 'start': 1050.373, 'duration': 3.262}, {'end': 1059.837, 'text': 'Now $ is essentially a function, okay? You need to really look at it like JavaScript syntax.', 'start': 1053.635, 'duration': 6.202}, {'end': 1063.799, 'text': 'So $ is nothing but for you a variable.', 'start': 1060.158, 'duration': 3.641}, {'end': 1076.404, 'text': 'So if I was to show it to you again, you can consider it like this, where $ is equal to this, right? Now I can say $.', 'start': 1064.399, 'duration': 12.005}, {'end': 1079.685, 'text': 'a equal to 3.', 'start': 1076.404, 'duration': 3.281}, {'end': 1083.088, 'text': "And if I print $, then it's an object.", 'start': 1079.685, 'duration': 3.403}, {'end': 1089.614, 'text': 'So $ is a valid identifier or a variable name in JavaScript, in JavaScript in general.', 'start': 1083.569, 'duration': 6.045}, {'end': 1099.804, 'text': 'But what jQuery does is that it adopted the $ as a symbol for itself, that all jQuery needs to be accessed through the $.', 'start': 1090.075, 'duration': 9.729}, {'end': 1103.327, 'text': "And if you look at it, it's not just a variable.", 'start': 1099.804, 'duration': 3.523}, {'end': 1104.768, 'text': "Actually, it's a function.", 'start': 1103.707, 'duration': 1.061}, {'end': 1117.154, 'text': 'jQuery, this parenthesis right, if so, in javascript, functions are called by the parenthesis, the opening and the closing of the brackets,', 'start': 1105.669, 'duration': 11.485}, {'end': 1118.634, 'text': 'and then code inside it.', 'start': 1117.154, 'duration': 1.48}, {'end': 1125.377, 'text': 'so this is essentially the jQuery function, which has a lot of things inside it a lot of things, as you will discover,', 'start': 1118.634, 'duration': 6.743}, {'end': 1130.24, 'text': "But you really need to visualize it in that particular way that I'm just calling a function.", 'start': 1125.777, 'duration': 4.463}, {'end': 1131.261, 'text': "That's it.", 'start': 1130.841, 'duration': 0.42}, {'end': 1137.425, 'text': 'Okay So a jQuery object is like an array which contains zero or more indexes.', 'start': 1131.901, 'duration': 5.524}, {'end': 1142.268, 'text': 'It also contains object methods like length, context, and selector.', 'start': 1137.885, 'duration': 4.383}], 'summary': 'Jquery object is like an array with key-value pairs, accessed using $ or jquery, and contains object methods like length, context, and selector.', 'duration': 52.193, 'max_score': 988.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM988928.jpg'}], 'start': 65.669, 'title': 'Jquery in web development', 'summary': 'Covers the importance of javascript and jquery in front-end development, the understanding of the document object model (dom), the power of jquery in web development, web development fundamentals, and an introduction to jquery basics, providing insights for creating dynamic web pages and handling browser discrepancies.', 'chapters': [{'end': 202.476, 'start': 65.669, 'title': 'Importance of javascript and jquery in front-end development', 'summary': 'Discusses the importance of javascript and jquery in front-end development, emphasizing their role in bringing interactivity to web pages and serving as crucial stepping stones before learning frameworks like angularjs or reactjs. it also highlights the structure and purpose of html, css, and javascript, emphasizing their respective roles in web development.', 'duration': 136.807, 'highlights': ['JavaScript and jQuery are important stepping stones for learning front-end development, with JavaScript bringing interactivity to web pages, as it is essential before moving on to frameworks like AngularJS or ReactJS and VueJS.', 'HTML serves as the structure of a website, CSS adds styling to the structure, and JavaScript brings interactivity to the web pages.', 'The Document Object Model (DOM) is structured in a tree pattern, with the document as the parent, followed by HTML, head, body, and various tags like title, H1, and P containing different text.', 'CSS adds styling to the structure of a website, including color, shadowing, font size, and font weight.', 'JavaScript adds interactivity to web pages, allowing for actions such as clicking on buttons, hovering over elements, and enhancing user experience.']}, {'end': 490.528, 'start': 202.837, 'title': 'Understanding the dom in web development', 'summary': 'Explains the concept of the document object model (dom) in web development, highlighting how html provides directions to browsers, browsers create a dom to apply styles and manipulate web pages, and how javascript and jquery are utilized for dom manipulation and handling browser discrepancies.', 'duration': 287.691, 'highlights': ['HTML provides directions to browsers for creating the DOM, which browsers use to apply styles and manipulate web pages. HTML provides instructions to browsers for rendering web pages, creating a Document Object Model (DOM) that is utilized for applying styles and manipulating web page elements.', 'JavaScript and jQuery are extensively used for DOM manipulation, enabling the alteration of web page content and appearance based on user interactions. JavaScript and jQuery are utilized for manipulating the DOM, allowing developers to dynamically alter web page content and appearance based on user interactions.', 'Browsers exhibit varying behaviors due to differences in interpreting instructions, resulting in discrepancies in web page rendering across different browsers. Differences in browser behaviors lead to variations in web page appearance across different browsers, attributed to how each browser interprets the provided instructions.']}, {'end': 710.064, 'start': 490.528, 'title': 'The power of jquery in web development', 'summary': 'Discusses the significance of jquery in web development, emphasizing its role in simplifying client-side scripting, ensuring cross-browser support, and creating dynamic web pages that respond to user input, with jquery being a lightweight, efficient, and easy-to-learn javascript library, first released in 2006.', 'duration': 219.536, 'highlights': ['jQuery is a JavaScript library designed to simplify client-side scripting, with cross-browser support, first released in 2006, offering lightweight and efficient solutions, making it easy to learn and integrate with IDs, and helping in creating dynamic web pages that respond to user input.', "Developers need to build websites that behave similarly across browsers at least 90 to 99 percent of the time, which is facilitated by jQuery's ability to manage different browser behaviors, thus eliminating the need to write code specific to browsers and improving developer efficiency.", 'jQuery is essentially a JavaScript library that has been written by experienced developers, offering out-of-the-box support for IDs and contributing to faster page loading due to its small size.']}, {'end': 978.199, 'start': 710.064, 'title': 'Web development fundamentals', 'summary': 'Discusses the importance of website speed, the transition from flash to jquery for creating animations, the significance of html document type, and the various ways to select or identify a tag using css selectors.', 'duration': 268.135, 'highlights': ['jQuery provides a lot of functionality to create animation, reducing the need to learn Flash and allowing for the creation of beautiful animations without using Flash. jQuery simplifies animation creation and reduces the need to learn Flash, providing an alternative to Flash for creating attractive animations.', 'The HTML document type informs the browser about the document type and is crucial for the interpretation of the document. The HTML document type is essential for informing the browser about the version of directions and is crucial for document interpretation.', 'CSS selectors play a vital role in linking HTML and CSS together, allowing for the application of styles to specific elements through various identification methods such as tag, ID, and class selectors. CSS selectors are crucial for linking HTML and CSS and involve methods like tag, ID, and class selectors to apply styles to specific elements.']}, {'end': 1300.535, 'start': 978.8, 'title': 'Introduction to jquery basics', 'summary': 'Introduces the basics of jquery, including the structure of a jquery object, the two ways to use the jquery object, and the methods for using jquery in web projects and debuggers.', 'duration': 321.735, 'highlights': ['The structure of a jQuery object and its similarity to JavaScript objects The chapter explains the structure of a jQuery object, which contains key-value pairs similar to JavaScript objects. It demonstrates the use of curly braces and key-value pairs to store and access data, providing a clear understanding of the object structure.', 'The two ways to use the jQuery object: $ symbol and jquery function The chapter elaborates on the two ways to use the jQuery object, using either the $ symbol or the jquery function. It emphasizes the flexibility in using either method and the prevalent usage of the $ symbol in online examples.', 'Methods for using jQuery in web projects and debuggers The chapter discusses various methods for using jQuery in web projects, such as using text editors like Atom and Sublime Text, online editors like JSFiddle and JSBin, and debuggers like Chrome Web Inspector and Firebug. It also explains the two ways of installing jQuery, either by downloading the jQuery file or using a content delivery network (CDN).']}], 'duration': 1234.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM65669.jpg', 'highlights': ['JavaScript and jQuery are important for front-end development, bringing interactivity to web pages.', 'HTML provides structure, CSS adds styling, and JavaScript brings interactivity to web pages.', 'The Document Object Model (DOM) is structured in a tree pattern, with the document as the parent.', 'jQuery simplifies client-side scripting, offering lightweight and efficient solutions.', 'jQuery helps in creating dynamic web pages that respond to user input.', 'jQuery facilitates building websites that behave similarly across browsers, improving developer efficiency.', 'jQuery provides functionality to create animation, reducing the need to learn Flash.', 'CSS selectors play a vital role in linking HTML and CSS together.', 'The structure of a jQuery object is similar to JavaScript objects, containing key-value pairs.', 'The two ways to use the jQuery object: $ symbol and jquery function.', 'Methods for using jQuery in web projects and debuggers are discussed.']}, {'end': 1929.321, 'segs': [{'end': 1376.066, 'src': 'embed', 'start': 1345.13, 'weight': 0, 'content': [{'end': 1348.473, 'text': 'so that is why the CDN helps out.', 'start': 1345.13, 'duration': 3.343}, {'end': 1352.077, 'text': "but if you're developing on local, i usually prefer local being.", 'start': 1348.473, 'duration': 3.604}, {'end': 1357.58, 'text': "if you're just in development mode, i usually prefer having the files on my machine because that's much faster,", 'start': 1352.077, 'duration': 5.503}, {'end': 1365.683, 'text': "because it's just serving the files from my machine to my machine and i don't have to wait for it to download from a server.", 'start': 1357.58, 'duration': 8.103}, {'end': 1371.664, 'text': 'so development, i would suggest that go with downloading the file, okay.', 'start': 1365.683, 'duration': 5.981}, {'end': 1376.066, 'text': 'so before we start with this, let me show you something now.', 'start': 1371.664, 'duration': 4.402}], 'summary': 'Cdn is helpful, but for development, prefer local files for speed and efficiency.', 'duration': 30.936, 'max_score': 1345.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM1345130.jpg'}, {'end': 1652.311, 'src': 'embed', 'start': 1624.873, 'weight': 1, 'content': [{'end': 1629.636, 'text': 'but then internally, javascript triggers this function once everything is ready.', 'start': 1624.873, 'duration': 4.763}, {'end': 1638.182, 'text': "so this is really the first snippet of code i think that most people go through when they're writing jquery that when the document is ready,", 'start': 1629.636, 'duration': 8.546}, {'end': 1643.646, 'text': 'do something and the next thing is that you want to display something on the on the web page.', 'start': 1638.182, 'duration': 5.464}, {'end': 1652.311, 'text': 'now jquery allows us to select an object or select a element in the dom or to break it down.', 'start': 1644.366, 'duration': 7.945}], 'summary': 'Jquery allows selecting dom elements and executing functions when the document is ready.', 'duration': 27.438, 'max_score': 1624.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM1624873.jpg'}, {'end': 1783.85, 'src': 'embed', 'start': 1758.978, 'weight': 3, 'content': [{'end': 1765.84, 'text': 'So it is executed as soon as the document is ready for DOM manipulation and we assign a function, right? So moving on.', 'start': 1758.978, 'duration': 6.862}, {'end': 1770.983, 'text': 'Now, another thing that jQuery allows us to do which I was talking about is chaining,', 'start': 1766.281, 'duration': 4.702}, {'end': 1778.087, 'text': 'or even actually JavaScript allows us to do is chaining functions on each other, where functions are executed one after the other.', 'start': 1770.983, 'duration': 7.104}, {'end': 1783.85, 'text': "Now, I know that these are not familiar to you, so I'll go through them one by one.", 'start': 1778.467, 'duration': 5.383}], 'summary': 'Jquery and javascript allow chaining functions for sequential execution.', 'duration': 24.872, 'max_score': 1758.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM1758978.jpg'}], 'start': 1300.535, 'title': 'Jquery and cdn benefits', 'summary': 'Covers the benefits of using a cdn for file maintenance and explains jquery functions, emphasizing document and ready function usage. it also explains jquery dom manipulation, including element selection, function execution, and chaining for manipulation and animation.', 'chapters': [{'end': 1544.497, 'start': 1300.535, 'title': 'Cdn benefits and jquery function explanation', 'summary': 'Discusses the benefits of using a cdn for maintaining original files and the explanation of the jquery function, highlighting the use of document and ready function for displaying content on an html page.', 'duration': 243.962, 'highlights': ['The benefits of using a CDN include ensuring the originality and integrity of the files, preventing accidental modifications, and faster development process, while for local development, downloading the file is suggested.', 'Explanation of the jQuery function involves using the document and ready function for displaying content on an HTML page, highlighting the use of functions defined on top of each other and the concept of chaining functions.', 'The file version is maintained on a CDN, ensuring the originality and integrity of the files, preventing accidental modifications, and providing faster development process.', 'Local development involves downloading the file for faster serving and not having to wait for it to download from a server.', 'The document and ready function in jQuery allows for displaying content on an HTML page, showcasing the concept of chaining functions and functions defined on top of each other.']}, {'end': 1929.321, 'start': 1544.497, 'title': 'Jquery dom manipulation', 'summary': 'Discusses how to use jquery to manipulate the dom, including selecting elements, executing functions when the document is ready, and chaining functions for dom manipulation and animation.', 'duration': 384.824, 'highlights': ['jQuery allows for executing functions when the document is ready, using a function that triggers once everything is ready.', 'Selecting elements in the DOM can be done through various methods like selecting all divs, selecting by ID, and setting CSS properties.', 'Chaining functions in jQuery allows for executing multiple functions one after the other for DOM manipulation and animation.']}], 'duration': 628.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM1300535.jpg', 'highlights': ['Using a CDN ensures file originality, integrity, and faster development.', "jQuery's document and ready function displays content on an HTML page.", 'Local development involves downloading files for faster serving.', 'jQuery allows executing functions when the document is ready.', 'Chaining functions in jQuery enables DOM manipulation and animation.']}, {'end': 3212.193, 'segs': [{'end': 2005.945, 'src': 'embed', 'start': 1980.262, 'weight': 0, 'content': [{'end': 1985.905, 'text': 'So to define a custom function on JavaScript, this is sort of the way we would do it.', 'start': 1980.262, 'duration': 5.643}, {'end': 1990.218, 'text': 'Where we would call $.', 'start': 1986.386, 'duration': 3.832}, {'end': 1994.251, 'text': 'fn.myCustomFunction and then define a function which would do something.', 'start': 1990.218, 'duration': 4.033}, {'end': 1997.253, 'text': 'And then we can do further things to it.', 'start': 1995.191, 'duration': 2.062}, {'end': 2005.945, 'text': 'So if you have to define your own jQuery functions, There is a possibility to do that as well without rewriting the entire library.', 'start': 1997.673, 'duration': 8.272}], 'summary': 'In javascript, define custom functions using $fn.mycustomfunction to extend jquery functionalities.', 'duration': 25.683, 'max_score': 1980.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM1980262.jpg'}, {'end': 2307.321, 'src': 'embed', 'start': 2277.981, 'weight': 3, 'content': [{'end': 2289.309, 'text': "Then of course there are the attribute selectors, which is by saying that let's suppose there is an A tag and it has the target set as self,", 'start': 2277.981, 'duration': 11.328}, {'end': 2296.515, 'text': 'or it has a href which is set to google.com and I want to select it and I want to modify the color of it.', 'start': 2289.309, 'duration': 7.206}, {'end': 2302.539, 'text': 'So the way this would work is that let me just add an A tag over here.', 'start': 2297.175, 'duration': 5.364}, {'end': 2307.321, 'text': 'and the target is.', 'start': 2305.439, 'duration': 1.882}], 'summary': 'Attribute selectors can modify the color of a tags with specific attributes set.', 'duration': 29.34, 'max_score': 2277.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM2277981.jpg'}, {'end': 2455.08, 'src': 'embed', 'start': 2432.19, 'weight': 1, 'content': [{'end': 2441.296, 'text': 'but then, uh, what we are referring to here is, uh, kind of attributes which are not id or class, which are not id or class.', 'start': 2432.19, 'duration': 9.106}, {'end': 2448.998, 'text': 'Okay, next is universal selectors, which is basically a star symbol which will select everything in your document.', 'start': 2442.176, 'duration': 6.822}, {'end': 2450.518, 'text': 'Not recommended that you do this.', 'start': 2449.118, 'duration': 1.4}, {'end': 2455.08, 'text': "It will eat up a lot of memory, probably crash your website on the user's browser.", 'start': 2451.159, 'duration': 3.921}], 'summary': 'Avoid using universal selectors as it may crash the website due to memory consumption.', 'duration': 22.89, 'max_score': 2432.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM2432190.jpg'}, {'end': 2695.321, 'src': 'embed', 'start': 2669.594, 'weight': 2, 'content': [{'end': 2679.978, 'text': 'But then if you want to keep going down a particular nested set of tags in your HTML, that is where traversing the DOM will help you out.', 'start': 2669.594, 'duration': 10.384}, {'end': 2683.54, 'text': 'And then there are some common functions available to us.', 'start': 2680.658, 'duration': 2.882}, {'end': 2686.122, 'text': 'Find finds all matching elements.', 'start': 2684.221, 'duration': 1.901}, {'end': 2689.685, 'text': 'Children is same as Find, but moves only one level down.', 'start': 2686.402, 'duration': 3.283}, {'end': 2694.34, 'text': "closest moves up the DOM tree, so it doesn't move down.", 'start': 2690.677, 'duration': 3.663}, {'end': 2695.321, 'text': "it doesn't move inside.", 'start': 2694.34, 'duration': 0.981}], 'summary': 'Traversing the dom allows finding, moving within html elements using functions like find, children, closest.', 'duration': 25.727, 'max_score': 2669.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM2669594.jpg'}, {'end': 2964.187, 'src': 'heatmap', 'start': 2714.918, 'weight': 0.814, 'content': [{'end': 2718.401, 'text': 'Next moves down and targets the immediate falling sibling.', 'start': 2714.918, 'duration': 3.483}, {'end': 2721.303, 'text': 'Now what is important to notice here is the sibling part.', 'start': 2718.481, 'duration': 2.822}, {'end': 2723.985, 'text': 'It will notice it will go to the sibling.', 'start': 2721.884, 'duration': 2.101}, {'end': 2725.666, 'text': 'It will not go to a child.', 'start': 2724.445, 'duration': 1.221}, {'end': 2729.269, 'text': 'So if there is a LI tag, right?', 'start': 2726.067, 'duration': 3.202}, {'end': 2735.449, 'text': 'So LI tag, if you call it on an LI tag, will move to the next li tab.', 'start': 2729.75, 'duration': 5.699}, {'end': 2739.49, 'text': 'it will not go to anything inside it, any html inside it.', 'start': 2735.449, 'duration': 4.041}, {'end': 2742.851, 'text': 'previous is just move, just like next, but moves up.', 'start': 2739.49, 'duration': 3.361}, {'end': 2747.193, 'text': 'so it moves to the preceding sibling and siblings.', 'start': 2742.851, 'duration': 4.342}, {'end': 2748.754, 'text': 'it targets moving up and down.', 'start': 2747.193, 'duration': 1.561}, {'end': 2758.117, 'text': 'so if i select uh it on an li tag, it will select all the other siblings, first gets the first element from the selected set and last gets the last.', 'start': 2748.754, 'duration': 9.363}, {'end': 2761.459, 'text': 'so i think that kind of shows where i went wrong earlier.', 'start': 2758.117, 'duration': 3.342}, {'end': 2767.681, 'text': 'so first and last, basically first goes on the first one and the last only on the last one.', 'start': 2761.459, 'duration': 6.222}, {'end': 2774.724, 'text': 'uh, not on the middle ones, but if you have to traverse the middle ones, then probably something like next or previous or closest.', 'start': 2767.681, 'duration': 7.043}, {'end': 2776.825, 'text': "that's something that will come to help.", 'start': 2774.724, 'duration': 2.101}, {'end': 2779.126, 'text': "so let's see a couple of examples of each one of them.", 'start': 2776.825, 'duration': 2.301}, {'end': 2792.224, 'text': "okay, so let's mute this out and mute this out as well, okay.", 'start': 2780.259, 'duration': 11.965}, {'end': 2798.287, 'text': "so what i've done is that i've added a simple button here and i've added a click function on it.", 'start': 2792.224, 'duration': 6.063}, {'end': 2798.907, 'text': 'now what?', 'start': 2798.287, 'duration': 0.62}, {'end': 2806.211, 'text': "what i've done here is that whenever i click on this button, which is present on the web page here, something will happen now.", 'start': 2798.907, 'duration': 7.304}, {'end': 2809.132, 'text': 'what that something will be is being defined by me here.', 'start': 2806.211, 'duration': 2.921}, {'end': 2815.756, 'text': 'So what this is going to do is going to go to item list.', 'start': 2810.515, 'duration': 5.241}, {'end': 2822.638, 'text': "This UL that you have created is going to find the A tag and it's going to make all CSS.", 'start': 2816.296, 'duration': 6.342}, {'end': 2825.278, 'text': "It's going to make them of red color.", 'start': 2823.318, 'duration': 1.96}, {'end': 2827.079, 'text': "Let's try this out.", 'start': 2826.339, 'duration': 0.74}, {'end': 2829.479, 'text': 'Right Let me click on the button.', 'start': 2827.899, 'duration': 1.58}, {'end': 2832.96, 'text': 'So all the A tags went red.', 'start': 2830.44, 'duration': 2.52}, {'end': 2834.801, 'text': 'Coffee was not an A tag.', 'start': 2833.64, 'duration': 1.161}, {'end': 2836.281, 'text': 'In fact, let me.', 'start': 2835.501, 'duration': 0.78}, {'end': 2852.983, 'text': 'so that we can remember and we can say this is yahoo.com, and we can say this is, and if i click on,', 'start': 2838.737, 'duration': 14.246}, {'end': 2861.966, 'text': 'click me see how it found only the a tags and not coffee and not milk and not tea, and it set them to red.', 'start': 2852.983, 'duration': 8.983}, {'end': 2866.408, 'text': 'so essentially, item list, find a, set the color to red.', 'start': 2861.966, 'duration': 4.442}, {'end': 2869.785, 'text': 'next one is the children example.', 'start': 2867.483, 'duration': 2.302}, {'end': 2879.571, 'text': 'so if i was to do this, let me try and do this, or let me first show you this example.', 'start': 2869.785, 'duration': 9.786}, {'end': 2881.492, 'text': 'so we did fine.', 'start': 2879.571, 'duration': 1.921}, {'end': 2888.677, 'text': "right, we did an item list, but let's do it on the first li instead, which will select this particular li tag.", 'start': 2881.492, 'duration': 7.185}, {'end': 2895.194, 'text': "let's see what the result is Pretty much like the same one.", 'start': 2888.677, 'duration': 6.517}, {'end': 2903.623, 'text': 'I selected the list item first instead this time, and I set the color to red.', 'start': 2896.055, 'duration': 7.568}, {'end': 2916.807, 'text': 'Now, what if I change it to be children? What will happen? Only Google.com gets colored red.', 'start': 2904.684, 'duration': 12.123}, {'end': 2922.25, 'text': 'Why is this? Because children goes to the next immediate one, which is this one.', 'start': 2917.387, 'duration': 4.863}, {'end': 2924.731, 'text': 'It will not go inside.', 'start': 2923.01, 'duration': 1.721}, {'end': 2926.952, 'text': 'It will not go more than one level deep.', 'start': 2925.051, 'duration': 1.901}, {'end': 2939.419, 'text': 'If this was outside the div tag here, this div tag contains this, right? If this was outside, it would have worked.', 'start': 2927.833, 'duration': 11.586}, {'end': 2941.14, 'text': 'But then it is not.', 'start': 2940.28, 'duration': 0.86}, {'end': 2943.767, 'text': "So this doesn't work out.", 'start': 2942.406, 'duration': 1.361}, {'end': 2945.569, 'text': 'Children go to the next immediate one.', 'start': 2943.807, 'duration': 1.762}, {'end': 2948.171, 'text': "Let's go to the closest one.", 'start': 2946.93, 'duration': 1.241}, {'end': 2949.473, 'text': "Let's see what the outcome is.", 'start': 2948.372, 'duration': 1.101}, {'end': 2952.175, 'text': 'Try to guess before I demonstrate.', 'start': 2950.213, 'duration': 1.962}, {'end': 2956.96, 'text': 'So closest goes to the immediate closest one.', 'start': 2952.736, 'duration': 4.224}, {'end': 2959.682, 'text': "Let's look at the definition once.", 'start': 2957.62, 'duration': 2.062}, {'end': 2964.187, 'text': 'Moves up the DOM tree until it finds the matching element in DOM.', 'start': 2960.964, 'duration': 3.223}], 'summary': 'A tutorial on using jquery methods to navigate and manipulate the dom tree', 'duration': 249.269, 'max_score': 2714.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM2714918.jpg'}], 'start': 1929.321, 'title': 'Jquery functions, css selectors, dom traversal, and html manipulation', 'summary': 'Covers extending jquery library with custom functions, querying dom using id and class selectors, discussing various css selectors and their impact on html elements, exploring dom traversal techniques, and manipulating html elements using javascript.', 'chapters': [{'end': 2170.855, 'start': 1929.321, 'title': 'Jquery functions and dom querying', 'summary': 'Covers extending jquery library by defining custom functions on the dollar object and querying the dom using id and class selectors, demonstrating the use of css selectors and the power of jquery.', 'duration': 241.534, 'highlights': ['jQuery allows defining custom functions on the dollar object, enabling extension of the library without rewriting it, suitable for advanced users with familiarity in jQuery and JavaScript. Custom functions can be defined on the dollar object to extend the jQuery library, recommended for advanced users with expertise in jQuery and JavaScript.', "Demonstrates querying the DOM using id selector, with examples of selecting unique IDs and setting text inside them, emphasizing the use of CSS selectors' power in jQuery. The chapter demonstrates querying the DOM using id selectors and setting text inside them, highlighting the power of CSS selectors in jQuery.", 'Explains the use of class selector, showcasing the ability to change classes and still have them work, illustrating the difference between id and class selectors in jQuery. The chapter explains the use of class selectors, showing the ability to change classes and still have them work, highlighting the difference between id and class selectors in jQuery.']}, {'end': 2553, 'start': 2170.855, 'title': 'Css selectors and usage', 'summary': 'Discusses the usage of different css selectors, such as classes, ids, element selectors, attribute selectors, universal selectors, position selectors, and pseudo-class selectors, highlighting their impact on html elements and their potential memory usage.', 'duration': 382.145, 'highlights': ['The chapter explores the usage of different CSS selectors, such as classes, IDs, element selectors, attribute selectors, universal selectors, position selectors, and pseudo-class selectors, emphasizing their impact on HTML elements and potential memory usage.', 'The speaker explains the convenience of using classes wherever applicable and the fallback of defining a div with an ID if a certain HTML element does not have classes.', 'The demonstration of using the h1 tag to change the text color through jQuery, exemplifying how it operates similarly to CSS and showcasing the practical implementation of manipulating text content.', 'The discussion on attribute selectors and the example of modifying the color of an tag based on its attributes, providing a practical demonstration of how to select and modify elements based on specific attributes.', "The cautionary note on using the universal selector, denoting its potential adverse impact on memory usage and the user's browsing experience.", 'The explanation and examples of position selectors and pseudo-class selectors, showcasing the ability to select specific elements within a parent and apply CSS styling, demonstrating their practical application and impact on HTML elements.']}, {'end': 2798.907, 'start': 2553.16, 'title': 'Dom traversal and pseudo classes', 'summary': 'Discusses dom traversal techniques such as selecting first or last elements, using pseudo classes like :not, and traversing the dom with methods like find, children, closest, parent, next, and previous.', 'duration': 245.747, 'highlights': ['The :not pseudo class can be used to select elements that do not match a specific selector, such as selecting elements without a certain attribute like href, as illustrated by the example of selecting elements with href not equal to google.com.', 'DOM traversal techniques like find, children, closest, parent, next, and previous are explained, with find and children being used to select matching elements and move down one level, closest and parent to move up the DOM tree, and next and previous to target immediate siblings.', 'The concept of selecting the first and last elements using first and last methods is discussed, clarifying that these methods target the first and last elements only, not the middle ones, which may require methods like next, previous, or closest for traversal.', 'The chapter also mentions the limitation of naming middle elements in a list, as different people may refer to them differently, making it unmaintainable, emphasizing the suitability of selecting first or last elements.']}, {'end': 3212.193, 'start': 2798.907, 'title': 'Manipulating html elements with javascript', 'summary': 'Covers the manipulation of html elements using javascript, including selecting elements, changing css properties, and navigating parent-child relationships, providing examples and explanations of each method.', 'duration': 413.286, 'highlights': ['Selecting elements and changing CSS properties The speaker demonstrates how to select elements and change their CSS properties using JavaScript, such as setting the color of A tags to red.', 'Navigating parent-child relationships The chapter explains how JavaScript can navigate parent-child relationships to manipulate specific elements, emphasizing the importance of establishing a relationship between elements for effective manipulation.', 'Demonstrating methods for selecting specific elements The speaker illustrates various methods for selecting specific elements, including selecting the first and last li tags, as well as siblings, providing multiple options for achieving the same result.']}], 'duration': 1282.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM1929321.jpg', 'highlights': ['jQuery allows defining custom functions on the dollar object, enabling extension of the library without rewriting it, suitable for advanced users with familiarity in jQuery and JavaScript.', 'The chapter explores the usage of different CSS selectors, such as classes, IDs, element selectors, attribute selectors, universal selectors, position selectors, and pseudo-class selectors, emphasizing their impact on HTML elements and potential memory usage.', 'DOM traversal techniques like find, children, closest, parent, next, and previous are explained, with find and children being used to select matching elements and move down one level, closest and parent to move up the DOM tree, and next and previous to target immediate siblings.', 'Selecting elements and changing CSS properties The speaker demonstrates how to select elements and change their CSS properties using JavaScript, such as setting the color of A tags to red.']}, {'end': 5095.995, 'segs': [{'end': 3261.763, 'src': 'embed', 'start': 3235.605, 'weight': 0, 'content': [{'end': 3239.486, 'text': 'Doing DOM manipulation can be cumbersome based on different browsers.', 'start': 3235.605, 'duration': 3.881}, {'end': 3244.448, 'text': "Each browser will react in a different way to your instructions if you're writing plain JavaScript.", 'start': 3239.946, 'duration': 4.502}, {'end': 3252.513, 'text': 'However, jQuery comes to the rescue with a bunch of methods which are around DOM and which handle that difference from browser to browser.', 'start': 3244.748, 'duration': 7.765}, {'end': 3261.763, 'text': 'for us now, as in anything related to programming or computer science, there are four things that you can do to any particular object,', 'start': 3252.513, 'duration': 9.25}], 'summary': 'Jquery simplifies dom manipulation, ensuring consistent behavior across browsers.', 'duration': 26.158, 'max_score': 3235.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM3235605.jpg'}, {'end': 3321.78, 'src': 'embed', 'start': 3273.031, 'weight': 1, 'content': [{'end': 3277.934, 'text': 'So these are essentially the four fundamentals on which a lot of things are built on.', 'start': 3273.031, 'duration': 4.903}, {'end': 3288.481, 'text': "So by manipulation we simply mean that any changes, whether it's updation, creation or deletion, or simply even reading it,", 'start': 3278.315, 'duration': 10.166}, {'end': 3291.543, 'text': 'those are any sort of DOM manipulations that are available to us.', 'start': 3288.481, 'duration': 3.062}, {'end': 3297.751, 'text': 'now there are certain simple methods to manipulate the content inside a dom element.', 'start': 3292.549, 'duration': 5.202}, {'end': 3304.773, 'text': 'so one is the dom element in itself, manipulating the dom element in itself and then even the content inside it.', 'start': 3297.751, 'duration': 7.022}, {'end': 3313.615, 'text': 'so in last class, for example, we saw that there was an empty div tag, but we placed some text inside it after the page had loaded right.', 'start': 3304.773, 'duration': 8.842}, {'end': 3315.956, 'text': 'there is a example of content manipulation.', 'start': 3313.615, 'duration': 2.341}, {'end': 3318.617, 'text': 'So sometimes you see it on website right?', 'start': 3316.776, 'duration': 1.841}, {'end': 3321.78, 'text': 'When you click on a button, something reveals itself.', 'start': 3318.677, 'duration': 3.103}], 'summary': 'Understanding dom manipulation for updating, creating, or deleting content, and how it affects website interaction.', 'duration': 48.749, 'max_score': 3273.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM3273031.jpg'}, {'end': 3371.104, 'src': 'embed', 'start': 3342.033, 'weight': 4, 'content': [{'end': 3346.376, 'text': 'There is a HTML method to insert or update the HTML code inside an element.', 'start': 3342.033, 'duration': 4.343}, {'end': 3355.439, 'text': 'so. and then there is a value method, the val, which can get values from an input box or set values inside an input box.', 'start': 3346.856, 'duration': 8.583}, {'end': 3361.181, 'text': 'now the difference between text and html is natural that text is simple text, plain text,', 'start': 3355.439, 'duration': 5.742}, {'end': 3365.002, 'text': 'but with html you can actually place html inside your document.', 'start': 3361.181, 'duration': 3.821}, {'end': 3366.703, 'text': "so let's quickly jump into an example.", 'start': 3365.002, 'duration': 1.701}, {'end': 3371.104, 'text': "so what I've done here is that I've written some simple HTML.", 'start': 3367.763, 'duration': 3.341}], 'summary': 'Html method for inserting/updating code, val method for input values. html allows inserting html content.', 'duration': 29.071, 'max_score': 3342.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM3342033.jpg'}, {'end': 3838.132, 'src': 'heatmap', 'start': 3455.591, 'weight': 0.719, 'content': [{'end': 3464.318, 'text': 'with the span style of with color red saying that your answer is incorrect and we want to display the correct answer as well using text.', 'start': 3455.591, 'duration': 8.727}, {'end': 3469.603, 'text': 'so we have ended up using val, text and HTML all three in this example.', 'start': 3464.318, 'duration': 5.285}, {'end': 3471.905, 'text': "so let's quickly run it in the browser and see how it works.", 'start': 3469.603, 'duration': 2.302}, {'end': 3479.38, 'text': 'so let me give the answer is Calcutta and submit it.', 'start': 3474.036, 'duration': 5.344}, {'end': 3480.981, 'text': 'okay, seems like I made a syntax error.', 'start': 3479.38, 'duration': 1.601}, {'end': 3482.942, 'text': 'let me just quickly fix it.', 'start': 3480.981, 'duration': 1.961}, {'end': 3484.564, 'text': 'it says it is over here.', 'start': 3482.942, 'duration': 1.622}, {'end': 3491.829, 'text': 'okay, this should fix it.', 'start': 3484.564, 'duration': 7.265}, {'end': 3496.192, 'text': "let's suppose I type in Calcutta.", 'start': 3491.829, 'duration': 4.363}, {'end': 3504.957, 'text': 'so, as we wanted it to do, in case of a incorrect answer, your answer is incorrect.', 'start': 3496.192, 'duration': 8.765}, {'end': 3508.741, 'text': 'right is displayed over here and the answer tag.', 'start': 3504.957, 'duration': 3.784}, {'end': 3510.242, 'text': 'the answer is displayed.', 'start': 3508.741, 'duration': 1.501}, {'end': 3513.826, 'text': "let's look at the HTML if it produced right.", 'start': 3510.242, 'duration': 3.584}, {'end': 3518.691, 'text': 'so this did not have content inside it before we started, but now it does.', 'start': 3513.826, 'duration': 4.865}, {'end': 3524.395, 'text': "now it does have content inside it and let's try for the correct one.", 'start': 3519.634, 'duration': 4.761}, {'end': 3528.377, 'text': 'if i answer as deli, your answer is correct.', 'start': 3524.395, 'duration': 3.982}, {'end': 3534.619, 'text': 'if i reload and i type in deli, it will say your answer is correct.', 'start': 3528.377, 'duration': 6.242}, {'end': 3536.059, 'text': 'it is added to this.', 'start': 3534.619, 'duration': 1.44}, {'end': 3539.68, 'text': 'you can in fact see the dom manipulation happening in front of your eyes by like.', 'start': 3536.059, 'duration': 3.621}, {'end': 3542.921, 'text': 'so if you notice here, the result is empty.', 'start': 3539.68, 'duration': 3.241}, {'end': 3547.542, 'text': 'let me type it in and just keep observing this part.', 'start': 3542.921, 'duration': 4.621}, {'end': 3548.403, 'text': 'did you see it?', 'start': 3547.542, 'duration': 0.861}, {'end': 3549.203, 'text': 'did you see the change?', 'start': 3548.403, 'duration': 0.8}, {'end': 3551.847, 'text': 'This was not present.', 'start': 3550.987, 'duration': 0.86}, {'end': 3552.688, 'text': 'Let me do it again.', 'start': 3551.968, 'duration': 0.72}, {'end': 3554.989, 'text': 'This is empty right now.', 'start': 3553.989, 'duration': 1}, {'end': 3556.03, 'text': "There's nothing inside it.", 'start': 3555.049, 'duration': 0.981}, {'end': 3558.091, 'text': 'I type in Delhi.', 'start': 3557.29, 'duration': 0.801}, {'end': 3558.631, 'text': 'I submit.', 'start': 3558.171, 'duration': 0.46}, {'end': 3562.053, 'text': 'And then suddenly there is a small animation that you can see.', 'start': 3559.491, 'duration': 2.562}, {'end': 3563.473, 'text': 'It blinked for a second.', 'start': 3562.313, 'duration': 1.16}, {'end': 3567.295, 'text': 'That is done by the Chrome DevTools.', 'start': 3563.893, 'duration': 3.402}, {'end': 3574.039, 'text': "That is not essentially related to JavaScript assets, but it's just an effect that you can sort of see that the DOM was manipulated.", 'start': 3567.455, 'duration': 6.584}, {'end': 3576.62, 'text': 'You can see it taking effect in front of your eyes.', 'start': 3574.379, 'duration': 2.241}, {'end': 3579.922, 'text': 'Let me in fact show you the incorrect one as well.', 'start': 3577.34, 'duration': 2.582}, {'end': 3581.883, 'text': 'Keep observing the section here.', 'start': 3580.142, 'duration': 1.741}, {'end': 3585.566, 'text': "So if you saw both of them got affected now, let's see it again.", 'start': 3582.384, 'duration': 3.182}, {'end': 3588.808, 'text': 'You see both of them got affected.', 'start': 3587.487, 'duration': 1.321}, {'end': 3590.649, 'text': 'Result as well as answer.', 'start': 3589.569, 'duration': 1.08}, {'end': 3596.513, 'text': 'So yeah, I mean it just talks about the same thing that we can set the text, HTML or value.', 'start': 3591.91, 'duration': 4.603}, {'end': 3604.039, 'text': 'Now, the other thing is that we can also add or remove DOM elements, which is also very, very powerful,', 'start': 3597.534, 'duration': 6.505}, {'end': 3608.715, 'text': 'that you can add to your HTML after the html has been served.', 'start': 3604.039, 'duration': 4.676}, {'end': 3617.161, 'text': 'so till now, what we were doing was that we made an html document and it was fixed right like you could not add more p tax to it, more dev tax to it.', 'start': 3608.715, 'duration': 8.446}, {'end': 3620.524, 'text': "but let's think about something like the facebook feed for a second.", 'start': 3617.161, 'duration': 3.363}, {'end': 3623.526, 'text': "it's an infinite feed, or any of the social network feed.", 'start': 3620.524, 'duration': 3.002}, {'end': 3626.988, 'text': "as you keep on scrolling down, it just never ends, it's infinite.", 'start': 3623.526, 'duration': 3.462}, {'end': 3629.43, 'text': 'so what is happening over there?', 'start': 3626.988, 'duration': 2.442}, {'end': 3637.682, 'text': 'essentially, facebook is adding more and more div tag, or stories, as they call it, or posts,', 'start': 3629.43, 'duration': 8.252}, {'end': 3641.884, 'text': 'but that is essentially html code and it keeps on adding, adding, adding and adding.', 'start': 3637.682, 'duration': 4.202}, {'end': 3644.426, 'text': "it's an infinite list it keeps creating.", 'start': 3641.884, 'duration': 2.542}, {'end': 3653.01, 'text': 'so it does that through javascript, which javascript creates the dom, and it just keeps on adding to the feed infinitely.', 'start': 3644.426, 'duration': 8.584}, {'end': 3657.253, 'text': 'and then there are a couple of methods available for doing this.', 'start': 3653.69, 'duration': 3.563}, {'end': 3663.177, 'text': 'so after, before append, prepend and remove, all of them work in different ways.', 'start': 3657.253, 'duration': 5.924}, {'end': 3667.18, 'text': "so let's dive into some code and see each of them in action.", 'start': 3663.177, 'duration': 4.003}, {'end': 3676.908, 'text': "so i'm going to just comment this out because we don't need it anymore.", 'start': 3667.18, 'duration': 9.728}, {'end': 3679.85, 'text': 'okay, i think i might be happy.', 'start': 3676.908, 'duration': 2.942}, {'end': 3691.48, 'text': "so let's remove this as well.", 'start': 3687.216, 'duration': 4.264}, {'end': 3699.328, 'text': 'and okay, let me take this place it over here.', 'start': 3691.48, 'duration': 7.848}, {'end': 3704.373, 'text': "okay. so what I've done is that I have created four boxes on my web page.", 'start': 3699.328, 'duration': 5.045}, {'end': 3705.835, 'text': "I'll just show them to you in a second.", 'start': 3704.373, 'duration': 1.462}, {'end': 3711.382, 'text': 'So here are four boxes after, before append and prepend.', 'start': 3707.116, 'duration': 4.266}, {'end': 3715.308, 'text': "I'm going to show examples of each of the function using each of these boxes.", 'start': 3711.442, 'duration': 3.866}, {'end': 3721.196, 'text': 'So they are present over here and the styling has been done somewhere over here.', 'start': 3715.348, 'duration': 5.848}, {'end': 3731.483, 'text': 'So there is a color box, it has a width, it has a height, it has a border, margin and then there is an after tag on it which gives it the color.', 'start': 3722.698, 'duration': 8.785}, {'end': 3733.904, 'text': 'So the color is given to it by us.', 'start': 3731.583, 'duration': 2.321}, {'end': 3737.146, 'text': 'Now each of the boxes has a click event on it.', 'start': 3734.524, 'duration': 2.622}, {'end': 3744.11, 'text': 'So once I click on it, it will append something to itself which is going to be again a div tag.', 'start': 3737.346, 'duration': 6.764}, {'end': 3745.37, 'text': 'This is going to be another box.', 'start': 3744.33, 'duration': 1.04}, {'end': 3748.672, 'text': 'So clicking on one of the boxes will add another box to it.', 'start': 3745.53, 'duration': 3.142}, {'end': 3750.593, 'text': 'for the purpose of demonstration.', 'start': 3748.892, 'duration': 1.701}, {'end': 3755.936, 'text': 'let me even remove the other boxes so that we can only concentrate on one box at a time.', 'start': 3750.593, 'duration': 5.343}, {'end': 3759.217, 'text': "so i'll even comment this out only one box,", 'start': 3755.936, 'duration': 3.281}, {'end': 3765.221, 'text': "and the box that i'm going to attach it is going to have the class as attached and the color is going to be yellow.", 'start': 3759.217, 'duration': 6.004}, {'end': 3771.714, 'text': 'okay. so if you saw this particular thing got attached to it, so click again.', 'start': 3766.351, 'duration': 5.363}, {'end': 3773.155, 'text': 'another one happens now.', 'start': 3771.714, 'duration': 1.441}, {'end': 3775.556, 'text': 'why they are appearing vertically like this?', 'start': 3773.155, 'duration': 2.401}, {'end': 3777.717, 'text': "that's more of a matter of css.", 'start': 3775.556, 'duration': 2.161}, {'end': 3781.119, 'text': "but if you look at the dom, let's concentrate on the dom.", 'start': 3777.717, 'duration': 3.402}, {'end': 3783.16, 'text': 'we had this div tag right.', 'start': 3781.119, 'duration': 2.041}, {'end': 3791.405, 'text': 'so what after does is that it attaches it within that particular div tag.', 'start': 3783.16, 'duration': 8.245}, {'end': 3797.328, 'text': 'so after will, boxes will come after this text.', 'start': 3791.405, 'duration': 5.923}, {'end': 3801.61, 'text': "so it is not outside of the div tag, that's a different one.", 'start': 3797.328, 'duration': 4.282}, {'end': 3805.613, 'text': 'it is inside the div tag in itself that we selected.', 'start': 3801.61, 'duration': 4.003}, {'end': 3810.415, 'text': 'so, dot after dot append, and it will keep on adding.', 'start': 3805.613, 'duration': 4.802}, {'end': 3812.136, 'text': 'keep on adding, keep on adding, keep on adding.', 'start': 3810.415, 'duration': 1.721}, {'end': 3815.358, 'text': 'Okay, let me show it to you again.', 'start': 3813.857, 'duration': 1.501}, {'end': 3816.659, 'text': 'Observe the DOM.', 'start': 3816.018, 'duration': 0.641}, {'end': 3819.34, 'text': "So let's look at it.", 'start': 3818.2, 'duration': 1.14}, {'end': 3823.883, 'text': 'The div tag, the HTML that I wanted to add, was added after this.', 'start': 3819.861, 'duration': 4.022}, {'end': 3827.065, 'text': 'In fact, I can show you another example.', 'start': 3825.144, 'duration': 1.921}, {'end': 3831.488, 'text': "So let's actually do it like this.", 'start': 3827.746, 'duration': 3.742}, {'end': 3838.132, 'text': 'Okay, yeah.', 'start': 3836.451, 'duration': 1.681}], 'summary': 'Demonstrates use of val, text, and html for dom manipulation and adding/removing dom elements using javascript.', 'duration': 382.541, 'max_score': 3455.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM3455591.jpg'}, {'end': 3653.01, 'src': 'embed', 'start': 3629.43, 'weight': 6, 'content': [{'end': 3637.682, 'text': 'essentially, facebook is adding more and more div tag, or stories, as they call it, or posts,', 'start': 3629.43, 'duration': 8.252}, {'end': 3641.884, 'text': 'but that is essentially html code and it keeps on adding, adding, adding and adding.', 'start': 3637.682, 'duration': 4.202}, {'end': 3644.426, 'text': "it's an infinite list it keeps creating.", 'start': 3641.884, 'duration': 2.542}, {'end': 3653.01, 'text': 'so it does that through javascript, which javascript creates the dom, and it just keeps on adding to the feed infinitely.', 'start': 3644.426, 'duration': 8.584}], 'summary': 'Facebook uses javascript to create an infinite feed by adding more html div tags for stories and posts.', 'duration': 23.58, 'max_score': 3629.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM3629430.jpg'}, {'end': 4018.03, 'src': 'embed', 'start': 3919.025, 'weight': 7, 'content': [{'end': 3924.348, 'text': "they're appending within the original div tag.", 'start': 3919.025, 'duration': 5.323}, {'end': 3931.113, 'text': 'so if you read the definition, it adds an element as last child to the specified element.', 'start': 3924.348, 'duration': 6.765}, {'end': 3934.476, 'text': 'so it keeps adding as children one after the other.', 'start': 3931.113, 'duration': 3.363}, {'end': 3946.545, 'text': "let's talk about prepend and let's unmute this.", 'start': 3936.502, 'duration': 10.043}, {'end': 3951.527, 'text': 'so prepend will attach before the element.', 'start': 3946.545, 'duration': 4.982}, {'end': 3957.389, 'text': 'so it will add parents to this particular element.', 'start': 3951.527, 'duration': 5.862}, {'end': 3959.29, 'text': 'I hope it is clear.', 'start': 3957.389, 'duration': 1.901}, {'end': 3969.714, 'text': "so please notice whether it is inside that particular tag that you are appending to that you're calling append on or it is outside.", 'start': 3959.29, 'duration': 10.424}, {'end': 3973.219, 'text': "that's the primary difference between after, before append and prepend.", 'start': 3969.714, 'duration': 3.505}, {'end': 3976.757, 'text': 'So another very,', 'start': 3974.696, 'duration': 2.061}, {'end': 3988.799, 'text': 'very useful jQuery method that is available to us to manipulate properties and attributes on our HTML DOM is the attribute ATTR method.', 'start': 3976.757, 'duration': 12.042}, {'end': 3998.862, 'text': 'It allows us to either get the values or set the values on our A tags or image tags or anything for that matter, any kind of tag.', 'start': 3989.28, 'duration': 9.582}, {'end': 4006.365, 'text': "but one sort of usefulness would be sort of let's suppose we have a list of links and we want to, based on some condition,", 'start': 3999.062, 'duration': 7.303}, {'end': 4012.447, 'text': 'replace them with something else or we want to change it to something else.', 'start': 4006.365, 'duration': 6.082}, {'end': 4018.03, 'text': "so let's start with an example.", 'start': 4012.447, 'duration': 5.583}], 'summary': 'Jquery methods like append, prepend, and attr allow manipulation of html elements and attributes.', 'duration': 99.005, 'max_score': 3919.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM3919025.jpg'}, {'end': 4344.078, 'src': 'embed', 'start': 4300.279, 'weight': 13, 'content': [{'end': 4304.76, 'text': 'now there are various methods which are available on top of this.', 'start': 4300.279, 'duration': 4.481}, {'end': 4307.021, 'text': 'one of them is remove attribute.', 'start': 4304.76, 'duration': 2.261}, {'end': 4310.502, 'text': 'so it removes an attribute from the selected element.', 'start': 4307.021, 'duration': 3.481}, {'end': 4316.184, 'text': 'it then there is, has class, which checks if a certain element has a certain class or not.', 'start': 4310.502, 'duration': 5.682}, {'end': 4317.744, 'text': 'there is add class.', 'start': 4316.184, 'duration': 1.56}, {'end': 4318.965, 'text': 'there is remove class.', 'start': 4317.744, 'duration': 1.221}, {'end': 4320.625, 'text': 'there is toggle class.', 'start': 4318.965, 'duration': 1.66}, {'end': 4324.026, 'text': 'so toggle class is basically it will check if the class is present.', 'start': 4320.625, 'duration': 3.401}, {'end': 4325.426, 'text': 'if it is not, it will add.', 'start': 4324.026, 'duration': 1.4}, {'end': 4326.827, 'text': 'if it is present, it will remove.', 'start': 4325.426, 'duration': 1.401}, {'end': 4335.514, 'text': 'then there is the prop as well, which is kind of introduced in jquery 1.6 and attribute.', 'start': 4327.547, 'duration': 7.967}, {'end': 4344.078, 'text': 'the attr method is internally calls prop and it gets the value of a property for the first element in a set of matched elements.', 'start': 4335.514, 'duration': 8.564}], 'summary': 'Discussed various methods in jquery including remove attribute, has class, add class, remove class, toggle class, prop, and attr.', 'duration': 43.799, 'max_score': 4300.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM4300279.jpg'}, {'end': 4692.026, 'src': 'heatmap', 'start': 4567.446, 'weight': 0.72, 'content': [{'end': 4568.927, 'text': 'So we set $.', 'start': 4567.446, 'duration': 1.481}, {'end': 4572.55, 'text': 'after, remove the class, and then add another class to it.', 'start': 4568.927, 'duration': 3.623}, {'end': 4574.271, 'text': 'And that gets modified.', 'start': 4573.21, 'duration': 1.061}, {'end': 4582.12, 'text': 'okay, the next one we can do is dollar a toggle class after.', 'start': 4574.958, 'duration': 7.162}, {'end': 4590.302, 'text': 'so now we are saying that the elements which have after class remove it, the ones that do not add it.', 'start': 4582.12, 'duration': 8.182}, {'end': 4594.043, 'text': 'so you see how it switched from one to the other.', 'start': 4590.302, 'duration': 3.741}, {'end': 4599.064, 'text': 'we can also add another one and add another one called as golden link.', 'start': 4594.043, 'duration': 5.021}, {'end': 4607.019, 'text': 'Both of them become golden and we can add another one saying toggle class color box.', 'start': 4600.717, 'duration': 6.302}, {'end': 4608.919, 'text': 'So this is based on chaining.', 'start': 4607.619, 'duration': 1.3}, {'end': 4611.04, 'text': "I'm chaining multiple effects together.", 'start': 4609.219, 'duration': 1.821}, {'end': 4614.601, 'text': "So now it's a complete switch from Google to Yahoo.", 'start': 4611.06, 'duration': 3.541}, {'end': 4616.101, 'text': 'Let me actually zoom in.', 'start': 4615.041, 'duration': 1.06}, {'end': 4622.843, 'text': 'So if you notice, the DOM is changing accordingly every time.', 'start': 4619.382, 'duration': 3.461}, {'end': 4624.624, 'text': 'I can do this a number of times.', 'start': 4623.203, 'duration': 1.421}, {'end': 4626.004, 'text': 'This will keep happening.', 'start': 4625.064, 'duration': 0.94}, {'end': 4630.117, 'text': "Let's go back to the slides.", 'start': 4629.056, 'duration': 1.061}, {'end': 4635.34, 'text': "Right, so as you can see in the example that I've just shown, this follows a slightly different example.", 'start': 4630.697, 'duration': 4.643}, {'end': 4641.564, 'text': 'Perhaps you can try it out at your end and see the results, or you can try out the example that I gave you.', 'start': 4635.78, 'duration': 5.784}, {'end': 4648.305, 'text': 'now another one is to clone, and again very useful.', 'start': 4642.802, 'duration': 5.503}, {'end': 4656.289, 'text': 'you can sort of clone an element and you can insert it after or before or basically do something with it.', 'start': 4648.305, 'duration': 7.984}, {'end': 4662.312, 'text': "you want to clone, let's suppose, one particular link, or you want to clone an html tag.", 'start': 4656.289, 'duration': 6.023}, {'end': 4663.853, 'text': 'so this is what helps you out with.', 'start': 4662.312, 'duration': 1.541}, {'end': 4672.097, 'text': "so let's change this to clone my links and let's remove this.", 'start': 4663.853, 'duration': 8.244}, {'end': 4685.883, 'text': "let's remove this as well, and what we will do is, we'll say, a dot clone.", 'start': 4674.036, 'duration': 11.847}, {'end': 4692.026, 'text': "oh wait, it's going to be insert after, so we can just insert it after the a tag itself.", 'start': 4685.883, 'duration': 6.143}], 'summary': 'Demonstrating dom manipulation with chaining effects and cloning elements.', 'duration': 124.58, 'max_score': 4567.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM4567446.jpg'}, {'end': 4685.883, 'src': 'embed', 'start': 4648.305, 'weight': 15, 'content': [{'end': 4656.289, 'text': 'you can sort of clone an element and you can insert it after or before or basically do something with it.', 'start': 4648.305, 'duration': 7.984}, {'end': 4662.312, 'text': "you want to clone, let's suppose, one particular link, or you want to clone an html tag.", 'start': 4656.289, 'duration': 6.023}, {'end': 4663.853, 'text': 'so this is what helps you out with.', 'start': 4662.312, 'duration': 1.541}, {'end': 4672.097, 'text': "so let's change this to clone my links and let's remove this.", 'start': 4663.853, 'duration': 8.244}, {'end': 4685.883, 'text': "let's remove this as well, and what we will do is, we'll say, a dot clone.", 'start': 4674.036, 'duration': 11.847}], 'summary': "The capability to clone an element and manipulate it is demonstrated, with the example of cloning a link using the 'clone' method.", 'duration': 37.578, 'max_score': 4648.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM4648305.jpg'}, {'end': 5063.64, 'src': 'heatmap', 'start': 4814.818, 'weight': 0.808, 'content': [{'end': 4816.679, 'text': 'we are going to insert after.', 'start': 4814.818, 'duration': 1.861}, {'end': 4821.681, 'text': "let's do it after our color box.", 'start': 4816.679, 'duration': 5.002}, {'end': 4824.802, 'text': "let's insert it after the color box.", 'start': 4821.681, 'duration': 3.121}, {'end': 4828.264, 'text': 'now, if i click on this box, nothing happens.', 'start': 4824.802, 'duration': 3.462}, {'end': 4831.105, 'text': 'i click on this.', 'start': 4828.264, 'duration': 2.841}, {'end': 4833.486, 'text': 'another set of boxes come up.', 'start': 4831.105, 'duration': 2.381}, {'end': 4837.248, 'text': 'let me reload, let me zoom out.', 'start': 4833.486, 'duration': 3.762}, {'end': 4844.596, 'text': 'okay, one box, multiple boxes, but if I click on any of the duplicate boxes, nothing happens.', 'start': 4837.248, 'duration': 7.348}, {'end': 4847.077, 'text': 'click on this box, this box, nothing happens.', 'start': 4844.596, 'duration': 2.481}, {'end': 4851.179, 'text': 'so then I need to set this as true.', 'start': 4847.077, 'duration': 4.102}, {'end': 4853.981, 'text': 'now, what will happen is two boxes.', 'start': 4851.179, 'duration': 2.802}, {'end': 4858.803, 'text': 'if I click on this, either one of them, it will replicate.', 'start': 4853.981, 'duration': 4.822}, {'end': 4859.984, 'text': 'it will replicate.', 'start': 4858.803, 'duration': 1.181}, {'end': 4868.048, 'text': 'even this box it replicates, that is, to add the event handler.', 'start': 4859.984, 'duration': 8.064}, {'end': 4869.169, 'text': 'let me show you this one again.', 'start': 4868.048, 'duration': 1.121}, {'end': 4877.684, 'text': 'sorry, wait, this is after.', 'start': 4872.796, 'duration': 4.888}, {'end': 4879.527, 'text': 'now these are coming after it.', 'start': 4877.684, 'duration': 1.843}, {'end': 4880.989, 'text': 'right, these are coming outside.', 'start': 4879.527, 'duration': 1.462}, {'end': 4886.926, 'text': 'Moving on to the next one.', 'start': 4885.666, 'duration': 1.26}, {'end': 4892.087, 'text': 'So there are two approaches to move an element around the DOM.', 'start': 4888.126, 'duration': 3.961}, {'end': 4900.269, 'text': 'One is placing the matched element relative to another element and the other one is placing an element relative to the matched elements.', 'start': 4892.847, 'duration': 7.422}, {'end': 4910.03, 'text': 'So one basically what it does is that it takes the matched element and places it relative to another element.', 'start': 4901.149, 'duration': 8.881}, {'end': 4914.371, 'text': 'or you take an element, or you place an element which is relative to the matched element.', 'start': 4910.03, 'duration': 4.341}, {'end': 4917.593, 'text': 'And that is where append and append to come into the picture.', 'start': 4914.881, 'duration': 2.712}, {'end': 4919.922, 'text': 'There is a slight difference between the two.', 'start': 4918.276, 'duration': 1.646}, {'end': 4926.211, 'text': 'now jQuery provides us with something very useful which is called as a $.', 'start': 4921.138, 'duration': 5.073}, {'end': 4933.225, 'text': "each. it's a replacement for the traditional for in or for loop in JavaScript and helps us out quite a bit actually.", 'start': 4926.211, 'duration': 7.014}, {'end': 4936.967, 'text': "so let's do a quick demonstration of this over here,", 'start': 4933.225, 'duration': 3.742}, {'end': 4947.934, 'text': "and the way this would work is that I would define an array of let's suppose numlist is equal to 1, comma, 2, comma 3, comma 4, comma 5, 6,", 'start': 4936.967, 'duration': 10.967}, {'end': 4948.744, 'text': "and then I'm going to say $.", 'start': 4947.934, 'duration': 0.81}, {'end': 4963.503, 'text': "each. I'm going to pass it the numlist function and it's going to be the index and the value, and we can simply just do a console.log index and value.", 'start': 4948.744, 'duration': 14.759}, {'end': 4965.925, 'text': "Let's see what the result is.", 'start': 4964.744, 'duration': 1.181}, {'end': 4968.326, 'text': "Let's look at the console.", 'start': 4967.245, 'duration': 1.081}, {'end': 4973.168, 'text': '0 is 1, 1 is 2, 2 is 3, 3 is 4, 4 and 5, 5 and 6.', 'start': 4968.346, 'duration': 4.822}, {'end': 4980.351, 'text': 'So it allows you to iterate without using those initializations of i is equal to 0, increment, decrement operator.', 'start': 4973.168, 'duration': 7.183}, {'end': 4983.233, 'text': 'You can just loop over using a for each.', 'start': 4980.951, 'duration': 2.282}, {'end': 4986.154, 'text': "It gives you the index and the value that you're looping over.", 'start': 4983.313, 'duration': 2.841}, {'end': 4990.256, 'text': "Can be pretty useful, especially if you're doing any sort of functional programming.", 'start': 4986.454, 'duration': 3.802}, {'end': 4997.479, 'text': 'and naturally it will also allow you to loop over a set of link elements, any sort of list elements.', 'start': 4990.956, 'duration': 6.523}, {'end': 5003.662, 'text': 'so that would be something very typically useful in the context of dom or document object manipulation.', 'start': 4997.479, 'duration': 6.183}, {'end': 5008.864, 'text': "if you want to, let's suppose, loop over an entire list of li's, then this is going to be super useful.", 'start': 5003.662, 'duration': 5.202}, {'end': 5010.125, 'text': "so let's try this out quickly.", 'start': 5008.864, 'duration': 1.261}, {'end': 5012.991, 'text': 'so i have a list over here.', 'start': 5011.55, 'duration': 1.441}, {'end': 5023.098, 'text': 'let me take it out, place it over here, let me mute this and let me mute this as well.', 'start': 5012.991, 'duration': 10.107}, {'end': 5034.106, 'text': "now, what i'm going to do is that i'm going to select all the li's and i'm going to call dot each of them and i'm going to.", 'start': 5023.098, 'duration': 11.008}, {'end': 5036.667, 'text': "so it's going to give me an index and an element.", 'start': 5034.106, 'duration': 2.561}, {'end': 5043.205, 'text': "i'm going to check if element dot first.", 'start': 5036.667, 'duration': 6.538}, {'end': 5044.146, 'text': 'just do this.', 'start': 5043.205, 'duration': 0.941}, {'end': 5052.952, 'text': "let's just see what is inside each of our elements and then take further action.", 'start': 5044.146, 'duration': 8.806}, {'end': 5059.617, 'text': "okay, let's see what element we are getting first and then take further action.", 'start': 5052.952, 'duration': 6.665}, {'end': 5063.64, 'text': 'right, so we are getting Li tags, each one of them.', 'start': 5059.617, 'duration': 4.023}], 'summary': 'Demonstrating dom manipulation using jquery, including inserting elements, event handling, and iterating over elements.', 'duration': 248.822, 'max_score': 4814.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM4814818.jpg'}, {'end': 4947.934, 'src': 'embed', 'start': 4914.881, 'weight': 16, 'content': [{'end': 4917.593, 'text': 'And that is where append and append to come into the picture.', 'start': 4914.881, 'duration': 2.712}, {'end': 4919.922, 'text': 'There is a slight difference between the two.', 'start': 4918.276, 'duration': 1.646}, {'end': 4926.211, 'text': 'now jQuery provides us with something very useful which is called as a $.', 'start': 4921.138, 'duration': 5.073}, {'end': 4933.225, 'text': "each. it's a replacement for the traditional for in or for loop in JavaScript and helps us out quite a bit actually.", 'start': 4926.211, 'duration': 7.014}, {'end': 4936.967, 'text': "so let's do a quick demonstration of this over here,", 'start': 4933.225, 'duration': 3.742}, {'end': 4947.934, 'text': "and the way this would work is that I would define an array of let's suppose numlist is equal to 1, comma, 2, comma 3, comma 4, comma 5, 6,", 'start': 4936.967, 'duration': 10.967}], 'summary': "Jquery's $each function is a replacement for traditional for loops in javascript, providing useful functionality.", 'duration': 33.053, 'max_score': 4914.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM4914881.jpg'}], 'start': 3212.193, 'title': 'Jquery and javascript dom manipulation', 'summary': 'Covers jquery and javascript dom manipulation, emphasizing the importance of jquery in simplifying dom manipulation with essential methods and also exploring dom manipulation in javascript, including its power and flexibility for modifying html content. it further demonstrates jquery methods for manipulating the html dom and a tags, along with various element manipulation techniques.', 'chapters': [{'end': 3412.463, 'start': 3212.193, 'title': 'Jquery dom manipulation', 'summary': 'Discusses the importance of jquery in simplifying dom manipulation, covering essential methods like selecting elements, updating, creating, reading, and deleting objects, as well as content manipulation using text, html, and value methods.', 'duration': 200.27, 'highlights': ['jQuery simplifies DOM manipulation by providing methods to handle differences in browsers, making it easier to deal with complicated DOM manipulations. jQuery provides methods to handle differences in browsers, making it easier to deal with complicated DOM manipulations, which can be cumbersome based on different browsers.', 'DOM manipulation involves four fundamental actions: creating, reading, updating, and deleting objects, forming the basis for many operations in programming and computer science. DOM manipulation involves four fundamental actions: creating, reading, updating, and deleting objects, forming the basis for many operations in programming and computer science.', 'Content manipulation methods in jQuery include text, HTML, and value methods, each serving specific purposes such as updating text, inserting or updating HTML code, and getting or setting values from input boxes. Content manipulation methods in jQuery include text, HTML, and value methods, each serving specific purposes such as updating text, inserting or updating HTML code, and getting or setting values from input boxes.', 'The chapter also demonstrates an example of using click listeners to trigger specific actions in response to user interaction, showcasing the practical application of DOM manipulation in web development. The chapter also demonstrates an example of using click listeners to trigger specific actions in response to user interaction, showcasing the practical application of DOM manipulation in web development.']}, {'end': 3653.01, 'start': 3413.084, 'title': 'Dom manipulation in javascript', 'summary': 'Discusses dom manipulation in javascript, including accessing form elements, displaying correct or incorrect answers, and dynamically adding or removing dom elements, emphasizing the power and flexibility of javascript for modifying html content and creating an infinite feed like in social networks.', 'duration': 239.926, 'highlights': ['JavaScript allows for accessing form elements and checking user input for correct answers, demonstrating the usage of val and text methods. The process involves accessing the value from the answer box, checking if the answer is correct, and displaying appropriate messages based on the correctness of the answer.', 'Demonstrates the dynamic manipulation of HTML content using val, text, and HTML methods, showcasing the flexibility and power of JavaScript in modifying the DOM. The example illustrates the usage of val, text, and HTML methods to display messages, change text content, and manipulate HTML elements based on user input.', 'Explains the concept of dynamically adding or removing DOM elements in JavaScript, highlighting the ability to create infinite feeds similar to social networks. The discussion emphasizes the capability of JavaScript to add or remove DOM elements dynamically, creating an infinite feed similar to social networks like Facebook.']}, {'end': 3988.799, 'start': 3653.69, 'title': 'Jquery dom manipulation methods', 'summary': 'Demonstrates the usage of after, before, append, and prepend methods in jquery for manipulating the html dom, with a focus on appending elements within or outside the specified element, and adding them as children or parents.', 'duration': 335.109, 'highlights': ['The chapter demonstrates the usage of after, before, append, and prepend methods in jQuery for manipulating the HTML DOM The transcript covers the demonstration of after, before, append, and prepend methods in jQuery, which are used for manipulating the HTML DOM.', 'Appending elements within or outside the specified element, and adding them as children or parents It explains the distinction between after, before, append, and prepend methods, highlighting the differences in appending elements within or outside the specified element, and adding them as children or parents.', 'It adds an element after the specified element, within the tag that you have selected The after method adds an element after the specified element, within the tag that has been selected in jQuery.', 'Before method appends the element outside the specified tag The before method appends the element outside the specified tag, as opposed to appending it within the tag like the after method.', 'Append and after methods are similar in appending within the original div tag as last child to the specified element The append and after methods are similar in the aspect of appending within the original div tag as the last child to the specified element.', 'Prepend method attaches before the element, adding parents to the particular element The prepend method attaches before the element, adding parents to the particular element in jQuery.', 'Usage of attribute ATTR method for manipulating properties and attributes on the HTML DOM The transcript mentions the availability of the attribute ATTR method in jQuery for manipulating properties and attributes on the HTML DOM.']}, {'end': 4275.208, 'start': 3989.28, 'title': 'Manipulating a tags with jquery', 'summary': 'Demonstrates how to manipulate a tags using jquery, including setting and getting attribute values, with an example of changing the target attribute and handling multiple matches.', 'duration': 285.928, 'highlights': ['The chapter explains how to set and get attribute values on A tags using jQuery, with an example of changing the target attribute on A tags.', 'It demonstrates how to handle multiple matches when setting attributes on A tags using jQuery.', 'The example shows how to use jQuery to find and set the attribute values on A tags based on a condition.']}, {'end': 5095.995, 'start': 4275.208, 'title': 'Jquery methods and element manipulation', 'summary': 'Discusses various jquery methods for element manipulation, such as remove attribute, has class, add class, remove class, toggle class, prop, attribute, clone, append, append to, and each, with a demonstration of their usage and their impact on the selected elements.', 'duration': 820.787, 'highlights': ['The chapter explains the behavior of the attr method in jQuery, emphasizing its impact on searching and setting elements, and how it internally calls the prop method. The attr method in jQuery has a significant impact on searching and setting elements, as it only goes to the first one when searching but sets all matching elements when setting, and it internally calls the prop method, which gets the value of a property for the first element or sets properties for every matched element.', 'A demonstration of various methods such as remove attribute, has class, add class, remove class, toggle class, prop, and attribute is provided, along with their impact on the selected elements. The chapter provides a demonstration of methods like remove attribute, has class, add class, remove class, toggle class, prop, and attribute, showcasing their effects and functionality on the selected elements.', 'The usage and impact of the clone method in jQuery, along with its ability to clone elements and insert them before or after other elements, are explained in detail. The clone method in jQuery is discussed, highlighting its functionality to clone elements and insert them before or after other elements, along with a demonstration of its usage and impact.', 'The concept of appending elements using the append and append to methods in jQuery is detailed, along with a comparison of their usage and differences. The chapter explains the concept of appending elements using the append and append to methods in jQuery, highlighting their differences and providing a detailed comparison of their usage.', 'The usage and benefits of the each method in jQuery as a replacement for traditional loops, along with a demonstration of its usage for iterating over arrays and elements, are discussed. The chapter discusses the usage and advantages of the each method in jQuery as a replacement for traditional loops, demonstrating its usage for iterating over arrays and elements, and highlighting its benefits.']}], 'duration': 1883.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM3212193.jpg', 'highlights': ['jQuery simplifies DOM manipulation by providing methods to handle differences in browsers, making it easier to deal with complicated DOM manipulations.', 'DOM manipulation involves four fundamental actions: creating, reading, updating, and deleting objects, forming the basis for many operations in programming and computer science.', 'Content manipulation methods in jQuery include text, HTML, and value methods, each serving specific purposes such as updating text, inserting or updating HTML code, and getting or setting values from input boxes.', 'The chapter also demonstrates an example of using click listeners to trigger specific actions in response to user interaction, showcasing the practical application of DOM manipulation in web development.', 'JavaScript allows for accessing form elements and checking user input for correct answers, demonstrating the usage of val and text methods.', 'Demonstrates the dynamic manipulation of HTML content using val, text, and HTML methods, showcasing the flexibility and power of JavaScript in modifying the DOM.', 'Explains the concept of dynamically adding or removing DOM elements in JavaScript, highlighting the ability to create infinite feeds similar to social networks.', 'The chapter demonstrates the usage of after, before, append, and prepend methods in jQuery for manipulating the HTML DOM.', 'Appending elements within or outside the specified element, and adding them as children or parents.', 'The after method adds an element after the specified element, within the tag that has been selected in jQuery.', 'The before method appends the element outside the specified tag, as opposed to appending it within the tag like the after method.', 'The append and after methods are similar in the aspect of appending within the original div tag as the last child to the specified element.', 'The chapter explains how to set and get attribute values on A tags using jQuery, with an example of changing the target attribute on A tags.', 'The attr method in jQuery has a significant impact on searching and setting elements, as it only goes to the first one when searching but sets all matching elements when setting, and it internally calls the prop method, which gets the value of a property for the first element or sets properties for every matched element.', 'A demonstration of various methods such as remove attribute, has class, add class, remove class, toggle class, prop, and attribute is provided, along with their impact on the selected elements.', 'The usage and impact of the clone method in jQuery, along with its ability to clone elements and insert them before or after other elements, are explained in detail.', 'The concept of appending elements using the append and append to methods in jQuery is detailed, along with a comparison of their usage and differences.', 'The usage and benefits of the each method in jQuery as a replacement for traditional loops, along with a demonstration of its usage for iterating over arrays and elements, are discussed.']}, {'end': 6488.036, 'segs': [{'end': 5186.552, 'src': 'embed', 'start': 5160.462, 'weight': 1, 'content': [{'end': 5167.223, 'text': 'So we iterated over each of the loops, and essentially we ended up toggling the classes to a golden link.', 'start': 5160.462, 'duration': 6.761}, {'end': 5175.188, 'text': 'another one is EQ, which selects from the set of matched elements at a specific time.', 'start': 5168.866, 'duration': 6.322}, {'end': 5182.251, 'text': "so let's suppose we only wanted to add we only wanted to add it to the second one and not the first one.", 'start': 5175.188, 'duration': 7.063}, {'end': 5186.552, 'text': 'so the way we would do this is that forget this for a second.', 'start': 5182.251, 'duration': 4.301}], 'summary': 'Iterated through loops, toggled classes to a golden link, and utilized eq to select specific elements.', 'duration': 26.09, 'max_score': 5160.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM5160462.jpg'}, {'end': 5242.337, 'src': 'embed', 'start': 5217.665, 'weight': 6, 'content': [{'end': 5223.788, 'text': 'so it allows us to select a particular one from a list of elements that we might match.', 'start': 5217.665, 'duration': 6.123}, {'end': 5226.469, 'text': 'so it is actually acting as a filter.', 'start': 5223.788, 'duration': 2.681}, {'end': 5232.072, 'text': 'right, it is filtering out the other elements that we do not want to touch or we do not want to manipulate.', 'start': 5226.469, 'duration': 5.603}, {'end': 5238.795, 'text': 'now there is another function available, which is called filter in itself, and you can pass it as selector.', 'start': 5232.873, 'duration': 5.922}, {'end': 5242.337, 'text': 'so dot eq basically takes the specified index.', 'start': 5238.795, 'duration': 3.542}], 'summary': "The 'dot eq' function acts as a filter, selecting a specific element from a list of elements, providing a way to manipulate and touch the desired elements.", 'duration': 24.672, 'max_score': 5217.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM5217665.jpg'}, {'end': 5367.691, 'src': 'embed', 'start': 5344.312, 'weight': 4, 'content': [{'end': 5354.42, 'text': 'Then there is something called as has, which checks for certain things and accordingly sets the CSS, or you can, you know,', 'start': 5344.312, 'duration': 10.108}, {'end': 5355.761, 'text': 'do further operations on it.', 'start': 5354.42, 'duration': 1.341}, {'end': 5359.664, 'text': 'So in this case, it will check for descendants.', 'start': 5356.242, 'duration': 3.422}, {'end': 5367.691, 'text': 'And if it finds a matched element based on the descendant, then it will do certain things.', 'start': 5360.905, 'duration': 6.786}], 'summary': "The 'has' function checks for descendants and sets css accordingly.", 'duration': 23.379, 'max_score': 5344.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM5344312.jpg'}, {'end': 5686.974, 'src': 'heatmap', 'start': 5531.706, 'weight': 2, 'content': [{'end': 5540.809, 'text': "so not is like the opposite of has, that's it, and i think over here the first and the third one are selected.", 'start': 5531.706, 'duration': 9.103}, {'end': 5543.23, 'text': 'the others are ignored, fair enough.', 'start': 5540.809, 'duration': 2.421}, {'end': 5550.491, 'text': 'So jQuery also has support for data APIs, which has been introduced in HTML5,', 'start': 5544.289, 'duration': 6.202}, {'end': 5557.572, 'text': 'which lets you set data attributes or get data attributes from the HTML that you might have set up.', 'start': 5550.491, 'duration': 7.081}, {'end': 5559.853, 'text': "So let's have a look at an example.", 'start': 5557.852, 'duration': 2.001}, {'end': 5567.114, 'text': "I'll just explain it to you in a bit.", 'start': 5565.414, 'duration': 1.7}, {'end': 5571.716, 'text': 'So let me comment this out.', 'start': 5569.815, 'duration': 1.901}, {'end': 5576.517, 'text': 'I have two buttons here.', 'start': 5575.436, 'duration': 1.081}, {'end': 5582.141, 'text': 'One will attach data to a dev element and the other one will remove it.', 'start': 5577.378, 'duration': 4.763}, {'end': 5584.703, 'text': 'And these click events are set on the same.', 'start': 5582.902, 'duration': 1.801}, {'end': 5589.547, 'text': 'Instead of test object, we can do it something like this.', 'start': 5585.384, 'duration': 4.163}, {'end': 5598.434, 'text': "Data Let's support it as cart 200.", 'start': 5590.388, 'duration': 8.046}, {'end': 5601.316, 'text': 'And we want to get the data of cart.', 'start': 5598.434, 'duration': 2.882}, {'end': 5603.298, 'text': 'This out.', 'start': 5602.817, 'duration': 0.481}, {'end': 5606.984, 'text': "let's see what we get.", 'start': 5604.963, 'duration': 2.021}, {'end': 5608.325, 'text': 'so we have the development over here.', 'start': 5606.984, 'duration': 1.341}, {'end': 5612.988, 'text': "no way, you're talking about this particular development.", 'start': 5608.325, 'duration': 4.663}, {'end': 5614.989, 'text': "let's add something to it.", 'start': 5612.988, 'duration': 2.001}, {'end': 5624.595, 'text': "let's add an ID tag data example, and let's use it like that, because then it will not confuse with the other one.", 'start': 5614.989, 'duration': 9.606}, {'end': 5643.419, 'text': 'So we need to set the data on this particular div tag right?', 'start': 5638.174, 'duration': 5.245}, {'end': 5650.966, 'text': 'We will simply pass it an object like this and then, on clicking the button too, we will get the data associated with it.', 'start': 5644.079, 'duration': 6.887}, {'end': 5652.587, 'text': "So let's do this.", 'start': 5651.526, 'duration': 1.061}, {'end': 5654.709, 'text': "Let's remove these errors.", 'start': 5653.608, 'duration': 1.101}, {'end': 5660.895, 'text': 'Assuming this has worked, once you click on this, it should display a value of 200 in the console.', 'start': 5656.13, 'duration': 4.765}, {'end': 5661.956, 'text': 'And so it does.', 'start': 5661.315, 'duration': 0.641}, {'end': 5671.231, 'text': 'So this is how you can use data attribute, and you can use it to set any number of things over here.', 'start': 5663.51, 'duration': 7.721}, {'end': 5679.453, 'text': "In fact, so let's suppose I set items, then I do this, and then I can also do it for items.", 'start': 5672.832, 'duration': 6.621}, {'end': 5686.974, 'text': 'And once I reload, I can attach it to them like this, and then it shows both of them.', 'start': 5680.653, 'duration': 6.321}], 'summary': 'Jquery supports data apis to set and get data attributes from html, demonstrated with an example of attaching and removing data from a div element, showcasing the use of data attribute to set different values.', 'duration': 28.147, 'max_score': 5531.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM5531706.jpg'}, {'end': 5744.98, 'src': 'embed', 'start': 5721.514, 'weight': 7, 'content': [{'text': "so in case, let's suppose, after showing about hiding, you wanted to do something else based on the element being shown or hidden.", 'start': 5721.514, 'duration': 6.942}, {'text': 'so the callback function is provided where you can execute any code that needs to be executed after the element is shown or hidden.', 'start': 5728.456, 'duration': 8.802}, {'text': "so let's do an example for this.", 'start': 5737.258, 'duration': 3.341}, {'text': "what i'll do is that i'll set up my html on the boxes that we had.", 'start': 5740.599, 'duration': 4.381}], 'summary': 'Callback function allows executing code after element is shown or hidden.', 'duration': 23.466, 'max_score': 5721.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM5721514.jpg'}, {'end': 5931.189, 'src': 'embed', 'start': 5905.737, 'weight': 3, 'content': [{'text': 'Now, this is a sudden knee-jerk sort of reaction, where it is just immediately coming in and going out.', 'start': 5905.737, 'duration': 6.423}, {'text': 'Instead, it would be better if we could add some sort of slowness to this motion, where it would gradually happen.', 'start': 5912.46, 'duration': 7.544}, {'text': "So let's add 500 milliseconds to each one of them.", 'start': 5920.064, 'duration': 3.041}, {'text': 'We hide our boxes.', 'start': 5923.786, 'duration': 0.98}, {'text': 'Now, look at the difference.', 'start': 5925.126, 'duration': 1.341}, {'text': 'Suddenly, it seems more user-friendly, right? It goes in and out slowly.', 'start': 5926.947, 'duration': 4.242}], 'summary': 'Adding 500 milliseconds to the motion made it more user-friendly.', 'duration': 25.452, 'max_score': 5905.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM5905737.jpg'}, {'end': 6050.303, 'src': 'embed', 'start': 6016.265, 'weight': 5, 'content': [{'text': 'And we are doing this through JavaScript by calling the toggle function.', 'start': 6016.265, 'duration': 2.522}, {'text': 'Then there are other functions such as fade in, fade out, fade to slide down, slide up, slide toggle,', 'start': 6019.388, 'duration': 6.044}, {'text': 'which sort of have a different sort of animation effect each one of them.', 'start': 6025.432, 'duration': 4.564}, {'text': "So let's quickly try out these ones as well.", 'start': 6030.576, 'duration': 2.502}, {'text': "Let's see what is the impact.", 'start': 6033.438, 'duration': 1.662}, {'text': "so i'll mute this out instead.", 'start': 6035.78, 'duration': 2.481}, {'text': 'i will.', 'start': 6038.261, 'duration': 0.98}, {'text': 'so now, instead of showing and hiding, we are going to do a fade out and we are going to do a fade in on the of the color boxes.', 'start': 6039.241, 'duration': 11.062}], 'summary': 'Demonstrating javascript functions for animation effects.', 'duration': 34.038, 'max_score': 6016.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM6016265.jpg'}, {'end': 6449.059, 'src': 'embed', 'start': 6418.015, 'weight': 0, 'content': [{'text': 'Like, what do you want the CSS to be applied? So really try to understand what animation is in a way.', 'start': 6418.015, 'duration': 5.383}, {'text': 'Over here, animation is nothing but changing the positioning or the styling of a particular HTML tag in a certain amount of time.', 'start': 6423.578, 'duration': 9.545}, {'text': "That's it.", 'start': 6433.543, 'duration': 0.441}, {'text': "So that's what it does.", 'start': 6434.264, 'duration': 0.9}, {'text': 'So this is the target.', 'start': 6435.424, 'duration': 1.161}, {'text': 'This is the final result.', 'start': 6436.985, 'duration': 1.241}, {'text': 'These are the final CSS properties that you will end up setting on it.', 'start': 6438.246, 'duration': 3.702}, {'text': 'and you want it to be done in a certain amount of time, which also determines the speed of the animation.', 'start': 6444.358, 'duration': 4.701}], 'summary': 'Understanding css animation: changing html tag positioning or styling over time.', 'duration': 31.044, 'max_score': 6418.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM6418015.jpg'}], 'start': 5097.115, 'title': 'Jquery, dom manipulation, operations, and animation', 'summary': 'Covers jquery dom manipulation methods including toggle class, eq, and filter, explains jquery operations and effects for css, explores adding slowness to motion in animations, and discusses using the animate function in css with specific examples.', 'chapters': [{'end': 5342.098, 'start': 5097.115, 'title': 'Jquery dom manipulation', 'summary': 'Covers jquery dom manipulation, including methods like toggle class, eq, and filter, which allow selecting and manipulating specific elements within a set of matched elements.', 'duration': 244.983, 'highlights': ['The chapter covers jQuery DOM manipulation It provides an overview of the topic being discussed.', 'Methods like toggle class, eq, and filter allow selecting and manipulating specific elements within a set of matched elements Explains the key methods for DOM manipulation and their functionality.', 'The eq method selects from the set of matched elements at a specific index Describes the functionality of the eq method in selecting specific elements based on index.', 'The filter method allows filtering out elements based on a specified criteria Explains the purpose of the filter method in selecting elements based on specific criteria.']}, {'end': 5904.374, 'start': 5344.312, 'title': 'Jquery operations and effects', 'summary': "Explains how to perform css operations and effects using jquery, including applying styles based on element attributes, using 'has' and 'not' for element selection, and utilizing data apis to set and retrieve data attributes from html elements.", 'duration': 560.062, 'highlights': ["jQuery provides support for data APIs which allows setting and retrieving data attributes from HTML elements. jQuery supports data APIs for setting and retrieving data attributes from HTML elements, such as setting a data attribute 'cart' to 200 and retrieving the associated data.", "Applying styles based on element attributes using 'has' and 'not' for element selection. Demonstrates applying CSS styles based on element attributes, such as setting a background color for 'ul' tags based on the presence of 'li' elements and using 'not' to select elements not meeting specified criteria.", 'Utilizing effects such as show, hide, and providing callback functions for executing code after element display or hide. Explains the usage of effects like show and hide in jQuery, along with the provision of callback functions for executing code after the element is displayed or hidden.']}, {'end': 6220.69, 'start': 5905.737, 'title': 'Improving user experience with animation', 'summary': 'Explores the impact of adding slowness to motion in animations by introducing time delays of 500 milliseconds and 2000 milliseconds, as well as combining buttons for toggling animation effects, and experimenting with various animation functions like fade in, fade out, slide up, slide down, and slide toggle to achieve different visual effects and enhance user interface and experience.', 'duration': 314.953, 'highlights': ['The impact of adding slowness to motion in animations by introducing time delays of 500 milliseconds and 2000 milliseconds The gradual addition of time delays of 500 milliseconds and 2000 milliseconds to animation motions resulted in a more user-friendly and soothing experience, reducing the abrupt appearance and disappearance of elements.', 'Combining buttons for toggling animation effects Exploring the concept of toggle in jQuery to combine the functionality of showing and hiding elements into a single button, enhancing user interaction and simplifying the user interface.', 'Experimenting with various animation functions like fade in, fade out, slide up, slide down, and slide toggle The exploration of different animation functions such as fade in, fade out, slide up, slide down, and slide toggle to achieve distinct visual effects and enhance the user interface by creating subtle yet impactful differences.']}, {'end': 6488.036, 'start': 6221.21, 'title': 'Using animate in css', 'summary': 'Discusses using the animate function in css to change the positioning or styling of html tags in a certain amount of time, demonstrating the process with specific examples and highlighting the importance of understanding animation properties and time duration.', 'duration': 266.826, 'highlights': ['The animate function in CSS is used to change the positioning or styling of HTML tags in a certain amount of time. The chapter explains that the animate function in CSS is utilized to modify the positioning or styling of HTML tags within a specific timeframe, emphasizing its role in creating animation effects.', 'Demonstrating specific examples of using the animate function to create animation effects. The transcript provides specific examples of using the animate function to create animation effects, such as increasing pixel width and moving elements, showcasing practical applications of the function.', 'Emphasizing the importance of understanding animation properties and time duration. The chapter highlights the significance of comprehending animation properties and time duration when using the animate function in CSS, underlining the impact of these factors on the speed and outcome of the animation.']}], 'duration': 1390.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM5097115.jpg', 'highlights': ['The animate function in CSS is used to change the positioning or styling of HTML tags in a certain amount of time.', 'Methods like toggle class, eq, and filter allow selecting and manipulating specific elements within a set of matched elements', 'jQuery provides support for data APIs which allows setting and retrieving data attributes from HTML elements.', 'The impact of adding slowness to motion in animations by introducing time delays of 500 milliseconds and 2000 milliseconds', "Applying styles based on element attributes using 'has' and 'not' for element selection.", 'Experimenting with various animation functions like fade in, fade out, slide up, slide down, and slide toggle', 'The eq method selects from the set of matched elements at a specific index', 'Utilizing effects such as show, hide, and providing callback functions for executing code after element display or hide.']}, {'end': 7860.872, 'segs': [{'end': 6569.742, 'src': 'embed', 'start': 6530.859, 'weight': 0, 'content': [{'text': 'so talk about the jquery validation.', 'start': 6530.859, 'duration': 3.243}, {'text': 'first and foremost, you need to get the value from the form, or you need to set the value in a form,', 'start': 6534.102, 'duration': 5.404}, {'text': "and there are various ways to do it based on the kind of field that you're dealing with.", 'start': 6539.506, 'duration': 4.504}, {'text': 'so what i have here is that i have set up a demo which contains various fields and you will try and do getting and setting up the variable values using each of these fields and see how it goes.', 'start': 6544.01, 'duration': 11.669}, {'text': 'so if i do inspect and i talk about the name column right to get jquery, let me just clear this up to get the input variable name,', 'start': 6557.498, 'duration': 12.244}], 'summary': 'Demonstrate getting and setting variable values using jquery validation.', 'duration': 38.883, 'max_score': 6530.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM6530859.jpg'}, {'end': 6925.552, 'src': 'embed', 'start': 6896.129, 'weight': 1, 'content': [{'text': 'Pretty similar to text or password field.', 'start': 6896.129, 'duration': 1.981}, {'text': "So I'm going to leave it up to you to try it out as part of the assignment on your own.", 'start': 6898.671, 'duration': 3.642}, {'text': 'But literally, there is no difference, except, of course, the hidden part.', 'start': 6902.634, 'duration': 3.743}, {'text': "next is a select drop down, so basically a drop down button, and let's see how we can sort of play around with it.", 'start': 6907.358, 'duration': 7.17}, {'text': "i'm going to clear this up.", 'start': 6914.528, 'duration': 1.362}, {'text': "let's look at the html.", 'start': 6915.89, 'duration': 2.183}, {'text': 'okay, the id is cars.', 'start': 6918.073, 'duration': 1.923}, {'text': "so let's select it by the id and see what the value is.", 'start': 6919.996, 'duration': 5.556}], 'summary': 'The transcript discusses form elements like text fields, password fields, and select drop-downs, with a focus on identifying elements by id.', 'duration': 29.423, 'max_score': 6896.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM6896129.jpg'}, {'end': 7157.217, 'src': 'embed', 'start': 7131.097, 'weight': 3, 'content': [{'text': "it's a more for condition check rather than a validation, but kind of builds on the concepts that we just talked about Regular expressions.", 'start': 7131.097, 'duration': 8.843}, {'text': 'Now these are very, very important, and you will find them across languages, not just in JavaScript, but also in languages like Python, Java, C++,', 'start': 7140.421, 'duration': 9.909}, {'text': 'Ruby, anything, anything for that matter.', 'start': 7150.33, 'duration': 2.062}, {'text': 'And they are commonly rejects as well.', 'start': 7153.173, 'duration': 2.383}, {'text': "and they're very important.", 'start': 7156.176, 'duration': 1.041}], 'summary': 'Regular expressions are crucial across various languages for condition checks.', 'duration': 26.12, 'max_score': 7131.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM7131097.jpg'}, {'end': 7219.254, 'src': 'embed', 'start': 7197.75, 'weight': 2, 'content': [{'text': 'so, as you see, there are a lot of complications when it comes to doing a simple, simple determination whether a given value is an email or not,', 'start': 7197.75, 'duration': 10.762}, {'text': 'and that is where regular expression comes to help.', 'start': 7208.512, 'duration': 3.78}, {'text': 'it basically helps you look for patterns inside a given string and determine if the pattern is there or not.', 'start': 7212.292, 'duration': 6.962}], 'summary': 'Regular expressions assist in identifying email patterns in strings.', 'duration': 21.504, 'max_score': 7197.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM7197750.jpg'}], 'start': 6488.056, 'title': 'Form validation, form handling, and regular expressions', 'summary': 'Covers html5 form validation, jquery techniques, javascript and jquery form handling, and the importance of regular expressions in javascript for pattern matching, with emphasis on practical examples and techniques.', 'chapters': [{'end': 6876.656, 'start': 6488.056, 'title': 'Html5 form validation and jquery techniques', 'summary': "Covers html5 form validation, jquery's role in custom validations, and techniques for getting and setting values for various form elements, including radio buttons and checkboxes.", 'duration': 388.6, 'highlights': ['The chapter covers HTML5 form validation and how it makes form validation easier, while also highlighting cases where it may fail or require custom solutions.', 'The use of jQuery or JavaScript for custom form validations is discussed, emphasizing its flexibility in implementing custom tools and regulations for form validations.', 'Demonstrates techniques for getting and setting values for form elements using jQuery, including examples with text fields, password fields, radio buttons, and checkboxes.']}, {'end': 7131.097, 'start': 6877.076, 'title': 'Javascript and jquery form handling', 'summary': 'Discusses handling form elements in javascript and jquery, covering the selection and manipulation of hidden fields, dropdowns, validation, and button selection.', 'duration': 254.021, 'highlights': ['The chapter discusses handling form elements in JavaScript and jQuery The main focus of the chapter.', "The chapter covers the selection and manipulation of hidden fields, dropdowns, validation, and button selection Key points of the chapter's content.", 'Demonstration of setting and getting values of select dropdowns using JavaScript and jQuery Provides practical examples of setting and getting values from dropdowns.', 'Form validation using JavaScript checks for string equality and non-empty fields Describes the process of form validation with examples.', 'Selectors for submit and reset buttons in forms using input colon submit and input colon reset Provides specific selectors for submit and reset buttons.']}, {'end': 7344.962, 'start': 7131.097, 'title': 'Regular expressions in javascript', 'summary': 'Discusses the importance of regular expressions in various programming languages, particularly javascript, and how they help in pattern matching for determining valid email addresses and other string patterns.', 'duration': 213.865, 'highlights': ['Regular expressions are important across various programming languages, including JavaScript, Python, Java, C++, and Ruby. Regular expressions are crucial across multiple programming languages, not just JavaScript, including Python, Java, C++, and Ruby.', 'Regular expressions help in determining valid email addresses by identifying patterns within strings. Regular expressions aid in identifying patterns within strings to determine valid email addresses, addressing the complexities associated with email validation.', 'Symbols like ^, $, ., +, and ? are used in regular expressions to define specific string patterns and constraints. Special symbols like ^, $, ., +, and ? are utilized in regular expressions to establish specific constraints and patterns for string matching.']}, {'end': 7860.872, 'start': 7345.462, 'title': 'Introduction to regular expressions', 'summary': 'Introduces regular expressions using regex101.com, explaining how to create and test regular expressions in javascript and providing examples of various patterns and their matches, emphasizing the importance of practice for learning regex.', 'duration': 515.41, 'highlights': ['The chapter introduces regular expressions using regex101.com The speaker recommends visiting regex101.com for learning about regular expressions.', 'Explaining how to create and test regular expressions in JavaScript The speaker demonstrates the process of creating and testing regular expressions in JavaScript using a test string and match information.', 'Providing examples of various patterns and their matches The speaker provides examples of creating regular expressions to match specific patterns, such as identifying strings starting with a capital A or ending with a certain character.', 'Emphasizing the importance of practice for learning regex The speaker emphasizes the significance of practicing regular expressions for effective learning and understanding, suggesting that practice is the best way to learn regex.']}], 'duration': 1372.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM6488056.jpg', 'highlights': ['Demonstrates techniques for getting and setting values for form elements using jQuery, including examples with text fields, password fields, radio buttons, and checkboxes.', "The chapter covers the selection and manipulation of hidden fields, dropdowns, validation, and button selection Key points of the chapter's content.", 'Regular expressions help in determining valid email addresses by identifying patterns within strings. Regular expressions aid in identifying patterns within strings to determine valid email addresses, addressing the complexities associated with email validation.', 'Explaining how to create and test regular expressions in JavaScript The speaker demonstrates the process of creating and testing regular expressions in JavaScript using a test string and match information.']}, {'end': 9219.709, 'segs': [{'end': 7910.167, 'src': 'embed', 'start': 7860.872, 'weight': 0, 'content': [{'text': 'however, the thing to remember is that reg.test is available.', 'start': 7860.872, 'duration': 3.022}, {'text': 'it gives you a true or a false, based on whether it was successful as a match or it was a failure as a match.', 'start': 7863.894, 'duration': 8.168}, {'text': "And then, of course, you can use it in various scenarios, based on what kind of inputs you're getting.", 'start': 7873.664, 'duration': 5.887}, {'text': 'what is business context, what is the business logic?', 'start': 7879.551, 'duration': 3.303}, {'text': 'what is it that your application does, or what kind of validations you want to build?', 'start': 7882.854, 'duration': 4.185}, {'text': 'Next is a very, very important concept called event handling in JavaScript.', 'start': 7888.729, 'duration': 5.204}, {'text': "OK, so let's begin.", 'start': 7894.314, 'duration': 2.102}, {'text': 'So the first thing is that JavaScript provides us with the .', 'start': 7896.696, 'duration': 3.803}, {'text': 'bind function.', 'start': 7900.499, 'duration': 0.921}, {'text': "So in this particular example, what it is saying is that whenever H1 is clicked on, call this function that I'm describing over here.", 'start': 7902.08, 'duration': 8.087}], 'summary': 'Javascript provides reg.test for matching, and event handling using bind function for specific actions.', 'duration': 49.295, 'max_score': 7860.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM7860872.jpg'}, {'end': 7980.703, 'src': 'embed', 'start': 7948.533, 'weight': 2, 'content': [{'text': 'so alert can be quite annoying.', 'start': 7948.533, 'duration': 1.721}, {'text': "so let's just do a console.log.", 'start': 7950.254, 'duration': 2.221}, {'text': 'So you see, this number indicates the number of time it was called.', 'start': 7957.247, 'duration': 3.042}, {'text': 'So instead of the annoying alert statements, you know, this is a better, much, much better option to use console.log.', 'start': 7961.09, 'duration': 5.764}, {'text': 'Now, there are various kinds of events in JavaScript.', 'start': 7968.195, 'duration': 2.861}, {'text': 'Click is one of them, but usually somebody would not click on a paragraph, right? And you would hover over a paragraph.', 'start': 7971.997, 'duration': 8.706}], 'summary': 'Using console.log instead of alert can improve user experience. click events are common, while hover events are less frequent.', 'duration': 32.17, 'max_score': 7948.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM7948533.jpg'}, {'end': 8235.098, 'src': 'embed', 'start': 8207.364, 'weight': 3, 'content': [{'text': "So sometimes you may have a need to remove a certain event if it's no longer required.", 'start': 8207.364, 'duration': 6.283}, {'text': "And I think it's very important from a memory management perspective as well.", 'start': 8214.467, 'duration': 4.782}, {'text': "And it's important that you remove the event just in case it's not required anymore and you feel that it can happen, the business logic.", 'start': 8220.15, 'duration': 8.943}, {'text': 'not recommended always, but you need to have a good use case for using unbind.', 'start': 8229.995, 'duration': 5.103}], 'summary': 'Removing events when no longer required is crucial for memory management and business logic.', 'duration': 27.734, 'max_score': 8207.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8207364.jpg'}, {'end': 8331.205, 'src': 'embed', 'start': 8308.16, 'weight': 4, 'content': [{'text': 'so using the live method, you can attach any event handler to your future elements which matches your original selector.', 'start': 8308.16, 'duration': 7.821}, {'text': 'now this can be a little tricky to understand, but luckily for us, a bind and bind and live methods have been deprecated from jquery version 1.7.', 'start': 8315.981, 'duration': 9.301}, {'text': "Now, in case your project is still using 1.7, then it's a different case.", 'start': 8325.282, 'duration': 5.923}], 'summary': 'The live method allows attaching event handlers to future elements matching the original selector; bind and live methods deprecated from jquery 1.7.', 'duration': 23.045, 'max_score': 8308.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8308160.jpg'}, {'end': 8409.986, 'src': 'embed', 'start': 8380.066, 'weight': 5, 'content': [{'text': 'Now, as I showed you, with bind you could add multiple events to the same handler.', 'start': 8380.066, 'duration': 6.164}, {'text': 'but one interesting example is in case you wanted to create different responses based on different actions instead of creating two different bindings like this,', 'start': 8386.23, 'duration': 10.587}, {'text': 'what you could do is that you could simply say that hey, I wanted, you can pass it an object and you can say that on mouse enter, I want to do this,', 'start': 8396.817, 'duration': 13.169}], 'summary': 'Using bind, multiple events can have the same handler; can pass an object to create different responses based on different actions.', 'duration': 29.92, 'max_score': 8380.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8380066.jpg'}, {'end': 8549.118, 'src': 'embed', 'start': 8526.23, 'weight': 6, 'content': [{'text': 'Apart from the fact that a click or a mouse enter or a mouse leave has happened, there is another one very important thing which is the event object.', 'start': 8526.23, 'duration': 8.902}, {'text': 'Now whenever the event happens, you might require additional information about the event.', 'start': 8535.353, 'duration': 4.541}, {'text': 'this is passed to you by the event object, which has several attributes.', 'start': 8540.414, 'duration': 4.382}, {'text': 'one of them is type.', 'start': 8544.796, 'duration': 1.22}, {'text': "so let's suppose you had multiple events.", 'start': 8546.016, 'duration': 3.102}], 'summary': 'Event object provides additional information about the event, including type and other attributes.', 'duration': 22.888, 'max_score': 8526.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8526230.jpg'}, {'end': 8779.565, 'src': 'embed', 'start': 8753.602, 'weight': 7, 'content': [{'text': 'And this can really help you in creating really customized websites that are serving a particular kind of effect that you wanted to have,', 'start': 8753.602, 'duration': 9.029}, {'text': 'based on your needs.', 'start': 8762.631, 'duration': 0.821}, {'text': 'This was about event or prevent default.', 'start': 8764.433, 'duration': 1.722}, {'text': 'Now, there is another one called stop propagation, which refers to something called event bubbling.', 'start': 8767.156, 'duration': 5.706}, {'text': 'Now, sometimes when an event happens, right, it might trigger events all the way up to the DOM.', 'start': 8773.542, 'duration': 6.023}], 'summary': 'Customize websites to serve specific effects based on needs, using event handling techniques like event bubbling.', 'duration': 25.963, 'max_score': 8753.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8753602.jpg'}, {'end': 8848.935, 'src': 'embed', 'start': 8826.236, 'weight': 8, 'content': [{'text': 'So you saw how I unbinded a particular event, right? Now what jQuery provides us with is on and off.', 'start': 8826.236, 'duration': 7.906}, {'text': "But then, if you think that it's a little tedious, right?", 'start': 8834.843, 'duration': 3.383}, {'text': "It's a little cumbersome that once you will set the event and then you will turn it off in a separate line.", 'start': 8838.266, 'duration': 6.185}, {'text': 'You can use something called as one.', 'start': 8844.671, 'duration': 1.281}, {'text': 'What this does is that it runs the event only once.', 'start': 8846.313, 'duration': 2.622}], 'summary': "Jquery provides on and off, but 'one' runs event only once.", 'duration': 22.699, 'max_score': 8826.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8826236.jpg'}, {'end': 8957.902, 'src': 'embed', 'start': 8930.902, 'weight': 9, 'content': [{'text': "because in really really complex applications and I'm not talking about single, simple applications.", 'start': 8930.902, 'duration': 4.706}, {'text': 'really complex applications with a lot of events and a lot of listeners.', 'start': 8936.592, 'duration': 3.961}, {'text': "it might be best for optimal performance to kind of remove certain events after they're no longer required.", 'start': 8940.553, 'duration': 6.263}, {'text': "So, in case you're removing a DOM element,", 'start': 8946.836, 'duration': 2.44}, {'text': 'maybe you know sort of a way to offload the DOM element or hide the DOM element would also be to remove the events alongside it.', 'start': 8949.276, 'duration': 8.626}], 'summary': 'In complex applications, removing unnecessary events can optimize performance, such as when removing dom elements.', 'duration': 27, 'max_score': 8930.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8930902.jpg'}, {'end': 9020.429, 'src': 'embed', 'start': 8976.351, 'weight': 10, 'content': [{'text': 'another thing is that you can trigger events on certain elements using the trigger function.', 'start': 8976.351, 'duration': 6.483}, {'text': 'now it can be used to mimic browser events just clicking off an anchor tag.', 'start': 8982.834, 'duration': 5.223}, {'text': 'now. this is very useful.', 'start': 8988.057, 'duration': 1.26}, {'text': 'think about it.', 'start': 8989.317, 'duration': 0.621}, {'text': "let's suppose what i wanted to do was i i wanted the link to work right when i and enter the color box, prevented the default behavior right.", 'start': 8989.938, 'duration': 30.491}], 'summary': 'The trigger function can mimic browser events, such as clicking an anchor tag, providing useful capabilities for customizing element behaviors.', 'duration': 44.078, 'max_score': 8976.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM8976351.jpg'}], 'start': 7860.872, 'title': 'Javascript and jquery event handling', 'summary': 'Covers javascript reg.test, event handling with .bind function and console.log, and jquery event handling including mouse entering/leaving events, unbinding events, event object access, prevent default, event bubbling, best practices for event bindings, trigger function, and custom events.', 'chapters': [{'end': 7971.056, 'start': 7860.872, 'title': 'Javascript reg.test and event handling', 'summary': 'Covers the usage of reg.test in javascript to provide true/false results based on matching success, followed by a demonstration of event handling using the .bind function and console.log, emphasizing its better usage over alert statements.', 'duration': 110.184, 'highlights': ['The reg.test function in JavaScript provides a true or false result based on the success or failure of a match, which is useful for different input scenarios and business logic.', 'Event handling in JavaScript is demonstrated using the .bind function, showcasing its usage to trigger a function when an H1 element is clicked.', 'Console.log is presented as a better alternative to alert statements for displaying messages in event handling, with a demonstration of its usage and the benefits it offers.']}, {'end': 8379.585, 'start': 7971.997, 'title': 'Event handling in jquery', 'summary': 'Discusses event handling in jquery, including mouse entering and leaving events, unbinding events, and the deprecation of bind and live methods in jquery version 1.7.', 'duration': 407.588, 'highlights': ['Event handling includes mouse entering and leaving events The chapter covers the concept of mouse entering and leaving events in event handling.', 'Unbinding events is important for memory management The importance of unbinding events for memory management is emphasized, with a recommendation to have a good use case for unbinding events.', 'Deprecation of bind and live methods in jQuery version 1.7 The deprecation of bind and live methods in jQuery version 1.7 is mentioned, with a strong recommendation to use the latest version of jQuery for new projects.']}, {'end': 8910.659, 'start': 8380.066, 'title': 'Jquery event handling', 'summary': 'Explains jquery event handling, including binding multiple events to the same handler, using an object to create different responses, accessing event objects for additional information, overriding default behaviors with prevent default, understanding event bubbling and using on, off, and one functions for event handling.', 'duration': 530.593, 'highlights': ['Understanding event bubbling is very important in event handling, especially when working with frameworks like Angular. This highlights the importance of understanding event bubbling, especially when working with frameworks like Angular.', 'Using an object to create different responses for different actions is a more efficient approach than creating multiple event bindings. Using an object to create different responses for different actions is a more efficient approach than creating multiple event bindings.', 'Accessing event objects provides additional information about the event, including type, target, and mouse position. Accessing event objects provides additional information about the event, including type, target, and mouse position.', 'The prevent default function is used to override the default behavior of elements like links and buttons, allowing for customized website interactions. The prevent default function is used to override the default behavior of elements like links and buttons, allowing for customized website interactions.', 'Using the on, off, and one functions provides flexibility in event handling, allowing for binding, unbinding, and running events only once. Using the on, off, and one functions provides flexibility in event handling, allowing for binding, unbinding, and running events only once.']}, {'end': 9219.709, 'start': 8911.56, 'title': 'Jquery events and triggers', 'summary': 'Discusses the best practices for event bindings, the usage of trigger function to mimic browser events, and the purpose of custom events in jquery, emphasizing the importance of optimizing performance and customization in complex applications.', 'duration': 308.149, 'highlights': ['The best practice is to remove certain event bindings that are no longer required, especially in complex applications with a lot of events and listeners to optimize performance.', 'The trigger function in jQuery can be used to mimic browser events, allowing for the observation of certain behaviors without actually opening the link, and facilitating the triggering of actions based on specific user interactions.', 'Custom events in jQuery allow for the creation and triggering of user-defined events, useful for customization and tracking specific interactions in interactive websites with a large codebase.']}], 'duration': 1358.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM7860872.jpg', 'highlights': ['The reg.test function in JavaScript provides a true or false result based on the success or failure of a match, which is useful for different input scenarios and business logic.', 'Event handling in JavaScript is demonstrated using the .bind function, showcasing its usage to trigger a function when an H1 element is clicked.', 'Console.log is presented as a better alternative to alert statements for displaying messages in event handling, with a demonstration of its usage and the benefits it offers.', 'Unbinding events is important for memory management The importance of unbinding events for memory management is emphasized, with a recommendation to have a good use case for unbinding events.', 'Deprecation of bind and live methods in jQuery version 1.7 The deprecation of bind and live methods in jQuery version 1.7 is mentioned, with a strong recommendation to use the latest version of jQuery for new projects.', 'Using an object to create different responses for different actions is a more efficient approach than creating multiple event bindings.', 'Accessing event objects provides additional information about the event, including type, target, and mouse position.', 'The prevent default function is used to override the default behavior of elements like links and buttons, allowing for customized website interactions.', 'Using the on, off, and one functions provides flexibility in event handling, allowing for binding, unbinding, and running events only once.', 'The best practice is to remove certain event bindings that are no longer required, especially in complex applications with a lot of events and listeners to optimize performance.', 'The trigger function in jQuery can be used to mimic browser events, allowing for the observation of certain behaviors without actually opening the link, and facilitating the triggering of actions based on specific user interactions.', 'Custom events in jQuery allow for the creation and triggering of user-defined events, useful for customization and tracking specific interactions in interactive websites with a large codebase.']}, {'end': 10130.67, 'segs': [{'end': 9247.855, 'src': 'embed', 'start': 9219.709, 'weight': 2, 'content': [{'text': 'like, the breadth of your application that you have developed.', 'start': 9219.709, 'duration': 3.342}, {'text': 'So prior to Ajax, so Ajax is basically asynchronous JavaScript used to sort of exchange data on the Internet.', 'start': 9223.951, 'duration': 7.446}, {'text': 'Now, prior to Ajax, everything was done on the server side.', 'start': 9231.697, 'duration': 3.042}, {'text': 'So whenever you would click on a button, it would reload the entire page.', 'start': 9234.959, 'duration': 3.583}, {'text': 'But think about it.', 'start': 9239.002, 'duration': 0.821}, {'text': 'Today, when you like something on Facebook or you comment or the Facebook news feed the page every time.', 'start': 9240.183, 'duration': 7.672}], 'summary': 'Ajax allows asynchronous data exchange, reducing server-side load and page reloads on user actions.', 'duration': 28.146, 'max_score': 9219.709, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM9219709.jpg'}, {'end': 9321.605, 'src': 'embed', 'start': 9285.858, 'weight': 0, 'content': [{'text': 'and then all major browsers started supporting something called as an xhr xml http request from 2003, and that kind of solved this issue, because now,', 'start': 9285.858, 'duration': 11.667}, {'text': 'if all major browsers are supporting it, then it became very popular and now you see it almost everywhere.', 'start': 9297.525, 'duration': 5.925}, {'text': "when you take almost any action, from sending a chat message to, let's suppose, liking something or subscribing to your favorite youtube channel,", 'start': 9303.45, 'duration': 8.747}, {'text': "it's all being done via ajax.", 'start': 9312.197, 'duration': 2.062}, {'text': "so whenever you see the page not loading but some sort of data being exchanged on the internet, it's ajax which is helping you out.", 'start': 9314.259, 'duration': 7.346}], 'summary': 'Xhr xml http request became popular after 2003, enabling widespread use of ajax for various online actions.', 'duration': 35.747, 'max_score': 9285.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM9285858.jpg'}, {'end': 9394.258, 'src': 'embed', 'start': 9362.84, 'weight': 3, 'content': [{'text': 'or you can send some data to a particular URL for a particular action.', 'start': 9362.84, 'duration': 4.902}, {'text': 'and this happens through AJAX in JavaScript, through XML HTTP request API in JavaScript, and AJAX is something which is very popular.', 'start': 9367.742, 'duration': 9.126}, {'text': 'that way.', 'start': 9376.868, 'duration': 0.4}, {'text': 'Now, the requests are asynchronous, which means the rest of your code continues to execute while the request is being processed.', 'start': 9377.748, 'duration': 6.684}, {'text': 'And the response is received in XML format.', 'start': 9385.072, 'duration': 2.122}, {'text': 'Now, this was when it was back in 2003, but now, of course, as you will see, you can sort of specify any type of format that you need.', 'start': 9387.394, 'duration': 6.864}], 'summary': 'Ajax in javascript allows asynchronous requests; response is received in xml format.', 'duration': 31.418, 'max_score': 9362.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM9362840.jpg'}, {'end': 9643.119, 'src': 'embed', 'start': 9598.4, 'weight': 4, 'content': [{'text': 'as you will see as you go along.', 'start': 9598.4, 'duration': 1.221}, {'text': 'But this is one of the most, again, makes jQuery so, so accepted as a library that it helps you manage JavaScript-related cross-browser dependencies.', 'start': 9600.621, 'duration': 10.627}, {'text': 'And apart from $.', 'start': 9612.528, 'duration': 1.551}, {'text': 'ajax being a method, there are certain other methods available like $.', 'start': 9614.079, 'duration': 3.942}, {'text': 'get, $.', 'start': 9618.021, 'duration': 0.631}, {'text': 'script, $.', 'start': 9618.652, 'duration': 1.19}, {'text': 'getJSON, $.', 'start': 9619.842, 'duration': 1.091}, {'text': 'post, which are also available to you.', 'start': 9620.933, 'duration': 1.481}, {'text': 'Now, there are two more most common methods for sending a request to a server.', 'start': 9623.246, 'duration': 4.023}, {'text': 'One of them is GET.', 'start': 9627.809, 'duration': 1.121}, {'text': 'The GET method is used for getting any data from the server.', 'start': 9629.39, 'duration': 3.342}, {'text': "So this may be a search result that you're trying to get.", 'start': 9633.152, 'duration': 2.962}, {'text': 'This may be a list of friends.', 'start': 9636.134, 'duration': 1.181}, {'text': 'This may be a list of notifications.', 'start': 9637.795, 'duration': 1.561}, {'text': 'This may be a list of stories.', 'start': 9639.396, 'duration': 1.521}, {'text': 'This may be a list of videos on YouTube.', 'start': 9640.937, 'duration': 2.182}], 'summary': 'Jquery is accepted for managing cross-browser dependencies with methods like .ajax, .get, .script, .getjson, .post for sending requests, including get for fetching data from the server.', 'duration': 44.719, 'max_score': 9598.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM9598400.jpg'}, {'end': 9884.627, 'src': 'embed', 'start': 9860.75, 'weight': 7, 'content': [{'text': 'the Ajax method is mostly preferred and it is considered to be a good practice, and it is a powerful method with a lot of features,', 'start': 9860.75, 'duration': 8.405}, {'text': 'with a lot of options available to create AJAX requests.', 'start': 9869.155, 'duration': 3.582}, {'text': 'What it takes is a configurable object.', 'start': 9873.098, 'duration': 2.061}, {'text': 'So configurable object meaning the settings or the options that I just talked about, which you can set and use to complete requests using AJAX.', 'start': 9875.42, 'duration': 9.207}], 'summary': 'Ajax method is a powerful and preferred technique for creating ajax requests with configurable options.', 'duration': 23.877, 'max_score': 9860.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM9860750.jpg'}], 'start': 9219.709, 'title': 'Ajax in modern web development', 'summary': "Covers the concept of ajax, benefits such as faster data exchange and reduced page reloads, its role in modern web applications, asynchronous behavior in browsers, event loop, xml http request api, support from 2003, and jquery's role in managing cross-browser dependencies, as well as jquery ajax methods including get and post, data types exchange, and various options for ajax requests.", 'chapters': [{'end': 9429.183, 'start': 9219.709, 'title': 'Understanding ajax in web development', 'summary': 'Explains the concept of ajax, highlighting its benefits such as faster data exchange, reduced page reloads, and the widespread support from major browsers, with a focus on its role in modern web applications and its asynchronous nature.', 'duration': 209.474, 'highlights': ['Ajax enables faster data exchange, reducing the need to reload entire web pages, resulting in improved user experience and significant time savings.', 'Major browsers began supporting XMLHttpRequest (XHR) from 2003, contributing to the widespread adoption of Ajax in modern web applications.', 'The asynchronous nature of Ajax allows for the execution of multiple calls simultaneously, enhancing the efficiency of data exchange processes.', 'XML was popular in the past for data exchange but has largely gone out of fashion due to its bulky nature, with modern systems favoring other formats for data exchange.']}, {'end': 9622.414, 'start': 9429.783, 'title': 'Asynchronous behavior in browsers', 'summary': 'Discusses how browsers enable asynchronous behavior through the event loop and the xml http request api, which started gaining support from browsers in 2003, allowing for parallel loading of content, while also highlighting the role of jquery in managing cross-browser dependencies.', 'duration': 192.631, 'highlights': ['Browsers enable asynchronous behavior through the event loop and the XML HTTP request API, allowing for parallel loading of content The chapter explains how browsers enable asynchronous behavior through the event loop and the XML HTTP request API, which allows for parallel loading of different content elements, making the process appear quick and efficient.', 'Support for asynchronous behavior in browsers started coming from 2003 It is highlighted that support for asynchronous behavior in browsers started gaining momentum from 2003, with the XML HTTP request API being a browser API that enables AJAX requests.', 'jQuery provides a single set of methods to manage cross-browser dependencies for handling requests The significance of jQuery is emphasized in providing a unified set of methods to manage cross-browser dependencies for handling requests, such as $.ajax, $.get, $.script, $.getJSON, and $.post.']}, {'end': 10130.67, 'start': 9623.246, 'title': 'Jquery ajax methods', 'summary': 'Discusses the get and post methods for sending requests to a server, the data types that can be exchanged using $.ajax in jquery, and the various options available for ajax requests, including async, cache, complete, success, data, timeout, and error.', 'duration': 507.424, 'highlights': ['The GET method is used for getting any data from the server, such as search results, lists of friends, notifications, stories, videos, channels, or restaurants, while the POST method is used for sending data to the server for creation or updating, with examples like creating a signup form, updating a profile on Facebook, creating a post, or creating a comment.', 'The $.ajax method in jQuery provides options for exchanging various data types, including text, HTML, scripts, JSON, JSONP for cross-domain requests, and XML, and it also circumvents the same-origin policy using JSONP for requests from different domains.', 'The various options available for AJAX requests using $.ajax in jQuery include async for asynchronous requests, cache for caching responses, complete for a callback function to run when the request is complete, regardless of success or failure, success for the function called when the request is successfully completed, data for sending data with the request, data type for specifying the expected data type from the server, error for the callback function when the request encounters an error, JSONB for specifying the callback name for a JSON request, and timeout for specifying the time to wait and consider the request as a failure.', 'The chapter also emphasizes the preferred use of the Ajax method in jQuery for making AJAX requests and encourages exploration of the various available options and features for more efficient and effective usage.']}], 'duration': 910.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM9219709.jpg', 'highlights': ['Major browsers began supporting XMLHttpRequest (XHR) from 2003, contributing to the widespread adoption of Ajax in modern web applications.', 'Ajax enables faster data exchange, reducing the need to reload entire web pages, resulting in improved user experience and significant time savings.', 'The asynchronous nature of Ajax allows for the execution of multiple calls simultaneously, enhancing the efficiency of data exchange processes.', 'Browsers enable asynchronous behavior through the event loop and the XML HTTP request API, allowing for parallel loading of content.', 'jQuery provides a single set of methods to manage cross-browser dependencies for handling requests.', 'The GET method is used for getting any data from the server, such as search results, lists of friends, notifications, stories, videos, channels, or restaurants, while the POST method is used for sending data to the server for creation or updating.', 'The $.ajax method in jQuery provides options for exchanging various data types, including text, HTML, scripts, JSON, JSONP for cross-domain requests, and XML, and it also circumvents the same-origin policy using JSONP for requests from different domains.', 'The various options available for AJAX requests using $.ajax in jQuery include async for asynchronous requests, cache for caching responses, complete for a callback function to run when the request is complete, regardless of success or failure, success for the function called when the request is successfully completed, data for sending data with the request, data type for specifying the expected data type from the server, error for the callback function when the request encounters an error, JSONB for specifying the callback name for a JSON request, and timeout for specifying the time to wait and consider the request as a failure.']}, {'end': 11394.731, 'segs': [{'end': 10193.774, 'src': 'embed', 'start': 10131.07, 'weight': 0, 'content': [{'text': "Type is the kind of verb that you're using on HTTP, whether it's get or a post, or it's a put or a delete.", 'start': 10131.07, 'duration': 5.504}, {'text': 'Default is get.', 'start': 10136.994, 'duration': 0.821}, {'text': 'Now URL is, this is the request URL of course.', 'start': 10138.416, 'duration': 2.361}, {'text': 'So nothing happens without this.', 'start': 10140.877, 'duration': 1.281}, {'text': 'It is a mandatory option.', 'start': 10142.698, 'duration': 1.221}, {'text': 'Everything else is, if you have mandatory configuration, a key, everything else is optional.', 'start': 10144.539, 'duration': 5.142}, {'text': "So let's do a quick example.", 'start': 10150.162, 'duration': 1.56}, {'text': "Okay Let's do a quick example.", 'start': 10151.862, 'duration': 1.901}, {'text': 'I have here an eject function.', 'start': 10154.524, 'duration': 2.241}, {'text': 'In fact, let me change this.', 'start': 10156.785, 'duration': 3.121}, {'text': 'Right So you see, this is like a JavaScript object.', 'start': 10161.367, 'duration': 13.299}, {'text': "This is a JavaScript object, and I'm just configuring it to various parameters.", 'start': 10174.946, 'duration': 3.982}, {'text': 'Complete with error, with success and data.', 'start': 10179.228, 'duration': 5.102}, {'text': 'And then we can also mention the type as get.', 'start': 10186.871, 'duration': 3.461}, {'text': "There's a checklist about it.", 'start': 10190.712, 'duration': 1.201}, {'text': 'Then mention the data type.', 'start': 10192.413, 'duration': 1.361}], 'summary': "Understanding http verb types and request url is crucial for configuration, with 'get' as the default type.", 'duration': 62.704, 'max_score': 10131.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM10131070.jpg'}, {'end': 10296.572, 'src': 'embed', 'start': 10269.084, 'weight': 3, 'content': [{'text': 'so once you open the debugger, right there is a network tab.', 'start': 10269.084, 'duration': 2.621}, {'text': "it's very, very useful for, especially for ajax requests.", 'start': 10271.705, 'duration': 3.381}, {'text': 'it has something called as an xhr.', 'start': 10275.086, 'duration': 1.58}, {'text': 'this is where you can see all the ajax requests that your web page will ever make, and this is not just for yourself.', 'start': 10276.666, 'duration': 6.261}, {'text': 'this is for this, not just for your website.', 'start': 10282.927, 'duration': 2.041}, {'text': 'this is for any website that you go.', 'start': 10284.968, 'duration': 1.48}, {'text': 'you can go to youtube.com and once you open the network tab and you look at xhr, you will see all the requests that they are making.', 'start': 10287.088, 'duration': 7.283}, {'text': "let's click on the button.", 'start': 10294.371, 'duration': 2.201}], 'summary': "Using the debugger's network tab to track ajax requests, including xhr, for any website.", 'duration': 27.488, 'max_score': 10269.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM10269084.jpg'}, {'end': 10411.757, 'src': 'embed', 'start': 10379.948, 'weight': 4, 'content': [{'text': "So we'll do a $get over here, JSON and the URL needs to be, it can be the same URL.", 'start': 10379.948, 'duration': 8.946}, {'text': 'And it has this function, which is basically on request completed.', 'start': 10391.776, 'duration': 5.043}, {'text': 'this empty object is basically any of the data that we want to send, but in this case there are no query parameters, so we can just get by without it.', 'start': 10399.053, 'duration': 8.103}, {'text': 'and this over here is the server response.', 'start': 10407.156, 'duration': 2.641}, {'text': "so let's try out $get.", 'start': 10409.797, 'duration': 1.96}], 'summary': 'Using $get method to request data from a server.', 'duration': 31.809, 'max_score': 10379.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM10379948.jpg'}, {'end': 10589.422, 'src': 'embed', 'start': 10559.662, 'weight': 5, 'content': [{'text': 'Similarly, there is a post method.', 'start': 10559.662, 'duration': 1.641}, {'text': "You slide with the data values, you pass with the function and you specify the response that you're expecting.", 'start': 10562.244, 'duration': 6.284}, {'text': 'Now there is something very interesting called as $.', 'start': 10569.369, 'duration': 2.671}, {'text': 'load This fetches an entire HTML from a URL.', 'start': 10572.04, 'duration': 3.152}, {'text': 'And let me just quickly show you what to do with it.', 'start': 10575.593, 'duration': 2.862}, {'text': 'So I have a container div here and I have this test.html.', 'start': 10579.035, 'duration': 5.083}, {'text': 'It just contains this h2 tags.', 'start': 10584.759, 'duration': 2.361}, {'text': 'So it could contain any HTML, but it just contains this.', 'start': 10587.24, 'duration': 2.182}], 'summary': 'The $load method fetches entire html from a url and can be used to specify the response expected.', 'duration': 29.76, 'max_score': 10559.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM10559662.jpg'}, {'end': 10685.817, 'src': 'embed', 'start': 10657.404, 'weight': 6, 'content': [{'text': "This is especially useful if you're submitting a post request to a server where you want the key value pairs or you want to tell the server that, hey,", 'start': 10657.404, 'duration': 7.904}, {'text': 'this data is this particular value right?', 'start': 10665.308, 'duration': 2.921}, {'text': 'Otherwise, how would server know that if it is the first name, or it is the full name, or it is the last name, or if it is the middle name?', 'start': 10668.249, 'duration': 6.423}, {'text': "let's suppose you were making an application which took the name of the users.", 'start': 10675.072, 'duration': 3.962}, {'text': "so first name, last name needs to be proper and it needs to store them accordingly so that they're used accordingly everywhere.", 'start': 10679.034, 'duration': 6.783}], 'summary': 'Sending key value pairs in a post request to specify and store user names properly for use throughout the application.', 'duration': 28.413, 'max_score': 10657.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM10657404.jpg'}, {'end': 10854.83, 'src': 'embed', 'start': 10825.938, 'weight': 8, 'content': [{'text': 'so look at this line 49 and we iterate over it and it just displayed the results over here in the results.', 'start': 10825.938, 'duration': 6.587}, {'text': "so these are pretty useful if you're submitting data to a server using the post request.", 'start': 10832.525, 'duration': 4.385}, {'text': 'Now coming to jQuery utilities.', 'start': 10837.43, 'duration': 1.722}, {'text': 'So $.', 'start': 10839.452, 'duration': 0.791}, {'text': 'each is something that we have already studied in the past.', 'start': 10840.243, 'duration': 2.173}, {'text': 'It just basically takes an array of values and iterates over them one by one, one by one, one by one.', 'start': 10842.776, 'duration': 4.986}, {'text': "So we can just take an object or an array and pass in the keys and values and let's suppose sum the entire thing.", 'start': 10848.442, 'duration': 6.388}], 'summary': 'Iterating over data using jquery utilities for submitting to server using post request.', 'duration': 28.892, 'max_score': 10825.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM10825938.jpg'}, {'end': 11157.91, 'src': 'embed', 'start': 11124.52, 'weight': 9, 'content': [{'text': 'so dollar dot ajax is not a plain object.', 'start': 11124.52, 'duration': 2.162}, {'text': 'but is dollar dot ajax a function?', 'start': 11126.682, 'duration': 1.841}, {'text': 'Yes, it is.', 'start': 11133.069, 'duration': 0.48}, {'text': 'So $.', 'start': 11133.89, 'duration': 0.72}, {'text': 'ajax is a function.', 'start': 11134.61, 'duration': 0.781}, {'text': 'Similarly, you have something for checking if something is an array or not.', 'start': 11136.072, 'duration': 3.262}, {'text': 'Word would work in a very similar way.', 'start': 11139.775, 'duration': 1.641}, {'text': 'So the next topic that we have to tackle is something called as a deferred object or deferred concept in JavaScript or in jQuery.', 'start': 11143.098, 'duration': 9.127}, {'text': 'However, before I go over here, let me introduce you to a problem statement.', 'start': 11152.626, 'duration': 5.284}], 'summary': 'Introduction to jquery functions and deferred concept in javascript.', 'duration': 33.39, 'max_score': 11124.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11124520.jpg'}, {'end': 11283.903, 'src': 'embed', 'start': 11254.252, 'weight': 7, 'content': [{'text': 'So the way it will work is that JavaScript will call this and then move on to the next line.', 'start': 11254.252, 'duration': 4.802}, {'text': 'JavaScript will call this and move on to the next line.', 'start': 11260.275, 'duration': 2.301}, {'text': 'Then when the response comes back, from the server that is when JavaScript will execute this function.', 'start': 11263.037, 'duration': 7.341}, {'text': "So it's asynchronous.", 'start': 11270.398, 'duration': 1.081}, {'text': 'This happens, this entire thing gets executed after the request has been completed successfully.', 'start': 11271.559, 'duration': 6.522}, {'text': 'So you will always see a console.log as user details as undefined over here.', 'start': 11279.481, 'duration': 4.422}], 'summary': 'Javascript makes asynchronous calls to server, executing function after successful request.', 'duration': 29.651, 'max_score': 11254.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11254252.jpg'}], 'start': 10131.07, 'title': 'Understanding http requests, jquery ajax, and deferred concept', 'summary': 'Covers key components of http requests, making ajax requests with jquery using $get, getjson, and $.load methods, and understanding jquery utilities like deferred concept, emphasizing the asynchronous nature of ajax calls and the need for managing responses in complex applications.', 'chapters': [{'end': 10193.774, 'start': 10131.07, 'title': 'Understanding http requests', 'summary': 'Explains the key components of an http request, including the type of verb used (get, post, put, delete), the mandatory request url, and optional configurations such as data type and parameters.', 'duration': 62.704, 'highlights': ['The type of verb used in HTTP requests includes GET, POST, PUT, and DELETE, with the default being GET. Understanding the various types of HTTP verbs and their default behavior.', 'The request URL is mandatory for an HTTP request, while other configurations and parameters are optional. Emphasizing the mandatory nature of the request URL and the optional nature of other configurations.', 'Configuring parameters and options in JavaScript objects for HTTP requests, including error handling, success, and data type. Illustrating the process of configuring parameters and options in JavaScript objects for HTTP requests.']}, {'end': 10674.672, 'start': 10193.974, 'title': 'Using jquery for ajax requests', 'summary': 'Demonstrates making ajax requests with jquery, including using $get, getjson, and $.load methods, understanding the network tab, and handling request success and error responses.', 'duration': 480.698, 'highlights': ['Understanding the network tab in the debugger, which displays all AJAX requests made by a webpage, applicable to any website. The network tab in the debugger displays all AJAX requests made by a webpage, providing insights into the requests made by any website, such as YouTube.com.', 'Demonstrating the use of $get method for making AJAX requests and handling the server response. Demonstrating the use of $get method for making AJAX requests, handling server response, and understanding the use of empty object and query parameters.', 'Explaining the $.load method for fetching entire HTML from a URL and its usefulness in reusing components and sections of HTML in multiple places. Explaining the $.load method for fetching entire HTML from a URL and its usefulness in reusing components and sections of HTML in multiple places, enhancing the reusability of HTML components.', 'Describing the serialization of form data into a query string and its importance in submitting post requests to a server. Describing the serialization of form data into a query string and its importance in submitting post requests to a server, ensuring the server receives the correct key-value pairs.']}, {'end': 11394.731, 'start': 10675.072, 'title': 'Understanding jquery utilities and deferred concept', 'summary': 'Discusses the usage of jquery utilities like serialize, serialized array, $.each, and the deferred concept, emphasizing the asynchronous nature of ajax calls and the need for managing responses in complex applications.', 'duration': 719.659, 'highlights': ['Understanding Asynchronous Ajax Calls Explains the asynchronous nature of Ajax calls, where JavaScript moves on to the next line after calling the Ajax function, and executes the subsequent function only after receiving the response, highlighting the need to manage responses in complex applications.', 'Usage of jQuery Utilities Discusses the usage of jQuery utilities like serialize, serialized array, $.each, and their benefits in handling form data and iterating over arrays, emphasizing their convenience and recommendable usage over conventional for loops in large applications.', 'Application of Deferred Concept Introduces the concept of deferred objects in JavaScript and jQuery, highlighting its importance in managing asynchronous operations and handling responses, illustrated through a complex scenario involving multiple API calls and conditional responses.']}], 'duration': 1263.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM10131070.jpg', 'highlights': ['Understanding the various types of HTTP verbs and their default behavior', 'Emphasizing the mandatory nature of the request URL and the optional nature of other configurations', 'Illustrating the process of configuring parameters and options in JavaScript objects for HTTP requests', 'The network tab in the debugger displays all AJAX requests made by a webpage, providing insights into the requests made by any website, such as YouTube.com', 'Demonstrating the use of $get method for making AJAX requests, handling server response, and understanding the use of empty object and query parameters', 'Explaining the $.load method for fetching entire HTML from a URL and its usefulness in reusing components and sections of HTML in multiple places, enhancing the reusability of HTML components', 'Describing the serialization of form data into a query string and its importance in submitting post requests to a server, ensuring the server receives the correct key-value pairs', 'Explains the asynchronous nature of Ajax calls, where JavaScript moves on to the next line after calling the Ajax function, and executes the subsequent function only after receiving the response, highlighting the need to manage responses in complex applications', 'Discusses the usage of jQuery utilities like serialize, serialized array, $.each, and their benefits in handling form data and iterating over arrays, emphasizing their convenience and recommendable usage over conventional for loops in large applications', 'Introduces the concept of deferred objects in JavaScript and jQuery, highlighting its importance in managing asynchronous operations and handling responses, illustrated through a complex scenario involving multiple API calls and conditional responses']}, {'end': 12334.923, 'segs': [{'end': 11511.807, 'src': 'embed', 'start': 11489.469, 'weight': 2, 'content': [{'text': "it's called as callback hell and it is hell in fact if you have to debug something which is a lot of complex business logic and built like this.", 'start': 11489.469, 'duration': 9.53}, {'text': 'so people in the javascript community saw this as a potential problem because the situations with the upcoming complex applications that were coming up every day.', 'start': 11499.66, 'duration': 10.386}, {'text': 'this was just like bound to happen.', 'start': 11510.046, 'duration': 1.761}], 'summary': 'Javascript community identifies callback hell as a potential problem for complex applications.', 'duration': 22.338, 'max_score': 11489.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11489469.jpg'}, {'end': 11570.407, 'src': 'embed', 'start': 11532.258, 'weight': 0, 'content': [{'text': "so in the sense that when i told you that hey, i've done a console.log over here, the ajax call had been fired,", 'start': 11532.258, 'duration': 7.045}, {'text': "but we don't know if it was completed.", 'start': 11539.303, 'duration': 2.601}, {'text': "so it's an appending state.", 'start': 11541.904, 'duration': 1.541}, {'text': 'the request is being made.', 'start': 11543.445, 'duration': 1.261}, {'text': "We don't know how the server is going to respond yet.", 'start': 11545.166, 'duration': 2.422}, {'text': 'And the deferred object has basically two important methods.', 'start': 11548.069, 'duration': 2.522}, {'text': 'One of them is called as a resolve or a reject.', 'start': 11550.691, 'duration': 1.962}, {'text': 'In jQuery, Ajax method will call resolve on the deferred object and it returns when request is successful.', 'start': 11553.313, 'duration': 5.765}, {'text': 'And it will call reject when request is a failure.', 'start': 11559.458, 'duration': 1.982}, {'text': 'And both resolve and reject can be manually executed on any manually created deferred object.', 'start': 11561.88, 'duration': 4.785}, {'text': 'so the way you need to think about this is that internally,', 'start': 11567.205, 'duration': 3.202}], 'summary': 'The deferred object in jquery handles asynchronous requests, with resolve for success and reject for failure.', 'duration': 38.149, 'max_score': 11532.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11532258.jpg'}, {'end': 11730.166, 'src': 'embed', 'start': 11707.237, 'weight': 7, 'content': [{'text': "very useful in that way where it allows you to have multiple listeners to Ajax events and to respond to scenarios in different ways based on what you're getting.", 'start': 11707.237, 'duration': 10.643}, {'text': 'Now in jQuery, you also have something called the promise and it is based on the deferred object.', 'start': 11718.32, 'duration': 6.323}, {'text': 'So it is derived from the deferred object, but it is not the deferred object.', 'start': 11724.843, 'duration': 3.862}, {'text': 'It is a subset of it.', 'start': 11729.025, 'duration': 1.141}], 'summary': 'Jquery allows multiple listeners to ajax events and has a promise derived from the deferred object.', 'duration': 22.929, 'max_score': 11707.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11707237.jpg'}, {'end': 11925.531, 'src': 'embed', 'start': 11886.473, 'weight': 4, 'content': [{'text': 'so in that way you are clear, so as is in terms of what is your response.', 'start': 11886.473, 'duration': 5.144}, {'text': 'so in jquery, the exact method returns a promise.', 'start': 11891.617, 'duration': 3.903}, {'text': 'it has three main methods done fail and always.', 'start': 11895.52, 'duration': 3.162}, {'text': 'So what I can do is that for this one I can call done.', 'start': 11899.423, 'duration': 7.823}, {'text': "I can say, OK, let's do a console.log of user details.", 'start': 11908.687, 'duration': 6.843}, {'text': "Let's try this out.", 'start': 11920.172, 'duration': 0.76}, {'text': 'And it worked.', 'start': 11922.97, 'duration': 0.58}, {'text': 'It worked on line 69.', 'start': 11923.97, 'duration': 1.561}], 'summary': 'The jquery exact method in the transcript returns a promise with three main methods: done, fail, and always. the speaker successfully used the method, as evidenced by it working on line 69.', 'duration': 39.058, 'max_score': 11886.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11886473.jpg'}, {'end': 12047.302, 'src': 'embed', 'start': 12019.232, 'weight': 5, 'content': [{'text': "I've been making this Ajax call again and again and again, right, I'm making an internet call.", 'start': 12019.232, 'duration': 3.941}, {'text': 'there is a concept of caching where you want to save the result, where you want to save the result of the outcome.', 'start': 12023.173, 'duration': 6.403}, {'text': "now what you want to do is that a very simple cache technique here is that you have made a request and you've saved the promise as a value in a object.", 'start': 12029.576, 'duration': 11.284}, {'text': 'So forget everything else.', 'start': 12041.32, 'duration': 1.02}, {'text': "What you have simply done is that if you're making the request for the first time, if the ID of the request,", 'start': 12042.44, 'duration': 4.862}], 'summary': 'Discussing caching technique for saving ajax call results.', 'duration': 28.07, 'max_score': 12019.232, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM12019232.jpg'}, {'end': 12220.389, 'src': 'embed', 'start': 12192.112, 'weight': 6, 'content': [{'text': "it's just going to call the callback with the original promise that, hey, this was the promise,", 'start': 12192.112, 'duration': 4.466}, {'text': 'this was the data that was fetched and this is what you need to do with it.', 'start': 12196.578, 'duration': 3.865}, {'text': 'now, another thing here is dot when function, And again this directly addresses the callback hell that I was just showing to you.', 'start': 12200.443, 'duration': 8.542}, {'text': 'As you can see that this is like a call inside a call inside a call.', 'start': 12209.805, 'duration': 2.981}, {'text': "Let's suppose you have to call, you have to load the songs in a sequence.", 'start': 12212.806, 'duration': 2.561}, {'text': 'One, two, three.', 'start': 12215.687, 'duration': 0.781}, {'text': 'You have something called as a deferred chaining function,', 'start': 12217.028, 'duration': 3.361}], 'summary': "The 'dot when' function addresses callback hell and allows for deferred chaining.", 'duration': 28.277, 'max_score': 12192.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM12192112.jpg'}], 'start': 11395.291, 'title': 'Javascript callback hell and deferred object', 'summary': "Discusses the challenges of 'callback hell' in javascript, where multiple nested ajax calls create debugging difficulties, and introduces the concept of a deferred object as a solution. it explains the internal working of deferred and promise objects in jquery, highlighting the use of success and error methods, callback functions like done, fail, always, and the relationship between deferred and promise objects. it also emphasizes the limited capabilities of promises and discusses caching techniques and the usage of dot when function to handle multiple asynchronous requests.", 'chapters': [{'end': 11607.431, 'start': 11395.291, 'title': 'Javascript callback hell and deferred object', 'summary': "Discusses the challenges of 'callback hell' in javascript, where multiple nested ajax calls create debugging difficulties, and introduces the concept of a deferred object as a solution, which starts in a pending state and has methods to handle successful or failed requests.", 'duration': 212.14, 'highlights': ["The concept of 'callback hell' is described as a major problem in JavaScript due to complex nested AJAX calls, making debugging massively difficult. The 'callback hell' in JavaScript is highlighted, emphasizing the challenges of debugging complex nested AJAX calls.", 'The introduction of the deferred object is explained as a solution to the callback hell, starting in a pending state and offering methods like resolve and reject for handling successful or failed requests. The deferred object is introduced as a solution to the callback hell, starting in a pending state and providing methods like resolve and reject for handling requests.', "The deferred object's important methods, resolve and reject, are detailed, with resolve being called on successful requests and reject on failed ones, and both can be manually executed on any deferred object. The important methods of the deferred object, resolve and reject, are explained, with their roles in handling successful and failed requests, and the possibility of manual execution on any deferred object."]}, {'end': 11886.473, 'start': 11608.692, 'title': 'Understanding deferred and promise in jquery', 'summary': 'Explains the internal working of deferred and promise objects in jquery, highlighting the use of success and error methods, callback functions like done, fail, always, and the relationship between deferred and promise objects. it also illustrates the deferred situation using a real-world example and emphasizes the limited capabilities of promises.', 'duration': 277.781, 'highlights': ['The deferred object in jQuery allows to specify actions to be taken when a request is resolved or rejected, using the success and error methods, and also provides other callback functions like done, fail, or always.', 'Promises in jQuery are derived from the deferred object and are read-only, allowing the attachment of callbacks but lacking the ability to resolve or reject requests.', "The analogy of a friend promising to provide notes for an exam illustrates the deferred situation, where the actual work is done by the friend, and the reaction to the promise's success or failure is left to the recipient.", 'Deferred and promise objects in jQuery are useful for handling asynchronous events and responses, providing a structured way to manage actions based on the resolution or rejection of requests.']}, {'end': 12334.923, 'start': 11886.473, 'title': 'Understanding jquery promises and deferred', 'summary': 'Explains the usage of jquery promises and deferred, highlighting their main methods - done, fail, and always, with a focus on improving code readability and avoiding callback hell. it also discusses caching techniques and the usage of dot when function to handle multiple asynchronous requests.', 'duration': 448.45, 'highlights': ['The chapter emphasizes the usage of jQuery promises and deferred, highlighting their main methods - done, fail, and always. It explains how these methods can be used to handle asynchronous operations and improve code readability.', "The transcript discusses the concept of caching techniques in jQuery, emphasizing the storage of promises for future use. It highlights the benefit of caching to avoid making repeated requests and the usage of the 'done' callback once the promise is fulfilled.", 'The usage of dot when function to handle multiple asynchronous requests and avoid callback hell is explained in the transcript. It demonstrates how the dot when function can be used to handle multiple asynchronous requests and improve code organization.']}], 'duration': 939.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HgvIox6ehkM/pics/HgvIox6ehkM11395291.jpg', 'highlights': ['The deferred object is introduced as a solution to the callback hell, starting in a pending state and providing methods like resolve and reject for handling requests.', "The deferred object's important methods, resolve and reject, are explained, with their roles in handling successful and failed requests, and the possibility of manual execution on any deferred object.", "The concept of 'callback hell' is described as a major problem in JavaScript due to complex nested AJAX calls, making debugging massively difficult.", 'The deferred object in jQuery allows to specify actions to be taken when a request is resolved or rejected, using the success and error methods, and also provides other callback functions like done, fail, or always.', 'The chapter emphasizes the usage of jQuery promises and deferred, highlighting their main methods - done, fail, and always. It explains how these methods can be used to handle asynchronous operations and improve code readability.', "The transcript discusses the concept of caching techniques in jQuery, emphasizing the storage of promises for future use. It highlights the benefit of caching to avoid making repeated requests and the usage of the 'done' callback once the promise is fulfilled.", 'The usage of dot when function to handle multiple asynchronous requests and avoid callback hell is explained in the transcript. It demonstrates how the dot when function can be used to handle multiple asynchronous requests and improve code organization.', 'Deferred and promise objects in jQuery are useful for handling asynchronous events and responses, providing a structured way to manage actions based on the resolution or rejection of requests.']}], 'highlights': ['Varun has six years of development experience in various languages including Python, JavaScript, PHP, Ruby, Java, and Android, and has worked on Angular 1.x for the past two years.', 'The session covers topics such as introduction to jQuery, DOM manipulation, jQuery effects, forms, events, Ajax, and utilities.', 'jQuery simplifies client-side scripting, offering lightweight and efficient solutions.', 'Using a CDN ensures file originality, integrity, and faster development.', 'jQuery allows defining custom functions on the dollar object, enabling extension of the library without rewriting it, suitable for advanced users with familiarity in jQuery and JavaScript.', 'jQuery simplifies DOM manipulation by providing methods to handle differences in browsers, making it easier to deal with complicated DOM manipulations.', 'Content manipulation methods in jQuery include text, HTML, and value methods, each serving specific purposes such as updating text, inserting or updating HTML code, and getting or setting values from input boxes.', 'The animate function in CSS is used to change the positioning or styling of HTML tags in a certain amount of time.', 'Event handling in JavaScript is demonstrated using the .bind function, showcasing its usage to trigger a function when an H1 element is clicked.', 'Ajax enables faster data exchange, reducing the need to reload entire web pages, resulting in improved user experience and significant time savings.', 'The GET method is used for getting any data from the server, such as search results, lists of friends, notifications, stories, videos, channels, or restaurants, while the POST method is used for sending data to the server for creation or updating.', 'The deferred object is introduced as a solution to the callback hell, starting in a pending state and providing methods like resolve and reject for handling requests.']}