title
JavaScript in Half an Hour (Without jQuery!)

description
Join my premium 2024 bootcamp here https://learnwebcode.teachable.com/p/brads-web-developer-bootcamp?coupon_code=YOUTUBEWELCOME This is how to get started with JavaScript if you're a beginner! Follow me for updates on new videos or projects: Instagram: https://www.instagram.com/javaschiff/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/ Twitch: https://www.twitch.tv/learnwebcode

detail
{'title': 'JavaScript in Half an Hour (Without jQuery!)', 'heatmap': [{'end': 615.445, 'start': 575.274, 'weight': 0.818}, {'end': 901.172, 'start': 860.746, 'weight': 0.742}, {'end': 1092.533, 'start': 1069.299, 'weight': 1}], 'summary': 'Learn javascript basics and page manipulation, including updating headline text, collection manipulation, using functions for click detection and dom manipulation, list item highlighting, and event delegation for efficient handling of dynamically generated elements.', 'chapters': [{'end': 174.397, 'segs': [{'end': 31.822, 'src': 'embed', 'start': 0.05, 'weight': 2, 'content': [{'end': 0.599, 'text': 'Some greens.', 'start': 0.05, 'duration': 0.549}, {'end': 11.855, 'text': 'Hello everyone.', 'start': 11.015, 'duration': 0.84}, {'end': 15.897, 'text': 'In this video we are going to learn the very basics of JavaScript.', 'start': 12.515, 'duration': 3.382}, {'end': 23.159, 'text': "There's no prerequisite knowledge required other than maybe an ounce of HTML and an ounce or two of CSS.", 'start': 16.397, 'duration': 6.762}, {'end': 29.841, 'text': "But anyways let's get started by taking a look at a demo of the finished product that we will be building together.", 'start': 23.999, 'duration': 5.842}, {'end': 31.822, 'text': "So here's my example page.", 'start': 30.481, 'duration': 1.341}], 'summary': 'Introduction to javascript basics with minimal prerequisites.', 'duration': 31.772, 'max_score': 0.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg50.jpg'}, {'end': 79.171, 'src': 'embed', 'start': 54.85, 'weight': 0, 'content': [{'end': 60.714, 'text': "Let's get it another one another one another one and another one.", 'start': 54.85, 'duration': 5.864}, {'end': 68.087, 'text': 'And as you might expect we can then click on any of those dynamically generated items and they behave the same way.', 'start': 61.555, 'duration': 6.532}, {'end': 71.949, 'text': 'This example project may not seem very impressive,', 'start': 68.608, 'duration': 3.341}, {'end': 79.171, 'text': 'but it should give us the basic building blocks of front end JavaScript and then you can recycle those building blocks to create anything you want.', 'start': 71.949, 'duration': 7.222}], 'summary': 'Demonstrating dynamic generation of items in a basic front-end javascript project.', 'duration': 24.321, 'max_score': 54.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg54850.jpg'}, {'end': 137.886, 'src': 'embed', 'start': 108.63, 'weight': 1, 'content': [{'end': 115.578, 'text': "Now before I even jump to my text editor let's begin by writing a bit of JavaScript directly in our web browser.", 'start': 108.63, 'duration': 6.948}, {'end': 120.904, 'text': 'So to do that we can just right click anywhere on the page and click inspect.', 'start': 116.198, 'duration': 4.706}, {'end': 127.331, 'text': 'That will open your developer tools and then I want you to click on the console tab.', 'start': 122.545, 'duration': 4.786}, {'end': 137.886, 'text': "Now I'm using Google Chrome for my web browser but Firefox and pretty much any other modern browser will have the same developer tool features.", 'start': 129.281, 'duration': 8.605}], 'summary': 'Learn to write javascript in web browser developer tools.', 'duration': 29.256, 'max_score': 108.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg108630.jpg'}], 'start': 0.05, 'title': 'Basic javascript demo', 'summary': "Covers building a basic javascript project using html and css, creating and manipulating a list with dynamic behaviors, and testing javascript directly in the web browser's console.", 'chapters': [{'end': 174.397, 'start': 0.05, 'title': 'Basic javascript demo', 'summary': "Covers building a basic javascript project using html and css, creating and manipulating a list with dynamic behaviors, and testing javascript directly in the web browser's console.", 'duration': 174.347, 'highlights': ['Creating and manipulating a list with dynamic behaviors', "Testing JavaScript directly in the web browser's console", 'Basic JavaScript project using HTML and CSS']}], 'duration': 174.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg50.jpg', 'highlights': ['Creating and manipulating a list with dynamic behaviors', "Testing JavaScript directly in the web browser's console", 'Basic JavaScript project using HTML and CSS']}, {'end': 498.587, 'segs': [{'end': 201.852, 'src': 'embed', 'start': 175.217, 'weight': 0, 'content': [{'end': 181.838, 'text': 'So the Web browser itself has a bunch of features and abilities and we can access all of them with JavaScript.', 'start': 175.217, 'duration': 6.621}, {'end': 186.039, 'text': 'For example the Web browser has an object named window.', 'start': 182.418, 'duration': 3.621}, {'end': 192.85, 'text': 'And the window object basically contains everything that the Web browser is capable of doing.', 'start': 187.569, 'duration': 5.281}, {'end': 199.372, 'text': 'So if you think of Russian stocking dolls the window object is like the largest outermost doll.', 'start': 193.29, 'duration': 6.082}, {'end': 201.852, 'text': 'Everything is contained within it.', 'start': 199.872, 'duration': 1.98}], 'summary': 'Web browser features and abilities accessed via javascript, e.g., window object contains browser capabilities.', 'duration': 26.635, 'max_score': 175.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg175217.jpg'}, {'end': 271.756, 'src': 'embed', 'start': 228.542, 'weight': 1, 'content': [{'end': 233.785, 'text': "Now the document object contains all of the info about the current Web page that we're viewing.", 'start': 228.542, 'duration': 5.243}, {'end': 239.889, 'text': "It's a programmatic model of the page so we can click on this to inspect it or analyze it.", 'start': 234.266, 'duration': 5.623}, {'end': 243.731, 'text': 'And here we see the HTML skeleton of the page.', 'start': 240.829, 'duration': 2.902}, {'end': 250.945, 'text': 'and manipulating this document object with JavaScript is how we make our pages come to life.', 'start': 245.362, 'duration': 5.583}, {'end': 256.608, 'text': 'So, for example, notice the title of this web page in the tab for this page.', 'start': 251.585, 'duration': 5.023}, {'end': 261.11, 'text': 'we see that the title is JavaScript and we can double check that in my text editor.', 'start': 256.608, 'duration': 4.502}, {'end': 263.251, 'text': 'Here we see the title that I have specified.', 'start': 261.25, 'duration': 2.001}, {'end': 271.756, 'text': 'Now we can programmatically access that title with JavaScript by typing document dot title.', 'start': 263.752, 'duration': 8.004}], 'summary': 'The document object contains info about the web page, allowing for programmatic manipulation with javascript.', 'duration': 43.214, 'max_score': 228.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg228542.jpg'}, {'end': 378.469, 'src': 'embed', 'start': 347.212, 'weight': 4, 'content': [{'end': 352.055, 'text': "OK So now that we know how to select an element with JavaScript let's go one step further.", 'start': 347.212, 'duration': 4.843}, {'end': 355.537, 'text': "And once an element is selected let's do something with it.", 'start': 352.255, 'duration': 3.282}, {'end': 363.542, 'text': "So let's select the element again document get element by ID our headline.", 'start': 356.198, 'duration': 7.344}, {'end': 369.152, 'text': "and then we can simply adjust that element's inner HTML property.", 'start': 364.443, 'duration': 4.709}, {'end': 371.002, 'text': 'So we can set it to equal.', 'start': 369.841, 'duration': 1.161}, {'end': 373.764, 'text': 'This is a test.', 'start': 371.643, 'duration': 2.121}, {'end': 378.469, 'text': 'And when I hit enter we see that the headline is updated.', 'start': 374.865, 'duration': 3.604}], 'summary': "Using javascript, the element with id 'headline' is updated to display 'this is a test'.", 'duration': 31.257, 'max_score': 347.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg347212.jpg'}, {'end': 473.41, 'src': 'embed', 'start': 450.816, 'weight': 5, 'content': [{'end': 459.802, 'text': 'I think now is a good time to move out of the console and into our text editor where we can actually create and save a JavaScript file.', 'start': 450.816, 'duration': 8.986}, {'end': 464.105, 'text': "So within this example folder that I'm working in I'll create a new folder.", 'start': 460.342, 'duration': 3.763}, {'end': 465.386, 'text': "You don't need to do this.", 'start': 464.445, 'duration': 0.941}, {'end': 469.068, 'text': "I'm doing it just to stay organized but I'll name this new folder J.S.", 'start': 465.446, 'duration': 3.622}, {'end': 469.889, 'text': 'for JavaScript.', 'start': 469.128, 'duration': 0.761}, {'end': 473.41, 'text': "And then within that new folder, I'll create a new file.", 'start': 470.569, 'duration': 2.841}], 'summary': 'Moving to text editor to create and save a javascript file.', 'duration': 22.594, 'max_score': 450.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg450816.jpg'}], 'start': 175.217, 'title': 'Javascript and page manipulation', 'summary': "Explores the capabilities of the window and document objects in a web browser, manipulated with javascript to bring pages to life. it also demonstrates how to access and manipulate web page elements, providing a general understanding of javascript's ability to manipulate the page.", 'chapters': [{'end': 250.945, 'start': 175.217, 'title': 'Javascript and the document object', 'summary': 'Explores the capabilities of the window object in a web browser and its contained object, document, which holds information about the current web page and is manipulated with javascript to bring pages to life.', 'duration': 75.728, 'highlights': ['Accessing the window object in a web browser allows us to utilize its features and abilities with JavaScript.', 'The document object, residing within the window, contains all the information about the current web page, serving as a programmatic model.', 'Manipulating the document object with JavaScript is crucial for bringing web pages to life, allowing for interaction and dynamic content.']}, {'end': 498.587, 'start': 251.585, 'title': 'Manipulating web page elements with javascript', 'summary': "Demonstrates how to programmatically access and manipulate web page elements using javascript, including changing the title and content of an element, as well as creating and saving a javascript file, providing a general understanding of javascript's ability to manipulate the page.", 'duration': 247.002, 'highlights': ["The chapter demonstrates how to programmatically access and manipulate the title of a web page using JavaScript, including changing the title of the page to 'testing one two three' and accessing the title with the 'document.title' method.", 'It explains how to select and manipulate an H1 headline element using JavaScript, including giving the element a unique ID, selecting it with JavaScript, and adjusting its inner HTML property, providing a detailed tutorial on manipulating web page elements.', "The chapter also shows how to create and save a JavaScript file, including creating a new folder named 'J.S.' and a new file named 'main.js', and linking the JavaScript file to the HTML file using the script tag, demonstrating how to move from the console to a text editor to work with JavaScript."]}], 'duration': 323.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg175217.jpg', 'highlights': ['Accessing the window object in a web browser allows us to utilize its features and abilities with JavaScript.', 'The document object, residing within the window, contains all the information about the current web page, serving as a programmatic model.', 'Manipulating the document object with JavaScript is crucial for bringing web pages to life, allowing for interaction and dynamic content.', "The chapter demonstrates how to programmatically access and manipulate the title of a web page using JavaScript, including changing the title of the page to 'testing one two three' and accessing the title with the 'document.title' method.", 'It explains how to select and manipulate an H1 headline element using JavaScript, including giving the element a unique ID, selecting it with JavaScript, and adjusting its inner HTML property, providing a detailed tutorial on manipulating web page elements.', "The chapter also shows how to create and save a JavaScript file, including creating a new folder named 'J.S.' and a new file named 'main.js', and linking the JavaScript file to the HTML file using the script tag, demonstrating how to move from the console to a text editor to work with JavaScript."]}, {'end': 957.099, 'segs': [{'end': 522.183, 'src': 'embed', 'start': 498.667, 'weight': 2, 'content': [{'end': 505.211, 'text': "Let's begin by writing code that will watch for any of these list items being clicked on and, when they are clicked on,", 'start': 498.667, 'duration': 6.544}, {'end': 509.794, 'text': 'will update this headline text to use the text from the item that got clicked on.', 'start': 505.211, 'duration': 4.583}, {'end': 514.758, 'text': "So to do that we'll need to begin by selecting all of the list items.", 'start': 510.295, 'duration': 4.463}, {'end': 522.183, 'text': "So in our JavaScript file why don't we create a variable that will save the selection of all of the list items.", 'start': 515.558, 'duration': 6.625}], 'summary': 'Code will update headline text when list item is clicked.', 'duration': 23.516, 'max_score': 498.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg498667.jpg'}, {'end': 587.441, 'src': 'embed', 'start': 553.046, 'weight': 3, 'content': [{'end': 555.626, 'text': 'And I think we can find a cleaner way of handling this.', 'start': 553.046, 'duration': 2.58}, {'end': 560.807, 'text': "So instead why don't we just give the parent unordered list item a unique ID.", 'start': 556.067, 'duration': 4.74}, {'end': 571.209, 'text': "Let's go with an ID of our list and then back in our JavaScript we can begin by selecting the unordered list parent element.", 'start': 561.528, 'duration': 9.681}, {'end': 573.39, 'text': 'So get element by ID.', 'start': 571.369, 'duration': 2.021}, {'end': 587.441, 'text': 'our list and then we can chain on another method that will look within this element and we can say get elements by tag name and look for any L.I.', 'start': 575.274, 'duration': 12.167}], 'summary': 'Propose using a unique id for the parent unordered list item and accessing it through getelementbyid and getelementsbytagname in javascript.', 'duration': 34.395, 'max_score': 553.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg553046.jpg'}, {'end': 628.457, 'src': 'heatmap', 'start': 575.274, 'weight': 1, 'content': [{'end': 587.441, 'text': 'our list and then we can chain on another method that will look within this element and we can say get elements by tag name and look for any L.I.', 'start': 575.274, 'duration': 12.167}, {'end': 588.542, 'text': 'list item elements.', 'start': 587.541, 'duration': 1.001}, {'end': 595.262, 'text': 'OK so now we have a variable that is a collection of all of our list item elements.', 'start': 590.296, 'duration': 4.966}, {'end': 599.848, 'text': 'So this single variable contains all five of these elements.', 'start': 595.883, 'duration': 3.965}, {'end': 604.995, 'text': 'So in the console we can type our variable name list items.', 'start': 600.509, 'duration': 4.486}, {'end': 610.5, 'text': "And we can see that it's an array like object or a collection of elements,", 'start': 605.976, 'duration': 4.524}, {'end': 615.445, 'text': 'and we can access individual items in this collection by typing the variable name.', 'start': 610.5, 'duration': 4.945}, {'end': 619.769, 'text': 'So list items and then open up a pair of square brackets.', 'start': 615.765, 'duration': 4.004}, {'end': 626.495, 'text': 'And if we want to access the first item in the collection we enter a zero because arrays are zero based.', 'start': 620.289, 'duration': 6.206}, {'end': 628.457, 'text': 'So we say zero instead of one.', 'start': 626.955, 'duration': 1.502}], 'summary': 'Access and manipulate a collection of list item elements in javascript.', 'duration': 22.481, 'max_score': 575.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg575274.jpg'}, {'end': 736.522, 'src': 'embed', 'start': 706.448, 'weight': 0, 'content': [{'end': 708.749, 'text': "It's too much typing and it's really repetitive.", 'start': 706.448, 'duration': 2.301}, {'end': 713.571, 'text': 'Instead we can have JavaScript loop through our collection automatically.', 'start': 709.229, 'duration': 4.342}, {'end': 716.174, 'text': 'and do something for each item in the collection.', 'start': 714.051, 'duration': 2.123}, {'end': 720.039, 'text': 'So to set that up we can use something called a for loop.', 'start': 716.494, 'duration': 3.545}, {'end': 724.365, 'text': "So let's jump back to our text editor and in our JavaScript file.", 'start': 720.66, 'duration': 3.705}, {'end': 726.407, 'text': "Let's write our first for loop.", 'start': 724.425, 'duration': 1.982}, {'end': 729.231, 'text': "So on a new line let's say for.", 'start': 727.188, 'duration': 2.043}, {'end': 731.995, 'text': 'and then open up a pair of parentheses.', 'start': 729.952, 'duration': 2.043}, {'end': 736.522, 'text': 'We will write a bit of code within these parentheses in just a moment,', 'start': 732.776, 'duration': 3.746}], 'summary': 'Using javascript for loops to automate repetitive tasks in collections.', 'duration': 30.074, 'max_score': 706.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg706448.jpg'}, {'end': 918.968, 'src': 'heatmap', 'start': 860.746, 'weight': 5, 'content': [{'end': 863.708, 'text': 'So first it would be zero and then one two three four.', 'start': 860.746, 'duration': 2.962}, {'end': 872.695, 'text': 'Well towards the end of our parentheses here we just say I plus plus which will increment the I variable by one each time the loop runs.', 'start': 864.329, 'duration': 8.366}, {'end': 880.02, 'text': "So let's go ahead and save this and refresh in the browser and we see that our for loop worked perfectly.", 'start': 873.275, 'duration': 6.745}, {'end': 881.515, 'text': 'This is great.', 'start': 880.834, 'duration': 0.681}, {'end': 884.077, 'text': 'But remember that this was just an example.', 'start': 881.775, 'duration': 2.302}, {'end': 887.7, 'text': "We didn't actually want to change the text to hello world.", 'start': 884.537, 'duration': 3.163}, {'end': 893.425, 'text': 'What we really wanted to do was have each item be on the lookout for being clicked on.', 'start': 888.44, 'duration': 4.985}, {'end': 895.426, 'text': "So let's make that happen now.", 'start': 894.105, 'duration': 1.321}, {'end': 896.907, 'text': 'Back in our text editor.', 'start': 895.726, 'duration': 1.181}, {'end': 901.172, 'text': "So we don't want to edit the HTML for each item in our collection.", 'start': 897.668, 'duration': 3.504}, {'end': 908.76, 'text': 'So this code will select each element in our collection and to tell the element to be on the lookout for incoming clicks.', 'start': 901.792, 'duration': 6.968}, {'end': 913.745, 'text': 'We can use a method named add event listener.', 'start': 909.36, 'duration': 4.385}, {'end': 918.968, 'text': 'Now within these parentheses this method takes two arguments.', 'start': 915.745, 'duration': 3.223}], 'summary': 'Code example demonstrates for loop, incrementing by 1 and adding event listeners.', 'duration': 58.222, 'max_score': 860.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg860746.jpg'}], 'start': 498.667, 'title': 'Updating headline text and javascript collection manipulation', 'summary': 'Explains how to update headline text with the clicked list item and manipulating a collection of elements in javascript, including accessing individual items, using a for loop to iterate through the collection, and adding event listeners to the elements to respond to user clicks.', 'chapters': [{'end': 573.39, 'start': 498.667, 'title': 'Updating headline text with clicked list item', 'summary': 'Explains how to update headline text with the clicked list item by selecting all list items, creating a variable to save the selection, and selecting the unordered list parent element in javascript.', 'duration': 74.723, 'highlights': ['Selecting all list items by creating a variable named list items to save the selection.', 'Exploring the method to select multiple elements by class name and proposing a cleaner way of handling the selection by giving the parent unordered list item a unique ID.', 'Selecting the unordered list parent element by using the get element by ID method.']}, {'end': 957.099, 'start': 575.274, 'title': 'Javascript collection manipulation', 'summary': 'Covers manipulating a collection of elements in javascript, including accessing individual items, using a for loop to iterate through the collection, and adding event listeners to the elements to respond to user clicks.', 'duration': 381.825, 'highlights': ['Using a for loop to iterate through the collection', 'Accessing individual items in the collection', 'Adding event listeners to elements']}], 'duration': 458.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg498667.jpg', 'highlights': ['Using a for loop to iterate through the collection', 'Accessing individual items in the collection', 'Selecting all list items by creating a variable named list items to save the selection', 'Selecting the unordered list parent element by using the get element by ID method', 'Exploring the method to select multiple elements by class name and proposing a cleaner way of handling the selection by giving the parent unordered list item a unique ID', 'Adding event listeners to elements']}, {'end': 1344.112, 'segs': [{'end': 980.519, 'src': 'embed', 'start': 957.32, 'weight': 3, 'content': [{'end': 966.527, 'text': 'So activate item pair parentheses and then a pair of curly quotes and anything within these curly quotes is the body of the function.', 'start': 957.32, 'duration': 9.207}, {'end': 970.009, 'text': "So it's what will actually happen when this function runs.", 'start': 966.947, 'duration': 3.062}, {'end': 977.355, 'text': "So just as a test let's simply alert out a pop up message that says click Detected.", 'start': 970.53, 'duration': 6.825}, {'end': 980.519, 'text': "So let's check this out in the browser.", 'start': 978.977, 'duration': 1.542}], 'summary': "Using pair of parentheses and curly quotes to define function body; testing alert popup message 'click detected'.", 'duration': 23.199, 'max_score': 957.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg957320.jpg'}, {'end': 1092.533, 'src': 'heatmap', 'start': 1069.299, 'weight': 1, 'content': [{'end': 1077.185, 'text': 'and JavaScript automatically populates the this keyword with a reference that points towards the specific element that got clicked on.', 'start': 1069.299, 'duration': 7.886}, {'end': 1081.228, 'text': 'And then we just want to find its inner HTML property.', 'start': 1077.665, 'duration': 3.563}, {'end': 1082.009, 'text': 'All right.', 'start': 1081.728, 'duration': 0.281}, {'end': 1084.451, 'text': "Let's save this and test it out in the browser.", 'start': 1082.049, 'duration': 2.402}, {'end': 1088.272, 'text': 'So if I click on the second item, perfect.', 'start': 1085.111, 'duration': 3.161}, {'end': 1092.533, 'text': 'And if I click on any of the others, it works just as expected.', 'start': 1088.972, 'duration': 3.561}], 'summary': "Javascript populates 'this' with clicked element reference to find inner html property.", 'duration': 23.234, 'max_score': 1069.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1069299.jpg'}, {'end': 1230.897, 'src': 'embed', 'start': 1154.439, 'weight': 0, 'content': [{'end': 1158.14, 'text': "Remember the first is the event that we're looking for or listening for.", 'start': 1154.439, 'duration': 3.701}, {'end': 1160.001, 'text': "So in this case that's a click event.", 'start': 1158.3, 'duration': 1.701}, {'end': 1164.842, 'text': 'And then the second argument is the name of the function that we want to run in response.', 'start': 1160.601, 'duration': 4.241}, {'end': 1167.884, 'text': "So in just a second here, we'll create a new function.", 'start': 1165.362, 'duration': 2.522}, {'end': 1171.386, 'text': "Let's name it create new item.", 'start': 1168.364, 'duration': 3.022}, {'end': 1172.666, 'text': 'All right.', 'start': 1172.326, 'duration': 0.34}, {'end': 1176.288, 'text': "And now let's drop down to a new line and actually create this function.", 'start': 1172.746, 'duration': 3.542}, {'end': 1180.671, 'text': 'So function create new item.', 'start': 1177.269, 'duration': 3.402}, {'end': 1184.46, 'text': 'And what do we want this function to actually do.', 'start': 1182.1, 'duration': 2.36}, {'end': 1189.241, 'text': 'Well we just want to add new html to this unordered list.', 'start': 1184.981, 'duration': 4.26}, {'end': 1195.362, 'text': 'So if we want to manipulate this unordered list we should probably create a variable that selects it.', 'start': 1190.041, 'duration': 5.321}, {'end': 1203.524, 'text': "So before we write this function let's go back up to the top of this file and let's create a variable and name it our list.", 'start': 1195.962, 'duration': 7.562}, {'end': 1210.245, 'text': 'And if we jump to our html we will remember that we gave our unordered list an ID of our list.', 'start': 1204.344, 'duration': 5.901}, {'end': 1212.586, 'text': "So let's just select that.", 'start': 1211.425, 'duration': 1.161}, {'end': 1217.589, 'text': 'So document get element by ID our list.', 'start': 1212.746, 'duration': 4.843}, {'end': 1218.769, 'text': 'All right.', 'start': 1218.389, 'duration': 0.38}, {'end': 1224.033, 'text': "So with this in place now let's actually build out the function that runs when we click on the button.", 'start': 1218.83, 'duration': 5.203}, {'end': 1230.897, 'text': 'So we want to begin with the our list element and we want to manipulate its inner HTML property.', 'start': 1224.493, 'duration': 6.404}], 'summary': 'Creating a function to add new html to an unordered list element.', 'duration': 76.458, 'max_score': 1154.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1154439.jpg'}], 'start': 957.32, 'title': 'Javascript functions, click detection, and dom manipulation', 'summary': 'Covers creating javascript functions for click detection, resulting in successful click detection on list items and demonstrating dom manipulation for dynamic content updates and addition of new list items.', 'chapters': [{'end': 1000.84, 'start': 957.32, 'title': 'Javascript function and click detection', 'summary': "Explains the process of creating a javascript function to detect and respond to clicks, demonstrating successful click detection on list items, resulting in a 'click detected' pop-up message.", 'duration': 43.52, 'highlights': ['The function body is enclosed within curly quotes and activates a pop-up message upon click, successfully detecting and responding to clicks on list items.', 'The chapter demonstrates the successful detection of clicks on list items, with the pop-up message appearing upon each click.']}, {'end': 1344.112, 'start': 1001.201, 'title': 'Javascript dom manipulation', 'summary': 'Demonstrates javascript dom manipulation by selecting elements, adjusting inner html, and creating new items in response to user interactions, achieving dynamic content updates and addition of new list items.', 'duration': 342.911, 'highlights': ["JavaScript automatically populates the 'this' keyword with a reference that points towards the specific element that got clicked on, simplifying the process of finding and manipulating its inner HTML property.", "Creating a new function 'create new item' that adds new HTML content to the unordered list, achieving the dynamic addition of new list items in response to button clicks.", "Utilizing the 'add event listener' method to detect incoming clicks on the button element, triggering the 'create new item' function and enabling the dynamic addition of new list items.", 'Selecting elements and manipulating their inner HTML property to achieve dynamic content updates and user interaction responses.']}], 'duration': 386.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg957320.jpg', 'highlights': ["Creating a new function 'create new item' that adds new HTML content to the unordered list, achieving the dynamic addition of new list items in response to button clicks.", "Utilizing the 'add event listener' method to detect incoming clicks on the button element, triggering the 'create new item' function and enabling the dynamic addition of new list items.", 'Selecting elements and manipulating their inner HTML property to achieve dynamic content updates and user interaction responses.', 'The function body is enclosed within curly quotes and activates a pop-up message upon click, successfully detecting and responding to clicks on list items.']}, {'end': 1909.43, 'segs': [{'end': 1367.172, 'src': 'embed', 'start': 1344.112, 'weight': 2, 'content': [{'end': 1351.637, 'text': "it looks like we're missing a space in between new and the number, so let's just add a space here.", 'start': 1344.112, 'duration': 7.525}, {'end': 1353.443, 'text': 'perfect, All right.', 'start': 1351.637, 'duration': 1.806}, {'end': 1361.369, 'text': "And finally let's make it so when we click on a list item it becomes highlighted with the yellow or beige background color we saw in the demo.", 'start': 1353.563, 'duration': 7.806}, {'end': 1367.172, 'text': 'So back in our JavaScript remember this is the function that runs when a list item gets clicked on.', 'start': 1361.769, 'duration': 5.403}], 'summary': 'Adding a space, making list items highlight on click in javascript function.', 'duration': 23.06, 'max_score': 1344.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1344112.jpg'}, {'end': 1449.044, 'src': 'embed', 'start': 1414.09, 'weight': 0, 'content': [{'end': 1419.834, 'text': 'So, back in our JavaScript, before we add the class of active to the element that just got clicked on,', 'start': 1414.09, 'duration': 5.744}, {'end': 1424.417, 'text': 'we should first remove the class of active from all of its sibling elements.', 'start': 1419.834, 'duration': 4.583}, {'end': 1429.638, 'text': 'Now we already have a variable that is a collection of all of the list item elements.', 'start': 1425.097, 'duration': 4.541}, {'end': 1437.861, 'text': 'So if we want to do something to each element in that collection if we want to remove the class of active from them we can use a for loop.', 'start': 1430.219, 'duration': 7.642}, {'end': 1442.282, 'text': "Now we've already written a for loop that iterates over the list items collection.", 'start': 1438.261, 'duration': 4.021}, {'end': 1449.044, 'text': "So let's just copy and paste this for loop and then let's paste our clipboard on this new line.", 'start': 1442.742, 'duration': 6.302}], 'summary': "In javascript, before adding class 'active' to clicked element, remove 'active' from sibling elements using a for loop.", 'duration': 34.954, 'max_score': 1414.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1414090.jpg'}, {'end': 1545.857, 'src': 'embed', 'start': 1521.491, 'weight': 3, 'content': [{'end': 1530.213, 'text': 'Now this act of event handling for hypothetical elements that might exist in the future is commonly referred to as event delegation.', 'start': 1521.491, 'duration': 8.722}, {'end': 1536.155, 'text': 'There are many different ways to handle this situation but let me show you how I would do things.', 'start': 1530.733, 'duration': 5.422}, {'end': 1543.616, 'text': 'So, instead of looping through our list items collection and adding an event listener for each and every item,', 'start': 1536.795, 'duration': 6.821}, {'end': 1545.857, 'text': "let's actually go ahead and delete this for loop.", 'start': 1543.616, 'duration': 2.241}], 'summary': 'Event delegation is a common approach for handling future elements. instead of looping through items to add event listeners, the for loop is eliminated.', 'duration': 24.366, 'max_score': 1521.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1521491.jpg'}, {'end': 1802.429, 'src': 'embed', 'start': 1772.545, 'weight': 4, 'content': [{'end': 1775.928, 'text': "Perfect And that's going to bring this lesson to a close.", 'start': 1772.545, 'duration': 3.383}, {'end': 1781.032, 'text': 'But before I go I want to share a really quick tip for selecting elements in JavaScript.', 'start': 1776.328, 'duration': 4.704}, {'end': 1792.961, 'text': "So if your website's audience primarily uses modern web browsers instead of using these cumbersome get element by ID and get elements by tag name,", 'start': 1781.532, 'duration': 11.429}, {'end': 1798.306, 'text': 'modern browsers offer methods named query selector and query selector all.', 'start': 1792.961, 'duration': 5.345}, {'end': 1802.429, 'text': 'So, for example, if we wanted to select the element that has an I.D.', 'start': 1798.826, 'duration': 3.603}], 'summary': 'Use queryselector and queryselectorall for modern web browsers in javascript.', 'duration': 29.884, 'max_score': 1772.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1772545.jpg'}, {'end': 1893.713, 'src': 'embed', 'start': 1868.296, 'weight': 5, 'content': [{'end': 1873.521, 'text': 'If your audience primarily uses modern web browsers I would go ahead and start using these today.', 'start': 1868.296, 'duration': 5.225}, {'end': 1874.581, 'text': 'All right.', 'start': 1874.241, 'duration': 0.34}, {'end': 1878.824, 'text': "That's going to bring this lesson to a close in our next JavaScript video.", 'start': 1874.641, 'duration': 4.183}, {'end': 1881.666, 'text': "We'll learn about object oriented JavaScript.", 'start': 1878.864, 'duration': 2.802}, {'end': 1887.829, 'text': "We'll learn more about what an object really is, how to create our own objects and blueprints for objects.", 'start': 1882.186, 'duration': 5.643}, {'end': 1891.872, 'text': "And we'll learn why object oriented programing is so useful in the first place.", 'start': 1888.39, 'duration': 3.482}, {'end': 1893.713, 'text': 'Thank you so much for watching.', 'start': 1892.492, 'duration': 1.221}], 'summary': 'Start using modern web browsers today for improved user experience.', 'duration': 25.417, 'max_score': 1868.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1868296.jpg'}], 'start': 1344.112, 'title': 'Javascript list item highlighting and event delegation', 'summary': 'Covers adding functionality to highlight a list item on click, removing the highlight from other items, and using javascript methods like classlist and for loop. it also discusses event delegation in javascript, demonstrating how to handle dynamically generated elements efficiently using event listeners and providing a quick tip on using query selector and query selector all.', 'chapters': [{'end': 1479.151, 'start': 1344.112, 'title': 'Javascript list item highlighting', 'summary': 'Covers adding functionality to highlight a list item on click, removing the highlight from other items, and using javascript methods like classlist and for loop to achieve the functionality.', 'duration': 135.039, 'highlights': ['When clicking on a list item, it becomes highlighted with a yellow or beige background color.', "Removing the 'active' class from sibling elements before adding it to the clicked element.", "Utilizing JavaScript's 'classList' and 'for' loop to manipulate CSS classes and elements."]}, {'end': 1909.43, 'start': 1479.411, 'title': 'Event delegation in javascript', 'summary': 'Discusses event delegation in javascript, demonstrating how to handle dynamically generated elements efficiently using event listeners and providing a quick tip on using query selector and query selector all, culminating with a preview of the next javascript video on object-oriented programming.', 'duration': 430.019, 'highlights': ['The chapter discusses event delegation in JavaScript, demonstrating how to handle dynamically generated elements efficiently using event listeners.', 'A quick tip is provided on using query selector and query selector all for selecting elements in modern web browsers.', 'A preview is given for the next JavaScript video on object-oriented programming, highlighting the topics to be covered.']}], 'duration': 565.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zPHerhks2Vg/pics/zPHerhks2Vg1344112.jpg', 'highlights': ["Utilizing JavaScript's 'classList' and 'for' loop to manipulate CSS classes and elements.", "Removing the 'active' class from sibling elements before adding it to the clicked element.", 'When clicking on a list item, it becomes highlighted with a yellow or beige background color.', 'The chapter discusses event delegation in JavaScript, demonstrating how to handle dynamically generated elements efficiently using event listeners.', 'A quick tip is provided on using query selector and query selector all for selecting elements in modern web browsers.', 'A preview is given for the next JavaScript video on object-oriented programming, highlighting the topics to be covered.']}], 'highlights': ['Creating and manipulating a list with dynamic behaviors', 'Using a for loop to iterate through the collection', 'Accessing the window object in a web browser allows us to utilize its features and abilities with JavaScript.', "Creating a new function 'create new item' that adds new HTML content to the unordered list, achieving the dynamic addition of new list items in response to button clicks.", "Utilizing JavaScript's 'classList' and 'for' loop to manipulate CSS classes and elements."]}