title
JavaScript and jQuery Tutorial (for Beginners)

description
In this lesson we learn what JavaScript is used for and how to leverage the popular JavaScript library named jQuery. Join my full courses at the lowest price: https://learnwebcode.com/courses/ Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode Link to the examples shown in the video: http://learnwebcode.com/javascript-and-jquery-tutorial-for-beginners/ Want to learn more? Check out the second lesson in this JavaScript series: https://www.youtube.com/watch?v=gIvR-WX5lIQ&list=UUHRp19HU7Y2LwfI0Ai6WAGQ

detail
{'title': 'JavaScript and jQuery Tutorial (for Beginners)', 'heatmap': [{'end': 409.091, 'start': 376.777, 'weight': 0.887}, {'end': 633.379, 'start': 625.134, 'weight': 0.767}, {'end': 990.213, 'start': 971.746, 'weight': 0.771}, {'end': 1195.249, 'start': 1150.578, 'weight': 0.844}], 'summary': "Tutorial covers javascript's role in front-end web development, event handling, dom manipulation, asynchronous requests, and animations, along with practical examples of adding functionality using javascript and jquery, such as adding a close button, styling headings, and event handling for a faq section.", 'chapters': [{'end': 130.496, 'segs': [{'end': 47.674, 'src': 'embed', 'start': 22.692, 'weight': 2, 'content': [{'end': 27.836, 'text': 'And in this video, we are going to learn the role that JavaScript plays in front end web development.', 'start': 22.692, 'duration': 5.144}, {'end': 34.742, 'text': "And we'll also take a look at how to write our own code using jQuery to add JavaScript functionality to our pages.", 'start': 28.297, 'duration': 6.445}, {'end': 36.724, 'text': "So let's dive right in.", 'start': 35.302, 'duration': 1.422}, {'end': 39.686, 'text': "In front of you is a sample page that I've created.", 'start': 37.544, 'duration': 2.142}, {'end': 44.19, 'text': 'And really quickly, I want to dissect the different technologies that make this page possible.', 'start': 39.886, 'duration': 4.304}, {'end': 47.674, 'text': 'So for example we know that HTML is involved.', 'start': 44.77, 'duration': 2.904}], 'summary': "Javascript's role in front end web development, using jquery to add functionality.", 'duration': 24.982, 'max_score': 22.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI22692.jpg'}, {'end': 119.473, 'src': 'embed', 'start': 92.567, 'weight': 0, 'content': [{'end': 96.049, 'text': 'JavaScript is how we make our pages and applications come alive.', 'start': 92.567, 'duration': 3.482}, {'end': 102.591, 'text': "It's the glue that holds everything together and it's the magic that lets us manipulate anything we want at any moment.", 'start': 96.469, 'duration': 6.122}, {'end': 106.456, 'text': "So let's get a little bit more specific before we dive straight into the code.", 'start': 103.271, 'duration': 3.185}, {'end': 110.641, 'text': 'Here are the four primary things that we use JavaScript for.', 'start': 106.816, 'duration': 3.825}, {'end': 113.425, 'text': 'Number one, event handling.', 'start': 111.182, 'duration': 2.243}, {'end': 117.951, 'text': 'This basically means that at a certain moment we want something specific to happen.', 'start': 113.886, 'duration': 4.065}, {'end': 119.473, 'text': 'The event could be anything.', 'start': 118.412, 'duration': 1.061}], 'summary': 'Javascript is used for event handling, making pages and applications come alive.', 'duration': 26.906, 'max_score': 92.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI92567.jpg'}], 'start': 0.229, 'title': 'Javascript with jquery introduction', 'summary': "Introduces javascript's role in front-end web development, highlighting its uses such as event handling, dom manipulation, asynchronous requests, and animations.", 'chapters': [{'end': 130.496, 'start': 0.229, 'title': 'Javascript with jquery introduction', 'summary': 'Introduces javascript and its role in front-end web development, explaining how it adds behavior to web pages and applications. it also highlights the primary uses of javascript, including event handling, manipulating the dom, making asynchronous requests, and adding animations.', 'duration': 130.267, 'highlights': ["JavaScript adds behavior to web pages and applications JavaScript is the 'glue' that holds everything together and enables the manipulation of content and styles, adding interactivity to web pages and applications.", 'Primary uses of JavaScript: event handling, manipulating the DOM, making asynchronous requests, and adding animations JavaScript is used for event handling, manipulating the Document Object Model (DOM), making asynchronous requests, and adding animations to web pages, enhancing user experience and interactivity.', "Introduction to JavaScript's role in front-end web development The chapter explains the importance of JavaScript in front-end web development, addressing the need for behavior enhancement beyond content and style, thus completing the web development process."]}], 'duration': 130.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI229.jpg', 'highlights': ["JavaScript is the 'glue' that holds everything together and enables the manipulation of content and styles, adding interactivity to web pages and applications.", 'JavaScript is used for event handling, manipulating the Document Object Model (DOM), making asynchronous requests, and adding animations to web pages, enhancing user experience and interactivity.', 'The chapter explains the importance of JavaScript in front-end web development, addressing the need for behavior enhancement beyond content and style, thus completing the web development process.']}, {'end': 339.889, 'segs': [{'end': 212.724, 'src': 'embed', 'start': 184.287, 'weight': 2, 'content': [{'end': 188.516, 'text': 'Well, the DOM is basically that times a thousand or 10, 000.', 'start': 184.287, 'duration': 4.229}, {'end': 196.559, 'text': 'think of a room in a house and a hoarder lives in that room and they have a hundred thousand different sets of russian stacking dolls.', 'start': 188.516, 'duration': 8.043}, {'end': 206.222, 'text': 'the dom is basically the family tree in a line graph documenting all of those russian stacking doll families and all of their details and abilities.', 'start': 196.559, 'duration': 9.663}, {'end': 212.724, 'text': "basically, the dom is everything that the browser is capable of and is currently rendering, and it's just sort of the totality of the web browser.", 'start': 206.222, 'duration': 6.502}], 'summary': "Dom is like a family tree, representing browser capabilities, and it's the totality of the web browser.", 'duration': 28.437, 'max_score': 184.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI184287.jpg'}, {'end': 270.753, 'src': 'embed', 'start': 227.54, 'weight': 0, 'content': [{'end': 233.081, 'text': 'So if we know that the DOM is sort of this giant family tree of everything on the page and everything the browser can do,', 'start': 227.54, 'duration': 5.541}, {'end': 238.783, 'text': 'you can imagine how useful it is to be able to manipulate that family tree, to manipulate the DOM.', 'start': 233.081, 'duration': 5.702}, {'end': 240.752, 'text': 'and JavaScript makes it possible.', 'start': 239.491, 'duration': 1.261}, {'end': 243.434, 'text': 'Number four is Ajax.', 'start': 241.393, 'duration': 2.041}, {'end': 249.96, 'text': 'Ajax basically means anytime you send or receive data without refreshing the page.', 'start': 244.435, 'duration': 5.525}, {'end': 251.101, 'text': "It's as simple as that.", 'start': 250.32, 'duration': 0.781}, {'end': 255.625, 'text': 'So JavaScript and especially jQuery make all four of these things very simple.', 'start': 251.742, 'duration': 3.883}, {'end': 258.788, 'text': "So let's take a look at the code and dive right in.", 'start': 256.685, 'duration': 2.103}, {'end': 261.95, 'text': 'Now in front of you are two windows on the left.', 'start': 260.069, 'duration': 1.881}, {'end': 267.452, 'text': 'We see a text editor with the code that creates the sample web page that we looked at a few minutes ago.', 'start': 262.17, 'duration': 5.282}, {'end': 270.753, 'text': 'And on the right is a web browser showing that sample page.', 'start': 267.872, 'duration': 2.881}], 'summary': 'Javascript enables manipulation of the dom and ajax for data transfer without page refresh.', 'duration': 43.213, 'max_score': 227.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI227540.jpg'}], 'start': 131.117, 'title': 'Javascript event handling and dom traversal, and javascript: dom, manipulation, and ajax', 'summary': 'Covers javascript event handling and dom traversal, explaining the event capture process and providing an overview of dom traversal. it also discusses dom manipulation, ajax, and how javascript and jquery simplify these processes, with a practical example of adding functionality to a web page using javascript.', 'chapters': [{'end': 206.222, 'start': 131.117, 'title': 'Javascript event handling and dom traversal', 'summary': 'Covers javascript event handling, explaining how events are captured and code is executed, and provides a brief overview of dom traversal, likening it to navigating through russian stacking dolls and explaining its role as the family tree documenting the details and abilities of nested elements.', 'duration': 75.105, 'highlights': ['The DOM is basically the family tree in a line graph documenting all of those Russian stacking doll families and all of their details and abilities.', 'In HTML, we can think of the elements almost as Russian stacking dolls the way that a paragraph nests inside a list item, which nests inside an unordered list, which nests inside an article, so on and so forth.', 'Any event you can imagine with JavaScript we can capture the moment that that event takes place and then run certain code.']}, {'end': 339.889, 'start': 206.222, 'title': 'Javascript: dom, manipulation, and ajax', 'summary': 'Discusses the dom, dom manipulation, and ajax in javascript, highlighting how javascript and jquery simplify these processes and providing a practical example of adding functionality to a web page using javascript.', 'duration': 133.667, 'highlights': ['JavaScript and jQuery make DOM manipulation, Ajax, and other tasks simple JavaScript and jQuery simplify the processes of DOM manipulation, Ajax, and other tasks, making it easier to work with the DOM and send or receive data without refreshing the page.', "Practical example of adding functionality to a web page using JavaScript The transcript provides a practical example of adding functionality to a web page using JavaScript, where the process involves including CSS and JavaScript files and manipulating the DOM to enhance the page's interactivity.", 'Explanation of including CSS and JavaScript files in a web page The transcript explains the process of including CSS and JavaScript files in a web page, highlighting that JavaScript files can be attached to a page similar to attaching a CSS file and will run when the page is loaded.']}], 'duration': 208.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI131117.jpg', 'highlights': ['JavaScript and jQuery simplify DOM manipulation, Ajax, and other tasks', 'Practical example of adding functionality to a web page using JavaScript', 'The DOM is like a family tree in a line graph documenting all details and abilities']}, {'end': 943.923, 'segs': [{'end': 409.091, 'src': 'heatmap', 'start': 340.609, 'weight': 0, 'content': [{'end': 345.591, 'text': 'So just as a proof of concept just to prove that all the files are lined up we can write alert.', 'start': 340.609, 'duration': 4.982}, {'end': 347.251, 'text': 'Hello world.', 'start': 346.551, 'duration': 0.7}, {'end': 351.252, 'text': 'And when we refresh the page we see that there is an alert.', 'start': 348.612, 'duration': 2.64}, {'end': 358.115, 'text': "OK So now that everything's plugged in and working correctly our first task is to add the X.", 'start': 352.053, 'duration': 6.062}, {'end': 362.909, 'text': 'to this yellow box so that it will close on click.', 'start': 359.847, 'duration': 3.062}, {'end': 369.153, 'text': "Now, before we worry about writing the actual JavaScript, let's make sure we have the X in place visually.", 'start': 363.809, 'duration': 5.344}, {'end': 374.256, 'text': "So we're going to head over to our HTML, find the corresponding div for this yellow box.", 'start': 369.713, 'duration': 4.543}, {'end': 375.657, 'text': 'Here it is, UI message.', 'start': 374.376, 'duration': 1.281}, {'end': 379.879, 'text': "And let's add a class for the actual X button.", 'start': 376.777, 'duration': 3.102}, {'end': 388.845, 'text': "So we could name this anything we want, but I've named it UI close, put an X inside it, close the span.", 'start': 381.08, 'duration': 7.765}, {'end': 392.146, 'text': "And let's remove this hello world message.", 'start': 390.385, 'duration': 1.761}, {'end': 394.686, 'text': 'So now if we refresh, we see that the X is there.', 'start': 392.406, 'duration': 2.28}, {'end': 397.147, 'text': 'And if we hovered over it, it gets dark.', 'start': 394.706, 'duration': 2.441}, {'end': 402.689, 'text': 'This just corresponds with a little bit of CSS that we have basically giving it a background color and a little bit of padding.', 'start': 397.167, 'duration': 5.522}, {'end': 404.789, 'text': 'But this is a lesson on JavaScript.', 'start': 403.229, 'duration': 1.56}, {'end': 409.091, 'text': 'So now that we have our X, how do we make it so when you click on it, it does something.', 'start': 404.829, 'duration': 4.262}], 'summary': 'Adding an x button to a yellow box for closing on click in a web page, as a proof of concept.', 'duration': 48.236, 'max_score': 340.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI340609.jpg'}, {'end': 442.666, 'src': 'embed', 'start': 410.171, 'weight': 2, 'content': [{'end': 415.293, 'text': "So let's head over to our script file and write our first bit of jQuery.", 'start': 410.171, 'duration': 5.122}, {'end': 419.754, 'text': "I'll explain this code in just one moment.", 'start': 417.853, 'duration': 1.901}, {'end': 428.358, 'text': "OK, jQuery is the world's most popular JavaScript library.", 'start': 423.775, 'duration': 4.583}, {'end': 435.382, 'text': 'You can think of a library as a giant set of shortcuts and tools that make writing JavaScript a lot easier.', 'start': 429.038, 'duration': 6.344}, {'end': 442.666, 'text': 'So inside this bracket and this bracket, we can write anything we want and jQuery will help make it happen.', 'start': 436.362, 'duration': 6.304}], 'summary': 'Jquery is the most popular javascript library, providing shortcuts and tools for easier javascript writing.', 'duration': 32.495, 'max_score': 410.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI410171.jpg'}, {'end': 633.379, 'src': 'heatmap', 'start': 625.134, 'weight': 0.767, 'content': [{'end': 629.997, 'text': "And if we refresh, we'll see that when I click this, it fades out just that yellow box.", 'start': 625.134, 'duration': 4.863}, {'end': 631.698, 'text': "So let's dissect this line.", 'start': 630.277, 'duration': 1.421}, {'end': 633.379, 'text': "We're saying this.", 'start': 632.078, 'duration': 1.301}], 'summary': 'Demonstrating a fade-out effect when clicking a yellow box.', 'duration': 8.245, 'max_score': 625.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI625134.jpg'}, {'end': 770.929, 'src': 'embed', 'start': 744.527, 'weight': 4, 'content': [{'end': 750.112, 'text': 'So this is a good example now of event handling, traversing the DOM, manipulating the DOM.', 'start': 744.527, 'duration': 5.585}, {'end': 752.915, 'text': 'Hopefully things are starting to click a little bit.', 'start': 751.153, 'duration': 1.762}, {'end': 756.458, 'text': "You're starting to see how useful JavaScript and jQuery really are.", 'start': 752.955, 'duration': 3.503}, {'end': 758.54, 'text': 'But practice makes perfect.', 'start': 757.219, 'duration': 1.321}, {'end': 760.221, 'text': "So let's try another quick example.", 'start': 758.62, 'duration': 1.601}, {'end': 764.605, 'text': "Let's give this frequently asked questions section a bit of attention.", 'start': 761.182, 'duration': 3.423}, {'end': 766.146, 'text': 'So what do we want to do??', 'start': 765.225, 'duration': 0.921}, {'end': 770.929, 'text': 'Basically, we want to hide all of the answers, so that on page load,', 'start': 766.626, 'duration': 4.303}], 'summary': 'Teaching javascript and jquery with event handling and dom manipulation.', 'duration': 26.402, 'max_score': 744.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI744527.jpg'}, {'end': 832.714, 'src': 'embed', 'start': 806.909, 'weight': 6, 'content': [{'end': 819.615, 'text': 'So we start with two slashes and then we can say, you know, this line was for adding the X button and this code was handling the click event.', 'start': 806.909, 'duration': 12.706}, {'end': 823.548, 'text': 'Get get rid of a little bit extra white space.', 'start': 821.226, 'duration': 2.322}, {'end': 832.714, 'text': "OK And we'll add a new comment and we'll call it initially hide the answers for the frequently asked questions section.", 'start': 823.648, 'duration': 9.066}], 'summary': 'Code review: added x button, handling click event, and comments for faq section.', 'duration': 25.805, 'max_score': 806.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI806909.jpg'}, {'end': 957.213, 'src': 'embed', 'start': 926.089, 'weight': 3, 'content': [{'end': 928.231, 'text': 'So when I click on this, you see that it slides down.', 'start': 926.089, 'duration': 2.142}, {'end': 930.412, 'text': 'When I click on this one, its answer slides down.', 'start': 928.251, 'duration': 2.161}, {'end': 931.393, 'text': 'Now watch this.', 'start': 930.793, 'duration': 0.6}, {'end': 940.44, 'text': 'Instead of slide down, if you say slide toggle, jQuery will automatically know that when you click it a second time, it should slide back up.', 'start': 931.553, 'duration': 8.887}, {'end': 943.923, 'text': 'So jQuery has a lot of neat little shortcuts like that for you.', 'start': 941.561, 'duration': 2.362}, {'end': 952.468, 'text': "Now let's go the extra mile and style these headings so that they actually look like something that can be clicked instead of just plain text.", 'start': 944.901, 'duration': 7.567}, {'end': 957.213, 'text': "Now, if a user has JavaScript disabled, obviously we don't want these to look like links.", 'start': 953.109, 'duration': 4.104}], 'summary': 'Demonstration of jquery slide and slide toggle functions for interactive user interface.', 'duration': 31.124, 'max_score': 926.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI926089.jpg'}], 'start': 340.609, 'title': 'Adding a close button to yellow box and introduction to jquery', 'summary': 'Demonstrates adding a close button to a yellow box and introduces jquery, covering selecting, acting, and event handling with practical examples, such as hiding and manipulating the dom and implementing event handling for a faq section.', 'chapters': [{'end': 409.091, 'start': 340.609, 'title': 'Adding a close button to yellow box', 'summary': 'Demonstrates the process of adding a close button to a yellow box, including defining the visual appearance in html and the functionality in javascript.', 'duration': 68.482, 'highlights': ['The first task is to add the X. to the yellow box so that it will close on click.', 'The process involves visually adding the X button in the HTML by creating a corresponding div and adding a class for the X button, resulting in a functional close button.', 'Demonstration of the visual appearance and functionality of the X button in the HTML and JavaScript, including its hover effect and the next steps of making it functional on click.']}, {'end': 943.923, 'start': 410.171, 'title': 'Introduction to jquery: selecting, acting, and event handling', 'summary': "Introduces jquery as the world's most popular javascript library, explaining the process of selecting elements, acting on them, and handling events through practical examples, such as hiding and manipulating the dom and implementing event handling for a frequently asked questions section.", 'duration': 533.752, 'highlights': ["jQuery is explained as the world's most popular JavaScript library, offering shortcuts and tools to simplify JavaScript writing. jQuery is described as the most popular JavaScript library, providing shortcuts and tools to facilitate JavaScript writing.", 'The process of selecting elements and acting on them in jQuery is demonstrated, showcasing how to hide, fade out, or slide up elements. The two-step process of selecting elements and acting on them in jQuery is illustrated, including examples of hiding, fading out, and sliding up elements.', 'Event handling is introduced, showing how to write code to hide a specific element and traverse the DOM to manipulate it. The concept of event handling is introduced, with a demonstration of writing code to hide a specific element and traverse the DOM to manipulate it.', "Manipulating the DOM dynamically using jQuery's append method to insert HTML markup is showcased, illustrating the ability to manipulate the DOM effectively. The dynamic manipulation of the DOM using jQuery's append method to insert HTML markup is demonstrated, highlighting its effectiveness in manipulating the DOM.", 'Implementing event handling for a frequently asked questions section, including initially hiding the answers and handling the click event to slide down the answer, is illustrated. The process of implementing event handling for a frequently asked questions section is detailed, covering the initial hiding of answers and the handling of the click event to slide down the answer.']}], 'duration': 603.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI340609.jpg', 'highlights': ['Demonstrates adding a close button to a yellow box with X.', 'Illustrates visually adding the X button in the HTML and making it functional on click.', 'Explains jQuery as the most popular JavaScript library with shortcuts and tools.', 'Demonstrates selecting elements and acting on them in jQuery, including hiding and sliding up.', 'Introduces event handling and code writing to manipulate specific elements in the DOM.', "Showcases dynamic DOM manipulation using jQuery's append method for effective manipulation.", 'Illustrates implementing event handling for a FAQ section, including hiding and sliding down answers.']}, {'end': 1263.621, 'segs': [{'end': 1010.844, 'src': 'heatmap', 'start': 971.746, 'weight': 0, 'content': [{'end': 974.252, 'text': 'This will just add a class.', 'start': 971.746, 'duration': 2.506}, {'end': 976.518, 'text': 'Fact question.', 'start': 975.134, 'duration': 1.384}, {'end': 981.807, 'text': "So if we refresh, we see that they're now blue and they use the hand icon when I hover.", 'start': 977.765, 'duration': 4.042}, {'end': 984.869, 'text': 'This is corresponding with this class in our CSS file.', 'start': 982.328, 'duration': 2.541}, {'end': 985.83, 'text': 'Fat question.', 'start': 985.109, 'duration': 0.721}, {'end': 990.213, 'text': "We're just giving it a color of blue and using the pointer for the cursor.", 'start': 986.67, 'duration': 3.543}, {'end': 994.055, 'text': 'And that wraps up the frequently asked question section.', 'start': 991.173, 'duration': 2.882}, {'end': 997.877, 'text': "Now let's talk about the big picture of JavaScript.", 'start': 994.795, 'duration': 3.082}, {'end': 1000.159, 'text': 'We mentioned that there were four primary uses.', 'start': 997.937, 'duration': 2.222}, {'end': 1003.74, 'text': "We've covered number one, how to handle events.", 'start': 1000.839, 'duration': 2.901}, {'end': 1007.502, 'text': "We've covered number two, how to traverse the Dom.", 'start': 1004.521, 'duration': 2.981}, {'end': 1010.844, 'text': "We've covered number three, how to manipulate the Dom.", 'start': 1008.103, 'duration': 2.741}], 'summary': 'Javascript covers handling events, traversing/ manipulating the dom, with 4 primary uses.', 'duration': 65.943, 'max_score': 971.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI971746.jpg'}, {'end': 1195.249, 'src': 'heatmap', 'start': 1150.578, 'weight': 0.844, 'content': [{'end': 1152.341, 'text': "We're loading using this load method.", 'start': 1150.578, 'duration': 1.763}, {'end': 1155.526, 'text': "We're loading this file and then we're going to say body text.", 'start': 1152.361, 'duration': 3.165}, {'end': 1160.053, 'text': "So we're going inside a specific file and then we're only taking the element that we want.", 'start': 1156.527, 'duration': 3.526}, {'end': 1169.55, 'text': "And then finally, because JavaScript is enabled, when someone clicks this link, we don't want it to follow the link URL.", 'start': 1161.104, 'duration': 8.446}, {'end': 1171.832, 'text': "We're just using it for the click event.", 'start': 1169.87, 'duration': 1.962}, {'end': 1174.594, 'text': "So we'll say return false.", 'start': 1172.172, 'duration': 2.422}, {'end': 1182.58, 'text': 'So now if we refresh the page and we click on learn more, it dynamically loads the content into the DOM of the current page.', 'start': 1175.194, 'duration': 7.386}, {'end': 1188.384, 'text': 'So not only did we manipulate the Dom, our giant set of Russian stacking dolls.', 'start': 1183.42, 'duration': 4.964}, {'end': 1195.249, 'text': 'we pulled in data from another source on the fly without a page reload or a page refresh.', 'start': 1188.384, 'duration': 6.865}], 'summary': 'Using javascript to dynamically load content into the dom without page reload.', 'duration': 44.671, 'max_score': 1150.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI1150578.jpg'}, {'end': 1226.267, 'src': 'embed', 'start': 1197.831, 'weight': 1, 'content': [{'end': 1201.794, 'text': "And that's going to conclude this introductory video to JavaScript with jQuery.", 'start': 1197.831, 'duration': 3.963}, {'end': 1203.636, 'text': "Let's review what we've learned.", 'start': 1202.415, 'duration': 1.221}, {'end': 1205.978, 'text': "We've learned the role that JavaScript plays.", 'start': 1204.016, 'duration': 1.962}, {'end': 1213.321, 'text': 'HTML is for content, CSS controls the styling and appearance, and JavaScript controls the behavior.', 'start': 1206.838, 'duration': 6.483}, {'end': 1221.485, 'text': 'Now, obviously there are a lot more than four uses for JavaScript, but we think of the big four as event handling, DOM,', 'start': 1214.261, 'duration': 7.224}, {'end': 1226.267, 'text': 'traversal DOM manipulation and sending receiving data without page refreshes.', 'start': 1221.485, 'duration': 4.782}], 'summary': 'Intro to javascript with jquery: html, css, and javascript roles and main uses.', 'duration': 28.436, 'max_score': 1197.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI1197831.jpg'}, {'end': 1260.15, 'src': 'embed', 'start': 1239.924, 'weight': 2, 'content': [{'end': 1250.673, 'text': 'The point of this lesson was just to inform you of some of the basic concepts that sort of drive everything and provide you with a bit of basic vocabulary to help you learn more advanced JavaScript techniques.', 'start': 1239.924, 'duration': 10.749}, {'end': 1252.815, 'text': "From here, the sky's the limit.", 'start': 1251.634, 'duration': 1.181}, {'end': 1255.998, 'text': 'You just need to learn a little bit more and create whatever you want to create.', 'start': 1253.315, 'duration': 2.683}, {'end': 1258.484, 'text': 'So thank you very much for watching.', 'start': 1257.019, 'duration': 1.465}, {'end': 1260.15, 'text': 'I hope you feel like you learned something.', 'start': 1258.966, 'duration': 1.184}], 'summary': 'Lesson provides basic javascript concepts for learning advanced techniques, enabling limitless possibilities.', 'duration': 20.226, 'max_score': 1239.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI1239924.jpg'}], 'start': 944.901, 'title': "Javascript's role & styling headings", 'summary': "Covers javascript's role in web development, including event handling, dom manipulation, and dynamic content loading without page refresh, while also explaining how to style headings using javascript to create user-friendly clickable links.", 'chapters': [{'end': 990.213, 'start': 944.901, 'title': 'Styling headings with javascript', 'summary': 'Explains how to style headings using javascript to create clickable links, ensuring a user-friendly experience, with the headings turning blue and displaying a hand icon when hovered over.', 'duration': 45.312, 'highlights': ['The chapter details the process of using JavaScript to style headings and make them clickable, ensuring a user-friendly experience, with the headings turning blue and displaying a hand icon when hovered over.', "The JavaScript code adds a class 'fact question' to the H4 elements, causing them to appear as clickable links when the file is running and JavaScript is enabled.", "The new line of JavaScript code adds a class 'fact question' to the H4 elements, which results in them turning blue and displaying a hand icon when hovered over, improving the user experience."]}, {'end': 1263.621, 'start': 991.173, 'title': 'Javascript big picture & dynamic content loading', 'summary': 'Covers the big picture of javascript, including its primary uses such as event handling, dom traversal, manipulation, and dynamic content loading without page refresh. it also emphasizes the role of javascript in web development and encourages further learning and creation.', 'duration': 272.448, 'highlights': ["JavaScript's primary uses include event handling, DOM traversal, manipulation, and dynamic content loading without page refresh. The chapter emphasizes the four primary uses of JavaScript, including event handling, DOM traversal, manipulation, and dynamic content loading without page refresh, providing a comprehensive understanding of JavaScript's capabilities.", "JavaScript is essential in web development, controlling the behavior while HTML is for content and CSS for styling and appearance. The role of JavaScript in web development is highlighted, emphasizing its control over behavior, while HTML is for content and CSS for styling and appearance, providing a clear understanding of JavaScript's significance in web development.", 'Encouragement for further learning and creativity in JavaScript, expressing its limitless potential in web development. The chapter encourages further learning and creativity in JavaScript, expressing its limitless potential in web development, motivating learners to explore and create more using JavaScript.']}], 'duration': 318.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/1vMFpT0h-WI/pics/1vMFpT0h-WI944901.jpg', 'highlights': ["The chapter emphasizes the four primary uses of JavaScript, including event handling, DOM traversal, manipulation, and dynamic content loading without page refresh, providing a comprehensive understanding of JavaScript's capabilities.", "The role of JavaScript in web development is highlighted, emphasizing its control over behavior, while HTML is for content and CSS for styling and appearance, providing a clear understanding of JavaScript's significance in web development.", 'The chapter encourages further learning and creativity in JavaScript, expressing its limitless potential in web development, motivating learners to explore and create more using JavaScript.', "The new line of JavaScript code adds a class 'fact question' to the H4 elements, which results in them turning blue and displaying a hand icon when hovered over, improving the user experience.", "The JavaScript code adds a class 'fact question' to the H4 elements, causing them to appear as clickable links when the file is running and JavaScript is enabled.", 'The chapter details the process of using JavaScript to style headings and make them clickable, ensuring a user-friendly experience, with the headings turning blue and displaying a hand icon when hovered over.']}], 'highlights': ["JavaScript is the 'glue' that holds everything together and enables the manipulation of content and styles, adding interactivity to web pages and applications.", 'JavaScript is used for event handling, manipulating the Document Object Model (DOM), making asynchronous requests, and adding animations to web pages, enhancing user experience and interactivity.', 'The chapter explains the importance of JavaScript in front-end web development, addressing the need for behavior enhancement beyond content and style, thus completing the web development process.', "The chapter emphasizes the four primary uses of JavaScript, including event handling, DOM traversal, manipulation, and dynamic content loading without page refresh, providing a comprehensive understanding of JavaScript's capabilities.", "The role of JavaScript in web development is highlighted, emphasizing its control over behavior, while HTML is for content and CSS for styling and appearance, providing a clear understanding of JavaScript's significance in web development.", 'The chapter encourages further learning and creativity in JavaScript, expressing its limitless potential in web development, motivating learners to explore and create more using JavaScript.']}