title
JavaScript Crash Course For Beginners

description
In this crash course we will go over the fundamentals of JavaScript including more modern syntax like classes, arrow functions, etc. This is the starting point on my channel for learning JS. Code including html/css: https://embed.plnkr.co/plunk/8ujYdL1BxZftGoS4Cf14 21 Hour JavaScript Course: https://www.udemy.com/modern-javascript-from-the-beginning/?couponCode=TRAVERSYMEDIA Suggested Videos To Watch Next: DOM Crash Course - https://www.youtube.com/watch?v=0ik6X4DJKCc Fetch API - https://www.youtube.com/watch?v=Oive66jrwBs JS Playlist With Projects - https://www.youtube.com/watch?v=vEROU2XtPR8&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX OOP Crash Course - https://www.youtube.com/watch?v=vDJpGenyHaA JSON Crash Course - https://www.youtube.com/watch?v=wI1CWzNtE-M 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'JavaScript Crash Course For Beginners', 'heatmap': [{'end': 548.579, 'start': 420.548, 'weight': 0.718}, {'end': 904.885, 'start': 840.287, 'weight': 0.958}, {'end': 1267.488, 'start': 1204.56, 'weight': 0.746}, {'end': 2660.522, 'start': 2528.818, 'weight': 1}], 'summary': 'This javascript crash course for beginners provides an updated, modern syntax and fundamental structure, introducing javascript as a high-level interpreted language used in building interactive interfaces and applications. it covers best practices, variables, data types, string manipulation, array creation, looping, conditional statements, object-oriented programming, html, css, dom manipulation, and user form creation, serving as a comprehensive foundation for beginners.', 'chapters': [{'end': 373.507, 'segs': [{'end': 41.504, 'src': 'embed', 'start': 7.222, 'weight': 0, 'content': [{'end': 11.385, 'text': "Hey, what's going on, guys? Welcome to my updated JavaScript crash course for beginners.", 'start': 7.222, 'duration': 4.163}, {'end': 17.109, 'text': 'So I did a video about three years ago on JavaScript fundamentals, and this is the updated version,', 'start': 11.485, 'duration': 5.624}, {'end': 20.971, 'text': 'which includes a more modern syntax and just better overall structure.', 'start': 17.109, 'duration': 3.862}, {'end': 24.694, 'text': 'Now I have a lot of JavaScript courses and tutorials on my channel,', 'start': 21.412, 'duration': 3.282}, {'end': 29.677, 'text': "but this is definitely the first one to watch if you're looking to learn JavaScript.", 'start': 24.694, 'duration': 4.983}, {'end': 33.44, 'text': 'OK, so this will get you started with the basic syntax and all the fundamentals.', 'start': 29.697, 'duration': 3.743}, {'end': 37.102, 'text': "And I'm going to go over what we'll cover in this crash course in a minute.", 'start': 34, 'duration': 3.102}, {'end': 41.504, 'text': 'So I first just quickly want to talk about what JavaScript actually is.', 'start': 37.802, 'duration': 3.702}], 'summary': 'Updated javascript crash course for beginners, covering modern syntax and fundamentals.', 'duration': 34.282, 'max_score': 7.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c7222.jpg'}, {'end': 155.345, 'src': 'embed', 'start': 126.385, 'weight': 2, 'content': [{'end': 128.485, 'text': "There's some others as well, but they're not very popular.", 'start': 126.385, 'duration': 2.1}, {'end': 133.089, 'text': 'JavaScript is definitely the most popular part of the specification.', 'start': 128.566, 'duration': 4.523}, {'end': 140.557, 'text': 'JavaScript is also multi paradigm, which means that you can write your code in many different ways or many different paradigms.', 'start': 134.13, 'duration': 6.427}, {'end': 144.522, 'text': 'For instance, you can write object oriented code or functional code.', 'start': 140.877, 'duration': 3.645}, {'end': 150.769, 'text': 'There are languages where you have to write it in a certain way, but JavaScript is not one of those languages.', 'start': 145.262, 'duration': 5.507}, {'end': 155.345, 'text': 'OK JavaScript is also the language of the browser or the client.', 'start': 151.783, 'duration': 3.562}], 'summary': 'Javascript is the most popular part of the specification, supporting multiple paradigms and serving as the language of the browser or the client.', 'duration': 28.96, 'max_score': 126.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c126385.jpg'}, {'end': 188.647, 'src': 'embed', 'start': 162.61, 'weight': 4, 'content': [{'end': 171.055, 'text': "But if you want interactive aspects on your page like let's say form validation alerts things like that JavaScript is used for that stuff.", 'start': 162.61, 'duration': 8.445}, {'end': 174.357, 'text': "OK So it's the language of the front end meaning the browser.", 'start': 171.175, 'duration': 3.182}, {'end': 181.58, 'text': 'But you can also run JavaScript on the server for more powerful things like interacting with databases and stuff like that.', 'start': 174.773, 'duration': 6.807}, {'end': 188.647, 'text': "And that's done by using a JavaScript runtime called Node.js, which is way beyond the scope of this tutorial.", 'start': 182.12, 'duration': 6.527}], 'summary': 'Javascript is used for front-end interactivity and also for server-side tasks like interacting with databases using node.js.', 'duration': 26.037, 'max_score': 162.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c162610.jpg'}, {'end': 252.817, 'src': 'embed', 'start': 230.543, 'weight': 1, 'content': [{'end': 242.07, 'text': "but they can't do things like slideshows and little widgets in the browser and stuff like that unless they run some kind of library that actually generates JavaScript for the browser.", 'start': 230.543, 'duration': 11.527}, {'end': 250.355, 'text': 'You can also build very interactive interfaces with JavaScript frameworks such as React, Angular, Vue.js,', 'start': 242.951, 'duration': 7.404}, {'end': 252.817, 'text': 'and these frameworks are all highly in demand.', 'start': 250.355, 'duration': 2.462}], 'summary': 'Javascript frameworks like react, angular, and vue.js enable building interactive interfaces and are highly in demand.', 'duration': 22.274, 'max_score': 230.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c230543.jpg'}], 'start': 7.222, 'title': 'Javascript fundamentals', 'summary': 'Provides an updated crash course for beginners, focusing on modern syntax and fundamental structure, serving as an essential starting point. it also introduces javascript as a high-level interpreted language, explaining its role and use in building interactive interfaces and applications, with a focus on frameworks such as react, angular, and vue.js.', 'chapters': [{'end': 60.954, 'start': 7.222, 'title': 'Javascript crash course for beginners', 'summary': 'Introduces an updated javascript crash course for beginners, focusing on modern syntax and fundamental structure, providing an essential starting point with basic syntax and covering what javascript is.', 'duration': 53.732, 'highlights': ['The chapter provides an updated version of a JavaScript crash course for beginners, encompassing modern syntax and improved structure.', 'The course is recommended as the first one to watch for those looking to learn JavaScript.', 'The crash course covers basic syntax and all the fundamentals to get started with JavaScript.', "The chapter introduces what JavaScript is and emphasizes that understanding the language's capabilities is not necessary to start learning how to write JavaScript."]}, {'end': 373.507, 'start': 61.054, 'title': 'Introduction to javascript', 'summary': 'Introduces javascript as a high-level interpreted language, explaining its role as the language of the browser and server, its multi-paradigm nature, and its use in building interactive interfaces and applications, with a focus on frameworks such as react, angular, and vue.js.', 'duration': 312.453, 'highlights': ['JavaScript is the language of the browser, used for client-side programming, and also runs on the server with Node.js. JavaScript is versatile, serving as the language of the browser for client-side programming, while also capable of running on the server for powerful tasks using Node.js.', "JavaScript's multi-paradigm nature allows coding in various styles, including object-oriented and functional. JavaScript's multi-paradigm nature enables coding flexibility, supporting object-oriented, functional, and other coding styles.", 'JavaScript is utilized in building interactive interfaces and applications with popular frameworks like React, Angular, and Vue.js. JavaScript is integral in creating interactive interfaces and applications, leveraging in-demand frameworks such as React, Angular, and Vue.js.']}], 'duration': 366.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c7222.jpg', 'highlights': ['The chapter provides an updated version of a JavaScript crash course for beginners, encompassing modern syntax and improved structure.', 'JavaScript is utilized in building interactive interfaces and applications with popular frameworks like React, Angular, and Vue.js.', "JavaScript's multi-paradigm nature allows coding in various styles, including object-oriented and functional.", 'The crash course covers basic syntax and all the fundamentals to get started with JavaScript.', 'JavaScript is the language of the browser, used for client-side programming, and also runs on the server with Node.js.']}, {'end': 1097.173, 'segs': [{'end': 399.47, 'src': 'embed', 'start': 373.507, 'weight': 3, 'content': [{'end': 379.453, 'text': "just because there's so much to cover in terms of just the fundamentals of JavaScript.", 'start': 373.507, 'duration': 5.946}, {'end': 381.615, 'text': 'So I have my text editor open.', 'start': 379.833, 'duration': 1.782}, {'end': 384.478, 'text': "I'm using Visual Studio Code, which is what I would suggest.", 'start': 381.655, 'duration': 2.823}, {'end': 386.981, 'text': 'However, you can use whatever text editor you want.', 'start': 384.518, 'duration': 2.463}, {'end': 394.526, 'text': "I'm also using an extension called live server that will allow the browser to refresh when I save the page.", 'start': 387.681, 'duration': 6.845}, {'end': 399.47, 'text': "So for instance, if I just take this off and I save, you'll see that it'll auto reload.", 'start': 394.746, 'duration': 4.724}], 'summary': 'Covering javascript fundamentals in visual studio code with live server extension for auto-reloading.', 'duration': 25.963, 'max_score': 373.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c373507.jpg'}, {'end': 552.961, 'src': 'heatmap', 'start': 414.643, 'weight': 0, 'content': [{'end': 419.367, 'text': 'So, you want to put your JavaScript at the bottom right above the ending body tag.', 'start': 414.643, 'duration': 4.724}, {'end': 426.694, 'text': 'You almost always want to put the JavaScript at the bottom because you want your HTML and your CSS to load first.', 'start': 420.548, 'duration': 6.146}, {'end': 431.176, 'text': "So, let's go ahead and put a script tag here, and there's two ways to do it.", 'start': 427.334, 'duration': 3.842}, {'end': 439.979, 'text': 'You can put the JavaScript right on the page by putting it within script tags, or you can do it a second way, which is the recommended way,', 'start': 431.216, 'duration': 8.763}, {'end': 442.7, 'text': 'and that would be to put it in a separate JavaScript file.', 'start': 439.979, 'duration': 2.721}, {'end': 447.782, 'text': "So, that's what we're going to do, but I'll just show you real quick that we can put it right on the page here.", 'start': 442.8, 'duration': 4.982}, {'end': 448.863, 'text': "So, I'm going to do an alert.", 'start': 447.802, 'duration': 1.061}, {'end': 458.022, 'text': 'which is a function that is actually part of the window object and it just adds a pop-up with whatever you put in here.', 'start': 449.895, 'duration': 8.127}, {'end': 465.208, 'text': "So I'm putting a string of hello world and if I save the page will automatically load and I get a little pop-up that says hello world.", 'start': 458.142, 'duration': 7.066}, {'end': 466.649, 'text': 'All right.', 'start': 466.329, 'duration': 0.32}, {'end': 473.855, 'text': "So I'm going to go ahead and get rid of this because I want to include my JavaScript from these this main JS file.", 'start': 466.79, 'duration': 7.065}, {'end': 479.64, 'text': "So I'm just going to add a source attribute here and say I want to load main dot JS.", 'start': 474.396, 'duration': 5.244}, {'end': 482.783, 'text': "Okay And if I go to main JS, it's completely empty.", 'start': 480.421, 'duration': 2.362}, {'end': 487.427, 'text': "Now, since I'm in the JavaScript file, there's no need to put script tags or anything like that.", 'start': 483.303, 'duration': 4.124}, {'end': 488.868, 'text': 'We just type our JavaScript.', 'start': 487.467, 'duration': 1.401}, {'end': 497.569, 'text': 'So if I just go ahead and put that alert back, Say hello world and save and you can see that that runs.', 'start': 489.528, 'duration': 8.041}, {'end': 498.77, 'text': 'All right.', 'start': 497.589, 'duration': 1.181}, {'end': 506.136, 'text': "Now, as far as alert, you don't really want to use that for debugging or outputting values or anything really,", 'start': 498.91, 'duration': 7.226}, {'end': 509.358, 'text': 'because it blocks the rest of your script from running.', 'start': 506.136, 'duration': 3.222}, {'end': 510.619, 'text': "It's just very inefficient.", 'start': 509.418, 'duration': 1.201}, {'end': 512.821, 'text': 'So what you want to use is the console.', 'start': 511.04, 'duration': 1.781}, {'end': 516.724, 'text': 'OK, every browser has what are called developer tools.', 'start': 513.162, 'duration': 3.562}, {'end': 523.289, 'text': 'And you have a JavaScript console where you can output and you can also actually run JavaScript in the console.', 'start': 517.465, 'duration': 5.824}, {'end': 528.352, 'text': 'So, in Chrome, you want to go to your menu, more tools, and then developer tools.', 'start': 523.87, 'duration': 4.482}, {'end': 533.934, 'text': "I know you guys can't see this, but there's a selection for developer tools, and there's a bunch of tabs here.", 'start': 528.432, 'duration': 5.502}, {'end': 535.354, 'text': 'You want to choose the console.', 'start': 533.974, 'duration': 1.38}, {'end': 542.296, 'text': "If you're on a different browser, I'm not sure the exact menu option or keyboard shortcuts,", 'start': 536.434, 'duration': 5.862}, {'end': 546.718, 'text': 'but on Chrome you can also open it with command option I on a Mac.', 'start': 542.296, 'duration': 4.422}, {'end': 548.579, 'text': 'You can toggle it that way or F12 on Windows.', 'start': 546.838, 'duration': 1.741}, {'end': 552.961, 'text': 'So we can actually execute JavaScript from here.', 'start': 550.436, 'duration': 2.525}], 'summary': "Javascript should be placed at the bottom to allow html and css to load first. it's recommended to use a separate javascript file. avoid using alert for debugging and use the console instead.", 'duration': 138.318, 'max_score': 414.643, 'thumbnail': ''}, {'end': 523.289, 'src': 'embed', 'start': 498.91, 'weight': 1, 'content': [{'end': 506.136, 'text': "Now, as far as alert, you don't really want to use that for debugging or outputting values or anything really,", 'start': 498.91, 'duration': 7.226}, {'end': 509.358, 'text': 'because it blocks the rest of your script from running.', 'start': 506.136, 'duration': 3.222}, {'end': 510.619, 'text': "It's just very inefficient.", 'start': 509.418, 'duration': 1.201}, {'end': 512.821, 'text': 'So what you want to use is the console.', 'start': 511.04, 'duration': 1.781}, {'end': 516.724, 'text': 'OK, every browser has what are called developer tools.', 'start': 513.162, 'duration': 3.562}, {'end': 523.289, 'text': 'And you have a JavaScript console where you can output and you can also actually run JavaScript in the console.', 'start': 517.465, 'duration': 5.824}], 'summary': 'Avoid using alert for debugging, use console in developer tools instead.', 'duration': 24.379, 'max_score': 498.91, 'thumbnail': ''}, {'end': 637.877, 'src': 'embed', 'start': 609.946, 'weight': 2, 'content': [{'end': 613.448, 'text': "So if we go down to methods, you'll see the console has a bunch of stuff on it.", 'start': 609.946, 'duration': 3.502}, {'end': 617.651, 'text': 'So we can do like console error, console warn.', 'start': 613.548, 'duration': 4.103}, {'end': 622.674, 'text': 'If we want to put warnings, we can add we can have tables in the console.', 'start': 617.671, 'duration': 5.003}, {'end': 623.895, 'text': 'We can run assertions.', 'start': 622.694, 'duration': 1.201}, {'end': 625.696, 'text': "So it's great for debugging.", 'start': 624.295, 'duration': 1.401}, {'end': 626.836, 'text': 'All right.', 'start': 625.716, 'duration': 1.12}, {'end': 630.679, 'text': 'So just to give you an example, if I do console dot error.', 'start': 626.877, 'duration': 3.802}, {'end': 636.437, 'text': 'And just say this is an error and save.', 'start': 632.976, 'duration': 3.461}, {'end': 637.877, 'text': "You'll see that now it's red.", 'start': 636.457, 'duration': 1.42}], 'summary': 'Using console methods for debugging, e.g., console.error, console.warn, and assertions.', 'duration': 27.931, 'max_score': 609.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c609946.jpg'}, {'end': 737.2, 'src': 'embed', 'start': 708.546, 'weight': 4, 'content': [{'end': 710.81, 'text': "So for the most part, you don't want to use var anymore.", 'start': 708.546, 'duration': 2.264}, {'end': 718.383, 'text': 'Let and const were added with ES6 or ES2015, and ES stands for ECMAScript.', 'start': 711.837, 'duration': 6.546}, {'end': 725.63, 'text': "So that was a huge update to JavaScript that gave us a lot of new functionality, a lot of which I'm going to show you in this crash course.", 'start': 718.824, 'duration': 6.806}, {'end': 730.614, 'text': 'Now, the difference between let and const is with let, you can reassign values.', 'start': 726.29, 'duration': 4.324}, {'end': 731.915, 'text': "So I'll give you an example.", 'start': 730.875, 'duration': 1.04}, {'end': 735.778, 'text': 'If I say let age equals 30..', 'start': 731.956, 'duration': 3.822}, {'end': 737.2, 'text': "And we'll just go in console log.", 'start': 735.778, 'duration': 1.422}], 'summary': 'Es6 introduced let and const, allowing reassignment with let.', 'duration': 28.654, 'max_score': 708.546, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c708546.jpg'}, {'end': 904.885, 'src': 'heatmap', 'start': 840.287, 'weight': 0.958, 'content': [{'end': 846.754, 'text': "And when you're dealing with arrays and objects and stuff like that, you can change the values within the array or object.", 'start': 840.287, 'duration': 6.467}, {'end': 849.096, 'text': "You just can't reassign the entire thing.", 'start': 846.774, 'duration': 2.322}, {'end': 851.138, 'text': "And I'll show you more of what I mean later on.", 'start': 849.116, 'duration': 2.022}, {'end': 853.7, 'text': 'all right.', 'start': 853.22, 'duration': 0.48}, {'end': 860.325, 'text': "so, now that we know how to assign the variables with latin const, let's talk about data types.", 'start': 853.7, 'duration': 6.625}, {'end': 863.947, 'text': 'okay, what types of data can we assign to these variables?', 'start': 860.325, 'duration': 3.622}, {'end': 870.171, 'text': 'now we have primitive data types, which means that the data is directly assigned to memory.', 'start': 863.947, 'duration': 6.224}, {'end': 872.793, 'text': "okay, it's not a resource.", 'start': 870.171, 'duration': 2.622}, {'end': 885.656, 'text': 'so we have strings, we have numbers, uh, boolean, null, undefined and symbol.', 'start': 872.793, 'duration': 12.863}, {'end': 891.418, 'text': "Okay, now symbol was added in ES6, and we're not going to go over symbols.", 'start': 886.256, 'duration': 5.162}, {'end': 893.539, 'text': "It's beyond the scope of this tutorial.", 'start': 891.498, 'duration': 2.041}, {'end': 898.662, 'text': "It's not something that's that common, so we're not going to go over symbols.", 'start': 893.88, 'duration': 4.782}, {'end': 903.844, 'text': "But let's create some variables that are some of these data types.", 'start': 899.582, 'duration': 4.262}, {'end': 904.885, 'text': "So let's create a name.", 'start': 903.864, 'duration': 1.021}], 'summary': 'Variables can hold primitive data types such as strings, numbers, boolean, null, and undefined, with symbol being added in es6.', 'duration': 64.598, 'max_score': 840.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c840287.jpg'}, {'end': 987.764, 'src': 'embed', 'start': 963.854, 'weight': 6, 'content': [{'end': 971.676, 'text': "Now, even though this is a decimal, it's it it's not there's no float or decimal data type in JavaScript.", 'start': 963.854, 'duration': 7.822}, {'end': 972.596, 'text': "It's just a number.", 'start': 971.716, 'duration': 0.88}, {'end': 976.898, 'text': "OK, and I'm going to show you how we can actually test the types of these in a minute.", 'start': 973.077, 'duration': 3.821}, {'end': 978.699, 'text': "So let's do null.", 'start': 977.938, 'duration': 0.761}, {'end': 980.32, 'text': "We'll do x equals null.", 'start': 978.719, 'duration': 1.601}, {'end': 982.581, 'text': 'And what null means is basically empty.', 'start': 980.42, 'duration': 2.161}, {'end': 985.483, 'text': "It's a variable, but there's nothing in it.", 'start': 983.502, 'duration': 1.981}, {'end': 987.764, 'text': 'So we have null.', 'start': 987.104, 'duration': 0.66}], 'summary': 'Javascript has no float or decimal data type, only numbers and null for empty variables.', 'duration': 23.91, 'max_score': 963.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c963854.jpg'}], 'start': 373.507, 'title': 'Javascript fundamentals, best practices, variables, and data types', 'summary': 'Covers javascript fundamentals and best practices, including using visual studio code and live server extension, placing javascript at the bottom of html, utilizing console for debugging, and exploring console object methods. it also discusses variable declaration using var, let, and const, emphasizing block scope and differences between let and const. additionally, it covers primitive data types and their assignment to variables, with examples of strings, numbers, booleans, null, and undefined.', 'chapters': [{'end': 666.166, 'start': 373.507, 'title': 'Javascript fundamentals and best practices', 'summary': 'Covers the fundamentals of javascript, including using visual studio code and live server extension for faster development, placing javascript at the bottom of the html file, utilizing the console for debugging and outputting values, and exploring different methods attached to the console object, such as log, error, and warn.', 'duration': 292.659, 'highlights': ['The importance of placing JavaScript at the bottom of the HTML file for faster loading Placing JavaScript at the bottom allows HTML and CSS to load first, resulting in faster loading times. This best practice enhances user experience and site performance.', 'Utilizing the console for debugging and outputting values The console in developer tools allows for debugging and outputting values, providing a more efficient alternative to using the alert function. It also offers methods such as log, error, and warn for different types of output.', 'Exploring different methods attached to the console object, such as log, error, and warn The console object in JavaScript offers various methods such as log, error, and warn, which are useful for different types of output, including debugging, error handling, and displaying warnings.', 'Using Visual Studio Code and the live server extension for development Utilizing Visual Studio Code and the live server extension provides a convenient development environment, allowing for automatic page reloads upon saving, which can significantly speed up the development process.']}, {'end': 1097.173, 'start': 666.206, 'title': 'Javascript variables and data types', 'summary': 'Discusses javascript variable declaration using var, let, and const, emphasizing the importance of using let and const over var due to their block scope, and explains the differences between let and const in terms of reassigning values. it also covers primitive data types and their assignment to variables, with examples of strings, numbers, booleans, null, and undefined.', 'duration': 430.967, 'highlights': ['JavaScript variable declaration using var, let, and const The chapter explains the usage of var, let, and const for declaring variables in JavaScript, highlighting that var is globally scoped and can cause conflicts, while let and const were added with ES6 and are preferred due to their block scope.', 'Differences between let and const in terms of reassigning values It details the ability to reassign values using let, illustrated through an example, and the restriction of reassigning values using const, promoting the use of const unless value reassignment is required for more robust and secure code.', 'Primitive data types assignment to variables The chapter covers primitive data types such as strings, numbers, booleans, null, and undefined, with examples of their assignment to variables and emphasizes the absence of a float or decimal data type in JavaScript.']}], 'duration': 723.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c373507.jpg', 'highlights': ['Placing JavaScript at the bottom of the HTML file for faster loading enhances user experience and site performance.', 'Utilizing the console in developer tools allows for debugging and outputting values, providing a more efficient alternative to using the alert function.', 'The console object in JavaScript offers various methods such as log, error, and warn, which are useful for different types of output, including debugging, error handling, and displaying warnings.', 'Utilizing Visual Studio Code and the live server extension provides a convenient development environment, allowing for automatic page reloads upon saving, which can significantly speed up the development process.', 'The chapter explains the usage of var, let, and const for declaring variables in JavaScript, highlighting that var is globally scoped and can cause conflicts, while let and const were added with ES6 and are preferred due to their block scope.', 'It details the ability to reassign values using let, illustrated through an example, and the restriction of reassigning values using const, promoting the use of const unless value reassignment is required for more robust and secure code.', 'The chapter covers primitive data types such as strings, numbers, booleans, null, and undefined, with examples of their assignment to variables and emphasizes the absence of a float or decimal data type in JavaScript.']}, {'end': 2226.102, 'segs': [{'end': 1193.69, 'src': 'embed', 'start': 1168.127, 'weight': 7, 'content': [{'end': 1175.006, 'text': "where we want the age variable, we'll stop the string concatenate and since we're at the end, we just get rid of that and save.", 'start': 1168.127, 'duration': 6.879}, {'end': 1175.586, 'text': 'and now we get.', 'start': 1175.006, 'duration': 0.58}, {'end': 1177.907, 'text': 'my name is John and I am 30..', 'start': 1175.586, 'duration': 2.321}, {'end': 1179.507, 'text': 'So this is kind of the old way of doing it.', 'start': 1177.907, 'duration': 1.6}, {'end': 1183.728, 'text': "It's a real pain in the ass if this is a real long string with a lot of variables.", 'start': 1179.567, 'duration': 4.161}, {'end': 1193.69, 'text': 'So what we have now with ES6 or ES2015 are template strings, or template literals.', 'start': 1184.368, 'duration': 9.322}], 'summary': 'Es6 introduces template strings for easier string concatenation and variable insertion.', 'duration': 25.563, 'max_score': 1168.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1168127.jpg'}, {'end': 1267.488, 'src': 'heatmap', 'start': 1204.56, 'weight': 0.746, 'content': [{'end': 1209.146, 'text': 'my name is, and wherever we want to use a variable, we just use the syntax.', 'start': 1204.56, 'duration': 4.586}, {'end': 1214.052, 'text': 'So money sign and then curly braces and just put in the name of the variable.', 'start': 1209.366, 'duration': 4.686}, {'end': 1215.954, 'text': 'So my name is and I am.', 'start': 1214.493, 'duration': 1.461}, {'end': 1220.152, 'text': 'And then the age variable, save it.', 'start': 1218.331, 'duration': 1.821}, {'end': 1221.292, 'text': 'We get the same thing.', 'start': 1220.332, 'duration': 0.96}, {'end': 1222.172, 'text': 'All right.', 'start': 1221.912, 'duration': 0.26}, {'end': 1224.453, 'text': 'And we could assign this to a variable if we want.', 'start': 1222.232, 'duration': 2.221}, {'end': 1233.737, 'text': 'I could say like const hello equals get rid of this parentheses and then we could console log.', 'start': 1224.473, 'duration': 9.264}, {'end': 1235.937, 'text': 'Hello All right.', 'start': 1233.757, 'duration': 2.18}, {'end': 1237.498, 'text': 'So we can do that.', 'start': 1236.418, 'duration': 1.08}, {'end': 1242.46, 'text': 'Next thing I want to show you is a couple string properties and methods.', 'start': 1238.178, 'duration': 4.282}, {'end': 1244.602, 'text': "Let's get rid of this as well.", 'start': 1243.541, 'duration': 1.061}, {'end': 1246.683, 'text': "So I'm going to just create a string.", 'start': 1245.182, 'duration': 1.501}, {'end': 1249.344, 'text': "Let's call it S and we'll just do hello world.", 'start': 1246.703, 'duration': 2.641}, {'end': 1252.746, 'text': 'All right.', 'start': 1252.265, 'duration': 0.481}, {'end': 1259.249, 'text': "Now, if we let's say we want to get the length, the number of characters in the string, we could use the length property.", 'start': 1252.766, 'duration': 6.483}, {'end': 1261.17, 'text': 'So console log S dot.', 'start': 1259.329, 'duration': 1.841}, {'end': 1267.488, 'text': "length. okay, a property doesn't, doesn't, doesn't have parentheses.", 'start': 1261.906, 'duration': 5.582}], 'summary': 'Introduction to using variables and string properties and methods in javascript.', 'duration': 62.928, 'max_score': 1204.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1204560.jpg'}, {'end': 1359.167, 'src': 'embed', 'start': 1326.893, 'weight': 8, 'content': [{'end': 1328.614, 'text': 'So it should this should give us hello.', 'start': 1326.893, 'duration': 1.721}, {'end': 1333.938, 'text': "So let's save and we can see we get hello and you can tack on other methods as well.", 'start': 1329.194, 'duration': 4.744}, {'end': 1343.665, 'text': 'Like we could do dot to uppercase and save and it ran substring, got hello and then made it all uppercase.', 'start': 1333.998, 'duration': 9.667}, {'end': 1346.968, 'text': 'So you can, you know, chain these on to each other.', 'start': 1343.685, 'duration': 3.283}, {'end': 1351.265, 'text': "Let's see, another thing we can do is split a string into an array.", 'start': 1348.284, 'duration': 2.981}, {'end': 1354.406, 'text': 'So we have a method called split.', 'start': 1351.285, 'duration': 3.121}, {'end': 1359.167, 'text': 'And then as a parameter, this takes in whatever you want to split by.', 'start': 1355.146, 'duration': 4.021}], 'summary': 'Chaining methods to transform strings and splitting them into arrays is possible in this programming context.', 'duration': 32.274, 'max_score': 1326.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1326893.jpg'}, {'end': 1488.722, 'src': 'embed', 'start': 1464.273, 'weight': 5, 'content': [{'end': 1471.05, 'text': 'all right, so arrays are basically variables that hold multiple values.', 'start': 1464.273, 'duration': 6.777}, {'end': 1475.614, 'text': "OK, so there's a couple of ways to create arrays.", 'start': 1471.07, 'duration': 4.544}, {'end': 1477.996, 'text': "However, one of them isn't used that much.", 'start': 1475.994, 'duration': 2.002}, {'end': 1479.437, 'text': "I'm going to show you that way first.", 'start': 1478.016, 'duration': 1.421}, {'end': 1481.258, 'text': "And that's using the array constructor.", 'start': 1479.497, 'duration': 1.761}, {'end': 1486.182, 'text': "So let's create a variable called numbers and set that to new.", 'start': 1481.839, 'duration': 4.343}, {'end': 1488.722, 'text': 'array Okay.', 'start': 1487.702, 'duration': 1.02}], 'summary': 'Arrays are variables that hold multiple values. there are multiple ways to create arrays, including using the array constructor method.', 'duration': 24.449, 'max_score': 1464.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1464273.jpg'}, {'end': 1564.237, 'src': 'embed', 'start': 1538.017, 'weight': 6, 'content': [{'end': 1542.841, 'text': 'in javascript, you can have multiple data types within the same array.', 'start': 1538.017, 'duration': 4.824}, {'end': 1544.582, 'text': 'so i could put a number in here.', 'start': 1542.841, 'duration': 1.741}, {'end': 1548.405, 'text': "i could put a boolean whatever i want, and that's fine.", 'start': 1544.582, 'duration': 3.823}, {'end': 1552.728, 'text': 'in a lot of languages, you have to have the same data types in your array.', 'start': 1548.405, 'duration': 4.323}, {'end': 1558.192, 'text': "in fact, there's there's quite a few languages where you actually have to set the number as well.", 'start': 1552.728, 'duration': 5.464}, {'end': 1562.335, 'text': 'so we would have to set this to be three values, which can be kind of a pain.', 'start': 1558.192, 'duration': 4.143}, {'end': 1564.237, 'text': 'So JavaScript gives you a lot of freedom.', 'start': 1562.355, 'duration': 1.882}], 'summary': 'Javascript allows multiple data types in arrays, providing freedom and flexibility.', 'duration': 26.22, 'max_score': 1538.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1538017.jpg'}, {'end': 1717.027, 'src': 'embed', 'start': 1684.908, 'weight': 1, 'content': [{'end': 1690.249, 'text': 'So in that case, you can use the push method so we can say fruits dot push.', 'start': 1684.908, 'duration': 5.341}, {'end': 1693.711, 'text': 'And push a value onto the end.', 'start': 1691.93, 'duration': 1.781}, {'end': 1697.074, 'text': "So let's do, I don't know, mangoes.", 'start': 1693.811, 'duration': 3.263}, {'end': 1698.875, 'text': 'And save.', 'start': 1698.334, 'duration': 0.541}, {'end': 1701.116, 'text': 'And now you can see mangoes has been added to the end.', 'start': 1698.915, 'duration': 2.201}, {'end': 1704.298, 'text': 'Okay, no matter how many are in the array.', 'start': 1702.037, 'duration': 2.261}, {'end': 1708.701, 'text': 'If we wanted to add on to the beginning, we could use unshift.', 'start': 1705.219, 'duration': 3.482}, {'end': 1711.944, 'text': 'So we could say fruits.unshift.', 'start': 1709.322, 'duration': 2.622}, {'end': 1717.027, 'text': "And let's say we wanted to add strawberries.", 'start': 1713.405, 'duration': 3.622}], 'summary': "Using the push method to add 'mangoes' to the end of an array and the unshift method to add 'strawberries' to the beginning.", 'duration': 32.119, 'max_score': 1684.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1684908.jpg'}, {'end': 1829.112, 'src': 'embed', 'start': 1799.666, 'weight': 4, 'content': [{'end': 1800.847, 'text': 'We go over a lot more.', 'start': 1799.666, 'duration': 1.181}, {'end': 1803.91, 'text': 'We learn how to like concatenate arrays and stuff like that.', 'start': 1800.987, 'duration': 2.923}, {'end': 1807.314, 'text': 'But these are just some pretty common methods.', 'start': 1803.99, 'duration': 3.324}, {'end': 1810.436, 'text': "So now we're going to talk about object literals.", 'start': 1808.334, 'duration': 2.102}, {'end': 1815.901, 'text': 'So object literals are basically just key value pairs.', 'start': 1811.237, 'duration': 4.664}, {'end': 1818.903, 'text': "So let's do something simple, like a person.", 'start': 1815.981, 'duration': 2.922}, {'end': 1823.287, 'text': "So a person has, let's do first name.", 'start': 1820.364, 'duration': 2.923}, {'end': 1827.05, 'text': "So we'll say John.", 'start': 1823.307, 'duration': 3.743}, {'end': 1827.831, 'text': "It's a string.", 'start': 1827.07, 'duration': 0.761}, {'end': 1829.112, 'text': 'Do last name.', 'start': 1828.171, 'duration': 0.941}], 'summary': 'Learning about array concatenation and object literals in javascript.', 'duration': 29.446, 'max_score': 1799.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1799666.jpg'}, {'end': 1901.789, 'src': 'embed', 'start': 1874.857, 'weight': 2, 'content': [{'end': 1878.939, 'text': "Now, let's say we want to well, first of all, we'll just console log the whole thing.", 'start': 1874.857, 'duration': 4.082}, {'end': 1882.12, 'text': 'So person and it will show us in the console.', 'start': 1878.999, 'duration': 3.121}, {'end': 1885.802, 'text': 'If you were to alert this, show you what happens.', 'start': 1882.46, 'duration': 3.342}, {'end': 1888.383, 'text': "You're just going to get this object object.", 'start': 1886.262, 'duration': 2.121}, {'end': 1891.844, 'text': 'Okay So alert is not a good way to to do this kind of stuff.', 'start': 1888.403, 'duration': 3.441}, {'end': 1893.845, 'text': 'So this will show us the values.', 'start': 1892.405, 'duration': 1.44}, {'end': 1898.527, 'text': 'Okay Now, if we want to access a single value, we use the dot syntax.', 'start': 1893.865, 'duration': 4.662}, {'end': 1901.789, 'text': 'We can do person dot first name.', 'start': 1898.547, 'duration': 3.242}], 'summary': 'Using console log to display object values and accessing single values with dot syntax.', 'duration': 26.932, 'max_score': 1874.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1874857.jpg'}, {'end': 2027.716, 'src': 'embed', 'start': 1993.408, 'weight': 3, 'content': [{'end': 1999.713, 'text': "And if I do console log first name, you'll see we get John so we can pull different things out.", 'start': 1993.408, 'duration': 6.305}, {'end': 2011.141, 'text': "Now, if it's an embedded object like an address, what we could do is let's put a comma here and we could do address.", 'start': 2000.233, 'duration': 10.908}, {'end': 2015.53, 'text': 'and then go like this, city.', 'start': 2013.228, 'duration': 2.302}, {'end': 2022.154, 'text': 'Okay, so if we go ahead and log city, we get Boston.', 'start': 2015.55, 'duration': 6.604}, {'end': 2025.313, 'text': 'Now, destructuring is kind of advanced.', 'start': 2023.211, 'duration': 2.102}, {'end': 2027.716, 'text': "It's again, it's part of the six.", 'start': 2026.114, 'duration': 1.602}], 'summary': 'Demonstrating console log with javascript variables and destructuring.', 'duration': 34.308, 'max_score': 1993.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1993408.jpg'}, {'end': 2200.273, 'src': 'embed', 'start': 2168.304, 'weight': 0, 'content': [{'end': 2172.626, 'text': "When you're sending data to a server, you usually send it in Jason format.", 'start': 2168.304, 'duration': 4.322}, {'end': 2174.768, 'text': 'and receive it in JSON format.', 'start': 2173.166, 'duration': 1.602}, {'end': 2180.174, 'text': "And it's very similar to object literals.", 'start': 2175.529, 'duration': 4.645}, {'end': 2186.68, 'text': "So I'm going to grab this whole array, just these brackets, and I'm actually going to.", 'start': 2180.574, 'duration': 6.106}, {'end': 2192.607, 'text': "I don't remember the exact URL, I'm just going to say JSON converter.", 'start': 2186.68, 'duration': 5.927}, {'end': 2195.731, 'text': "And it's this one right here.", 'start': 2194.631, 'duration': 1.1}, {'end': 2200.273, 'text': 'So this is freeformatter.com slash jsonformatter.', 'start': 2195.952, 'duration': 4.321}], 'summary': 'Data sent in json format to server, received in json format, similar to object literals.', 'duration': 31.969, 'max_score': 2168.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2168304.jpg'}], 'start': 1097.273, 'title': 'Javascript data types and manipulation', 'summary': 'Covers string manipulation and array creation, javascript arrays, object literals, working with javascript objects and arrays, including key methods and properties, and emphasizes the importance of json in full stack development and api usage.', 'chapters': [{'end': 1538.017, 'start': 1097.273, 'title': 'String manipulation and array creation', 'summary': 'Covers string manipulation using concatenation and es6 template strings, along with string properties and methods such as length, touppercase, tolowercase, substring, and split. it also discusses array creation using the array constructor and array literal notation.', 'duration': 440.744, 'highlights': ['The chapter covers string manipulation using concatenation and ES6 template strings. It explains the old method of string manipulation using concatenation and the newer method using ES6 template strings.', 'String properties and methods like length, toUpperCase, toLowerCase, substring, and split are discussed. It covers various string properties and methods, including examples of using toUpperCase, toLowerCase, substring, and split.', 'Array creation using array constructor and array literal notation is demonstrated. It demonstrates the use of the array constructor and array literal notation for creating arrays.']}, {'end': 1874.737, 'start': 1538.017, 'title': 'Javascript arrays & object literals', 'summary': 'Discusses javascript arrays, their flexibility in handling different data types, zero-based indexing, and array methods like push, unshift, pop, isarray, and indexof. it also covers object literals and their key-value pairs, including embedded objects.', 'duration': 336.72, 'highlights': ['JavaScript arrays allow flexibility with different data types and zero-based indexing, providing freedom and ease of use. JavaScript arrays allow for the inclusion of multiple data types within the same array, providing flexibility and eliminating the need for the same data types. Additionally, it emphasizes the concept of zero-based indexing, which is a fundamental aspect of arrays in JavaScript and other programming languages.', 'Array methods like push, unshift, pop, isArray, and indexOf offer efficient ways to manipulate and access array elements. The chapter delves into various array methods such as push to add elements to the end of an array, unshift to add elements to the beginning, pop to remove the last element, isArray to check if an object is an array, and indexOf to retrieve the index of a specific value in the array.', 'Object literals in JavaScript enable the creation of key-value pairs, including support for different data types and embedded objects. The discussion extends to object literals, showcasing their utility in creating key-value pairs, accommodating different data types like strings, numbers, and arrays, as well as supporting embedded objects within objects, exemplifying the versatility of JavaScript.']}, {'end': 2226.102, 'start': 1874.857, 'title': 'Working with javascript objects and arrays', 'summary': 'Covers accessing values from objects and arrays, using destructuring, adding properties, and working with json format in javascript, emphasizing the importance of json in full stack development and api usage.', 'duration': 351.245, 'highlights': ['Explaining the process of accessing values from arrays and objects The chapter explains how to access values from arrays and objects in JavaScript, such as accessing single values using the dot syntax and selecting values from nested objects and arrays.', 'Demonstrating the use of destructuring to create variables from object properties It demonstrates the use of destructuring in JavaScript to create variables from object properties, allowing the extraction of specific values into separate variables for easier access and manipulation.', "Illustrating the addition of properties to objects The chapter illustrates the process of adding properties to JavaScript objects, showcasing the ability to directly add new properties to an existing object, such as adding an 'email' property to the 'person' object.", 'Discussing the significance of JSON in full stack development and API usage The importance of JSON in full stack development and API usage is emphasized, highlighting its role as a data format used for sending and receiving data to and from servers, with its similarity to object literals and the availability of online tools for converting data into JSON format.']}], 'duration': 1128.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c1097273.jpg', 'highlights': ['The importance of JSON in full stack development and API usage is emphasized, highlighting its role as a data format used for sending and receiving data to and from servers, with its similarity to object literals and the availability of online tools for converting data into JSON format.', 'Array methods like push, unshift, pop, isArray, and indexOf offer efficient ways to manipulate and access array elements. The chapter delves into various array methods such as push to add elements to the end of an array, unshift to add elements to the beginning, pop to remove the last element, isArray to check if an object is an array, and indexOf to retrieve the index of a specific value in the array.', 'Explaining the process of accessing values from arrays and objects The chapter explains how to access values from arrays and objects in JavaScript, such as accessing single values using the dot syntax and selecting values from nested objects and arrays.', 'Demonstrating the use of destructuring to create variables from object properties It demonstrates the use of destructuring in JavaScript to create variables from object properties, allowing the extraction of specific values into separate variables for easier access and manipulation.', 'Object literals in JavaScript enable the creation of key-value pairs, including support for different data types and embedded objects. The discussion extends to object literals, showcasing their utility in creating key-value pairs, accommodating different data types like strings, numbers, and arrays, as well as supporting embedded objects within objects, exemplifying the versatility of JavaScript.', 'Array creation using array constructor and array literal notation is demonstrated. It demonstrates the use of the array constructor and array literal notation for creating arrays.', 'JavaScript arrays allow flexibility with different data types and zero-based indexing, providing freedom and ease of use. JavaScript arrays allow for the inclusion of multiple data types within the same array, providing flexibility and eliminating the need for the same data types. Additionally, it emphasizes the concept of zero-based indexing, which is a fundamental aspect of arrays in JavaScript and other programming languages.', 'The chapter covers string manipulation using concatenation and ES6 template strings. It explains the old method of string manipulation using concatenation and the newer method using ES6 template strings.', 'String properties and methods like length, toUpperCase, toLowerCase, substring, and split are discussed. It covers various string properties and methods, including examples of using toUpperCase, toLowerCase, substring, and split.']}, {'end': 2769.052, 'segs': [{'end': 2274.937, 'src': 'embed', 'start': 2226.102, 'weight': 2, 'content': [{'end': 2230.244, 'text': 'so maybe we want to get it ready to send to a server or something like that.', 'start': 2226.102, 'duration': 4.142}, {'end': 2242.548, 'text': "so we would do let's actually create a variable and we'll call it to do json, and there's a method we can use called json.stringify,", 'start': 2230.244, 'duration': 12.304}, {'end': 2252.455, 'text': "and we could just pass in to do's okay, and then we'll just console, log the to do Jason value and you can see that we get a Jason string.", 'start': 2242.548, 'duration': 9.907}, {'end': 2255.778, 'text': 'OK So this is how we would send data to a server.', 'start': 2252.475, 'duration': 3.303}, {'end': 2261.012, 'text': "All right, so we'll be working more with this in a little bit.", 'start': 2257.11, 'duration': 3.902}, {'end': 2263.212, 'text': 'I want to go over loops.', 'start': 2262.252, 'duration': 0.96}, {'end': 2266.454, 'text': "I'm going to keep the to-dos array because I'm going to show you how to loop over that.", 'start': 2263.252, 'duration': 3.202}, {'end': 2271.316, 'text': "But first of all, let's just look at some simple for loops or a simple for loop.", 'start': 2266.934, 'duration': 4.382}, {'end': 2274.937, 'text': 'For loops, they exist in many different languages.', 'start': 2272.256, 'duration': 2.681}], 'summary': 'Using json.stringify to send to-dos to a server and introducing for loops in programming.', 'duration': 48.835, 'max_score': 2226.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2226102.jpg'}, {'end': 2519.71, 'src': 'embed', 'start': 2488.066, 'weight': 1, 'content': [{'end': 2492.268, 'text': "Now, this isn't really the best way to loop through an array.", 'start': 2488.066, 'duration': 4.202}, {'end': 2496.17, 'text': 'We have other methods such as a for of loop.', 'start': 2493.189, 'duration': 2.981}, {'end': 2502.534, 'text': "So to show you that you can do for it's structured kind of similar, but much simpler.", 'start': 2496.751, 'duration': 5.783}, {'end': 2504.455, 'text': 'much more readable.', 'start': 2503.655, 'duration': 0.8}, {'end': 2512.623, 'text': "So we could say simply let to do from I'm sorry, not from of to do's.", 'start': 2504.555, 'duration': 8.068}, {'end': 2513.624, 'text': 'All right.', 'start': 2513.284, 'duration': 0.34}, {'end': 2516.467, 'text': 'Now this is the name of the array.', 'start': 2513.704, 'duration': 2.763}, {'end': 2517.928, 'text': "OK, so it's this variable.", 'start': 2516.487, 'duration': 1.441}, {'end': 2519.71, 'text': 'This could be anything.', 'start': 2518.028, 'duration': 1.682}], 'summary': 'Comparison of array looping methods: for vs. for of, for simpler and more readable code.', 'duration': 31.644, 'max_score': 2488.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2488066.jpg'}, {'end': 2660.522, 'src': 'heatmap', 'start': 2528.818, 'weight': 1, 'content': [{'end': 2535.946, 'text': "If I want just the text, I could do to do dot text and we don't have the ugly looking index like that.", 'start': 2528.818, 'duration': 7.128}, {'end': 2538.009, 'text': 'We just simply do to do dot text.', 'start': 2535.986, 'duration': 2.023}, {'end': 2541.633, 'text': 'If we want the ID, we can loop through and get the IDs.', 'start': 2538.369, 'duration': 3.264}, {'end': 2543.355, 'text': "So that's one way to do it.", 'start': 2542.313, 'duration': 1.042}, {'end': 2552.163, 'text': 'Now, we also have what are called high-order array methods, which is the way that I would suggest to do any kind of iteration with arrays.', 'start': 2543.815, 'duration': 8.348}, {'end': 2554.065, 'text': "I'm going to show you a couple of them.", 'start': 2552.883, 'duration': 1.182}, {'end': 2557.988, 'text': "I'm going to show you foreach, which just loops through them.", 'start': 2554.105, 'duration': 3.883}, {'end': 2567.237, 'text': 'map, which will allow us to create a new array from an array, and then filter, which will allow us to create a new array based on a condition.', 'start': 2557.988, 'duration': 9.249}, {'end': 2569.237, 'text': "So let's start with for each.", 'start': 2567.937, 'duration': 1.3}, {'end': 2575.439, 'text': "So we just take to do's, whatever the array is, and let's do dot for each.", 'start': 2569.598, 'duration': 5.841}, {'end': 2581.201, 'text': 'Now these high order array methods, they take in as a parameter a function.', 'start': 2577.34, 'duration': 3.861}, {'end': 2583.942, 'text': 'Okay, so we pass in a function like that.', 'start': 2581.221, 'duration': 2.721}, {'end': 2586.703, 'text': 'And then this callback function takes in.', 'start': 2584.482, 'duration': 2.221}, {'end': 2595.81, 'text': 'It can take multiple parameters, but the first one is going to be the variable that you want to use as each item, or, in this case, each to-do.', 'start': 2587.782, 'duration': 8.028}, {'end': 2601.236, 'text': "So let's do a console log of to-do dot text and save.", 'start': 2596.411, 'duration': 4.825}, {'end': 2605.16, 'text': "And you can see we're looping through and we're getting the text for each to-do.", 'start': 2601.877, 'duration': 3.283}, {'end': 2606.361, 'text': 'All right.', 'start': 2606.101, 'duration': 0.26}, {'end': 2609.783, 'text': "And these look much better with arrow functions, which I'll get to in a little bit.", 'start': 2606.401, 'duration': 3.382}, {'end': 2612.264, 'text': "But yeah, so that's a for each.", 'start': 2610.864, 'duration': 1.4}, {'end': 2614.666, 'text': 'Now, a map.', 'start': 2613.565, 'duration': 1.101}, {'end': 2616.587, 'text': "Let's get rid of this.", 'start': 2615.746, 'duration': 0.841}, {'end': 2622.83, 'text': "Actually, I'm just going to change this to map because these are all formatted the same way.", 'start': 2617.187, 'duration': 5.643}, {'end': 2628.073, 'text': 'OK, they take in a function, you pass in whatever variable you want to use here.', 'start': 2622.85, 'duration': 5.223}, {'end': 2631.154, 'text': 'Now with map, it returns an array.', 'start': 2628.713, 'duration': 2.441}, {'end': 2639.235, 'text': "so I'm actually going to assign, let's say to do text, because what I want to do, no pun intended,", 'start': 2631.154, 'duration': 8.081}, {'end': 2645.997, 'text': 'is loop through and then return an array of just the text right here, just the text values.', 'start': 2639.235, 'duration': 6.762}, {'end': 2652.998, 'text': 'So I could just simply do return and then to do dot text.', 'start': 2646.797, 'duration': 6.201}, {'end': 2660.522, 'text': 'Okay, so this is going to return a whole new array of just the text, so if I console log to do text and save.', 'start': 2653.558, 'duration': 6.964}], 'summary': 'Using high-order array methods like foreach, map, and filter to iterate through arrays and perform specific actions on the elements.', 'duration': 131.704, 'max_score': 2528.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2528818.jpg'}, {'end': 2567.237, 'src': 'embed', 'start': 2543.815, 'weight': 0, 'content': [{'end': 2552.163, 'text': 'Now, we also have what are called high-order array methods, which is the way that I would suggest to do any kind of iteration with arrays.', 'start': 2543.815, 'duration': 8.348}, {'end': 2554.065, 'text': "I'm going to show you a couple of them.", 'start': 2552.883, 'duration': 1.182}, {'end': 2557.988, 'text': "I'm going to show you foreach, which just loops through them.", 'start': 2554.105, 'duration': 3.883}, {'end': 2567.237, 'text': 'map, which will allow us to create a new array from an array, and then filter, which will allow us to create a new array based on a condition.', 'start': 2557.988, 'duration': 9.249}], 'summary': 'High-order array methods like foreach, map, and filter facilitate array iteration and manipulation.', 'duration': 23.422, 'max_score': 2543.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2543815.jpg'}], 'start': 2226.102, 'title': 'Javascript loops and json', 'summary': 'Covers working with json using json.stringify method and simple for loops, and then delves into looping and iteration in javascript, encompassing for loops, while loops, and high-order array methods like foreach, map, and filter, providing a strong foundation for manipulating data.', 'chapters': [{'end': 2274.937, 'start': 2226.102, 'title': 'Working with json and simple for loops', 'summary': 'Covers working with json using json.stringify method to send data to a server and introduces the concept of simple for loops, providing a foundation for future learning.', 'duration': 48.835, 'highlights': ['The chapter demonstrates using the json.stringify method to convert data to a JSON string for sending to a server.', 'Introduction of simple for loops for iterating over arrays is highlighted as a fundamental concept for programming.']}, {'end': 2769.052, 'start': 2275.017, 'title': 'Looping and iteration in javascript', 'summary': 'Covers for loops, while loops, looping through arrays using for loop and for of loop, and high-order array methods like foreach, map, and filter, demonstrating their simplicity and power in manipulating data.', 'duration': 494.035, 'highlights': ['The chapter covers for loops, while loops, looping through arrays using for loop and for of loop Covers the fundamental concepts of for loops, while loops, and looping through arrays using different loop types.', 'The high-order array methods like forEach, map, and filter, demonstrating their simplicity and power in manipulating data Demonstrates the power of high-order array methods such as forEach, map, and filter in manipulating data and creating new arrays based on different conditions.']}], 'duration': 542.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2226102.jpg', 'highlights': ['The high-order array methods like forEach, map, and filter, demonstrating their simplicity and power in manipulating data Demonstrates the power of high-order array methods such as forEach, map, and filter in manipulating data and creating new arrays based on different conditions.', 'The chapter covers for loops, while loops, looping through arrays using for loop and for of loop Covers the fundamental concepts of for loops, while loops, and looping through arrays using different loop types.', 'The chapter demonstrates using the json.stringify method to convert data to a JSON string for sending to a server.', 'Introduction of simple for loops for iterating over arrays is highlighted as a fundamental concept for programming.']}, {'end': 3514.838, 'segs': [{'end': 2899.099, 'src': 'embed', 'start': 2869.576, 'weight': 3, 'content': [{'end': 2875.617, 'text': 'Myself, I like to always use triple equals because I, for the most part, always want to match the types.', 'start': 2869.576, 'duration': 6.041}, {'end': 2880.898, 'text': 'Sometimes developers will pick and choose when to use double and triple.', 'start': 2877.357, 'duration': 3.541}, {'end': 2882.298, 'text': 'I just always use triple.', 'start': 2880.958, 'duration': 1.34}, {'end': 2885.199, 'text': "So let's let's do an else.", 'start': 2883.419, 'duration': 1.78}, {'end': 2890.94, 'text': 'A lot of stuff in just generally in programing is preference.', 'start': 2887.279, 'duration': 3.661}, {'end': 2895.038, 'text': "So let's do else and let's do a console log.", 'start': 2892.117, 'duration': 2.921}, {'end': 2899.099, 'text': "And obviously, if this isn't true, then X is not 10.", 'start': 2895.578, 'duration': 3.521}], 'summary': 'Using triple equals is preferred in programming for consistent type matching.', 'duration': 29.523, 'max_score': 2869.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2869576.jpg'}, {'end': 3117.543, 'src': 'embed', 'start': 3083.502, 'weight': 1, 'content': [{'end': 3090.424, 'text': 'Now, we do have something called the ternary operator, which is basically like a shorthand if statement.', 'start': 3083.502, 'duration': 6.922}, {'end': 3094.606, 'text': "And it's used a lot to assign variables based on a condition.", 'start': 3090.984, 'duration': 3.622}, {'end': 3106.893, 'text': "So an example would be, let's do Let's say x equals 10.", 'start': 3095.246, 'duration': 11.647}, {'end': 3109.836, 'text': "Let's say we want to create a variable called color.", 'start': 3106.893, 'duration': 2.943}, {'end': 3116.262, 'text': 'I want it based on if x is greater than 10.', 'start': 3110.837, 'duration': 5.425}, {'end': 3117.543, 'text': "I'll put the condition here.", 'start': 3116.262, 'duration': 1.281}], 'summary': 'Ternary operator is a shorthand if statement used to assign variables based on a condition.', 'duration': 34.041, 'max_score': 3083.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c3083502.jpg'}, {'end': 3413.071, 'src': 'embed', 'start': 3382.705, 'weight': 0, 'content': [{'end': 3388.59, 'text': "As far as arrow functions go, they're very handy and they clean things up quite a bit.", 'start': 3382.705, 'duration': 5.885}, {'end': 3394.034, 'text': 'They were introduced in ES6, also known as ES2015.', 'start': 3389.49, 'duration': 4.544}, {'end': 3401.88, 'text': 'So, if we wanted to turn this into an arrow function, what we would do is, instead of using the keyword function,', 'start': 3394.614, 'duration': 7.266}, {'end': 3406.243, 'text': 'we would name it as a variable and then we would put arrow.', 'start': 3401.88, 'duration': 4.363}, {'end': 3413.071, 'text': "uh, in equal sign here and then, after the print is after the parameters, we would put what's called a fat arrow.", 'start': 3406.705, 'duration': 6.366}], 'summary': 'Arrow functions in es6 are handy and tidy, introduced in es2015.', 'duration': 30.366, 'max_score': 3382.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c3382705.jpg'}], 'start': 2769.612, 'title': 'Javascript basics', 'summary': 'Covers javascript basics, including conditionals like if statements, else if, and and or operators, ternary operators, switches, defining default parameter values in functions, using arrow functions for cleaner code, differences between double and triple equals in conditional statements, and advantages of arrow functions.', 'chapters': [{'end': 3514.838, 'start': 2769.612, 'title': 'Javascript basics: conditionals, functions, and arrow functions', 'summary': 'Covers the basics of javascript including conditionals, such as if statements, else if, and using and and or operators, ternary operators, and switches, and functions, including defining default parameter values and using arrow functions for cleaner code. the chapter also details the differences between using the double equals and triple equals in conditional statements and explains the advantages of arrow functions in simplifying code.', 'duration': 745.226, 'highlights': ['The chapter covers the basics of JavaScript including conditionals, such as if statements, else if, and using AND and OR operators, ternary operators, and switches. It explains the various types of conditionals in JavaScript, including if statements, else if, and the usage of AND and OR operators, ternary operators, and switches.', 'Functions are detailed, including defining default parameter values and using arrow functions for cleaner code. The chapter explains how to define default parameter values for functions and the advantages of using arrow functions for writing cleaner and more concise code.', 'The chapter also details the differences between using the double equals and triple equals in conditional statements. It explains the differences between using double equals and triple equals in conditional statements, highlighting the importance of matching data types in certain scenarios.']}], 'duration': 745.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c2769612.jpg', 'highlights': ['Covers javascript basics, including conditionals like if statements, else if, and and or operators, ternary operators, switches, defining default parameter values in functions, using arrow functions for cleaner code, differences between double and triple equals in conditional statements, and advantages of arrow functions.', 'The chapter covers the basics of JavaScript including conditionals, such as if statements, else if, and using AND and OR operators, ternary operators, and switches. It explains the various types of conditionals in JavaScript, including if statements, else if, and the usage of AND and OR operators, ternary operators, and switches.', 'Functions are detailed, including defining default parameter values and using arrow functions for cleaner code. The chapter explains how to define default parameter values for functions and the advantages of using arrow functions for writing cleaner and more concise code.', 'The chapter also details the differences between using the double equals and triple equals in conditional statements. It explains the differences between using double equals and triple equals in conditional statements, highlighting the importance of matching data types in certain scenarios.']}, {'end': 4207.768, 'segs': [{'end': 3561.889, 'src': 'embed', 'start': 3514.838, 'weight': 0, 'content': [{'end': 3518.642, 'text': "All right, and then we'll just pass in one value here and save and we get 10.", 'start': 3514.838, 'duration': 3.804}, {'end': 3521.686, 'text': 'Okay, so you can see this really cuts things down.', 'start': 3518.642, 'duration': 3.044}, {'end': 3524.169, 'text': "And it's great to use with like for each.", 'start': 3522.186, 'duration': 1.983}, {'end': 3530.456, 'text': "So if you did like to do's dot for each or any of the array methods you could pass in.", 'start': 3524.789, 'duration': 5.667}, {'end': 3538.578, 'text': 'to do use an arrow and you could do like console dot log each to do so something like that.', 'start': 3531.656, 'duration': 6.922}, {'end': 3540.678, 'text': "So they're really nice.", 'start': 3539.398, 'duration': 1.28}, {'end': 3543.639, 'text': "Another thing they have what's called a lexical this.", 'start': 3541.158, 'duration': 2.481}, {'end': 3549.06, 'text': "So when you use the this keyword, which we haven't talked about, the scoping is a little different.", 'start': 3544.239, 'duration': 4.821}, {'end': 3552.901, 'text': "I'm not going to get into that, though, because it's just it's beyond this this course.", 'start': 3549.1, 'duration': 3.801}, {'end': 3555.302, 'text': "And we've already taken up a lot of time.", 'start': 3553.101, 'duration': 2.201}, {'end': 3561.889, 'text': 'But just know that it has an extra advantage when it comes to using the this keyword in certain situations.', 'start': 3556.082, 'duration': 5.807}], 'summary': 'Using arrow functions reduces code and has lexical this. great for array methods.', 'duration': 47.051, 'max_score': 3514.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c3514838.jpg'}, {'end': 3621.96, 'src': 'embed', 'start': 3589.138, 'weight': 2, 'content': [{'end': 3591.979, 'text': "So we're going to say function person with a capital P.", 'start': 3589.138, 'duration': 2.841}, {'end': 3595.379, 'text': 'When you create a constructor function, it should start with a capital.', 'start': 3591.979, 'duration': 3.4}, {'end': 3601.281, 'text': 'And as far as parameters, you want to pass in the properties you want to be able to set.', 'start': 3596.28, 'duration': 5.001}, {'end': 3605.662, 'text': "So let's do first name, last name, and let's do date of birth.", 'start': 3601.401, 'duration': 4.261}, {'end': 3614.536, 'text': 'Now, when we pass these in, we want to set them to properties of the of the object.', 'start': 3607.352, 'duration': 7.184}, {'end': 3615.957, 'text': 'So we do that with this.', 'start': 3614.616, 'duration': 1.341}, {'end': 3621.96, 'text': "So we say this dot first name equals the first name that's passed in.", 'start': 3616.297, 'duration': 5.663}], 'summary': 'Creating a constructor function for a person with first name, last name, and date of birth properties.', 'duration': 32.822, 'max_score': 3589.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c3589138.jpg'}, {'end': 3955.016, 'src': 'embed', 'start': 3930.222, 'weight': 3, 'content': [{'end': 3935.667, 'text': 'This is a way that we can see prototypes, which is another object.', 'start': 3930.222, 'duration': 5.445}, {'end': 3944.211, 'text': 'but we can attach methods and properties to this to the prototype and you can see we have a constructor in here.', 'start': 3936.408, 'duration': 7.803}, {'end': 3952.735, 'text': 'now what i would like to do is not have the functions with every object instance because we might not need to use these.', 'start': 3944.211, 'duration': 8.524}, {'end': 3955.016, 'text': 'so we want to put these in the prototype.', 'start': 3952.735, 'duration': 2.281}], 'summary': 'Using prototypes to attach methods and properties, reducing redundancy in object instances.', 'duration': 24.794, 'max_score': 3930.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c3930222.jpg'}, {'end': 4065.571, 'src': 'embed', 'start': 4041.135, 'weight': 4, 'content': [{'end': 4049.32, 'text': "With ES6, also called ES2015, I call it ES6, but it doesn't really matter what you call it.", 'start': 4041.135, 'duration': 8.185}, {'end': 4054.643, 'text': 'So with ES6, classes were added to JavaScript.', 'start': 4050.1, 'duration': 4.543}, {'end': 4060.087, 'text': "Now, it's important to know that with classes, it does the same exact thing under the hood.", 'start': 4055.183, 'duration': 4.904}, {'end': 4061.608, 'text': 'It does this exactly.', 'start': 4060.307, 'duration': 1.301}, {'end': 4063.95, 'text': 'It adds the methods to the prototype.', 'start': 4061.648, 'duration': 2.302}, {'end': 4065.571, 'text': 'So everything will look the same.', 'start': 4064.25, 'duration': 1.321}], 'summary': 'Es6 introduced classes to javascript, adding methods to the prototype.', 'duration': 24.436, 'max_score': 4041.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c4041135.jpg'}], 'start': 3514.838, 'title': 'Javascript object-oriented programming', 'summary': "Covers using arrow functions and lexical 'this', creating objects with custom properties and methods, working with dates and methods, and adding methods to objects using prototype in es5 and classes in es6.", 'chapters': [{'end': 3728.983, 'start': 3514.838, 'title': 'Javascript functions and object-oriented programming', 'summary': "Covers using arrow functions to simplify code and the advantages of lexical 'this', followed by creating objects using constructor functions and instantiating objects with custom properties and methods.", 'duration': 214.145, 'highlights': ['Using arrow functions to simplify code and work with array methods like forEach The speaker demonstrates using arrow functions to simplify code and work with array methods like forEach, enabling efficient and concise coding practices.', "Advantages of lexical 'this' in certain situations The chapter explains the advantages of a lexical 'this' in certain situations, providing a deeper understanding of scoping and its benefits in specific scenarios.", "Creating objects using constructor functions and setting properties The chapter delves into creating objects using constructor functions, emphasizing the need to start the function name with a capital letter and setting properties using 'this', leading to the instantiation of custom objects."]}, {'end': 3955.016, 'start': 3729.083, 'title': 'Working with dates and methods in javascript', 'summary': 'Covers converting date to object, using methods with date objects, adding custom methods to objects, and optimizing code by using prototypes in javascript.', 'duration': 225.933, 'highlights': ['You can turn a date string into a date object using the date constructor and format it in different ways, for example, displaying the full year as 1970.', 'Custom methods can be added to objects, such as getBirthYear and getFullName, to perform specific functionalities like retrieving birth year and full name.', 'Using prototypes allows for the optimization of code by attaching methods and properties to the prototype, preventing the need to include functions with every object instance.']}, {'end': 4207.768, 'start': 3955.016, 'title': 'Object-oriented programming in javascript', 'summary': 'Explains how to add methods to an object using prototype in es5 and how classes in es6 provide a prettier way of achieving the same result, with both approaches adding methods to the prototype.', 'duration': 252.752, 'highlights': ['With ES6, classes were added to JavaScript, providing a prettier way to add methods to an object, achieving the same result as using prototype in ES5.', 'ES6 classes are syntactic sugar for achieving the same result as the prototype approach in ES5, making it more familiar to developers from other programming backgrounds.', 'The chapter demonstrates adding methods to an object using prototype in ES5 and then compares it to achieving the same result using classes in ES6, highlighting the similarities and the prettier syntax of the latter approach.']}], 'duration': 692.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c3514838.jpg', 'highlights': ['Using arrow functions to simplify code and work with array methods like forEach', "Advantages of lexical 'this' in certain situations", 'Creating objects using constructor functions and setting properties', 'Using prototypes allows for the optimization of code by attaching methods and properties', 'With ES6, classes were added to JavaScript, providing a prettier way to add methods to an object', 'ES6 classes are syntactic sugar for achieving the same result as the prototype approach in ES5']}, {'end': 4993.045, 'segs': [{'end': 4261.78, 'src': 'embed', 'start': 4207.788, 'weight': 0, 'content': [{'end': 4212.632, 'text': "You're just doing it in a different way that's a little prettier and a little easier to write and read.", 'start': 4207.788, 'duration': 4.844}, {'end': 4213.622, 'text': 'All right.', 'start': 4213.342, 'duration': 0.28}, {'end': 4218.266, 'text': "So, I mean, you don't have to use classes, but I mean, I prefer them just because they're easier to write.", 'start': 4213.662, 'duration': 4.604}, {'end': 4220.527, 'text': "I think I think they're more organized.", 'start': 4218.826, 'duration': 1.701}, {'end': 4226.632, 'text': "So that that's pretty much the basics of object oriented programming.", 'start': 4221.628, 'duration': 5.004}, {'end': 4228.433, 'text': "So let's get rid of this.", 'start': 4227.312, 'duration': 1.121}, {'end': 4232.896, 'text': "And now let's move on to the Dom.", 'start': 4229.814, 'duration': 3.082}, {'end': 4244.306, 'text': 'As far as what I want to work with, I have some predefined HTML and CSS that I want to add.', 'start': 4235.218, 'duration': 9.088}, {'end': 4249.55, 'text': "What I'm going to do is put a link in the description for you to copy it if you want to follow along.", 'start': 4244.326, 'duration': 5.224}, {'end': 4253.253, 'text': 'Let me just grab this real quick.', 'start': 4250.611, 'duration': 2.642}, {'end': 4258.998, 'text': "I'll go over it in a second.", 'start': 4257.677, 'duration': 1.321}, {'end': 4260.199, 'text': 'At least the HTML.', 'start': 4259.338, 'duration': 0.861}, {'end': 4261.78, 'text': "The CSS isn't really important.", 'start': 4260.219, 'duration': 1.561}], 'summary': 'Introduction to object-oriented programming and working with predefined html and css.', 'duration': 53.992, 'max_score': 4207.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c4207788.jpg'}, {'end': 4343.309, 'src': 'embed', 'start': 4291.652, 'weight': 2, 'content': [{'end': 4295.335, 'text': "We have a section with the class of container that's pushing everything into the middle.", 'start': 4291.652, 'duration': 3.683}, {'end': 4297.637, 'text': 'We have a form that has a background.', 'start': 4295.715, 'duration': 1.922}, {'end': 4299.858, 'text': 'We have this H1.', 'start': 4298.737, 'duration': 1.121}, {'end': 4304.261, 'text': "We have an empty div of message, and I'm going to deal with that later.", 'start': 4299.898, 'duration': 4.363}, {'end': 4309.265, 'text': 'And then we have two labels and inputs, one for name, one for email.', 'start': 4304.762, 'duration': 4.503}, {'end': 4311.447, 'text': 'We have an input submit button.', 'start': 4309.405, 'duration': 2.042}, {'end': 4315.87, 'text': "And then we have a UL with the ID of users that's empty.", 'start': 4312.187, 'duration': 3.683}, {'end': 4321.394, 'text': 'And we also have this commented out unordered list of items.', 'start': 4316.37, 'duration': 5.024}, {'end': 4326.358, 'text': 'And the reason I have this here is just to show you how we can manipulate stuff in the DOM.', 'start': 4322.075, 'duration': 4.283}, {'end': 4329.28, 'text': 'Okay, so the DOM is the Document Object Model.', 'start': 4327.039, 'duration': 2.241}, {'end': 4336.104, 'text': "It's basically like a tree structure of your whole document, so your HTML tags and stuff like that.", 'start': 4329.3, 'duration': 6.804}, {'end': 4338.266, 'text': 'I do have a four part.', 'start': 4336.985, 'duration': 1.281}, {'end': 4343.309, 'text': 'crash course on YouTube called JavaScript Dom crash course.', 'start': 4339.407, 'duration': 3.902}], 'summary': 'The html document includes a container, form, h1, message div, labels, inputs, submit button, empty ul, and commented out list; the speaker also mentions a crash course on javascript dom on youtube.', 'duration': 51.657, 'max_score': 4291.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c4291652.jpg'}, {'end': 4394.567, 'src': 'embed', 'start': 4364.3, 'weight': 4, 'content': [{'end': 4373.824, 'text': 'OK, so selecting things from the DOM, we can actually take elements, HTML elements and put them into variables and stuff like that and work with them.', 'start': 4364.3, 'duration': 9.524}, {'end': 4385.709, 'text': 'So as far as selectors go, we have single element selectors and we have multiple element selectors.', 'start': 4375.104, 'duration': 10.605}, {'end': 4391.142, 'text': 'So as far as single element selectors, we have documents.', 'start': 4386.835, 'duration': 4.307}, {'end': 4394.567, 'text': 'OK, so these are going to be on the document object.', 'start': 4392.063, 'duration': 2.504}], 'summary': 'Dom manipulation involves single and multiple element selectors, stored in variables for interaction.', 'duration': 30.267, 'max_score': 4364.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c4364300.jpg'}, {'end': 4671.369, 'src': 'embed', 'start': 4618.894, 'weight': 6, 'content': [{'end': 4624.078, 'text': "Okay, now there's multiple element selectors if you want to select more than one thing.", 'start': 4618.894, 'duration': 5.184}, {'end': 4631.103, 'text': "So for instance, down here, I'm going to uncomment this unordered list of items.", 'start': 4624.678, 'duration': 6.425}, {'end': 4633.184, 'text': 'So item one, item two, item three.', 'start': 4631.443, 'duration': 1.741}, {'end': 4639.128, 'text': 'So I want to select all of these list items.', 'start': 4633.865, 'duration': 5.263}, {'end': 4648.275, 'text': "Okay, so I'm going to do, let's do console log document dot, and I'm going to use query selector all.", 'start': 4639.148, 'duration': 9.127}, {'end': 4652.896, 'text': 'So querySelectorAll is meant to select more than one.', 'start': 4650.014, 'duration': 2.882}, {'end': 4654.817, 'text': "So let's pass in .item.", 'start': 4653.016, 'duration': 1.801}, {'end': 4657.059, 'text': "And we'll save.", 'start': 4656.318, 'duration': 0.741}, {'end': 4660.161, 'text': 'And what this gives us, let me comment these two out.', 'start': 4657.459, 'duration': 2.702}, {'end': 4666.025, 'text': 'What this gives us is something called a node list, which is very similar to an array.', 'start': 4661.522, 'duration': 4.503}, {'end': 4668.447, 'text': 'In fact, we can run array methods on it.', 'start': 4666.105, 'duration': 2.342}, {'end': 4671.369, 'text': 'We can do like foreaches and stuff like that.', 'start': 4668.927, 'duration': 2.442}], 'summary': 'Using queryselectorall to select multiple list items and work with them like an array.', 'duration': 52.475, 'max_score': 4618.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c4618894.jpg'}], 'start': 4207.788, 'title': 'Object-oriented programming, html, css, and dom elements', 'summary': 'Covers the basics of object-oriented programming, html, and css, including creating files, adding predefined html and css, and examining html structure. it also covers selecting and manipulating dom elements using various selectors and demonstrates manipulating the dom by removing elements, editing content, and selecting elements by index.', 'chapters': [{'end': 4315.87, 'start': 4207.788, 'title': 'Object-oriented programming and working with html and css', 'summary': 'Covers the basics of object-oriented programming and working with html and css, including creating a file for css, adding predefined html and css, and examining the structure of the html.', 'duration': 108.082, 'highlights': ['The chapter emphasizes the basics of object-oriented programming, mentioning the preference for using classes as they are easier to write and more organized.', 'The instructor provides guidance on working with HTML and CSS, including creating a file for CSS, adding predefined HTML and CSS, and examining the structure of the HTML.', 'The chapter includes a step-by-step demonstration of the HTML structure, highlighting the elements such as headers, sections, forms, inputs, and labels.', 'The instructor encourages following along by providing a link for copying the predefined HTML and CSS, fostering practical engagement with the material.']}, {'end': 4993.045, 'start': 4316.37, 'title': 'Selecting and manipulating dom elements', 'summary': 'Covers the basics of selecting elements from the dom using single element selectors like get element by id and query selector, as well as multiple element selectors like query selector all. it also demonstrates how to manipulate the dom by removing elements, editing content, and selecting elements by index.', 'duration': 676.675, 'highlights': ['The chapter covers the basics of selecting elements from the DOM using single element selectors like get element by ID and query selector. It explains the usage of single element selectors like document.getElementById and querySelector to retrieve specific elements from the DOM.', 'The chapter also demonstrates how to manipulate the DOM by removing elements, editing content, and selecting elements by index. It showcases the manipulation of the DOM by removing elements using methods like remove, editing content using properties like text content and inner text, and selecting elements by index using properties like first element child and children.', 'The chapter explains the usage of multiple element selectors like query selector all. It discusses the usage of querySelectorAll to select multiple elements from the DOM and demonstrates that the result is similar to an array, allowing the usage of array methods.']}], 'duration': 785.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c4207788.jpg', 'highlights': ['The chapter emphasizes the basics of object-oriented programming, mentioning the preference for using classes as they are easier to write and more organized.', 'The instructor provides guidance on working with HTML and CSS, including creating a file for CSS, adding predefined HTML and CSS, and examining the structure of the HTML.', 'The chapter includes a step-by-step demonstration of the HTML structure, highlighting the elements such as headers, sections, forms, inputs, and labels.', 'The instructor encourages following along by providing a link for copying the predefined HTML and CSS, fostering practical engagement with the material.', 'The chapter covers the basics of selecting elements from the DOM using single element selectors like get element by ID and query selector.', 'The chapter also demonstrates how to manipulate the DOM by removing elements, editing content, and selecting elements by index.', 'The chapter explains the usage of multiple element selectors like query selector all.', 'It discusses the usage of querySelectorAll to select multiple elements from the DOM and demonstrates that the result is similar to an array, allowing the usage of array methods.']}, {'end': 6029.209, 'segs': [{'end': 5084.876, 'src': 'embed', 'start': 5056.921, 'weight': 0, 'content': [{'end': 5059.063, 'text': 'Now you might be saying why would I do this?', 'start': 5056.921, 'duration': 2.142}, {'end': 5064.828, 'text': 'We have CSS, but you can have events and functions and you can make this dynamic,', 'start': 5059.103, 'duration': 5.725}, {'end': 5069.152, 'text': 'so you can like click on one thing and have the color of something else change, or.', 'start': 5064.828, 'duration': 4.324}, {'end': 5072.472, 'text': 'have the size change or anything at all.', 'start': 5069.571, 'duration': 2.901}, {'end': 5076.453, 'text': 'So you can really manipulate things in your user interface in real time.', 'start': 5072.492, 'duration': 3.961}, {'end': 5080.815, 'text': "And I'm going to show you about events in a second.", 'start': 5076.473, 'duration': 4.342}, {'end': 5082.596, 'text': "Actually, we'll take a look at events now.", 'start': 5081.075, 'duration': 1.521}, {'end': 5084.876, 'text': "So I'm going to just get rid of this.", 'start': 5083.476, 'duration': 1.4}], 'summary': 'Css allows dynamic manipulation of user interface elements in real time.', 'duration': 27.955, 'max_score': 5056.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c5056921.jpg'}, {'end': 5184.003, 'src': 'embed', 'start': 5154.257, 'weight': 2, 'content': [{'end': 5157.858, 'text': 'And when you submit a form, it actually submits to the file.', 'start': 5154.257, 'duration': 3.601}, {'end': 5165.321, 'text': 'So if you have either a click on a submit button or you have a form submit, you have to stop the prevent.', 'start': 5158.578, 'duration': 6.743}, {'end': 5168.302, 'text': 'I mean, you have to prevent the default behavior.', 'start': 5165.801, 'duration': 2.501}, {'end': 5173.7, 'text': 'So the way that you do that is you take that event parameter and you call prevent default.', 'start': 5168.722, 'duration': 4.978}, {'end': 5176.201, 'text': 'Okay Call that method and that will stop it.', 'start': 5173.86, 'duration': 2.341}, {'end': 5180.062, 'text': 'So now if I click, now we just get click.', 'start': 5176.261, 'duration': 3.801}, {'end': 5184.003, 'text': "It doesn't flash and go away because the form is no longer actually submitting.", 'start': 5180.082, 'duration': 3.921}], 'summary': 'To prevent form submission, use event parameter to call preventdefault method.', 'duration': 29.746, 'max_score': 5154.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c5154257.jpg'}, {'end': 5491.33, 'src': 'embed', 'start': 5458.835, 'weight': 3, 'content': [{'end': 5463.238, 'text': 'So I want to grab a bunch of stuff from the DOM and put them into variables.', 'start': 5458.835, 'duration': 4.403}, {'end': 5466.381, 'text': "So let's say const my form.", 'start': 5463.338, 'duration': 3.043}, {'end': 5472.346, 'text': 'Set that to document dot query selector.', 'start': 5468.122, 'duration': 4.224}, {'end': 5476.369, 'text': 'ID my dash form.', 'start': 5474.148, 'duration': 2.221}, {'end': 5480.353, 'text': 'Just going to copy this down a couple of times.', 'start': 5477.951, 'duration': 2.402}, {'end': 5484.425, 'text': 'I also want to grab the the name field.', 'start': 5480.373, 'duration': 4.052}, {'end': 5491.33, 'text': "so this input has an ID of name, so I'm going to call this name input.", 'start': 5484.425, 'duration': 6.905}], 'summary': "Extracting dom elements: const myform = document.queryselector('#my-form'); nameinput = document.queryselector('#name');", 'duration': 32.495, 'max_score': 5458.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c5458835.jpg'}, {'end': 5770.29, 'src': 'embed', 'start': 5739.574, 'weight': 4, 'content': [{'end': 5745.419, 'text': "OK, now I'm going to take it a step further and I want this to disappear after three seconds.", 'start': 5739.574, 'duration': 5.845}, {'end': 5751.464, 'text': 'In JavaScript, we have a function called set timeout, which takes in a function.', 'start': 5745.979, 'duration': 5.485}, {'end': 5755.507, 'text': "So we could either do a regular function or I'm going to do an arrow function.", 'start': 5751.644, 'duration': 3.863}, {'end': 5758.041, 'text': 'and no parameters.', 'start': 5757, 'duration': 1.041}, {'end': 5770.29, 'text': "so just put an arrow like that and then i'm going to say msg, which is our class, and use dot remove, which will completely remove it from the dom.", 'start': 5758.041, 'duration': 12.249}], 'summary': 'Using javascript set timeout to make element disappear after 3 seconds', 'duration': 30.716, 'max_score': 5739.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c5739574.jpg'}, {'end': 5974.328, 'src': 'embed', 'start': 5948.961, 'weight': 5, 'content': [{'end': 5955.103, 'text': "So if you want to have an application where you save data, you're going to have to, well, there's a few things you could do.", 'start': 5948.961, 'duration': 6.142}, {'end': 5959.784, 'text': "You're probably going to have some kind of back end that interacts with a database.", 'start': 5955.723, 'duration': 4.061}, {'end': 5966.705, 'text': 'So something like Node.js or PHP or Python or something like that that connects to a database.', 'start': 5959.804, 'duration': 6.901}, {'end': 5972.447, 'text': 'And then what you would do is send requests from your front end using something like the Fetch API.', 'start': 5967.226, 'duration': 5.221}, {'end': 5974.328, 'text': 'OK, or Ajax.', 'start': 5973.247, 'duration': 1.081}], 'summary': 'To save data in an application, use a back end like node.js, php, or python to interact with a database and send requests from the front end using fetch api or ajax.', 'duration': 25.367, 'max_score': 5948.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c5948961.jpg'}], 'start': 4993.225, 'title': 'Manipulating the dom with javascript', 'summary': 'Discusses using innerhtml and queryselector to add html content and change css, manipulating user interface with events to trigger actions, creating a user form with dom manipulation for form validation, and using javascript to manipulate the dom, including adding user input and options for saving data.', 'chapters': [{'end': 5056.4, 'start': 4993.225, 'title': 'Using innerhtml and queryselector in javascript', 'summary': 'Discusses using innerhtml and queryselector in javascript to dynamically add html content and change css properties, demonstrating how to select elements by class and modify their styles, with an example of changing the background color of a button to red.', 'duration': 63.175, 'highlights': ['The chapter demonstrates using innerHTML to dynamically add HTML content to an H1 element.', "The chapter showcases using querySelector to select elements by class, with an example of selecting a button with the class 'btn'.", 'The chapter illustrates changing the background color of a button using JavaScript, showcasing the capability to modify CSS properties dynamically.']}, {'end': 5431.71, 'start': 5056.921, 'title': 'Manipulating user interface with events', 'summary': 'Demonstrates how to manipulate user interface in real time by adding event listeners and using event object properties to change elements and trigger actions, showcasing the capability to add classes, change text content, and respond to different events like hover and click.', 'duration': 374.789, 'highlights': ['The chapter demonstrates adding event listeners and using event object properties to change elements and trigger actions. The tutorial shows how to add an event listener to a button element and use the event object properties to change the background color and add a class to the body, showcasing the capability to manipulate user interface in real time.', 'The tutorial explains how to use the event object properties to access and manipulate elements, such as changing text content and responding to different events like hover and click. The tutorial showcases using event object properties like target to access the element, changing text content using innerHTML, and responding to different events like mouseover and mouseout, demonstrating the ability to dynamically change the user interface based on user interactions.', 'The tutorial provides insights into preventing default behavior of form submission by using the event object method preventDefault. The tutorial explains the necessity of calling preventDefault method on the event object in the context of a submit button to prevent the default form submission behavior, showcasing the importance of understanding and controlling default behaviors through event handling.']}, {'end': 5739.554, 'start': 5432.071, 'title': 'Creating a user form with dom manipulation', 'summary': 'Explains the process of creating a functional user form application using dom manipulation, including grabbing elements, form validation, and displaying error messages, with an example of adding users and handling submission events.', 'duration': 307.483, 'highlights': ['The process of grabbing elements from the DOM using querySelector and setting them to variables was explained, including examples with name input, email input, message class, and user list, showcasing the practical implementation of DOM manipulation.', 'The use of event listeners to handle form submission events was demonstrated, with a specific focus on preventing default behavior, accessing input values, and performing form validation to ensure both fields are filled out before submission.', 'The approach to displaying error messages without using standard alert, by modifying the innerHTML and adding a specific class to the message, was presented as a modern and visually appealing alternative to traditional alert messages.']}, {'end': 6029.209, 'start': 5739.574, 'title': 'Manipulating the dom with javascript', 'summary': 'Covers using javascript to make elements disappear after three seconds, adding user input as list items, and the need for backend systems to save data, mentioning options like node.js, fetch api, and local storage.', 'duration': 289.635, 'highlights': ['Using set timeout function to make elements disappear after three seconds The speaker demonstrates using the set timeout function in JavaScript to make an error message disappear after three seconds, showcasing a practical implementation of the function.', 'Adding user input as list items in the DOM The speaker explains the process of creating a list item using the document.createlement method and adding user input values as text nodes, providing a clear demonstration of manipulating the DOM with JavaScript.', 'Discussing the need for backend systems to save data The speaker emphasizes the need for backend systems like Node.js, PHP, or Python to interact with databases, along with options like the Fetch API, Ajax, and local storage for saving user data, providing valuable insights into the requirements for data persistence.']}], 'duration': 1035.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hdI2bqOjy3c/pics/hdI2bqOjy3c4993225.jpg', 'highlights': ['The chapter illustrates changing the background color of a button using JavaScript, showcasing the capability to modify CSS properties dynamically.', 'The tutorial shows how to add an event listener to a button element and use the event object properties to change the background color and add a class to the body, showcasing the capability to manipulate user interface in real time.', 'The tutorial provides insights into preventing default behavior of form submission by using the event object method preventDefault, showcasing the importance of understanding and controlling default behaviors through event handling.', 'The process of grabbing elements from the DOM using querySelector and setting them to variables was explained, including examples with name input, email input, message class, and user list, showcasing the practical implementation of DOM manipulation.', 'Using set timeout function to make elements disappear after three seconds The speaker demonstrates using the set timeout function in JavaScript to make an error message disappear after three seconds, showcasing a practical implementation of the function.', 'Discussing the need for backend systems to save data The speaker emphasizes the need for backend systems like Node.js, PHP, or Python to interact with databases, along with options like the Fetch API, Ajax, and local storage for saving user data, providing valuable insights into the requirements for data persistence.']}], 'highlights': ['JavaScript is utilized in building interactive interfaces and applications with popular frameworks like React, Angular, and Vue.js.', 'The crash course covers basic syntax and all the fundamentals to get started with JavaScript.', 'JavaScript is the language of the browser, used for client-side programming, and also runs on the server with Node.js.', 'Utilizing Visual Studio Code and the live server extension provides a convenient development environment, allowing for automatic page reloads upon saving, which can significantly speed up the development process.', 'The chapter covers primitive data types such as strings, numbers, booleans, null, and undefined, with examples of their assignment to variables and emphasizes the absence of a float or decimal data type in JavaScript.', 'The importance of JSON in full stack development and API usage is emphasized, highlighting its role as a data format used for sending and receiving data to and from servers, with its similarity to object literals and the availability of online tools for converting data into JSON format.', 'Array methods like push, unshift, pop, isArray, and indexOf offer efficient ways to manipulate and access array elements.', 'Object literals in JavaScript enable the creation of key-value pairs, including support for different data types and embedded objects.', 'The high-order array methods like forEach, map, and filter, demonstrating their simplicity and power in manipulating data.', 'Covers javascript basics, including conditionals like if statements, else if, and and or operators, ternary operators, switches, defining default parameter values in functions, using arrow functions for cleaner code, differences between double and triple equals in conditional statements, and advantages of arrow functions.', 'Using arrow functions to simplify code and work with array methods like forEach', 'The chapter emphasizes the basics of object-oriented programming, mentioning the preference for using classes as they are easier to write and more organized.', 'The tutorial shows how to add an event listener to a button element and use the event object properties to change the background color and add a class to the body, showcasing the capability to manipulate user interface in real time.', 'The process of grabbing elements from the DOM using querySelector and setting them to variables was explained, including examples with name input, email input, message class, and user list, showcasing the practical implementation of DOM manipulation.', 'Discussing the need for backend systems to save data The speaker emphasizes the need for backend systems like Node.js, PHP, or Python to interact with databases, along with options like the Fetch API, Ajax, and local storage for saving user data, providing valuable insights into the requirements for data persistence.']}