title
Modern JavaScript From The Beginning | First 12 Hours

description
This is the first 12 hours of my 37-hour JavaScript course. In thes video we will go over the fundamentals in-depth. Get The Full Course For $15! PROMO CODE: YOUTUBEJAVASCRIPT https://www.traversymedia.com/modern-javascript-2-0 JAVASCRIPT SANDBOX REPO: https://github.com/bradtraversy/javascript-sandbox SHOPPING LIST PROJECT: https://github.com/bradtraversy/shopping-list Timestamps: 0:00 - Intro 1:00 - What is JavaScript? 8:43 - Environment Setup 14:10 - Running JS In The Browser 21:14 - Using The Sandbox 24:15 - The Browser Console 34:22 - Comments & Shortcuts 41:26 - Variables & Constants 52:56 - Data Types 1:05:52 - Primitive vs Reference Types 1:13:02 - Type Conversion 1:23:10 - Arithmetic & Comparison Operators 1:32:51 - Type Coercion 1:36:54 - Strings 1:52:55 - Capitalize Challenge 1:59:46 - Numbers 2:05:34 - Math Object 2:11:33 -Number Challenge 2:20:05 - Date Object 2:28:20 - Date Object Methods 2:37:20 - Section 2 Intro - Arrays & Objects 2:38:02 - Array Basics 2:45:27 - Array Methods 2:55:56 - Nesting, Concat & Spread 3:06:06 - Array Challenges 3:13:16 - Object Literals 3:21:24 - Object Spread Operator 3:33:25 - Destructuring & Naming 3:40:24 - JSON Intro 3:49:27 - Object Challenge 3:55:50 - Section 3 Intro - Functions, Scope & Execution Context 3:57:22 - Function Basics 4:03:32 - Parameters & Arguments 4:13:55 - Global & Function Scope 4:19:23 - Block Scope 4:24:42 - Nested Scope 4:27:38 - Declaration vs Expression 4:31:56 - Arrow Functions 4:39:35 - IFFE 4:44:39 - Function Challenges 4:57:00 - Execution Context 5:06:20 - Execution Context In Action 5:10:21 - The Call Stack 5:15:14 - Section 4 Intro - Logic & Contol Flow 5:16:25 - If Statements 5:23:18 - If-Else & Nesting 5:30:29 - Switch Statements 5:35:29 - Calculator Challenge 5:38:52 - Truthy & Falsy Values 5:51:10 - Logical Operators 5:59:19 - Logical Assignment 6:05:33 - Ternary Operator 6:15:52 - Section 5 Intro - Loops & High Order Array Functions 6:16:49 - For Loop 6:28:16 - Break & Continue 6:31:09 - While & Do...While Loops 6:38:10 - FizzBuzz Challenge 6:46:14 - For...Of Loop 6:51:18 - For...In Loop 6:54:28 - Array.forEach 7:03:03 - Array.filter 7:14:38 - Array.map 7:30:10 - Array.reduce 7:39:01 - Array Method Challenges 7:49:33 - Section 6 Intro - The DOM 7:50:46 - Intro To The DOM 8:01:52 - Document Element Properties 8:16:14 - DOM Selectors - Single Elements 8:30:29 - DOM Selectors - Multiple Elements 8:39:49 - Traversing The DOM - Elements 8:51:16 - Traversing The DOM - Nodes 9:05:07 - Create & Append Elements 9:11:25 - innerHTML vs CreateElement 9:20:20 - Refactor To Multiple Functions 9:24:32 - Insert Elements, Text & HTML 9:33:59 - Custom insertAfter() Challenge 9:38:49 - Replacing Elements 9:48:38 - Removing Elements 9:56:28 - Working With Styles & Classes 10:06:09 - Section 7 Intro - Events 10:07:00 - Event Listeners 10:20:03 - Mouse Events 10:30:47 - The Event Object 10:43:49 - Keyboard Events & Key Properties 10:54:21 - KeyCode Mini-Project 11:09:14 - Input Events 11:21:05 - Form Submission & Form Object 11:31:52 - Event Bubbling 11:37:33 - Event Delegation & Muiltiple Events 11:43:21 - Page Loading & Window Events

detail
{'title': 'Modern JavaScript From The Beginning | First 12 Hours', 'heatmap': [{'end': 1713.6, 'start': 1282.951, 'weight': 0.715}, {'end': 2573.267, 'start': 2140.092, 'weight': 0.82}, {'end': 4288.297, 'start': 3851.998, 'weight': 0.731}, {'end': 6427.271, 'start': 5996.306, 'weight': 0.826}, {'end': 7714.17, 'start': 7279.877, 'weight': 0.718}, {'end': 11138.993, 'start': 9848.975, 'weight': 0.731}, {'end': 13713.726, 'start': 12417.622, 'weight': 0.78}, {'end': 15422.514, 'start': 14987.326, 'weight': 0.87}, {'end': 16283.624, 'start': 15848.901, 'weight': 0.734}, {'end': 25282.876, 'start': 24417.677, 'weight': 1}, {'end': 29135.765, 'start': 28271.633, 'weight': 0.882}, {'end': 29997.273, 'start': 29556.598, 'weight': 0.709}, {'end': 34272.999, 'start': 33841.055, 'weight': 0.719}, {'end': 37273.872, 'start': 36842.358, 'weight': 0.715}], 'summary': 'A 13-hour modern javascript course covers web development, data manipulation, dynamic user interfaces, and fundamentals such as data types, control structures, functions, the dom, browser developer tools, type conversion, string manipulation, objects, arrays, json, execution context, control flow, operators, values, loops, array methods, dom manipulation, event handling, form handling, and best practices.', 'chapters': [{'end': 1427.693, 'segs': [{'end': 638.648, 'src': 'embed', 'start': 612.408, 'weight': 3, 'content': [{'end': 616.431, 'text': "And then I'd also say install Node.js just to have it on your system.", 'start': 612.408, 'duration': 4.023}, {'end': 625.959, 'text': 'Node.js is a JavaScript runtime, so it essentially allows you to run JavaScript on your machine or on a server rather than just in the browser.', 'start': 616.792, 'duration': 9.167}, {'end': 630.383, 'text': 'So you can actually use Node.js as your backend technology.', 'start': 626.26, 'duration': 4.123}, {'end': 638.648, 'text': "Now, this, of course, is not Node.js course, but there are some things that I'd like to talk about, especially with NPM,", 'start': 630.743, 'duration': 7.905}], 'summary': 'Install node.js to run javascript on your machine or server, and use it as your backend technology.', 'duration': 26.24, 'max_score': 612.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo612408.jpg'}, {'end': 682.605, 'src': 'embed', 'start': 658.28, 'weight': 5, 'content': [{'end': 664.084, 'text': "I have a ton installed, but there's really only two that I would highly recommend that you use with this course.", 'start': 658.28, 'duration': 5.804}, {'end': 666.466, 'text': 'So one is called Live Server.', 'start': 664.564, 'duration': 1.902}, {'end': 668.307, 'text': 'So if we scroll down here.', 'start': 666.746, 'duration': 1.561}, {'end': 670.599, 'text': "Let's see right here, live server.", 'start': 669.138, 'duration': 1.461}, {'end': 676.542, 'text': "So we are we're writing front end JavaScript, so we don't really need any kind of server.", 'start': 671.139, 'duration': 5.403}, {'end': 682.605, 'text': 'You could have an HTML file right on your desktop and have a JavaScript file link to it,', 'start': 676.742, 'duration': 5.863}], 'summary': 'Highly recommend using live server for front-end javascript development.', 'duration': 24.325, 'max_score': 658.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo658280.jpg'}, {'end': 1359.552, 'src': 'embed', 'start': 1330.451, 'weight': 0, 'content': [{'end': 1336.675, 'text': 'Now, in the downloads for this video, you will have the finished version of the sandbox, which, of course, is all the finished JavaScript.', 'start': 1330.451, 'duration': 6.224}, {'end': 1342.139, 'text': "And then you'll have a starter version, which is going to be pretty much everything but the JavaScript.", 'start': 1337.256, 'duration': 4.883}, {'end': 1343.78, 'text': "You'll have all the files and folders.", 'start': 1342.159, 'duration': 1.621}, {'end': 1349.284, 'text': "You'll have the HTML, any CSS if we used any CSS, but the JavaScript will be empty.", 'start': 1343.8, 'duration': 5.484}, {'end': 1353.687, 'text': 'And if you want to use that starter package, you can or like I said, you can create your own.', 'start': 1349.664, 'duration': 4.023}, {'end': 1359.552, 'text': "So right now, what I'm going to do in this this console folder is just create a boilerplate.", 'start': 1354.287, 'duration': 5.265}], 'summary': 'Transcript provides download options for finished & starter sandbox versions with complete html and potentially css.', 'duration': 29.101, 'max_score': 1330.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo1330451.jpg'}], 'start': 0.149, 'title': 'Introduction to modern javascript', 'summary': "Introduces a 13-hour modern javascript course, emphasizing javascript's role in web development, data manipulation, dynamic user interfaces, and covering fundamentals such as data types, control structures, functions, and the dom.", 'chapters': [{'end': 319.058, 'start': 0.149, 'title': 'Introduction to modern javascript', 'summary': "Introduces a 13-hour modern javascript course, highlighting its focus on fundamentals such as data types, control structures, functions, and the dom, and emphasizes javascript's role in web development, data manipulation, and dynamic user interfaces.", 'duration': 318.909, 'highlights': ['The course introduces a 13-hour Modern JavaScript course, which is a portion of a 37-hour course. The course is 13 hours long and is part of a larger 37-hour course, focusing on fundamentals such as data types, control structures, functions, loops, and the DOM.', "JavaScript's role in web development, data manipulation, and dynamic user interfaces is emphasized. JavaScript is highlighted as a core technology of web development, enabling dynamic user interfaces, data manipulation, and interaction with databases, both on the client and server sides.", "The use of JavaScript for DOM manipulation, event handling, and asynchronous requests is explained. JavaScript's capabilities for manipulating the DOM, handling events, and making asynchronous requests, such as interacting with back end servers and public APIs, are outlined."]}, {'end': 570.58, 'start': 320.018, 'title': 'Javascript for web development', 'summary': 'Discusses the creation of single page applications using javascript, the versatility and popularity of javascript, and the tools and environment required for front-end web development.', 'duration': 250.562, 'highlights': ['JavaScript is one of the most widely used programming languages, with millions of developers using it to build websites, web applications, browser-based games, server-side APIs and more. JavaScript is widely used in web development, including building websites, web applications, and server-side APIs, making it a valuable skill with numerous job opportunities.', "JavaScript is used on both the front end and back end of web development, making it a full stack language, and it allows developers to build complete web applications using only JavaScript. JavaScript's versatility enables developers to create full-stack web applications and even complex mobile and desktop applications using technologies like React Native and Electron.", 'JavaScript has a very large and active community providing a wealth of resources, support, tutorials, and tools for learning and improving skills. The active JavaScript community offers abundant resources, support, and tools, including npm with over 1.3 million packages, contributing to its popularity and ease of use.']}, {'end': 837.445, 'start': 571.46, 'title': 'Installing git, node.js, and essential extensions', 'summary': 'Covers the installation of git for version control, node.js for javascript runtime, and essential extensions including live server for auto-reloading and prettier for code formatting.', 'duration': 265.985, 'highlights': ['Installing Git and setting up repositories for code, with the ability to push to third-party services like GitHub or GitLab. Git allows the creation of repositories for code, with the ability to push to third-party services like GitHub or GitLab, providing a solid foundation for version control and collaboration.', 'Installation of Node.js for running JavaScript on machines and servers, with a focus on using Node Package Manager (NPM) for managing packages. Node.js installation enables running JavaScript on machines and servers, with a focus on utilizing Node Package Manager (NPM) for efficient package management.', 'Recommendation of essential extensions including Live Server for auto-reloading and Prettier for code formatting, with detailed settings and benefits explained. The chapter recommends essential extensions such as Live Server for auto-reloading and Prettier for code formatting, providing detailed settings and benefits to ensure efficient development practices.']}, {'end': 1427.693, 'start': 837.786, 'title': 'Javascript basics and setting up environment', 'summary': 'Covers setting up the javascript environment, including creating html and javascript files, using a text editor, and utilizing live server for automatic reloading, with a focus on creating a javascript sandbox for each section of the course.', 'duration': 589.907, 'highlights': ['The chapter covers setting up the JavaScript environment, including creating HTML and JavaScript files, using a text editor, and utilizing live server for automatic reloading. The chapter emphasizes the process of creating HTML and JavaScript files, using a text editor, and leveraging live server for automatic reloading, which enhances the development process.', 'The focus is on creating a JavaScript sandbox for each section of the course, with a folder for each section and a folder for each video with the respective code. The chapter emphasizes creating a JavaScript sandbox for each section, with a specific folder structure for organizing code related to each video, enhancing resource accessibility.', "The chapter also mentions providing a finished version and a starter version of the sandbox in the downloads for users' convenience. The chapter mentions providing a finished version and a starter version of the sandbox in the downloads, offering users flexibility in utilizing the provided resources or creating their own."]}], 'duration': 1427.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo149.jpg', 'highlights': ['JavaScript is a core technology of web development, enabling dynamic user interfaces, data manipulation, and interaction with databases, both on the client and server sides.', "JavaScript's versatility enables developers to create full-stack web applications and even complex mobile and desktop applications using technologies like React Native and Electron.", 'The active JavaScript community offers abundant resources, support, and tools, including npm with over 1.3 million packages, contributing to its popularity and ease of use.', 'Git allows the creation of repositories for code, with the ability to push to third-party services like GitHub or GitLab, providing a solid foundation for version control and collaboration.', 'Node.js installation enables running JavaScript on machines and servers, with a focus on utilizing Node Package Manager (NPM) for efficient package management.', 'The chapter recommends essential extensions such as Live Server for auto-reloading and Prettier for code formatting, providing detailed settings and benefits to ensure efficient development practices.', 'The chapter emphasizes the process of creating HTML and JavaScript files, using a text editor, and leveraging live server for automatic reloading, which enhances the development process.', 'The chapter emphasizes creating a JavaScript sandbox for each section, with a specific folder structure for organizing code related to each video, enhancing resource accessibility.', 'The chapter mentions providing a finished version and a starter version of the sandbox in the downloads, offering users flexibility in utilizing the provided resources or creating their own.']}, {'end': 2772.673, 'segs': [{'end': 1454.635, 'src': 'embed', 'start': 1427.753, 'weight': 5, 'content': [{'end': 1432.698, 'text': "But if I check it, you'll see it goes in this this horizontal fashion, which I don't like.", 'start': 1427.753, 'duration': 4.945}, {'end': 1435.121, 'text': 'So you can just uncheck that if you want.', 'start': 1433.119, 'duration': 2.002}, {'end': 1436.162, 'text': 'All right.', 'start': 1435.862, 'duration': 0.3}, {'end': 1441.848, 'text': "So now that we have this set up, I'm just going to open this index HTML with live server.", 'start': 1436.282, 'duration': 5.566}, {'end': 1448.303, 'text': "And we have our script connected, so we don't even need that HTML anymore.", 'start': 1443.735, 'duration': 4.568}, {'end': 1450.607, 'text': "And we'll just make this a little smaller.", 'start': 1449.005, 'duration': 1.602}, {'end': 1454.635, 'text': "And now in the next video, we'll start to look at the JavaScript console.", 'start': 1451.108, 'duration': 3.527}], 'summary': 'Setting up html with live server and javascript console is next.', 'duration': 26.882, 'max_score': 1427.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo1427753.jpg'}, {'end': 1752.798, 'src': 'embed', 'start': 1726.893, 'weight': 11, 'content': [{'end': 1731.478, 'text': 'And we use this dot syntax in JavaScript to access properties and methods.', 'start': 1726.893, 'duration': 4.585}, {'end': 1734.157, 'text': 'OK, now we want to log something.', 'start': 1732.153, 'duration': 2.004}, {'end': 1738.387, 'text': 'So in here, in the method or in the function, we want to pass in an argument.', 'start': 1734.238, 'duration': 4.149}, {'end': 1742.415, 'text': "So I'm going to pass in a number, let's say 100.", 'start': 1738.767, 'duration': 3.648}, {'end': 1746.676, 'text': "And if I save that and it runs you'll see that now in the console we're seeing 100.", 'start': 1742.415, 'duration': 4.261}, {'end': 1752.798, 'text': 'Now any piece of data in JavaScript or really in any programming language has a type.', 'start': 1746.676, 'duration': 6.122}], 'summary': 'Using dot syntax in javascript to log 100 as an example of data with a type.', 'duration': 25.905, 'max_score': 1726.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo1726893.jpg'}, {'end': 1816.578, 'src': 'embed', 'start': 1791.034, 'weight': 2, 'content': [{'end': 1795.83, 'text': "So if I go ahead and save that you'll see that it'll log those three things, those three values.", 'start': 1791.034, 'duration': 4.796}, {'end': 1803.533, 'text': "now, in in many cases, or i'd say most cases, you're going to be logging variables or results to functions.", 'start': 1796.69, 'duration': 6.843}, {'end': 1808.775, 'text': "it's not that often you'll log straight strings like that, unless it's like it worked or something.", 'start': 1803.533, 'duration': 5.242}, {'end': 1812.596, 'text': "if you're running a function or something like that and you want to see if it worked,", 'start': 1808.775, 'duration': 3.821}, {'end': 1816.578, 'text': "so let's just create a variable and we'll get into variables more soon.", 'start': 1812.596, 'duration': 3.982}], 'summary': 'Logging variables or results to functions is common in programming.', 'duration': 25.544, 'max_score': 1791.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo1791034.jpg'}, {'end': 1927.759, 'src': 'embed', 'start': 1900.887, 'weight': 4, 'content': [{'end': 1904.448, 'text': 'And then we can also do tables for objects.', 'start': 1900.887, 'duration': 3.561}, {'end': 1906.149, 'text': "So I'm going to do console.table.", 'start': 1904.568, 'duration': 1.581}, {'end': 1912.332, 'text': "And I know we haven't gone over objects yet, but there are object literals, I should say, which are key value pairs.", 'start': 1906.189, 'duration': 6.143}, {'end': 1914.472, 'text': "And they're wrapped in curly braces.", 'start': 1912.912, 'duration': 1.56}, {'end': 1917.414, 'text': "So I'll just do a simple object with a name as the key.", 'start': 1914.533, 'duration': 2.881}, {'end': 1927.759, 'text': 'brad is the value and then email as the next key and then brad at gmail for the value, and if i save it,', 'start': 1918.314, 'duration': 9.445}], 'summary': 'Introduction to using console.table for displaying object literals in javascript.', 'duration': 26.872, 'max_score': 1900.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo1900887.jpg'}, {'end': 2077.534, 'src': 'embed', 'start': 2048.614, 'weight': 0, 'content': [{'end': 2054.982, 'text': "Now there are some other methods on the console object but I don't want to spend too much time on stuff you're probably never going to use.", 'start': 2048.614, 'duration': 6.368}, {'end': 2057.844, 'text': "So in the next video we're going to look at code commenting.", 'start': 2055.342, 'duration': 2.502}, {'end': 2062.951, 'text': "We're also going to talk about some of the helpful keyboard shortcuts that you can use while writing code.", 'start': 2057.905, 'duration': 5.046}, {'end': 2072.188, 'text': "Alright guys, so in this video I want to talk about commenting and also give you some helpful shortcuts to use while you're coding.", 'start': 2065.862, 'duration': 6.326}, {'end': 2077.534, 'text': "Now, as far as the code here, it's the same exact stuff that we did in the last video.", 'start': 2072.69, 'duration': 4.844}], 'summary': 'The next video will cover code commenting and helpful keyboard shortcuts for coding.', 'duration': 28.92, 'max_score': 2048.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo2048614.jpg'}, {'end': 2573.267, 'src': 'heatmap', 'start': 2140.092, 'weight': 0.82, 'content': [{'end': 2148.275, 'text': "Now in VS code and in most text editors, if you just hit command or control and then forward slash, it'll put the double forward slash for you.", 'start': 2140.092, 'duration': 8.183}, {'end': 2149.135, 'text': 'You can toggle it.', 'start': 2148.315, 'duration': 0.82}, {'end': 2149.872, 'text': 'All right.', 'start': 2149.551, 'duration': 0.321}, {'end': 2155.019, 'text': "Also, if you want to comment out a line of code that's already there, like, let's say, this one,", 'start': 2149.992, 'duration': 5.027}, {'end': 2161.128, 'text': 'you can go anywhere on the line and just hit command or control forward, slash, and you can toggle it.', 'start': 2155.019, 'duration': 6.109}, {'end': 2163.251, 'text': 'you know, put it into a comment and toggle it.', 'start': 2161.128, 'duration': 2.123}, {'end': 2169.275, 'text': "So if you want to toggle multiple lines of code there's a few ways you can do it.", 'start': 2164.17, 'duration': 5.105}, {'end': 2177.363, 'text': 'What I would probably do what I usually do is go to either the beginning or the end, hold shift and hit up or down, depending on what,', 'start': 2169.676, 'duration': 7.687}, {'end': 2184.29, 'text': "which code I want to highlight, and then I'll go ahead and do command or control, forward slash, and it will comment all those lines out.", 'start': 2177.363, 'duration': 6.927}, {'end': 2187.854, 'text': 'But when you do that every line has a comment on it.', 'start': 2184.691, 'duration': 3.163}, {'end': 2194.116, 'text': "There's another way to add multi-line comments, and that's with the forward slash and asterisk,", 'start': 2188.174, 'duration': 5.942}, {'end': 2199.078, 'text': 'and then you want to go to wherever you want the comment to end and put an asterisk forward slash.', 'start': 2194.116, 'duration': 4.962}, {'end': 2203.319, 'text': "So now you can see everything that's in between that is commented out.", 'start': 2199.398, 'duration': 3.921}, {'end': 2207.201, 'text': "In fact, I'm just going to put right here, we'll say multi-line comment.", 'start': 2203.359, 'duration': 3.842}, {'end': 2213.053, 'text': 'OK, so those those are the two ways of commenting in JavaScript.', 'start': 2209.611, 'duration': 3.442}, {'end': 2219.716, 'text': 'Now, as far as keyboard shortcuts, I already showed you that if you hold shift, you can go up or down and you can highlight code.', 'start': 2213.153, 'duration': 6.563}, {'end': 2223.538, 'text': 'You can also hold shift and go right or left and highlight as well.', 'start': 2220.036, 'duration': 3.502}, {'end': 2226.98, 'text': "If you want to navigate a line of code, I'm just going to go to this one.", 'start': 2224.118, 'duration': 2.862}, {'end': 2229.861, 'text': "Actually, let's go to this table right here.", 'start': 2227, 'duration': 2.861}, {'end': 2235.264, 'text': 'So if we go to this table and I hold down command or control and I hit right.', 'start': 2231.002, 'duration': 4.262}, {'end': 2239.195, 'text': "Now the right arrow, it's going to go all the way over to the end of the line.", 'start': 2235.694, 'duration': 3.501}, {'end': 2241.736, 'text': "If I hit left, it'll go to the beginning of the line.", 'start': 2239.215, 'duration': 2.521}, {'end': 2246.437, 'text': "Okay, now, if you want to go in between and you don't want to navigate every single character,", 'start': 2242.296, 'duration': 4.141}, {'end': 2254.219, 'text': "you just hold Option or Alt on Windows and you can see it'll go from this console to the end, the beginning of console to the end.", 'start': 2246.437, 'duration': 7.782}, {'end': 2256.86, 'text': 'If I hit right again, it goes to the end of table.', 'start': 2254.239, 'duration': 2.621}, {'end': 2260.901, 'text': 'Hit right again, it goes to the beginning of the object and so on.', 'start': 2257.32, 'duration': 3.581}, {'end': 2264.082, 'text': "Okay, so it's just a faster way to navigate across.", 'start': 2261.401, 'duration': 2.681}, {'end': 2272.469, 'text': "Now you can also hold down shift and if you do option or alt, right or left, it'll just highlight,", 'start': 2265.222, 'duration': 7.247}, {'end': 2276.232, 'text': "it'll go across faster and you can highlight while you're doing that.", 'start': 2272.469, 'duration': 3.763}, {'end': 2283.379, 'text': 'and you can also hold shift and hold down command or control and you can highlight from where you are over, either right or left.', 'start': 2276.232, 'duration': 7.147}, {'end': 2293.217, 'text': "OK, now if you want to move a line of code up or down, you can hold alt on Windows or option on a Mac and you'll see this console dot table.", 'start': 2284.594, 'duration': 8.623}, {'end': 2295.278, 'text': "I'm just moving it up and down the file.", 'start': 2293.378, 'duration': 1.9}, {'end': 2297.959, 'text': "OK, that's holding option or alt.", 'start': 2295.298, 'duration': 2.661}, {'end': 2300.02, 'text': 'If you want to duplicate it,', 'start': 2298.32, 'duration': 1.7}, {'end': 2307.903, 'text': "then you could hold shift option or shift alt and hit the down arrow and you'll see I'm just copying the line of code down.", 'start': 2300.02, 'duration': 7.883}, {'end': 2311.825, 'text': 'And of course, undo is is commander control Z.', 'start': 2308.764, 'duration': 3.061}, {'end': 2313.349, 'text': 'All right.', 'start': 2313.069, 'duration': 0.28}, {'end': 2315.29, 'text': "Now, let's see if you want to.", 'start': 2313.529, 'duration': 1.761}, {'end': 2319.593, 'text': "Let's say I want every instance of this log right here.", 'start': 2316.451, 'duration': 3.142}, {'end': 2321.894, 'text': "So I'm going to hold shift and just highlight it.", 'start': 2319.613, 'duration': 2.281}, {'end': 2325.696, 'text': "And then in VS code, it'll automatically highlight each one.", 'start': 2322.374, 'duration': 3.322}, {'end': 2327.938, 'text': 'Now, if you want to.', 'start': 2325.716, 'duration': 2.222}, {'end': 2330.699, 'text': "Well, it's not actually highlighting it like with your cursor.", 'start': 2327.958, 'duration': 2.741}, {'end': 2331.68, 'text': "It's just visually.", 'start': 2330.799, 'duration': 0.881}, {'end': 2339.786, 'text': "If you want to actually highlight with your cursor, I can hit CMD or CTRL D and you'll see it selects the next dot log.", 'start': 2332.08, 'duration': 7.706}, {'end': 2343.189, 'text': 'If I hit CMD or CTRL D again, it selects the next one.', 'start': 2340.166, 'duration': 3.023}, {'end': 2345.03, 'text': 'And I can edit those.', 'start': 2343.509, 'duration': 1.521}, {'end': 2347.592, 'text': "I'm editing all of the logs.", 'start': 2345.45, 'duration': 2.142}, {'end': 2356.381, 'text': 'OK Now if you want to select all of them instead of going one by one with command or control D you can do shift.', 'start': 2349.457, 'duration': 6.924}, {'end': 2360.583, 'text': 'What is it command shift L will will highlight them all.', 'start': 2356.741, 'duration': 3.842}, {'end': 2365.106, 'text': "And you'll see now I got all the dot logs and I can edit them.", 'start': 2360.623, 'duration': 4.483}, {'end': 2366.466, 'text': 'All right.', 'start': 2365.126, 'duration': 1.34}, {'end': 2368.207, 'text': 'You can also place your cursor.', 'start': 2366.566, 'duration': 1.641}, {'end': 2374.931, 'text': 'So if I want to put my cursor at the beginning of the log here I can hold either alt on Windows or option on a Mac.', 'start': 2368.347, 'duration': 6.584}, {'end': 2379.54, 'text': 'And I can just click there, click here, and click here.', 'start': 2375.455, 'duration': 4.085}, {'end': 2383.244, 'text': 'And then I can type in where all the cursors are.', 'start': 2380.321, 'duration': 2.923}, {'end': 2387.809, 'text': "Okay, so you're not going to remember these right now.", 'start': 2384.508, 'duration': 3.301}, {'end': 2393.891, 'text': "So don't worry, you know, when you move to the next video and you forget all of these, don't worry about it.", 'start': 2387.929, 'duration': 5.962}, {'end': 2396.371, 'text': "Use one or two, you know, while you're coding.", 'start': 2394.111, 'duration': 2.26}, {'end': 2402.413, 'text': 'Even in this course, use one or two and learn them so that it kind of becomes second nature.', 'start': 2396.451, 'duration': 5.962}, {'end': 2406.414, 'text': 'And then choose another one or two and start to use that, you know.', 'start': 2402.773, 'duration': 3.641}, {'end': 2409.415, 'text': "And before you know it, you'll just do it without even thinking.", 'start': 2406.474, 'duration': 2.941}, {'end': 2410.539, 'text': 'All right.', 'start': 2410.219, 'duration': 0.32}, {'end': 2412.34, 'text': 'And then a couple others I wanted to show you.', 'start': 2410.599, 'duration': 1.741}, {'end': 2414, 'text': 'If you do command shift.', 'start': 2412.4, 'duration': 1.6}, {'end': 2416.701, 'text': 'Oh, you can search for a file.', 'start': 2414.3, 'duration': 2.401}, {'end': 2423.403, 'text': "So if we do like index, you'll see that both of our index HTML is if I do script, you can see our script J.S.", 'start': 2417.121, 'duration': 6.282}, {'end': 2425.324, 'text': "'s and you can switch to those as well.", 'start': 2423.403, 'duration': 1.921}, {'end': 2426.424, 'text': 'All right.', 'start': 2426.084, 'duration': 0.34}, {'end': 2428.344, 'text': 'If you want to search, you can do.', 'start': 2426.484, 'duration': 1.86}, {'end': 2429.065, 'text': "Let's see.", 'start': 2428.364, 'duration': 0.701}, {'end': 2432.086, 'text': 'You can do command option F.', 'start': 2429.425, 'duration': 2.661}, {'end': 2435.487, 'text': "And if I want to look for, you know, console, it'll show me all those.", 'start': 2432.086, 'duration': 3.401}, {'end': 2446.758, 'text': 'You can also do command shift F and you can search over here for, say, console, and it will show us all where console is in every file,', 'start': 2435.527, 'duration': 11.231}, {'end': 2449.74, 'text': "not just the file that we're in all right.", 'start': 2446.758, 'duration': 2.982}, {'end': 2453.403, 'text': 'and you can also just click on search here as well.', 'start': 2449.74, 'duration': 3.663}, {'end': 2461.688, 'text': "and if in vs code, if you want to toggle the sidebar, you can do command B, so our control B, that'll just toggle the sidebar.", 'start': 2453.403, 'duration': 8.285}, {'end': 2462.028, 'text': 'what else?', 'start': 2461.688, 'duration': 0.34}, {'end': 2468.112, 'text': "if you want to toggle the terminal, you can do command, or actually it's control till day.", 'start': 2462.028, 'duration': 6.084}, {'end': 2472.349, 'text': "so I can toggle the terminal down here, which we're not going to get into.", 'start': 2468.112, 'duration': 4.237}, {'end': 2474.49, 'text': 'Maybe we will later on in the course.', 'start': 2472.849, 'duration': 1.641}, {'end': 2480.976, 'text': 'But yeah, so those are kind of the most common shortcuts that at least that I use.', 'start': 2475.331, 'duration': 5.645}, {'end': 2482.437, 'text': 'So hopefully that helps.', 'start': 2481.416, 'duration': 1.021}, {'end': 2485.92, 'text': "And in the next video, we're going to start to look more at variables.", 'start': 2482.977, 'duration': 2.943}, {'end': 2493.273, 'text': "So in this video we're going to start to look at variables and variable declarations.", 'start': 2488.971, 'duration': 4.302}, {'end': 2501.276, 'text': 'Now variables are basically containers for pieces of data and that data can be one of many different types.', 'start': 2493.773, 'duration': 7.503}, {'end': 2504.797, 'text': "And it's important to understand the different data types in JavaScript.", 'start': 2501.516, 'duration': 3.281}, {'end': 2506.498, 'text': "So we're going to go over that in the next video.", 'start': 2504.817, 'duration': 1.681}, {'end': 2511.58, 'text': 'Now when we declare a variable we need to use one of three keywords.', 'start': 2507.018, 'duration': 4.562}, {'end': 2516.162, 'text': "So let's just say ways to declare a variable.", 'start': 2511.66, 'duration': 4.502}, {'end': 2518.163, 'text': 'So basically we have VAR.', 'start': 2516.622, 'duration': 1.541}, {'end': 2520.064, 'text': 'Make sure we comment this out.', 'start': 2518.863, 'duration': 1.201}, {'end': 2525.246, 'text': 'So we have VAR, we have LET, and we have CONST.', 'start': 2520.444, 'duration': 4.802}, {'end': 2529.749, 'text': "Okay, so these are the three ways that you'll see variables declared in JavaScript.", 'start': 2525.526, 'duration': 4.223}, {'end': 2532.91, 'text': "Now you probably won't see VAR very much anymore.", 'start': 2530.229, 'duration': 2.681}, {'end': 2544.156, 'text': 'VAR was the original declaration, but in ES2015, which is the 2015 update of JavaScript or ECMAScript, also known as ES6,', 'start': 2533.27, 'duration': 10.886}, {'end': 2548.138, 'text': 'it was a huge update to the language and they introduced LET and CONST.', 'start': 2544.156, 'duration': 3.982}, {'end': 2552.083, 'text': 'And the main reason for that is due to something called scope.', 'start': 2548.698, 'duration': 3.385}, {'end': 2557.891, 'text': "And I'm not going to get too much into scope right now because it'll go over a lot of people's heads that are just getting started.", 'start': 2552.143, 'duration': 5.748}, {'end': 2563.438, 'text': "We're going to have a whole section on function scope, execution context and stuff like that.", 'start': 2557.931, 'duration': 5.507}, {'end': 2571.506, 'text': 'but for now just know that when you write code in, just write in the file, not inside of a function, not inside of an if statement.', 'start': 2564.039, 'duration': 7.467}, {'end': 2573.267, 'text': "that's the global scope.", 'start': 2571.506, 'duration': 1.761}], 'summary': 'In vs code, shortcuts for commenting, navigation, and searching files are demonstrated, along with an explanation of variable declarations in javascript.', 'duration': 433.175, 'max_score': 2140.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo2140092.jpg'}, {'end': 2213.053, 'src': 'embed', 'start': 2188.174, 'weight': 12, 'content': [{'end': 2194.116, 'text': "There's another way to add multi-line comments, and that's with the forward slash and asterisk,", 'start': 2188.174, 'duration': 5.942}, {'end': 2199.078, 'text': 'and then you want to go to wherever you want the comment to end and put an asterisk forward slash.', 'start': 2194.116, 'duration': 4.962}, {'end': 2203.319, 'text': "So now you can see everything that's in between that is commented out.", 'start': 2199.398, 'duration': 3.921}, {'end': 2207.201, 'text': "In fact, I'm just going to put right here, we'll say multi-line comment.", 'start': 2203.359, 'duration': 3.842}, {'end': 2213.053, 'text': 'OK, so those those are the two ways of commenting in JavaScript.', 'start': 2209.611, 'duration': 3.442}], 'summary': 'Javascript supports multi-line comments using forward slash and asterisk.', 'duration': 24.879, 'max_score': 2188.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo2188174.jpg'}, {'end': 2307.903, 'src': 'embed', 'start': 2284.594, 'weight': 8, 'content': [{'end': 2293.217, 'text': "OK, now if you want to move a line of code up or down, you can hold alt on Windows or option on a Mac and you'll see this console dot table.", 'start': 2284.594, 'duration': 8.623}, {'end': 2295.278, 'text': "I'm just moving it up and down the file.", 'start': 2293.378, 'duration': 1.9}, {'end': 2297.959, 'text': "OK, that's holding option or alt.", 'start': 2295.298, 'duration': 2.661}, {'end': 2300.02, 'text': 'If you want to duplicate it,', 'start': 2298.32, 'duration': 1.7}, {'end': 2307.903, 'text': "then you could hold shift option or shift alt and hit the down arrow and you'll see I'm just copying the line of code down.", 'start': 2300.02, 'duration': 7.883}], 'summary': 'To move a line of code, hold alt/option and use arrow keys; to duplicate, hold shift alt/option and hit down arrow.', 'duration': 23.309, 'max_score': 2284.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo2284594.jpg'}, {'end': 2724.611, 'src': 'embed', 'start': 2691.28, 'weight': 1, 'content': [{'end': 2692.54, 'text': "OK, so you can't have anything else.", 'start': 2691.28, 'duration': 1.26}, {'end': 2695.781, 'text': "You can't have like a plus symbol or an asterisk or anything like that.", 'start': 2692.56, 'duration': 3.221}, {'end': 2699.501, 'text': "And even though that you can have numbers, they can't start with a number.", 'start': 2696.361, 'duration': 3.14}, {'end': 2704.722, 'text': "So if I were to say, like, let one name equals Brad, that's not going to work.", 'start': 2699.681, 'duration': 5.041}, {'end': 2705.642, 'text': "I'm going to get an error.", 'start': 2704.742, 'duration': 0.9}, {'end': 2710.723, 'text': "But if I move that one to the end here, then that's fine.", 'start': 2706.103, 'duration': 4.62}, {'end': 2716.04, 'text': "But if I try to add like a plus sign or something like that, that's not going to That's not going to work.", 'start': 2710.863, 'duration': 5.177}, {'end': 2724.611, 'text': 'Okay Now, as far as the formatting of your variables for like multiple words, just paste this in here.', 'start': 2716.701, 'duration': 7.91}], 'summary': 'Variables cannot start with a number or contain special characters. multiple-word variables must be formatted accordingly.', 'duration': 33.331, 'max_score': 2691.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo2691280.jpg'}], 'start': 1427.753, 'title': 'Using browser developer tools and javascript console usage', 'summary': 'Introduces the usage of browser developer tools, emphasizing their accessibility and functionality for inspecting and editing html and css. it also covers using the front-end javascript console, including handling warnings and errors, logging, and debugging.', 'chapters': [{'end': 1509.089, 'start': 1427.753, 'title': 'Using browser developer tools', 'summary': 'Introduces the usage of browser developer tools and explains their importance for front end or full stack web developers, emphasizing their accessibility across different browsers and their functionality for inspecting and editing html and css.', 'duration': 81.336, 'highlights': ['The browser developer tools are essential for front end or full stack web developers and are used throughout the entire course and career, highlighting their importance and frequent usage (quantifiable data: importance emphasized).', 'All browsers have developer tools, accessible through different methods like menu options or keyboard shortcuts, providing information on their availability and accessibility across different platforms (quantifiable data: accessibility across different browsers and platforms).', 'The elements tab within the developer tools allows users to inspect and edit HTML and CSS elements, providing a practical example of the functionality of the developer tools and their usefulness for web development (quantifiable data: practical example of functionality).']}, {'end': 2048.031, 'start': 1509.089, 'title': 'Front-end javascript console usage', 'summary': 'Covers using the front-end javascript console, including accessing the console, handling warnings and errors, logging to the console, and utilizing console methods for debugging and styling.', 'duration': 538.942, 'highlights': ['The console is where front-end JavaScript warnings and errors are displayed, and it can also be used for logging information. The console serves as a platform to display front-end JavaScript warnings and errors and can be utilized for logging information.', 'Various methods for utilizing the console, such as clearing the console, logging data directly through JavaScript, and using console methods like log, error, warn, table, and group, are demonstrated. The transcript demonstrates various methods for utilizing the console, including clearing the console, logging data directly through JavaScript, and using console methods like log, error, warn, table, and group.', 'An overview of the console object, its properties, methods, and the syntax for accessing and executing functions is provided to aid in understanding the usage of the console. The transcript provides an overview of the console object, its properties, methods, and the syntax for accessing and executing functions to facilitate understanding of the console usage.']}, {'end': 2410.539, 'start': 2048.614, 'title': 'Javascript commenting & keyboard shortcuts', 'summary': 'Covers the importance of commenting in javascript, explaining its use for documenting code, enabling team collaboration, and disabling code. it also demonstrates various keyboard shortcuts, including commenting methods, line navigation, code highlighting, duplication, and selection in vs code.', 'duration': 361.925, 'highlights': ['The importance of commenting in JavaScript is highlighted, emphasizing its use for documenting code, enabling team collaboration, and disabling code.', 'Various keyboard shortcuts for code commenting, line navigation, code highlighting, duplication, and selection in VS code are demonstrated, providing practical techniques for efficient coding.', 'Methods of adding single-line and multi-line comments in JavaScript are explained, showcasing the simplicity of commenting in the language.', 'Keyboard shortcuts for line navigation and code highlighting in VS code are demonstrated, offering efficient techniques for maneuvering through code files and highlighting specific segments.', 'The significance of using keyboard shortcuts in coding is emphasized, encouraging learners to gradually incorporate and familiarize themselves with these techniques for enhanced productivity.']}, {'end': 2772.673, 'start': 2410.599, 'title': 'Vs code shortcuts and javascript variable declarations', 'summary': 'Discusses common vs code shortcuts, such as searching for files and toggling the sidebar and terminal, and also explains javascript variable declarations using var, let, and const, with an emphasis on naming conventions and data types.', 'duration': 362.074, 'highlights': ['The chapter discusses common VS Code shortcuts, such as searching for files and toggling the sidebar and terminal. Demonstrates using shortcuts like command shift F for searching files, command B for toggling the sidebar, and control till day for toggling the terminal.', 'The chapter explains JavaScript variable declarations using VAR, LET, and CONST, emphasizing naming conventions and data types. Covers the three ways of declaring variables in JavaScript, and explains the significance of ES2015 update introducing LET and CONST for better scoping.', 'It explains the naming conventions and formatting of variables in JavaScript, such as camel case, underscores, and Pascal case. Explains the conventions for naming variables, including restrictions on characters and the usage of camel case, underscores, and Pascal case.']}], 'duration': 1344.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo1427753.jpg', 'highlights': ['The browser developer tools are essential for front end or full stack web developers and are used throughout the entire course and career, highlighting their importance and frequent usage (quantifiable data: importance emphasized).', 'All browsers have developer tools, accessible through different methods like menu options or keyboard shortcuts, providing information on their availability and accessibility across different platforms (quantifiable data: accessibility across different browsers and platforms).', 'The elements tab within the developer tools allows users to inspect and edit HTML and CSS elements, providing a practical example of the functionality of the developer tools and their usefulness for web development (quantifiable data: practical example of functionality).', 'The console is where front-end JavaScript warnings and errors are displayed, and it can also be used for logging information. The console serves as a platform to display front-end JavaScript warnings and errors and can be utilized for logging information.', 'Various methods for utilizing the console, such as clearing the console, logging data directly through JavaScript, and using console methods like log, error, warn, table, and group, are demonstrated. The transcript demonstrates various methods for utilizing the console, including clearing the console, logging data directly through JavaScript, and using console methods like log, error, warn, table, and group.', 'An overview of the console object, its properties, methods, and the syntax for accessing and executing functions is provided to aid in understanding the usage of the console. The transcript provides an overview of the console object, its properties, methods, and the syntax for accessing and executing functions to facilitate understanding of the console usage.', 'The importance of commenting in JavaScript is highlighted, emphasizing its use for documenting code, enabling team collaboration, and disabling code.', 'Various keyboard shortcuts for code commenting, line navigation, code highlighting, duplication, and selection in VS code are demonstrated, providing practical techniques for efficient coding.', 'Methods of adding single-line and multi-line comments in JavaScript are explained, showcasing the simplicity of commenting in the language.', 'Keyboard shortcuts for line navigation and code highlighting in VS code are demonstrated, offering efficient techniques for maneuvering through code files and highlighting specific segments.', 'The significance of using keyboard shortcuts in coding is emphasized, encouraging learners to gradually incorporate and familiarize themselves with these techniques for enhanced productivity.', 'The chapter discusses common VS Code shortcuts, such as searching for files and toggling the sidebar and terminal. Demonstrates using shortcuts like command shift F for searching files, command B for toggling the sidebar, and control till day for toggling the terminal.', 'The chapter explains JavaScript variable declarations using VAR, LET, and CONST, emphasizing naming conventions and data types. Covers the three ways of declaring variables in JavaScript, and explains the significance of ES2015 update introducing LET and CONST for better scoping.', 'It explains the naming conventions and formatting of variables in JavaScript, such as camel case, underscores, and Pascal case. Explains the conventions for naming variables, including restrictions on characters and the usage of camel case, underscores, and Pascal case.']}, {'end': 4357.013, 'segs': [{'end': 3660.123, 'src': 'embed', 'start': 3630.973, 'weight': 1, 'content': [{'end': 3635.878, 'text': "So maybe we have like an apartment number, but let's say this person lives in a house.", 'start': 3630.973, 'duration': 4.905}, {'end': 3637.239, 'text': 'So we set that to null.', 'start': 3635.998, 'duration': 1.241}, {'end': 3639.001, 'text': "There's no apartment number.", 'start': 3637.28, 'duration': 1.721}, {'end': 3640.002, 'text': "There's no need for one.", 'start': 3639.041, 'duration': 0.961}, {'end': 3650.84, 'text': 'And this one is a little weird, because if we set this to apartment number and we look at the value, which is null,', 'start': 3641.056, 'duration': 9.784}, {'end': 3655.401, 'text': 'and then we look at the result of this type of, we get object.', 'start': 3650.84, 'duration': 4.561}, {'end': 3660.123, 'text': 'Okay, now this is a little confusing because null is not an object.', 'start': 3655.841, 'duration': 4.282}], 'summary': 'Setting apartment number to null results in a confusing type of object.', 'duration': 29.15, 'max_score': 3630.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo3630973.jpg'}, {'end': 4288.297, 'src': 'heatmap', 'start': 3851.998, 'weight': 0.731, 'content': [{'end': 3856.32, 'text': "Actually, we want to put let's grab this and let's put this up here.", 'start': 3851.998, 'duration': 4.322}, {'end': 3858.201, 'text': 'We want this above the output.', 'start': 3856.36, 'duration': 1.841}, {'end': 3862.163, 'text': "And then let's change this to numbers.", 'start': 3859.822, 'duration': 2.341}, {'end': 3869.207, 'text': "OK, if I save that, it's going to show the array is the value and object as the type.", 'start': 3862.183, 'duration': 7.024}, {'end': 3871.928, 'text': 'OK, any reference type is an object.', 'start': 3869.227, 'duration': 2.701}, {'end': 3878.491, 'text': 'So an object literal, of course, is also an object is also a reference type.', 'start': 3873.409, 'duration': 5.082}, {'end': 3879.212, 'text': 'So if I say person.', 'start': 3878.511, 'duration': 0.701}, {'end': 3885.345, 'text': "And we're going to learn all about objects and arrays and get much more advanced.", 'start': 3880.983, 'duration': 4.362}, {'end': 3892.167, 'text': "But just to show you, we'll say Brad and then we change this here to person.", 'start': 3885.405, 'duration': 6.762}, {'end': 3894.908, 'text': "You'll see we also get object.", 'start': 3893.307, 'duration': 1.601}, {'end': 3897.609, 'text': 'Now, a function is also a reference type.', 'start': 3895.288, 'duration': 2.321}, {'end': 3904.931, 'text': "So I'm just going to create a very simple function called say hello and just have it do a console log of hello.", 'start': 3898.089, 'duration': 6.842}, {'end': 3909.773, 'text': "And then down here, let's swap this out for say hello.", 'start': 3905.972, 'duration': 3.801}, {'end': 3917.018, 'text': "So you'll see for the the value for the console log of the value it's just the function itself.", 'start': 3911.252, 'duration': 5.766}, {'end': 3922.203, 'text': "I didn't call it with parentheses and notice that instead of object it says function.", 'start': 3917.078, 'duration': 5.125}, {'end': 3924.766, 'text': "Now it's still an object.", 'start': 3922.884, 'duration': 1.882}, {'end': 3927.308, 'text': "It's just defined as a function object.", 'start': 3924.886, 'duration': 2.422}, {'end': 3929.39, 'text': 'And I want to put the documentation.', 'start': 3927.488, 'duration': 1.902}, {'end': 3939.265, 'text': "link here if you want to read more about that, and in the final version of the sandbox i'll label what these links are and stuff,", 'start': 3930.939, 'duration': 8.326}, {'end': 3941.326, 'text': "so i'll make things a little neater.", 'start': 3939.265, 'duration': 2.061}, {'end': 3942.226, 'text': "but yeah, that's it.", 'start': 3941.326, 'duration': 0.9}, {'end': 3944.348, 'text': 'as far as what, the the types are,', 'start': 3942.226, 'duration': 2.122}, {'end': 3952.033, 'text': 'the primitive types and reference types or objects in the next video i just want to quickly go over how those are stored in memory.', 'start': 3944.348, 'duration': 7.685}, {'end': 3955.79, 'text': 'all right, guys.', 'start': 3955.35, 'duration': 0.44}, {'end': 3960.433, 'text': "so in this video we're going to look at how primitive and reference type data is stored in memory.", 'start': 3955.79, 'duration': 4.643}, {'end': 3964.836, 'text': "and one thing i want to mention is, if you're a beginner and some of this is kind of confusing,", 'start': 3960.433, 'duration': 4.403}, {'end': 3968.859, 'text': "that's okay that this is kind of like behind the scenes stuff,", 'start': 3964.836, 'duration': 4.023}, {'end': 3977.385, 'text': "and the reason i'm putting it in the course at this point is just to give you a a bigger picture of not only the syntax to write,", 'start': 3968.859, 'duration': 8.526}, {'end': 3981.568, 'text': 'for you know your javascript code, but to also understand how javascript works.', 'start': 3977.385, 'duration': 4.183}, {'end': 3986.592, 'text': "So if you don't completely soak in this video, that's absolutely fine.", 'start': 3982.068, 'duration': 4.524}, {'end': 3990.535, 'text': "You can always come back to it later, and we'll talk more about this stuff later as well.", 'start': 3986.652, 'duration': 3.883}, {'end': 3999.662, 'text': "So when we store our data, when we set a variable, if it's a primitive type, it's stored in an area in memory called the stack.", 'start': 3991.315, 'duration': 8.347}, {'end': 4007.588, 'text': "If we store a reference type, such as an array, an object, a function, that's stored in an area of memory called the heap.", 'start': 4000.783, 'duration': 6.805}, {'end': 4014.329, 'text': 'So you have the stack, which is where your primitive data is stored, and you have the heap where your reference types are stored.', 'start': 4008.134, 'duration': 6.195}, {'end': 4015.452, 'text': 'So just keep that in mind.', 'start': 4014.389, 'duration': 1.063}, {'end': 4020.243, 'text': 'All right now to kind of visualize how we store and access data.', 'start': 4016.141, 'duration': 4.102}, {'end': 4024.306, 'text': 'I created this this diagram with kind of multiple scenes.', 'start': 4020.644, 'duration': 3.662}, {'end': 4028.028, 'text': "So first off let's say we create a couple of variables.", 'start': 4024.926, 'duration': 3.102}, {'end': 4034.552, 'text': "We have a name that's equal to John, which is a string, which is a primitive type, and then age equals 30,", 'start': 4028.068, 'duration': 6.484}, {'end': 4036.853, 'text': 'which is a number which is also a primitive type.', 'start': 4034.552, 'duration': 2.301}, {'end': 4040.755, 'text': 'Now this box over here represents the stack in memory.', 'start': 4037.433, 'duration': 3.322}, {'end': 4044.598, 'text': 'So you can see age the name of the variable and 30 the value.', 'start': 4041.196, 'duration': 3.402}, {'end': 4048.863, 'text': 'are stored on the stack same thing with name and John.', 'start': 4046.021, 'duration': 2.842}, {'end': 4055.647, 'text': 'Now, if we were to create a variable called person and set that to an object which is a reference type,', 'start': 4049.523, 'duration': 6.124}, {'end': 4064.172, 'text': 'you can see the variable is stored on the stack, but it acts as accesses the data by reference and that data is stored in the heap.', 'start': 4055.647, 'duration': 8.525}, {'end': 4065.113, 'text': 'All right.', 'start': 4064.192, 'duration': 0.921}, {'end': 4070.473, 'text': 'Now just to kind of show you more about how this works.', 'start': 4065.771, 'duration': 4.702}, {'end': 4076.915, 'text': 'if we create another variable called new name and we set it to name up here, which is John,', 'start': 4070.473, 'duration': 6.442}, {'end': 4082.857, 'text': 'then on the stack we have a new variable called new name and we have a new piece of data called John.', 'start': 4076.915, 'duration': 5.942}, {'end': 4087.339, 'text': 'Name is still equal to John and now new name is equal to John.', 'start': 4083.618, 'duration': 3.721}, {'end': 4092.194, 'text': "Let's say that we want to take that new name variable and reassign it.", 'start': 4088.328, 'duration': 3.866}, {'end': 4094.358, 'text': 'Remember, when we use let, we can reassign.', 'start': 4092.255, 'duration': 2.103}, {'end': 4097.343, 'text': 'So now we have new name equals Jonathan.', 'start': 4095.159, 'duration': 2.184}, {'end': 4100.849, 'text': 'So it overwrote the old value of John to Jonathan.', 'start': 4097.683, 'duration': 3.166}, {'end': 4110.18, 'text': "Now let's kind of do the same thing and say well we're going to create a new person variable and set it to person which is this object right here.", 'start': 4101.656, 'duration': 8.524}, {'end': 4114.303, 'text': "Brad name Brad age 40 41 now but that's fine.", 'start': 4110.341, 'duration': 3.962}, {'end': 4122.568, 'text': 'So new person is put on the stack the variable and it points to the same reference that person does.', 'start': 4115.104, 'duration': 7.464}, {'end': 4132.801, 'text': "OK so it doesn't create a whole new value like up here where we created John again it just points to that area in the memory heap.", 'start': 4123.536, 'duration': 9.265}, {'end': 4142.906, 'text': "So if we were to come down here and let's say new person dot name which is a property this property right here set that to Bradley.", 'start': 4133.661, 'duration': 9.245}, {'end': 4151.118, 'text': "Now what's going to happen is we're changing in the heap that name value of Brad to Bradley.", 'start': 4143.814, 'duration': 7.304}, {'end': 4156.682, 'text': 'So new person dot name is going to be Bradley, but so is person dot name.', 'start': 4151.74, 'duration': 4.942}, {'end': 4161.045, 'text': "In fact, right here, if we logged person dot name, it's going to be Bradley.", 'start': 4157.082, 'duration': 3.963}, {'end': 4167.468, 'text': 'Even though we changed new person dot name, the reason for that is because they both point to the same reference.', 'start': 4161.205, 'duration': 6.263}, {'end': 4171.871, 'text': "All right, so that's kind of what I want to get across here is Bradley.", 'start': 4168.288, 'duration': 3.583}, {'end': 4176.174, 'text': 'With primitive types, the value is stored on the stack.', 'start': 4173.093, 'duration': 3.081}, {'end': 4182.295, 'text': 'So even if you change new name to something, name is going to stay John because John is there.', 'start': 4176.254, 'duration': 6.041}, {'end': 4183.696, 'text': "It's solid on the stack.", 'start': 4182.314, 'duration': 1.382}, {'end': 4187.676, 'text': 'With objects and arrays and so on, you have a reference.', 'start': 4184.256, 'duration': 3.42}, {'end': 4195.519, 'text': 'So if you set a variable to another variable and change something in that, it changes the reference.', 'start': 4188.317, 'duration': 7.202}, {'end': 4203.045, 'text': 'So what I want to do now is jump into VS Code and show you this exact thing in the text editor.', 'start': 4196.38, 'duration': 6.665}, {'end': 4206.987, 'text': "So I have this empty script js, and we're going to do the same thing.", 'start': 4203.485, 'duration': 3.502}, {'end': 4210.57, 'text': "Let's say const name equals, we'll set that to John.", 'start': 4207.027, 'duration': 3.543}, {'end': 4215.693, 'text': "And then we're going to set the age equal to 30.", 'start': 4211.41, 'duration': 4.283}, {'end': 4218.495, 'text': 'So these are both primitive values.', 'start': 4215.693, 'duration': 2.802}, {'end': 4238.745, 'text': "In fact I'll put a comment here and let's say these values are stored on the stack all right now let's say reference values are stored on the heap,", 'start': 4218.555, 'duration': 20.19}, {'end': 4244.367, 'text': "so let's say constant, we'll say person equals and let's set that to.", 'start': 4238.745, 'duration': 5.622}, {'end': 4250.331, 'text': "let's say name, And we're going to have an entire section on object literals like this.", 'start': 4244.367, 'duration': 5.964}, {'end': 4253.012, 'text': "So don't worry if you don't fully understand the syntax.", 'start': 4250.371, 'duration': 2.641}, {'end': 4255.332, 'text': "So we'll say age 40.", 'start': 4254.252, 'duration': 1.08}, {'end': 4255.892, 'text': 'All right.', 'start': 4255.332, 'duration': 0.56}, {'end': 4259.553, 'text': 'So we have our permanent values and we have our reference values.', 'start': 4255.912, 'duration': 3.641}, {'end': 4264.494, 'text': "So I'm going to do what we did in the in the slide.", 'start': 4260.153, 'duration': 4.341}, {'end': 4265.875, 'text': "And let's say new name.", 'start': 4264.594, 'duration': 1.281}, {'end': 4269.015, 'text': "And I'm using let here because I'm going to reassign it.", 'start': 4266.355, 'duration': 2.66}, {'end': 4270.436, 'text': 'So say new name.', 'start': 4269.475, 'duration': 0.961}, {'end': 4272.316, 'text': 'Set that to name.', 'start': 4271.476, 'duration': 0.84}, {'end': 4277.993, 'text': "And let's just do a console log down here of both name and new name.", 'start': 4272.596, 'duration': 5.397}, {'end': 4281.934, 'text': 'So now we get John and John for both the name and new name.', 'start': 4278.453, 'duration': 3.481}, {'end': 4283.875, 'text': "And don't worry about this being crossed out.", 'start': 4282.074, 'duration': 1.801}, {'end': 4288.297, 'text': "It's just because name is a deprecated property on the window object.", 'start': 4283.915, 'duration': 4.382}], 'summary': 'Explanation of storing primitive and reference types in memory using javascript, including code examples and explanations.', 'duration': 436.299, 'max_score': 3851.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo3851998.jpg'}, {'end': 3922.203, 'src': 'embed', 'start': 3893.307, 'weight': 3, 'content': [{'end': 3894.908, 'text': "You'll see we also get object.", 'start': 3893.307, 'duration': 1.601}, {'end': 3897.609, 'text': 'Now, a function is also a reference type.', 'start': 3895.288, 'duration': 2.321}, {'end': 3904.931, 'text': "So I'm just going to create a very simple function called say hello and just have it do a console log of hello.", 'start': 3898.089, 'duration': 6.842}, {'end': 3909.773, 'text': "And then down here, let's swap this out for say hello.", 'start': 3905.972, 'duration': 3.801}, {'end': 3917.018, 'text': "So you'll see for the the value for the console log of the value it's just the function itself.", 'start': 3911.252, 'duration': 5.766}, {'end': 3922.203, 'text': "I didn't call it with parentheses and notice that instead of object it says function.", 'start': 3917.078, 'duration': 5.125}], 'summary': 'Functions as reference types, console logs function itself.', 'duration': 28.896, 'max_score': 3893.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo3893307.jpg'}, {'end': 3977.385, 'src': 'embed', 'start': 3942.226, 'weight': 2, 'content': [{'end': 3944.348, 'text': 'as far as what, the the types are,', 'start': 3942.226, 'duration': 2.122}, {'end': 3952.033, 'text': 'the primitive types and reference types or objects in the next video i just want to quickly go over how those are stored in memory.', 'start': 3944.348, 'duration': 7.685}, {'end': 3955.79, 'text': 'all right, guys.', 'start': 3955.35, 'duration': 0.44}, {'end': 3960.433, 'text': "so in this video we're going to look at how primitive and reference type data is stored in memory.", 'start': 3955.79, 'duration': 4.643}, {'end': 3964.836, 'text': "and one thing i want to mention is, if you're a beginner and some of this is kind of confusing,", 'start': 3960.433, 'duration': 4.403}, {'end': 3968.859, 'text': "that's okay that this is kind of like behind the scenes stuff,", 'start': 3964.836, 'duration': 4.023}, {'end': 3977.385, 'text': "and the reason i'm putting it in the course at this point is just to give you a a bigger picture of not only the syntax to write,", 'start': 3968.859, 'duration': 8.526}], 'summary': 'Explaining the storage of primitive and reference type data in memory.', 'duration': 35.159, 'max_score': 3942.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo3942226.jpg'}, {'end': 4182.295, 'src': 'embed', 'start': 4151.74, 'weight': 0, 'content': [{'end': 4156.682, 'text': 'So new person dot name is going to be Bradley, but so is person dot name.', 'start': 4151.74, 'duration': 4.942}, {'end': 4161.045, 'text': "In fact, right here, if we logged person dot name, it's going to be Bradley.", 'start': 4157.082, 'duration': 3.963}, {'end': 4167.468, 'text': 'Even though we changed new person dot name, the reason for that is because they both point to the same reference.', 'start': 4161.205, 'duration': 6.263}, {'end': 4171.871, 'text': "All right, so that's kind of what I want to get across here is Bradley.", 'start': 4168.288, 'duration': 3.583}, {'end': 4176.174, 'text': 'With primitive types, the value is stored on the stack.', 'start': 4173.093, 'duration': 3.081}, {'end': 4182.295, 'text': 'So even if you change new name to something, name is going to stay John because John is there.', 'start': 4176.254, 'duration': 6.041}], 'summary': "Variable 'name' retains value 'john' due to stack storage.", 'duration': 30.555, 'max_score': 4151.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo4151740.jpg'}], 'start': 2772.713, 'title': 'Javascript fundamentals', 'summary': 'Covers javascript variable reassignment, declaration, const and let rules, javascript data types and storage, and memory storage in programming. it includes examples and emphasizes the preference for using const over let, except in specific cases.', 'chapters': [{'end': 2851.837, 'start': 2772.713, 'title': 'Javascript variable reassignment and declaration', 'summary': 'Discusses reassigning and declaring variables in javascript, including examples of reassigning values and declaring variables without assigning a value, highlighting the ability to manipulate and update variable values.', 'duration': 79.124, 'highlights': ['The chapter discusses reassigning and declaring variables in JavaScript, including examples of reassigning values and declaring variables without assigning a value.', "An example is provided where a variable 'age' is initially set to 30 and then reassigned to 31, demonstrating the reassignment of variable values.", 'The chapter also demonstrates the ability to declare a variable without assigning a value and then later manipulate it, showing the flexibility of variable declaration and usage.', 'Examples of console logging the variable values are provided to illustrate the changes in the variable values.']}, {'end': 3163.12, 'start': 2852.397, 'title': 'Const and let rules', 'summary': 'Explains the rules and limitations of using const and let in javascript, including the inability to directly reassign const, the requirement to initialize const, and the flexibility of using methods to manipulate arrays and objects. it also emphasizes the preference for using const over let, except in cases where direct reassignment is required.', 'duration': 310.723, 'highlights': ['Const cannot be directly reassigned and must be initialized, whereas let allows reassignment and can be declared without initialization. Const cannot be directly reassigned or declared without initialization, whereas let allows reassignment and can be declared without initialization.', 'The chapter emphasizes the preference for using const over let, except in cases where direct reassignment is required, such as in game scores. The chapter emphasizes the preference for using const over let, except in cases where direct reassignment is required, such as in game scores.', 'Arrays and objects in const can be manipulated using methods like push and by directly changing their properties, allowing for flexibility in usage. Arrays and objects in const can be manipulated using methods like push and by directly changing their properties, allowing for flexibility in usage.', 'Declaration of multiple variables at once is possible using let and const, providing flexibility in coding style and syntax. Declaration of multiple variables at once is possible using let and const, providing flexibility in coding style and syntax.']}, {'end': 3986.592, 'start': 3163.981, 'title': 'Javascript data types and storage', 'summary': 'Discusses javascript data types, including primitive types (string, number, boolean, null, undefined, symbol, bigint) and reference types (arrays, object literals, functions), presenting examples of their usage and how they are stored in memory. it also touches on the dynamic typing of javascript and briefly mentions typescript as a statically-typed superset of javascript.', 'duration': 822.611, 'highlights': ['JavaScript data types include primitive types (string, number, boolean, null, undefined, symbol, BigInt) and reference types (arrays, object literals, functions). The chapter discusses the primitive and reference types in JavaScript, covering string, number, boolean, null, undefined, symbol, and BigInt, along with examples of arrays, object literals, and functions.', 'In JavaScript, primitive data types include string, number, boolean, null, undefined, symbol, and BigInt. The chapter explains the primitive data types in JavaScript, such as string, number, boolean, null, undefined, symbol, and BigInt.', 'JavaScript is a dynamically typed language, unlike statically typed languages such as C, C++, and Java. It is mentioned that JavaScript is a dynamically typed language, in contrast to statically typed languages like C, C++, and Java, which require explicit type definitions for variables.', 'TypeScript, a superset of JavaScript, introduces static typing and is popular for making the code more verbose and less error-prone. The chapter briefly introduces TypeScript as a superset of JavaScript, highlighting its feature of static typing, which can make the code more verbose and less prone to errors.', 'The chapter explains how primitive and reference type data are stored in memory in JavaScript, providing a bigger picture of how JavaScript works. It discusses how primitive and reference type data are stored in memory in JavaScript, aiming to provide a better understanding of how JavaScript works.']}, {'end': 4357.013, 'start': 3986.652, 'title': 'Memory storage in programming', 'summary': 'Explains the concept of memory storage in programming, highlighting the storage of primitive types in the stack and reference types in the heap, with examples demonstrating how variables and data are stored and accessed. it also provides code examples to illustrate the concepts.', 'duration': 370.361, 'highlights': ['The chapter explains the concept of memory storage in programming, highlighting the storage of primitive types in the stack and reference types in the heap.', 'Variables and data are demonstrated to be stored and accessed in different memory areas, with primitive types stored in the stack and reference types in the heap.', 'Code examples are provided to illustrate the concepts of memory storage and access in programming, demonstrating the behavior of variables and data in both primitive and reference types.']}], 'duration': 1584.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo2772713.jpg', 'highlights': ['The chapter emphasizes the preference for using const over let, except in specific cases, such as in game scores.', 'Arrays and objects in const can be manipulated using methods like push and by directly changing their properties, allowing for flexibility in usage.', 'Declaration of multiple variables at once is possible using let and const, providing flexibility in coding style and syntax.', 'The chapter discusses the primitive and reference types in JavaScript, covering string, number, boolean, null, undefined, symbol, and BigInt, along with examples of arrays, object literals, and functions.', 'JavaScript is a dynamically typed language, unlike statically typed languages such as C, C++, and Java.', 'The chapter explains the concept of memory storage in programming, highlighting the storage of primitive types in the stack and reference types in the heap.']}, {'end': 5773.106, 'segs': [{'end': 4480.831, 'src': 'embed', 'start': 4450.712, 'weight': 7, 'content': [{'end': 4453.734, 'text': 'And if I save that you see we get 100 and string.', 'start': 4450.712, 'duration': 3.022}, {'end': 4459.096, 'text': "So there's there's a few reasons you might want to convert this to a number.", 'start': 4454.494, 'duration': 4.602}, {'end': 4466.24, 'text': "If let's say someone submitting a form and the number comes in as a string but you want to run some operations on it.", 'start': 4460.017, 'duration': 6.223}, {'end': 4467.961, 'text': "You can't do that with a string.", 'start': 4466.54, 'duration': 1.421}, {'end': 4469.402, 'text': 'You want to change it to a number.', 'start': 4468.001, 'duration': 1.401}, {'end': 4471.443, 'text': "So there's a couple of ways we can do that.", 'start': 4469.902, 'duration': 1.541}, {'end': 4476.046, 'text': 'The first is using the parse int function, so we can say amount.', 'start': 4471.523, 'duration': 4.523}, {'end': 4480.831, 'text': "i'm just going to reassign it to, let's say, parse int, which is a function.", 'start': 4476.046, 'duration': 4.785}], 'summary': 'Convert string to number for operations, using parse int function.', 'duration': 30.119, 'max_score': 4450.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo4450712.jpg'}, {'end': 4735.868, 'src': 'embed', 'start': 4682.315, 'weight': 2, 'content': [{'end': 4689.457, 'text': "let's say it's a string of ninety nine point five and you want to convert it to a number of ninety nine point five, which is a decimal.", 'start': 4682.315, 'duration': 7.142}, {'end': 4692.798, 'text': 'There is a method you can use called parse float.', 'start': 4689.817, 'duration': 2.981}, {'end': 4699.54, 'text': "You don't want to use parse int because that's going to be an integer which is either a positive or negative number.", 'start': 4693.198, 'duration': 6.342}, {'end': 4708.564, 'text': "So let's come down here and let's say change string to decimal.", 'start': 4700.28, 'duration': 8.284}, {'end': 4717.788, 'text': 'So what we can do is say amount equals and to change it to a decimal we can say parse.', 'start': 4709.724, 'duration': 8.064}, {'end': 4724.363, 'text': "float and pass in the amount and then let's save that.", 'start': 4719.721, 'duration': 4.642}, {'end': 4728.365, 'text': 'now the actual type like within javascript is going to be number.', 'start': 4724.363, 'duration': 4.002}, {'end': 4731.606, 'text': 'but let me show you what happens if we use parse int.', 'start': 4728.365, 'duration': 3.241}, {'end': 4735.127, 'text': "if i say parse int and i save it, it's going to be an inch.", 'start': 4731.606, 'duration': 3.521}, {'end': 4735.868, 'text': "it's going to be 99..", 'start': 4735.127, 'duration': 0.741}], 'summary': 'Using parsefloat method to convert string to decimal in javascript.', 'duration': 53.553, 'max_score': 4682.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo4682315.jpg'}, {'end': 4901.891, 'src': 'embed', 'start': 4873.348, 'weight': 1, 'content': [{'end': 4875.269, 'text': 'And again, this is kind of confusing.', 'start': 4873.348, 'duration': 1.921}, {'end': 4880.814, 'text': "So there's some really strange and quirky aspects of JavaScript.", 'start': 4876.73, 'duration': 4.084}, {'end': 4884.656, 'text': "The good news is most of it doesn't get in your way in practical development.", 'start': 4881.034, 'duration': 3.622}, {'end': 4888.92, 'text': "It's just when we start to dig down deeper, things can get a little weird.", 'start': 4885.097, 'duration': 3.823}, {'end': 4896.386, 'text': "So NAN is a property of the global window object and it's a non writable property.", 'start': 4889.54, 'duration': 6.846}, {'end': 4901.891, 'text': "And there's actually five different types of operations that can return NAN.", 'start': 4896.847, 'duration': 5.044}], 'summary': "Javascript has quirky aspects, but most don't affect practical development. nan is a non-writable property of the global window object with five different types of operations that can return it.", 'duration': 28.543, 'max_score': 4873.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo4873348.jpg'}, {'end': 5185.322, 'src': 'embed', 'start': 5157.645, 'weight': 0, 'content': [{'end': 5161.888, 'text': 'So the next one is the exponent operator, which is a double asterisk.', 'start': 5157.645, 'duration': 4.243}, {'end': 5164.029, 'text': "So let's say x equals.", 'start': 5162.268, 'duration': 1.761}, {'end': 5170.153, 'text': "And what we're saying here is we want to get the result of the first operand to the power of the second.", 'start': 5164.209, 'duration': 5.944}, {'end': 5173.735, 'text': "So we'll say two double asterisk three.", 'start': 5170.373, 'duration': 3.362}, {'end': 5175.856, 'text': 'And that gives us eight.', 'start': 5174.676, 'duration': 1.18}, {'end': 5177.177, 'text': 'All right.', 'start': 5176.837, 'duration': 0.34}, {'end': 5179.179, 'text': "So that's exponent.", 'start': 5177.938, 'duration': 1.241}, {'end': 5180.639, 'text': 'Then we have increment.', 'start': 5179.259, 'duration': 1.38}, {'end': 5182.501, 'text': 'So increments.', 'start': 5181.6, 'duration': 0.901}, {'end': 5185.322, 'text': "There's a couple of ways that we can increment a number.", 'start': 5182.561, 'duration': 2.761}], 'summary': 'Introduction to exponent operator and incrementing numbers.', 'duration': 27.677, 'max_score': 5157.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo5157645.jpg'}, {'end': 5408.834, 'src': 'embed', 'start': 5384.794, 'weight': 4, 'content': [{'end': 5390.756, 'text': 'But I just want to show you if I were to comment this out for a second and then on the double equal change this to a string.', 'start': 5384.794, 'duration': 5.962}, {'end': 5395.642, 'text': "That's going to give me true because the double equal does not test the type.", 'start': 5391.718, 'duration': 3.924}, {'end': 5398.444, 'text': 'It only tests the actual value inside.', 'start': 5395.802, 'duration': 2.642}, {'end': 5399.365, 'text': 'All right.', 'start': 5398.464, 'duration': 0.901}, {'end': 5408.834, 'text': "Now, if I were to comment this and make this to a string and save, I'm going to get false, because the triple equal not only evaluates the value,", 'start': 5399.485, 'duration': 9.349}], 'summary': 'Comparing double equal to triple equal in javascript for type and value', 'duration': 24.04, 'max_score': 5384.794, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo5384794.jpg'}, {'end': 5644.907, 'src': 'embed', 'start': 5610.996, 'weight': 8, 'content': [{'end': 5611.936, 'text': "And let's see what we get.", 'start': 5610.996, 'duration': 0.94}, {'end': 5616.217, 'text': "So if we look in the console you'll see we get fifty five but we get it as a string.", 'start': 5612.436, 'duration': 3.781}, {'end': 5623.858, 'text': 'So this is an example of type coercion where JavaScript implicitly changed this to a string.', 'start': 5616.917, 'duration': 6.941}, {'end': 5624.738, 'text': 'All right.', 'start': 5623.878, 'duration': 0.86}, {'end': 5628.159, 'text': 'Because what happened here is it was concatenated with the plus sign.', 'start': 5624.798, 'duration': 3.361}, {'end': 5636.159, 'text': 'So if I were getting a string for some reason and I wanted to add it, then I would convert this first.', 'start': 5629.272, 'duration': 6.887}, {'end': 5638.881, 'text': "So for example, actually let's just copy it down.", 'start': 5636.219, 'duration': 2.662}, {'end': 5644.907, 'text': "So I'd like you guys to have all the code we write and let's just wrap this in a number.", 'start': 5638.901, 'duration': 6.006}], 'summary': 'Javascript implicitly converts 55 to a string, demonstrating type coercion.', 'duration': 33.911, 'max_score': 5610.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo5610996.jpg'}], 'start': 4357.433, 'title': 'Javascript type conversion and operators', 'summary': 'Explores type conversion in javascript, covering explicit and implicit methods, such as parse int, unary operator, number constructor, and to string. it also discusses data type conversion, truthy and falsy values, boolean constructor, nan operations, arithmetic and comparison operators, and type coercion.', 'chapters': [{'end': 4643.21, 'start': 4357.433, 'title': 'Type conversion in javascript', 'summary': 'Discusses type conversion in javascript, including the process of explicitly converting a value from one type to another, methods like parse int, unary operator, and the number constructor, and the method called to string for changing a number to a string.', 'duration': 285.777, 'highlights': ['The chapter discusses methods for explicitly converting a value from one type to another, such as parse int, the unary operator, and the number constructor.', 'It explains the process of changing a number to a string, including the method called to string and the concept of JavaScript creating a temporary wrapper for the associated type when using to string on a primitive type.']}, {'end': 4840.75, 'start': 4643.47, 'title': 'Data type conversion in javascript', 'summary': 'Covers the conversion of data types in javascript, including converting strings to numbers using parsefloat, truthy and falsy values, and using the boolean constructor to convert numbers to boolean values.', 'duration': 197.28, 'highlights': ['The chapter covers the conversion of data types in JavaScript, including converting strings to numbers using parseFloat Discusses the conversion of strings to numbers using parseFloat method.', 'Explains truthy and falsy values in JavaScript and their conversion to Boolean values Discusses truthy and falsy values and their conversion to Boolean values.', 'Demonstrates the use of Boolean constructor to convert numbers to Boolean values Demonstrates the use of Boolean constructor to convert numbers to Boolean values.']}, {'end': 5156.776, 'start': 4843.582, 'title': 'Understanding nan and arithmetic operators in javascript', 'summary': 'Discusses the concept of nan in javascript, detailing its five different types of operations that can return nan, and then delves into arithmetic operators, demonstrating addition, subtraction, multiplication, division, and modulus operations, as well as concatenation for strings.', 'duration': 313.194, 'highlights': ["JavaScript's NAN can result from five different types of operations, including parsing a non-numeric string, math operations with non-real numbers, operands involving NAN, undefined operations, and non-addition string operations. NAN can result from parsing a non-numeric string, math operations with non-real numbers, operands involving NAN, undefined operations, and non-addition string operations.", 'Arithmetic operators in JavaScript include addition, subtraction, multiplication, division, and modulus, with examples of their functionality and outputs provided for each operation. Arithmetic operators in JavaScript include addition, subtraction, multiplication, division, and modulus, with examples of their functionality and outputs provided for each operation.', 'The plus sign in JavaScript serves as both an addition operator and a concatenation operator for strings, allowing for string concatenation and manipulation. The plus sign in JavaScript serves as both an addition operator and a concatenation operator for strings, allowing for string concatenation and manipulation.']}, {'end': 5773.106, 'start': 5157.645, 'title': 'Javascript operators and type coercion', 'summary': 'Covers basic arithmetic operators, assignment operators, and comparison operators, with examples and explanations. it also delves into type coercion, demonstrating how javascript implicitly changes types when applying operators to values of different types.', 'duration': 615.461, 'highlights': ['The chapter covers basic arithmetic operators, assignment operators, and comparison operators. It explains the exponent, increment, decrement, value assignment, addition, multiplication, subtraction, division, modulus, and comparison operators.', 'Type coercion is demonstrated through examples and explanations. It illustrates how JavaScript implicitly changes types when applying operators to values of different types, such as concatenating a number and a string, and coercing true and false values into numbers.', 'The triple equals operator is recommended for use due to its evaluation of both value and type. It suggests using the triple equals operator for comparison to avoid potential errors, with examples showcasing the differences between double equals and triple equals.']}], 'duration': 1415.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo4357433.jpg', 'highlights': ['The chapter covers basic arithmetic operators, assignment operators, and comparison operators. It explains the exponent, increment, decrement, value assignment, addition, multiplication, subtraction, division, modulus, and comparison operators.', 'Type coercion is demonstrated through examples and explanations. It illustrates how JavaScript implicitly changes types when applying operators to values of different types, such as concatenating a number and a string, and coercing true and false values into numbers.', 'The triple equals operator is recommended for use due to its evaluation of both value and type. It suggests using the triple equals operator for comparison to avoid potential errors, with examples showcasing the differences between double equals and triple equals.', 'The chapter discusses methods for explicitly converting a value from one type to another, such as parse int, the unary operator, and the number constructor.', 'It explains the process of changing a number to a string, including the method called to string and the concept of JavaScript creating a temporary wrapper for the associated type when using to string on a primitive type.', 'The chapter covers the conversion of data types in JavaScript, including converting strings to numbers using parseFloat Discusses the conversion of strings to numbers using parseFloat method.', 'Explains truthy and falsy values in JavaScript and their conversion to Boolean values Discusses truthy and falsy values and their conversion to Boolean values.', 'Demonstrates the use of Boolean constructor to convert numbers to Boolean values Demonstrates the use of Boolean constructor to convert numbers to Boolean values.', "JavaScript's NAN can result from five different types of operations, including parsing a non-numeric string, math operations with non-real numbers, operands involving NAN, undefined operations, and non-addition string operations. NAN can result from parsing a non-numeric string, math operations with non-real numbers, operands involving NAN, undefined operations, and non-addition string operations.", 'Arithmetic operators in JavaScript include addition, subtraction, multiplication, division, and modulus, with examples of their functionality and outputs provided for each operation. Arithmetic operators in JavaScript include addition, subtraction, multiplication, division, and modulus, with examples of their functionality and outputs provided for each operation.', 'The plus sign in JavaScript serves as both an addition operator and a concatenation operator for strings, allowing for string concatenation and manipulation. The plus sign in JavaScript serves as both an addition operator and a concatenation operator for strings, allowing for string concatenation and manipulation.']}, {'end': 7172.697, 'segs': [{'end': 6427.271, 'src': 'heatmap', 'start': 5996.306, 'weight': 0.826, 'content': [{'end': 5999.008, 'text': 'So we can essentially write our JavaScript in here.', 'start': 5996.306, 'duration': 2.702}, {'end': 6007.435, 'text': "So I just wanted to say name and then I'm going to just space and then and I am I want to put my age here.", 'start': 5999.869, 'duration': 7.566}, {'end': 6011.378, 'text': "So again I'm going to use this syntax and say.", 'start': 6007.535, 'duration': 3.843}, {'end': 6015.772, 'text': 'Thirty thirty one years old and you can see that that outputs fine.', 'start': 6012.79, 'duration': 2.982}, {'end': 6020.534, 'text': 'So this to me at least is much much easier and cleaner than this.', 'start': 6015.792, 'duration': 4.742}, {'end': 6023.196, 'text': "So you'll be using template literals quite a bit.", 'start': 6021.115, 'duration': 2.081}, {'end': 6027.618, 'text': "Now template literals didn't come into JavaScript until 2015.", 'start': 6023.496, 'duration': 4.122}, {'end': 6035.242, 'text': 'It was the ES 2015 or ES 6 update was where template literals were were introduced.', 'start': 6027.618, 'duration': 7.624}, {'end': 6037.724, 'text': 'Before that you would have to do this.', 'start': 6036.123, 'duration': 1.601}, {'end': 6048.336, 'text': "So now what I want to do is look at properties and methods or let's say string string properties and methods.", 'start': 6038.504, 'duration': 9.832}, {'end': 6057.204, 'text': "So if I say let's say x equals and then hello world actually I'm going to give this a different variable.", 'start': 6048.837, 'duration': 8.367}, {'end': 6061.267, 'text': "Let's say const s equals hello world.", 'start': 6057.664, 'duration': 3.603}, {'end': 6062.748, 'text': 'So we have a string of hello world.', 'start': 6061.307, 'duration': 1.441}, {'end': 6070.515, 'text': "And if I want to let's say get the length there's a length property for that we can use for string.", 'start': 6063.569, 'duration': 6.946}, {'end': 6075.699, 'text': "So I'm going to say x equals and then s which is our string and then dot length.", 'start': 6070.555, 'duration': 5.144}, {'end': 6084.975, 'text': "Now since it's a property we don't add the parentheses methods use the parentheses because methods are functions properties are more like attributes.", 'start': 6076.212, 'duration': 8.763}, {'end': 6088.356, 'text': "If I save that you'll see we get 11.", 'start': 6085.735, 'duration': 2.621}, {'end': 6089.896, 'text': 'Now, as I.', 'start': 6088.356, 'duration': 1.54}, {'end': 6092.597, 'text': 'as I said earlier, the strings are primitive,', 'start': 6089.896, 'duration': 2.701}, {'end': 6099.499, 'text': 'but we can use properties and methods on them because of the wrapper that JavaScript gives it when we run these properties and methods.', 'start': 6092.597, 'duration': 6.902}, {'end': 6103.261, 'text': 'essentially what javascript does behind the scenes.', 'start': 6100.1, 'duration': 3.161}, {'end': 6105.943, 'text': 'let me just show you real quick.', 'start': 6103.261, 'duration': 2.682}, {'end': 6118.868, 'text': "if we were to do, let's say, x equals type of, and then we'll do type of s, and let's just comment that out because that'll overwrite it.", 'start': 6105.943, 'duration': 12.925}, {'end': 6120.409, 'text': 'so we get string right.', 'start': 6118.868, 'duration': 1.541}, {'end': 6130.569, 'text': 'but what the wrapper does when we run a property or method is it basically says new string and it creates this string object.', 'start': 6120.409, 'duration': 10.16}, {'end': 6133.15, 'text': "Now if I save you'll see I get object.", 'start': 6130.869, 'duration': 2.281}, {'end': 6135.991, 'text': "OK And I'll just leave it like that.", 'start': 6134.47, 'duration': 1.521}, {'end': 6139.912, 'text': 'You can leave it with just quotes, hello world, or you can use this new string.', 'start': 6136.051, 'duration': 3.861}, {'end': 6145.714, 'text': "but I'm just trying to let you know what happens kind of behind the scenes, when we use a method or a property,", 'start': 6139.912, 'duration': 5.802}, {'end': 6150.556, 'text': 'and we can also access the the individual characters.', 'start': 6145.714, 'duration': 4.842}, {'end': 6161.742, 'text': "So, for instance, if I say let's go down here, if I say X equals, then s, i can use this syntax and it starts at zero, just like an array.", 'start': 6150.876, 'duration': 10.866}, {'end': 6165.345, 'text': "if i save that, you'll see i get h, i get the first character.", 'start': 6161.742, 'duration': 3.603}, {'end': 6170.669, 'text': 'if i do one, i get e, so i get the second character, and so on.', 'start': 6165.345, 'duration': 5.324}, {'end': 6172.611, 'text': "okay, and i'll just put a comment here.", 'start': 6170.669, 'duration': 1.942}, {'end': 6180.377, 'text': "we'll say access, um access value by key, so we have number key, numbered keys.", 'start': 6172.611, 'duration': 7.766}, {'end': 6191.101, 'text': "Now another thing I want to show you and we'll get much more into this later with object oriented programming is objects have what's called a prototype,", 'start': 6181.912, 'duration': 9.189}, {'end': 6192.703, 'text': "and that's where the methods are stored.", 'start': 6191.101, 'duration': 1.602}, {'end': 6202.413, 'text': "So if I do X equals and the way we access the prototype is double underscore proto double underscore and I'm setting that to X.", 'start': 6193.123, 'duration': 9.29}, {'end': 6204.515, 'text': "I'm going to save and show you what we get here.", 'start': 6202.413, 'duration': 2.102}, {'end': 6209.802, 'text': 'So if we look down here, we have all these different methods.', 'start': 6206.96, 'duration': 2.842}, {'end': 6215.044, 'text': 'So, for instance, we have two uppercase, two lowercase.', 'start': 6210.262, 'duration': 4.782}, {'end': 6221.928, 'text': 'We have split substring, all these different methods that we can use with strings.', 'start': 6215.745, 'duration': 6.183}, {'end': 6223.829, 'text': "And I'm going to show you some of them, not all of them.", 'start': 6221.968, 'duration': 1.861}, {'end': 6229.833, 'text': "I'll show you some of them now, some of them later, and some you'll never use, which I probably won't get to.", 'start': 6224.59, 'duration': 5.243}, {'end': 6234.075, 'text': 'But you can see all of these different methods that are available on the prototype.', 'start': 6230.313, 'duration': 3.762}, {'end': 6243.52, 'text': "So and if we console log S and I save that, if we look down here, you'll see prototype right here, which has the same thing.", 'start': 6235.367, 'duration': 8.153}, {'end': 6246.125, 'text': 'So this is the same thing as this.', 'start': 6243.761, 'duration': 2.364}, {'end': 6248.978, 'text': 'All right.', 'start': 6248.578, 'duration': 0.4}, {'end': 6252.64, 'text': 'And it even shows you the different keys, the different numbered keys.', 'start': 6248.998, 'duration': 3.642}, {'end': 6255.101, 'text': "But let's put that back to X.", 'start': 6253.02, 'duration': 2.081}, {'end': 6257.862, 'text': "And now we're going to look at some of these properties.", 'start': 6255.101, 'duration': 2.761}, {'end': 6263.045, 'text': "So if we want to change the case, we could do X equals, let's say, our string.", 'start': 6257.942, 'duration': 5.103}, {'end': 6266.707, 'text': "And then we'll do two uppercase, which is a method.", 'start': 6263.605, 'duration': 3.102}, {'end': 6268.447, 'text': 'So, of course, we need our parentheses.', 'start': 6266.787, 'duration': 1.66}, {'end': 6271.549, 'text': 'If I save that, we get hello world in all uppercase.', 'start': 6268.468, 'duration': 3.081}, {'end': 6273.95, 'text': "I'm actually going to comment that down.", 'start': 6271.569, 'duration': 2.381}, {'end': 6277.452, 'text': 'And we also have two lowercase.', 'start': 6274.39, 'duration': 3.062}, {'end': 6280.016, 'text': 'So that will change the case.', 'start': 6278.815, 'duration': 1.201}, {'end': 6288.644, 'text': "There isn't a method that will make the first letter of each word uppercase, but we can do that in JavaScript.", 'start': 6280.737, 'duration': 7.907}, {'end': 6290.506, 'text': "There's no single method to do it.", 'start': 6288.665, 'duration': 1.841}, {'end': 6291.627, 'text': "I'll show you that in a little bit.", 'start': 6290.546, 'duration': 1.081}, {'end': 6297.613, 'text': 'So the next one is charAt, and that will return the character at the specified index.', 'start': 6292.188, 'duration': 5.425}, {'end': 6305.821, 'text': "So if I say x equals s.charAt, And let's say we want to get the first character that would be zero.", 'start': 6297.673, 'duration': 8.148}, {'end': 6307.001, 'text': 'I save that.', 'start': 6305.841, 'duration': 1.16}, {'end': 6313.725, 'text': 'That gives us age, which is essentially the same as as what we did up here where we were accessing by the key.', 'start': 6307.162, 'duration': 6.563}, {'end': 6316.407, 'text': 'So this will give us the same as this.', 'start': 6313.805, 'duration': 2.602}, {'end': 6322.11, 'text': 'Now, if we want to know the index of a specific character, so kind of the.', 'start': 6317.908, 'duration': 4.202}, {'end': 6329.094, 'text': 'the inverse of this, we could say s equal x equals s, and we can use index of.', 'start': 6322.11, 'duration': 6.984}, {'end': 6337.082, 'text': "So if we say index of and let's say we want the index of H by save that we get zero.", 'start': 6330.259, 'duration': 6.823}, {'end': 6339.183, 'text': "Let's say E.", 'start': 6337.882, 'duration': 1.301}, {'end': 6340.404, 'text': "Now there's more than one E.", 'start': 6339.183, 'duration': 1.221}, {'end': 6346.426, 'text': 'What this will do is give us the first E which is the number one index which is the second character.', 'start': 6340.404, 'duration': 6.022}, {'end': 6350.068, 'text': 'So this right here zero one two three and so on.', 'start': 6346.526, 'duration': 3.542}, {'end': 6356.411, 'text': "If we put let's say D that will give us 10 which is the last index.", 'start': 6350.648, 'duration': 5.763}, {'end': 6362.438, 'text': 'So the next one is substring which will search a string for a specified value.', 'start': 6357.469, 'duration': 4.969}, {'end': 6367.388, 'text': 'So you show you if we do as dot and then substring.', 'start': 6362.619, 'duration': 4.769}, {'end': 6369.69, 'text': 'And then we can.', 'start': 6369.13, 'duration': 0.56}, {'end': 6372.391, 'text': 'This will take in two indexes.', 'start': 6369.87, 'duration': 2.521}, {'end': 6375.793, 'text': "So let's say we want to get from zero to four.", 'start': 6372.531, 'duration': 3.262}, {'end': 6378.193, 'text': 'by save that we get hell.', 'start': 6375.793, 'duration': 2.4}, {'end': 6384.956, 'text': 'because if we look at hello world and by the way, this could be just a string, you know just the quotes hello world.', 'start': 6378.193, 'duration': 6.763}, {'end': 6389.718, 'text': 'If I change this s to that and save we get the same thing.', 'start': 6385.016, 'duration': 4.702}, {'end': 6395.46, 'text': 'But I just did that to show you basically how to how to turn a string into a string object.', 'start': 6390.238, 'duration': 5.222}, {'end': 6402.455, 'text': "So we get hell because it's zero one two three and then it ends at four.", 'start': 6396.494, 'duration': 5.961}, {'end': 6403.495, 'text': 'All right.', 'start': 6403.255, 'duration': 0.24}, {'end': 6411.837, 'text': "If we want to get hello then it would be zero to five save that we get hello and we don't have to start from zero.", 'start': 6403.556, 'duration': 8.281}, {'end': 6413.818, 'text': 'If I do one and save we get L.O.', 'start': 6411.897, 'duration': 1.921}, {'end': 6419.619, 'text': 'You know I know governor if we do two to five we get L.L.O.', 'start': 6414.138, 'duration': 5.481}, {'end': 6421.523, 'text': 'All right.', 'start': 6421.223, 'duration': 0.3}, {'end': 6424.207, 'text': "So you can get any it's it's a substring.", 'start': 6421.644, 'duration': 2.563}, {'end': 6427.271, 'text': "It's just basically a string inside of a string.", 'start': 6424.267, 'duration': 3.004}], 'summary': 'Javascript template literals introduced in es6 in 2015. string properties and methods demonstrated with examples.', 'duration': 430.965, 'max_score': 5996.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo5996306.jpg'}, {'end': 6070.515, 'src': 'embed', 'start': 6036.123, 'weight': 9, 'content': [{'end': 6037.724, 'text': 'Before that you would have to do this.', 'start': 6036.123, 'duration': 1.601}, {'end': 6048.336, 'text': "So now what I want to do is look at properties and methods or let's say string string properties and methods.", 'start': 6038.504, 'duration': 9.832}, {'end': 6057.204, 'text': "So if I say let's say x equals and then hello world actually I'm going to give this a different variable.", 'start': 6048.837, 'duration': 8.367}, {'end': 6061.267, 'text': "Let's say const s equals hello world.", 'start': 6057.664, 'duration': 3.603}, {'end': 6062.748, 'text': 'So we have a string of hello world.', 'start': 6061.307, 'duration': 1.441}, {'end': 6070.515, 'text': "And if I want to let's say get the length there's a length property for that we can use for string.", 'start': 6063.569, 'duration': 6.946}], 'summary': "Reviewing string properties and methods, such as length, on 'hello world' string.", 'duration': 34.392, 'max_score': 6036.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo6036123.jpg'}, {'end': 6243.52, 'src': 'embed', 'start': 6206.96, 'weight': 13, 'content': [{'end': 6209.802, 'text': 'So if we look down here, we have all these different methods.', 'start': 6206.96, 'duration': 2.842}, {'end': 6215.044, 'text': 'So, for instance, we have two uppercase, two lowercase.', 'start': 6210.262, 'duration': 4.782}, {'end': 6221.928, 'text': 'We have split substring, all these different methods that we can use with strings.', 'start': 6215.745, 'duration': 6.183}, {'end': 6223.829, 'text': "And I'm going to show you some of them, not all of them.", 'start': 6221.968, 'duration': 1.861}, {'end': 6229.833, 'text': "I'll show you some of them now, some of them later, and some you'll never use, which I probably won't get to.", 'start': 6224.59, 'duration': 5.243}, {'end': 6234.075, 'text': 'But you can see all of these different methods that are available on the prototype.', 'start': 6230.313, 'duration': 3.762}, {'end': 6243.52, 'text': "So and if we console log S and I save that, if we look down here, you'll see prototype right here, which has the same thing.", 'start': 6235.367, 'duration': 8.153}], 'summary': 'Demonstration of various string methods available on the prototype, including uppercase, lowercase, split, and substring.', 'duration': 36.56, 'max_score': 6206.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo6206960.jpg'}, {'end': 6367.388, 'src': 'embed', 'start': 6337.882, 'weight': 12, 'content': [{'end': 6339.183, 'text': "Let's say E.", 'start': 6337.882, 'duration': 1.301}, {'end': 6340.404, 'text': "Now there's more than one E.", 'start': 6339.183, 'duration': 1.221}, {'end': 6346.426, 'text': 'What this will do is give us the first E which is the number one index which is the second character.', 'start': 6340.404, 'duration': 6.022}, {'end': 6350.068, 'text': 'So this right here zero one two three and so on.', 'start': 6346.526, 'duration': 3.542}, {'end': 6356.411, 'text': "If we put let's say D that will give us 10 which is the last index.", 'start': 6350.648, 'duration': 5.763}, {'end': 6362.438, 'text': 'So the next one is substring which will search a string for a specified value.', 'start': 6357.469, 'duration': 4.969}, {'end': 6367.388, 'text': 'So you show you if we do as dot and then substring.', 'start': 6362.619, 'duration': 4.769}], 'summary': 'Explaining string indexing and substring searching in javascript.', 'duration': 29.506, 'max_score': 6337.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo6337882.jpg'}, {'end': 6511.4, 'src': 'embed', 'start': 6476.467, 'weight': 7, 'content': [{'end': 6479.328, 'text': 'And if we do slice we also get hello.', 'start': 6476.467, 'duration': 2.861}, {'end': 6481.329, 'text': "Now there's a few differences.", 'start': 6479.768, 'duration': 1.561}, {'end': 6485.87, 'text': 'One of them is that with slice we can start from the end with negative numbers.', 'start': 6481.489, 'duration': 4.381}, {'end': 6489.311, 'text': "So for instance if I do let's start.", 'start': 6486.51, 'duration': 2.801}, {'end': 6493.277, 'text': 'We know that hello world altogether is 10.', 'start': 6489.571, 'duration': 3.706}, {'end': 6497.258, 'text': "Right It's 10 characters or zero through 10 I should say.", 'start': 6493.277, 'duration': 3.981}, {'end': 6503.499, 'text': 'And if we want to start the beginning using negative we could do negative 11.', 'start': 6498.158, 'duration': 5.341}, {'end': 6511.4, 'text': "So if I do that and then actually if I just do that we'll get hello world because it starts at the beginning negative 11 all the way to the end.", 'start': 6503.499, 'duration': 7.901}], 'summary': "Slice allows starting from end with negative numbers, e.g. -11 for 'hello world'.", 'duration': 34.933, 'max_score': 6476.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo6476467.jpg'}, {'end': 6922.269, 'src': 'embed', 'start': 6871.201, 'weight': 3, 'content': [{'end': 6873.482, 'text': 'a character at a specific index.', 'start': 6871.201, 'duration': 2.281}, {'end': 6880.606, 'text': 'You could also do this format where you have you know my string and then brackets and 0 1 2 3 etc.', 'start': 6873.862, 'duration': 6.744}, {'end': 6888.17, 'text': 'So you know how to access the first letter and then you also know how to make all of these everything uppercase.', 'start': 6881.026, 'duration': 7.144}, {'end': 6893.771, 'text': 'And then you also know how to basically pluck out stuff from the string.', 'start': 6888.908, 'duration': 4.863}, {'end': 6898.935, 'text': 'OK, take strings from a string using either the substring or slice methods.', 'start': 6893.791, 'duration': 5.144}, {'end': 6908.882, 'text': 'OK, so using this stuff here, you should be able to, you know, come up with this my new string, which will have an upper case for the first letter.', 'start': 6898.955, 'duration': 9.927}, {'end': 6909.682, 'text': 'All right.', 'start': 6908.902, 'duration': 0.78}, {'end': 6913.125, 'text': 'So go ahead and pause the video now and try and do that on your own.', 'start': 6909.743, 'duration': 3.382}, {'end': 6919.185, 'text': "So now I'm going to do is close that up and we're going to go ahead and solve this challenge.", 'start': 6914.178, 'duration': 5.007}, {'end': 6922.269, 'text': "And I'm just I just want to open up my console over here as well.", 'start': 6919.445, 'duration': 2.824}], 'summary': 'Learn to manipulate strings by accessing, modifying, and extracting characters and substrings.', 'duration': 51.068, 'max_score': 6871.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo6871201.jpg'}, {'end': 7059.247, 'src': 'embed', 'start': 7034.568, 'weight': 10, 'content': [{'end': 7042.473, 'text': 'So what I can do is just put a 1 in here, because what that will do is take the 1 position, which is e remember, it starts at 0,', 'start': 7034.568, 'duration': 7.905}, {'end': 7043.794, 'text': 'and it will get that over.', 'start': 7042.473, 'duration': 1.321}, {'end': 7050.864, 'text': "So now if I save this, I'm going to get developer with an uppercase D.", 'start': 7045.215, 'duration': 5.649}, {'end': 7054.745, 'text': 'Now, the other solutions we can use are going to be very similar.', 'start': 7050.864, 'duration': 3.881}, {'end': 7057.086, 'text': 'So let me just copy that down.', 'start': 7054.906, 'duration': 2.18}, {'end': 7059.247, 'text': "We'll say solution two.", 'start': 7057.126, 'duration': 2.121}], 'summary': "Using a 1 in the position will capitalize the 1st letter, leading to 'developer' becoming 'developer'.", 'duration': 24.679, 'max_score': 7034.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo7034568.jpg'}, {'end': 7159.627, 'src': 'embed', 'start': 7132.737, 'weight': 0, 'content': [{'end': 7137.019, 'text': "If I were to put a space here we'll get this upper case D and then developer.", 'start': 7132.737, 'duration': 4.282}, {'end': 7141.201, 'text': 'And another thing we could do is instead of using substring we could use slice.', 'start': 7137.639, 'duration': 3.562}, {'end': 7147.197, 'text': "OK So it just shows you that there's multiple solutions for everything really.", 'start': 7142.213, 'duration': 4.984}, {'end': 7153.462, 'text': "And there's a lot more solutions you could have including stuff that we haven't gone into yet.", 'start': 7147.737, 'duration': 5.725}, {'end': 7159.627, 'text': "But as I said when I have a challenge for you guys it's going to only include stuff that we've already gone over.", 'start': 7153.942, 'duration': 5.685}], 'summary': 'Exploring different string methods, highlighting multiple solutions and emphasizing familiarity with covered content.', 'duration': 26.89, 'max_score': 7132.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo7132737.jpg'}], 'start': 5773.526, 'title': 'Javascript string manipulation and challenges', 'summary': 'Covers javascript data types, string properties, and methods, including template literals, accessing length, changing case, finding character indexes, and various string manipulation methods. it also presents a challenge to capitalize the first letter of a single word string, offering hints and multiple solutions.', 'chapters': [{'end': 6035.242, 'start': 5773.526, 'title': 'Javascript data types and string manipulation', 'summary': 'Covers javascript data types, including primitive and reference types, and focuses on string manipulation, introducing the concept of template literals, which were introduced in the es 2015 update.', 'duration': 261.716, 'highlights': ['The chapter covers JavaScript data types, including primitive and reference types The transcript introduces the seven primitive types and reference types or objects, providing a foundational understanding of JavaScript data types.', 'Introducing the concept of template literals, which were introduced in the ES 2015 update The transcript highlights the introduction of template literals in ES 2015, showcasing their usage for string manipulation and expressing JavaScript expressions in strings.', 'Explaining the usage of template literals for string manipulation with variables and JavaScript expressions The transcript provides a detailed explanation of using template literals for string manipulation, demonstrating the usage of variables and JavaScript expressions within backticks for cleaner and easier string manipulation.']}, {'end': 6530.928, 'start': 6036.123, 'title': 'Javascript string properties and methods', 'summary': 'Covers using string properties and methods in javascript, including accessing string length, individual characters, changing case, finding index of characters, and using substring and slice methods for manipulating strings.', 'duration': 494.805, 'highlights': ['Accessing string length and individual characters The chapter demonstrates accessing the length property of a string in JavaScript, and accessing individual characters using array-like syntax, providing a practical understanding of string manipulation.', "Methods for changing case and finding index of characters The chapter showcases the use of 'toUpperCase' and 'toLowerCase' methods for changing the case of strings, and the 'indexOf' method for finding the index of specific characters, providing insights into string manipulation techniques.", "Using substring and slice methods for string manipulation The chapter presents the usage of 'substring' and 'slice' methods in JavaScript for extracting specific substrings from a string, illustrating practical examples and differences between the two methods for string manipulation."]}, {'end': 6764.85, 'start': 6532.63, 'title': 'String methods in javascript', 'summary': 'Covers various string methods in javascript including trim, replace, includes, value of, and split, with examples and usage of each method.', 'duration': 232.22, 'highlights': ['The chapter covers various string methods in JavaScript including trim, replace, includes, value of, and split Key points: Introduction to various string methods such as trim, replace, includes, value of, and split in JavaScript.', 'trim method trims the white space from a string Quantifiable data: Demonstrates the usage of trim method to remove white space from a string.', 'replace method replaces a specified string with another string Quantifiable data: Provides an example of using replace method to replace a specified word within a string.', 'includes method checks if a string is found within another string and returns true or false Quantifiable data: Demonstrates the usage of includes method to check if a string is present within another string.', 'value of method returns the primitive value of a variable Quantifiable data: Explains the usage of value of method to return the primitive value of a variable.', 'split method splits a string into an array based on a specified separator Quantifiable data: Provides an example of using split method to split a string into an array based on a specified separator.']}, {'end': 7172.697, 'start': 6765.41, 'title': 'String challenge: uppercase first letter', 'summary': 'Introduces a challenge to capitalize the first letter of a single word string, providing hints and multiple solutions, demonstrating the use of methods like charat, touppercase, substring, and slice.', 'duration': 407.287, 'highlights': ['The challenge is to capitalize the first letter of a single word string, and the solutions demonstrate the use of methods like charAt, toUpperCase, substring, and slice, providing multiple approaches to achieve the desired result.', 'The instructor emphasizes that the challenge is based on the concepts already learned, and provides hints including the use of charAt to get the character at a specific index, accessing the first letter using bracket syntax, making everything uppercase, and extracting strings using substring or slice methods.', 'The solutions provided include using charAt and substring, using bracket syntax and substring, and using template literals and slice, showing the versatility of approaches to achieve the desired outcome.']}], 'duration': 1399.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo5773526.jpg', 'highlights': ['The chapter covers JavaScript data types, including primitive and reference types, providing a foundational understanding.', 'Introducing the concept of template literals, showcasing their usage for string manipulation and expressing JavaScript expressions in strings.', 'Explaining the usage of template literals for string manipulation with variables and JavaScript expressions.', 'Accessing string length and individual characters, providing a practical understanding of string manipulation.', 'Methods for changing case and finding index of characters, providing insights into string manipulation techniques.', 'Using substring and slice methods for string manipulation, illustrating practical examples and differences between the two methods.', 'Introduction to various string methods such as trim, replace, includes, value of, and split in JavaScript.', 'Demonstrates the usage of trim method to remove white space from a string.', 'Provides an example of using replace method to replace a specified word within a string.', 'Demonstrates the usage of includes method to check if a string is present within another string.', 'Explains the usage of value of method to return the primitive value of a variable.', 'Provides an example of using split method to split a string into an array based on a specified separator.', 'The challenge is to capitalize the first letter of a single word string, providing multiple approaches to achieve the desired result.', 'The instructor emphasizes that the challenge is based on the concepts already learned, and provides hints for solving the challenge.', 'The solutions provided include using charAt and substring, using bracket syntax and substring, and using template literals and slice.']}, {'end': 9412.295, 'segs': [{'end': 7273.694, 'src': 'embed', 'start': 7242.551, 'weight': 1, 'content': [{'end': 7245.932, 'text': 'because I just want to show you some of the methods that we can use.', 'start': 7242.551, 'duration': 3.381}, {'end': 7249.513, 'text': "Now, we've looked at two string.", 'start': 7246.892, 'duration': 2.621}, {'end': 7256.935, 'text': "So if we say num dot two string, that's going to give us the number as a string.", 'start': 7249.873, 'duration': 7.062}, {'end': 7260.816, 'text': 'Now, there is no length property for numbers.', 'start': 7256.955, 'duration': 3.861}, {'end': 7264.677, 'text': 'So if I were to say X equals num dot length.', 'start': 7260.936, 'duration': 3.741}, {'end': 7267.412, 'text': "You see, I'm going to get undefined.", 'start': 7265.831, 'duration': 1.581}, {'end': 7273.694, 'text': 'However, if you want to get the length of a number like you want to know how many digits it is, you could do to string.', 'start': 7267.472, 'duration': 6.222}], 'summary': 'Demonstrating methods for converting numbers to strings and getting their length.', 'duration': 31.143, 'max_score': 7242.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo7242551.jpg'}, {'end': 7714.17, 'src': 'heatmap', 'start': 7279.877, 'weight': 0.718, 'content': [{'end': 7283.759, 'text': "If I were to add, let's say, let's say five hundred, then it gives me three.", 'start': 7279.877, 'duration': 3.882}, {'end': 7285.722, 'text': 'All right.', 'start': 7285.362, 'duration': 0.36}, {'end': 7286.842, 'text': "So that's two string.", 'start': 7285.762, 'duration': 1.08}, {'end': 7293.505, 'text': 'We also have two fixed, which is going to give you or allow you to specify the number of decimal points.', 'start': 7287.503, 'duration': 6.002}, {'end': 7295.405, 'text': "So let's say dot two fixed.", 'start': 7293.545, 'duration': 1.86}, {'end': 7298.766, 'text': 'You can see we have the drop down of methods here.', 'start': 7295.445, 'duration': 3.321}, {'end': 7301.727, 'text': "So two fixed and I'll say two.", 'start': 7299.886, 'duration': 1.841}, {'end': 7305.988, 'text': "And even though our number is five, it's just going to give us five dot zero zero.", 'start': 7301.787, 'duration': 4.201}, {'end': 7307.689, 'text': 'Now, if we look at the type.', 'start': 7306.509, 'duration': 1.18}, {'end': 7312.006, 'text': 'So if we look at the type of X, you can see it is a string.', 'start': 7308.962, 'duration': 3.044}, {'end': 7320.678, 'text': "So if we take a number and then we use two fixed on it, it's going to turn it into a string representation of a decimal.", 'start': 7312.367, 'duration': 8.311}, {'end': 7323.222, 'text': "So let's get rid of that.", 'start': 7322.08, 'duration': 1.142}, {'end': 7328.157, 'text': "And then if I were to, let's say this number, I'll make it 5.4567.", 'start': 7324.454, 'duration': 3.703}, {'end': 7330.419, 'text': "If I save that, I'm just gonna get 5.46.", 'start': 7328.157, 'duration': 2.262}, {'end': 7335.483, 'text': 'Now it gives me six because it rounded this up, right? If I were to do 4.52 and save that, then I get 4.5.', 'start': 7330.419, 'duration': 5.064}, {'end': 7355.251, 'text': 'Now we also have two precision, which is Kinda similar, but we count the whole number.', 'start': 7335.483, 'duration': 19.768}, {'end': 7363.438, 'text': "So if we say three, actually let's do two, and I save it, then it doesn't give me two decimal places, it gives me two in total.", 'start': 7355.371, 'duration': 8.067}, {'end': 7366.241, 'text': "So we'll do 5.5.", 'start': 7363.498, 'duration': 2.743}, {'end': 7374.668, 'text': "And if I were to change this, let's say four five to four two, and save that, it's gonna give me 5.4.", 'start': 7366.241, 'duration': 8.427}, {'end': 7380.37, 'text': "If I say to precision three, then it's gonna give me three digits, 5.42.", 'start': 7374.668, 'duration': 5.702}, {'end': 7381.511, 'text': "So that's two precision.", 'start': 7380.37, 'duration': 1.141}, {'end': 7384.152, 'text': 'We also have two exponential.', 'start': 7381.631, 'duration': 2.521}, {'end': 7389.875, 'text': 'So say X equals nine dot nine num dot two exponential.', 'start': 7384.472, 'duration': 5.403}, {'end': 7396.419, 'text': "And that will get us the exponential of, let's say, say two.", 'start': 7390.476, 'duration': 5.943}, {'end': 7400.361, 'text': "If I save that, then we're going to get that as a result.", 'start': 7397.36, 'duration': 3.001}, {'end': 7402.743, 'text': "Let's actually change this.", 'start': 7401.462, 'duration': 1.281}, {'end': 7405.159, 'text': 'back to five.', 'start': 7404.178, 'duration': 0.981}, {'end': 7410.364, 'text': "So to precision into exponential are ones that I don't really use very much.", 'start': 7405.84, 'duration': 4.524}, {'end': 7417.25, 'text': 'Now you you might be working in a different location a different locale.', 'start': 7411.605, 'duration': 5.645}, {'end': 7421.253, 'text': 'So there is also to locale string.', 'start': 7417.79, 'duration': 3.463}, {'end': 7427.791, 'text': "So if we do that and then I mean by default, I think it's going to do where you are.", 'start': 7422.334, 'duration': 5.457}, {'end': 7433.653, 'text': "so for me it would be en us, since i'm in the us, which just gives me five.", 'start': 7427.791, 'duration': 5.862}, {'end': 7442.916, 'text': "but let's say you're in egypt, which is, i think, ar dash eg and save, that's the representation of the number five.", 'start': 7433.653, 'duration': 9.263}, {'end': 7444.696, 'text': "i guess i mean i don't.", 'start': 7442.916, 'duration': 1.78}, {'end': 7450.858, 'text': "i don't know the egyptian numbers or whatever, but i'm guessing that's what it is all right.", 'start': 7444.696, 'duration': 6.162}, {'end': 7452.739, 'text': "so that's two locale string.", 'start': 7450.858, 'duration': 1.881}, {'end': 7455.96, 'text': "i'm just going to put that back to en dash us.", 'start': 7452.739, 'duration': 3.221}, {'end': 7461.989, 'text': "Now there's not too much else to look at as far as methods.", 'start': 7458.106, 'duration': 3.883}, {'end': 7469.914, 'text': "If we do num and we look at the prototype, I mean, that's pretty much it.", 'start': 7462.049, 'duration': 7.865}, {'end': 7473.557, 'text': 'All the ones we looked at, right? I mean, there is value of as well.', 'start': 7470.014, 'duration': 3.543}, {'end': 7483.443, 'text': "So if I do x equals num dot value of and we save that, let's console log x.", 'start': 7474.617, 'duration': 8.826}, {'end': 7486.946, 'text': 'That just gives me the value, right? Now, there are..', 'start': 7483.443, 'duration': 3.503}, {'end': 7492.564, 'text': 'On the number object itself, there are properties.', 'start': 7488.183, 'duration': 4.381}, {'end': 7495.545, 'text': 'So, for instance,', 'start': 7493.004, 'duration': 2.541}, {'end': 7506.288, 'text': 'we can get the largest possible number for the number type by doing number with a capital N dot and then all capital max underscore value.', 'start': 7495.545, 'duration': 10.743}, {'end': 7509.44, 'text': "So I'm going to set that to X.", 'start': 7507.199, 'duration': 2.241}, {'end': 7512.64, 'text': "So that's the largest number possible that we can use with number.", 'start': 7509.44, 'duration': 3.2}, {'end': 7524.363, 'text': "And then if you want to get the lowest possible, we can do X equals, let's say, number dot and then min value, which is that number there.", 'start': 7513.26, 'duration': 11.103}, {'end': 7530.224, 'text': "OK, so there's not much else to look at in terms of methods that we can use on numbers.", 'start': 7525.863, 'duration': 4.361}, {'end': 7533.605, 'text': 'So in the next video, I want to look at the math object.', 'start': 7530.724, 'duration': 2.881}, {'end': 7536.916, 'text': 'All right guys.', 'start': 7536.516, 'duration': 0.4}, {'end': 7544.858, 'text': 'so JavaScript has a built in object called math, and this object has a bunch of methods on it that have to do with mathematical operations.', 'start': 7536.916, 'duration': 7.942}, {'end': 7551.06, 'text': 'And it comes in handy when you need to do things like find the square root of something or round up or round down.', 'start': 7545.319, 'duration': 5.741}, {'end': 7554.821, 'text': "There's also a helpful random method that you'll probably use quite a bit.", 'start': 7551.42, 'duration': 3.401}, {'end': 7557.982, 'text': "So we'll go ahead and take a look at that.", 'start': 7555.321, 'duration': 2.661}, {'end': 7569.265, 'text': "I'm just going to console, log the math object itself and you'll see that we have an object here that has some properties, so as pie, for example,", 'start': 7558.782, 'duration': 10.483}, {'end': 7570.566, 'text': 'and then a bunch of methods.', 'start': 7569.265, 'duration': 1.301}, {'end': 7574.107, 'text': "And I'm definitely not going to go over all of these in some of them.", 'start': 7570.826, 'duration': 3.281}, {'end': 7579.389, 'text': "I don't even know what they are or what they do, and I've never used them, but we'll go over some of the common ones.", 'start': 7574.127, 'duration': 5.262}, {'end': 7584.57, 'text': "So let's do let's just create a variable to work with for our output.", 'start': 7579.989, 'duration': 4.581}, {'end': 7586.831, 'text': "So we'll console log X.", 'start': 7585.51, 'duration': 1.321}, {'end': 7594.998, 'text': "And let's say x equals, let's say we wanna get the square root of a number.", 'start': 7587.837, 'duration': 7.161}, {'end': 7599.059, 'text': "So we'll do math dot and then sqrt.", 'start': 7595.098, 'duration': 3.961}, {'end': 7601.8, 'text': 'Okay, so that will get the square root of a number.', 'start': 7599.579, 'duration': 2.221}, {'end': 7603.44, 'text': "We'll just pass in nine here.", 'start': 7601.84, 'duration': 1.6}, {'end': 7607.261, 'text': 'And if I save that and we log out x, you can see we get three.', 'start': 7603.88, 'duration': 3.381}, {'end': 7608.921, 'text': "So that's the square root.", 'start': 7607.821, 'duration': 1.1}, {'end': 7613.922, 'text': 'If we wanna get the absolute number, then we could use the abs.', 'start': 7609.381, 'duration': 4.541}, {'end': 7616.783, 'text': 'function. so our method.', 'start': 7615.182, 'duration': 1.601}, {'end': 7620.827, 'text': "so we'll say absolute, and if i do five, obviously that's five.", 'start': 7616.783, 'duration': 4.044}, {'end': 7623.99, 'text': 'if i do negative five, we also get five.', 'start': 7620.827, 'duration': 3.163}, {'end': 7626.352, 'text': "that's the absolute.", 'start': 7623.99, 'duration': 2.362}, {'end': 7628.013, 'text': 'so we can also round.', 'start': 7626.352, 'duration': 1.661}, {'end': 7636.142, 'text': "let's say x equals math dot round, And let's put in here it's a four point six.", 'start': 7628.013, 'duration': 8.129}, {'end': 7638.164, 'text': 'If I save that we get five.', 'start': 7636.322, 'duration': 1.842}, {'end': 7641.628, 'text': 'If I put four point two and save it we get four.', 'start': 7638.645, 'duration': 2.983}, {'end': 7646.194, 'text': 'Now you can also round up or round down.', 'start': 7642.349, 'duration': 3.845}, {'end': 7651.606, 'text': "So for instance Let's do a round up and that's going to be with the seal method.", 'start': 7646.394, 'duration': 5.212}, {'end': 7663.253, 'text': "So it's going to be C E I L like ceiling and let's put in four point six or I'm sorry let's put in four point two and if I save it still goes to five.", 'start': 7651.846, 'duration': 11.407}, {'end': 7667.776, 'text': 'OK so this will just round it like normally and then this will always round up.', 'start': 7663.334, 'duration': 4.442}, {'end': 7671.218, 'text': "So even though it's four point two it's rounding up to five.", 'start': 7668.417, 'duration': 2.801}, {'end': 7675.081, 'text': 'Now you can do the opposite and round down with the floor method.', 'start': 7671.679, 'duration': 3.402}, {'end': 7680.943, 'text': "So if I were to do math dot floor, obviously that's going to give me four.", 'start': 7675.661, 'duration': 5.282}, {'end': 7685.824, 'text': "But if I even if I do like four point nine and I save, that's still going to give me four.", 'start': 7681.003, 'duration': 4.821}, {'end': 7688.445, 'text': 'So these are pretty common sealant floor.', 'start': 7686.444, 'duration': 2.001}, {'end': 7690.405, 'text': 'Use those in a lot of different situations.', 'start': 7688.665, 'duration': 1.74}, {'end': 7694.847, 'text': 'Another one is pow.', 'start': 7692.106, 'duration': 2.741}, {'end': 7699.388, 'text': 'So it will return the value of a number raised to a specific power.', 'start': 7694.927, 'duration': 4.461}, {'end': 7701.849, 'text': "So let's say math dot floor.", 'start': 7699.868, 'duration': 1.981}, {'end': 7709.648, 'text': "pow and let's say we want to do two raised to three, then we get eight.", 'start': 7702.785, 'duration': 6.863}, {'end': 7714.17, 'text': 'okay, um, we can also do the min and max.', 'start': 7709.648, 'duration': 4.522}], 'summary': 'Demonstration of several number manipulation methods such as fixed, precision, exponential, locale string, value of, largest and lowest possible number. introduction to the math object in javascript with methods like square root, absolute, round, ceil, floor, power, min, and max.', 'duration': 434.293, 'max_score': 7279.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo7279877.jpg'}, {'end': 7570.566, 'src': 'embed', 'start': 7545.319, 'weight': 2, 'content': [{'end': 7551.06, 'text': 'And it comes in handy when you need to do things like find the square root of something or round up or round down.', 'start': 7545.319, 'duration': 5.741}, {'end': 7554.821, 'text': "There's also a helpful random method that you'll probably use quite a bit.", 'start': 7551.42, 'duration': 3.401}, {'end': 7557.982, 'text': "So we'll go ahead and take a look at that.", 'start': 7555.321, 'duration': 2.661}, {'end': 7569.265, 'text': "I'm just going to console, log the math object itself and you'll see that we have an object here that has some properties, so as pie, for example,", 'start': 7558.782, 'duration': 10.483}, {'end': 7570.566, 'text': 'and then a bunch of methods.', 'start': 7569.265, 'duration': 1.301}], 'summary': 'The math object offers methods for square root, rounding, and randomization.', 'duration': 25.247, 'max_score': 7545.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo7545319.jpg'}, {'end': 8990.818, 'src': 'embed', 'start': 8967.252, 'weight': 0, 'content': [{'end': 8978.155, 'text': 'we would just do math dot whatever square root and we use the math object directly in this case where instantiating a date object into this variable.', 'start': 8967.252, 'duration': 10.903}, {'end': 8982.356, 'text': "OK So I guess that that's a good enough explanation for now.", 'start': 8978.755, 'duration': 3.601}, {'end': 8983.616, 'text': "We'll get more into it later.", 'start': 8982.396, 'duration': 1.22}, {'end': 8990.818, 'text': 'So we already looked at some of the some of the the methods such as to string.', 'start': 8984.536, 'duration': 6.282}], 'summary': 'Using the math object to calculate square roots and instantiating date objects.', 'duration': 23.566, 'max_score': 8967.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo8967252.jpg'}, {'end': 9044.13, 'src': 'embed', 'start': 9019.448, 'weight': 4, 'content': [{'end': 9028.915, 'text': "so let's say we want to get the the year, so we'll do d dot and then there's a get full year method and you can see it gives us 2022..", 'start': 9019.448, 'duration': 9.467}, {'end': 9038.182, 'text': "now if i were to change the date up here by putting in let's say 20 we'll say 2020 slash 10 slash 12.", 'start': 9028.915, 'duration': 9.267}, {'end': 9044.13, 'text': 'if i do that then the year is going to obviously change to 2020.', 'start': 9038.182, 'duration': 5.948}], 'summary': 'Demonstrating the javascript getfullyear method returning the year 2022 and 2020 upon changing the date.', 'duration': 24.682, 'max_score': 9019.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo9019448.jpg'}], 'start': 7172.697, 'title': 'Javascript objects and dates', 'summary': 'Covers working with number objects, javascript math object, challenges, and javascript date object, exploring methods, operations, and challenges with examples, emphasizing fundamental understanding before advanced topics.', 'chapters': [{'end': 7461.989, 'start': 7172.697, 'title': 'Working with number objects', 'summary': 'Covers working with number objects in javascript, including methods like tostring, tofixed, toprecision, toexponential, and tolocalestring, demonstrating their usage and outputs with examples.', 'duration': 289.292, 'highlights': ['The chapter covers working with number objects in JavaScript. It explains how to create number variables, use number constructors, and the behavior of number objects in JavaScript.', 'Methods like toString, toFixed, toPrecision, toExponential, and toLocaleString are covered. The chapter demonstrates the usage of these methods and their outputs with examples, providing a comprehensive understanding of their functionality.', 'Demonstrates the usage of toString method to convert numbers to strings. It shows how the toString method can convert numbers to strings and how it can be used to obtain the length of a number as a string.', 'Explains the toFixed method for specifying the number of decimal points in a number. The chapter illustrates how the toFixed method allows users to specify the number of decimal points in a number and converts the result into a string.', 'Illustrates the usage of toPrecision method for obtaining a specific number of digits from a number. It demonstrates how the toPrecision method can be used to obtain a specific number of digits from a number, including both the whole number and decimal places.']}, {'end': 7911.679, 'start': 7462.049, 'title': 'Javascript math object', 'summary': 'Covers the javascript math object, discussing its methods such as finding the largest and smallest possible numbers, mathematical operations like square root, absolute value, rounding, and generating random numbers, as well as a challenge involving these concepts.', 'duration': 449.63, 'highlights': ['The Math object has methods for finding the largest and smallest possible numbers for the number type, as well as for mathematical operations like square root, absolute value, rounding, and generating random numbers. The Math object provides methods to find the largest and smallest possible numbers for the number type, perform mathematical operations like square root, absolute value, rounding, and generate random numbers.', 'The random method of the Math object generates a random decimal between 0 and 1, and multiplying it by a number, adding 1, and flooring it can produce random whole numbers within a specified range. The random method of the Math object can be used to generate random decimals and whole numbers within a specified range by multiplying, adding, and flooring the result.', 'The Math object also includes methods for raising a number to a specific power, finding the smallest and largest of two or more numbers, and provides properties like pi. The Math object offers methods for raising a number to a specific power, finding the smallest and largest of two or more numbers, and includes properties like pi.']}, {'end': 8381.103, 'start': 7912.119, 'title': 'Javascript math challenge', 'summary': 'Introduces a challenge to create variables for random numbers, perform mathematical operations, and output the results as strings, demonstrating the use of random number generation, mathematical operations, and template literals.', 'duration': 468.984, 'highlights': ['Create variables for random numbers and perform mathematical operations The challenge involves creating variables for random numbers between specified ranges, performing addition, subtraction, multiplication, division, and finding the remainder, and outputting the results as strings.', 'Demonstrate the use of random number generation The challenge requires utilizing the Math.random function to generate random decimal numbers and the Math.floor function to round down to the nearest integer, thus demonstrating the use of random number generation in JavaScript.', 'Output the results as strings using template literals The solution involves using template literals to construct strings that display the random numbers, mathematical operations, and their corresponding results, demonstrating the use of template literals for string interpolation in JavaScript.']}, {'end': 8658.268, 'start': 8381.183, 'title': 'Javascript date object', 'summary': "Covers the importance of dates and times in programming, particularly in web development, and delves into the usage of javascript's date object to perform basic operations and handle formatting, with examples of date instantiation and potential issues with date formatting.", 'duration': 277.085, 'highlights': ["JavaScript's date object is crucial in web development for managing resources like users and blog posts, allowing basic operations and formatting. JavaScript's date object plays a crucial role in web development, especially in managing resources like users and blog posts, and allows for basic operations and formatting.", 'Demonstrates instantiation of a new date object and its representation, including type and conversion to string. The demonstration includes the instantiation of a new date object and its representation, including type and conversion to a string.', 'Explains date instantiation with specific values and clarifies the zero-based indexing for months, offering examples and caveats. The explanation covers date instantiation with specific values, clarifying the zero-based indexing for months with examples and caveats.', 'Discusses adding time to a date, showcasing various ways to achieve this and highlighting potential issues with date formatting, including time zone discrepancies. The discussion revolves around adding time to a date, showcasing various methods and underscoring potential issues with date formatting, including time zone discrepancies.']}, {'end': 8925.02, 'start': 8660.333, 'title': 'Javascript timestamps and date objects', 'summary': 'Covers the concept of unix timestamps, how to obtain timestamps in javascript, converting timestamps to seconds, and exploring different methods of date objects, emphasizing the importance of understanding fundamentals before moving on to more advanced topics.', 'duration': 264.687, 'highlights': ['The JavaScript timestamp is expressed in milliseconds, and can be obtained using date.now, allowing for marking an exact millisecond in time.', 'Converting timestamps to seconds in JavaScript involves dividing the timestamp by 1000, as timestamps are by default in milliseconds.', 'Understanding the basics and fundamentals of timestamps and date objects is crucial before progressing to more advanced topics such as manipulating the DOM and fetching data.']}, {'end': 9412.295, 'start': 8925.72, 'title': 'Javascript date methods', 'summary': 'Introduces javascript date methods including instantiation, manipulation, and formatting of dates, with examples and explanations of various methods and their outputs, emphasizing the use of the intl.datetimeformat api and the tolocalestring method.', 'duration': 486.575, 'highlights': ['The chapter introduces JavaScript date methods including instantiation, manipulation, and formatting of dates The speaker introduces the concept of creating and manipulating date objects in JavaScript, providing a foundation for further exploration of date methods.', 'Examples and explanations of various methods and their outputs The transcript includes examples and explanations of methods such as getFullYear, getMonth, getDate, getDay, getHours, getMinutes, getSeconds, and getMilliseconds, demonstrating their usage and outputs.', 'Emphasizing the use of the Intl.DateTimeFormat API and the toLocaleString method The speaker highlights the use of the Intl.DateTimeFormat API for locale-sensitive date formatting, with examples of formatting dates for different locales and comparing it to the toLocaleString method, showcasing their functionality and differences.']}], 'duration': 2239.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo7172697.jpg', 'highlights': ['The chapter covers working with number objects in JavaScript, including creating number variables and using number constructors.', 'The Math object provides methods for mathematical operations like square root, absolute value, rounding, and generating random numbers.', 'Challenges involve creating variables for random numbers, performing mathematical operations, and outputting results as strings.', "JavaScript's date object plays a crucial role in web development, allowing for basic operations, formatting, and time manipulation.", 'Understanding the basics and fundamentals of timestamps and date objects is crucial before progressing to more advanced topics.', 'The chapter introduces JavaScript date methods, including instantiation, manipulation, and formatting of dates, emphasizing the Intl.DateTimeFormat API and the toLocaleString method.']}, {'end': 11578.486, 'segs': [{'end': 11138.993, 'src': 'heatmap', 'start': 9848.975, 'weight': 0.731, 'content': [{'end': 9855.468, 'text': "I of course, I could do like three, a hard coded three, and I could set that to, I don't know, strawberry.", 'start': 9848.975, 'duration': 6.493}, {'end': 9859.848, 'text': "And then if I log fruits, you'll see strawberries on the end.", 'start': 9857.287, 'duration': 2.561}, {'end': 9863.328, 'text': "But you're not always going to know how many items are in the array.", 'start': 9859.868, 'duration': 3.46}, {'end': 9864.889, 'text': "Also, that's always changing.", 'start': 9863.508, 'duration': 1.381}, {'end': 9874.511, 'text': "So what you could do, aside from using a method, which I'll show you in the next video, what you could do is set the index to the length.", 'start': 9865.489, 'duration': 9.022}, {'end': 9880.132, 'text': "Right So if I say fruits dot length and then set that to, let's say, blueberry.", 'start': 9874.811, 'duration': 5.321}, {'end': 9884.41, 'text': 'If I save that, now blueberry will get added to the end.', 'start': 9881.527, 'duration': 2.883}, {'end': 9891.437, 'text': 'And the reason for that is the length is always going to be one more than the last because this starts at zero.', 'start': 9884.971, 'duration': 6.466}, {'end': 9895.442, 'text': "If we look at the length, it's one, two, three, four, five.", 'start': 9891.477, 'duration': 3.965}, {'end': 9899.105, 'text': 'And if I wanted to add one on to the next, that would be five right?', 'start': 9895.942, 'duration': 3.163}, {'end': 9904.051, 'text': "In fact, I could copy this down, kind of running out of fruits here, but let's say peach.", 'start': 9899.145, 'duration': 4.906}, {'end': 9907.204, 'text': 'And now that will get added to the end.', 'start': 9905.222, 'duration': 1.982}, {'end': 9910.248, 'text': "OK, but but more commonly, you're going to use a method.", 'start': 9907.785, 'duration': 2.463}, {'end': 9911.409, 'text': "There's a method called push.", 'start': 9910.268, 'duration': 1.141}, {'end': 9913.811, 'text': "I'm going to show you in the next video that does the same thing.", 'start': 9911.449, 'duration': 2.362}, {'end': 9915.233, 'text': 'All right.', 'start': 9914.933, 'duration': 0.3}, {'end': 9924.062, 'text': "So, yeah, I mean, that's kind of the basics of arrays, of creating them and getting the length and finding the values by index.", 'start': 9915.393, 'duration': 8.669}, {'end': 9927.066, 'text': "So in the next video, we'll go ahead and look at some methods.", 'start': 9924.443, 'duration': 2.623}, {'end': 9930.647, 'text': 'All right.', 'start': 9930.367, 'duration': 0.28}, {'end': 9936.952, 'text': 'So in the last video, we looked at some array basics, how to create them, how to access values by index and so on.', 'start': 9930.707, 'duration': 6.245}, {'end': 9940.034, 'text': 'Now I want to look at some of the methods that we can use.', 'start': 9937.352, 'duration': 2.682}, {'end': 9941.755, 'text': "So let's create an array.", 'start': 9940.314, 'duration': 1.441}, {'end': 9943.997, 'text': 'You can put whatever you want in it.', 'start': 9941.775, 'duration': 2.222}, {'end': 9945.858, 'text': "I'm just going to put some random numbers.", 'start': 9944.017, 'duration': 1.841}, {'end': 9949.961, 'text': 'All right.', 'start': 9949.621, 'duration': 0.34}, {'end': 9953.124, 'text': "And then I'm going to just log out the array.", 'start': 9950.102, 'duration': 3.022}, {'end': 9955.726, 'text': 'So in addition to the values here.', 'start': 9953.664, 'duration': 2.062}, {'end': 9961.452, 'text': 'If we, if we go ahead and click this arrow, you see there is this prototype chain,', 'start': 9956.607, 'duration': 4.845}, {'end': 9967.237, 'text': "and this has all the different methods that we can use on this array, which is quite, there's quite a bit here.", 'start': 9961.452, 'duration': 5.785}, {'end': 9969.439, 'text': "So obviously we're not going to go over all of them right now.", 'start': 9967.297, 'duration': 2.142}, {'end': 9976.466, 'text': "We're going to go over some of the really useful kind of simple ones just to mutate the array and get values from it.", 'start': 9969.78, 'duration': 6.686}, {'end': 9981.491, 'text': "And then later on, we'll we'll look at some of the more advanced stuff, including high order array methods.", 'start': 9976.786, 'duration': 4.705}, {'end': 9989.434, 'text': "So let's start off with push, which will just put a value on the end of the array.", 'start': 9982.211, 'duration': 7.223}, {'end': 9994.715, 'text': 'In the last video, I showed you how we could do that using the length property as an index.', 'start': 9989.474, 'duration': 5.241}, {'end': 9998.157, 'text': 'But what you would probably do is just push on to it.', 'start': 9995.176, 'duration': 2.981}, {'end': 9999.837, 'text': 'So you would say array dot push.', 'start': 9998.217, 'duration': 1.62}, {'end': 10002.778, 'text': "And then let's say we want to add 100.", 'start': 10000.437, 'duration': 2.341}, {'end': 10005.419, 'text': "And now you'll see 100 gets added on to the end.", 'start': 10002.778, 'duration': 2.641}, {'end': 10013.921, 'text': 'Now, if you want to take the value off of the very end of the last element, then you would use the pop method.', 'start': 10006.099, 'duration': 7.822}, {'end': 10019.383, 'text': "So array dot pop and we wouldn't pass anything in because it's just going to pop off whatever is on the end.", 'start': 10014.402, 'duration': 4.981}, {'end': 10021.443, 'text': "Now you'll see that 100 is gone.", 'start': 10019.403, 'duration': 2.04}, {'end': 10030.086, 'text': 'OK, if we want to do the opposite and add on to the beginning, then we can use the shift method.', 'start': 10021.463, 'duration': 8.623}, {'end': 10031.866, 'text': "And let's say we want to add 99.", 'start': 10030.526, 'duration': 1.34}, {'end': 10035.607, 'text': "Now you'll see 99 gets added to the zero index.", 'start': 10031.866, 'duration': 3.741}, {'end': 10040.958, 'text': 'And if I want to take take it off of the beginning then we would use shift.', 'start': 10036.653, 'duration': 4.305}, {'end': 10045.143, 'text': 'So Ray shift and now ninety nine is gone.', 'start': 10041.959, 'duration': 3.184}, {'end': 10050.149, 'text': 'OK We also can reverse the array with the reverse method.', 'start': 10045.163, 'duration': 4.986}, {'end': 10051.69, 'text': 'Pretty self explanatory.', 'start': 10050.369, 'duration': 1.321}, {'end': 10056.376, 'text': 'So now 15 which was at the end is now at the beginning.', 'start': 10052.151, 'duration': 4.225}, {'end': 10062.911, 'text': 'Now, these methods that we just looked at, these are used to manipulate the current array.', 'start': 10057.304, 'duration': 5.607}, {'end': 10068.999, 'text': "Right So when we console log the array after they go through these methods, it's different right now.", 'start': 10063.112, 'duration': 5.887}, {'end': 10070.341, 'text': "It's reversed and so on.", 'start': 10069.059, 'duration': 1.282}, {'end': 10073.885, 'text': 'We did add some stuff on, but then we took it back off.', 'start': 10071.102, 'duration': 2.783}, {'end': 10083.875, 'text': 'So the next batch of methods I want to show you are ones that we can use to get something from the array either get a value from it or just get some information from it.', 'start': 10075.091, 'duration': 8.784}, {'end': 10088.918, 'text': "So I'm going to create a variable up here just like we've been doing just for our output.", 'start': 10084.216, 'duration': 4.702}, {'end': 10091.719, 'text': "And then let's console log that variable.", 'start': 10089.478, 'duration': 2.241}, {'end': 10100.584, 'text': 'And I want to show you the includes method, which will allow you to check and see if a specific value is in that array.', 'start': 10092.72, 'duration': 7.864}, {'end': 10103.745, 'text': "So I'm going to say X equals and then array includes.", 'start': 10100.604, 'duration': 3.141}, {'end': 10113.895, 'text': "And let's see if we if we pass in 20 which 20 which we know is in there you'll see it gives me true.", 'start': 10106.005, 'duration': 7.89}, {'end': 10118.28, 'text': "So you're always going to get a true or false from this based on if the value is in there.", 'start': 10113.995, 'duration': 4.285}, {'end': 10123.727, 'text': "Now if we put like 200 which we know is not in there then we're going to get false.", 'start': 10118.761, 'duration': 4.966}, {'end': 10124.993, 'text': 'All right.', 'start': 10124.713, 'duration': 0.28}, {'end': 10132.876, 'text': "So the next one I want to show you is index of and what that does is it'll give you the index of a specific value.", 'start': 10125.693, 'duration': 7.183}, {'end': 10143.24, 'text': "So if I do, let's say index of and let's pass in one of these values, we'll do 15 and I save that we get zero.", 'start': 10133.376, 'duration': 9.864}, {'end': 10148.763, 'text': "Now, the reason it's zero, you can look up here and it's not zero here, obviously.", 'start': 10143.801, 'duration': 4.962}, {'end': 10151.784, 'text': 'But the reason it is, is because we ran this reverse.', 'start': 10149.043, 'duration': 2.741}, {'end': 10154.606, 'text': 'OK, so the script runs top to bottom.', 'start': 10152.384, 'duration': 2.222}, {'end': 10157.968, 'text': "So since it's reversed, then it's put in the zero position.", 'start': 10154.946, 'duration': 3.022}, {'end': 10161.671, 'text': "So what I'm going to do is just comment out these ones that we did that.", 'start': 10158.388, 'duration': 3.283}, {'end': 10163.792, 'text': 'will that actually change the array?', 'start': 10161.671, 'duration': 2.121}, {'end': 10167.915, 'text': "just so we're working with the same array we're looking at up at the top.", 'start': 10163.792, 'duration': 4.123}, {'end': 10168.836, 'text': 'All right.', 'start': 10168.536, 'duration': 0.3}, {'end': 10172.118, 'text': "So now if we look at the index of 15, it's at four.", 'start': 10168.856, 'duration': 3.262}, {'end': 10176.802, 'text': 'If we look at the index of 34, that should be the first one, which is zero.', 'start': 10172.739, 'duration': 4.063}, {'end': 10184, 'text': "Now, if you put something in here that doesn't exist, like 340, you get a negative one, okay?", 'start': 10177.97, 'duration': 6.03}, {'end': 10191.511, 'text': "So a lot of times you'll run this through an if statement and just know that if whatever you pass in here is not there,", 'start': 10184.1, 'duration': 7.411}, {'end': 10192.954, 'text': "it's gonna give you a negative one.", 'start': 10191.511, 'duration': 1.443}, {'end': 10196.788, 'text': "Now the next two I'm going to show you are pretty similar.", 'start': 10193.766, 'duration': 3.022}, {'end': 10203.292, 'text': "It's slice and splice and both of them will return selected elements in the array.", 'start': 10196.908, 'duration': 6.384}, {'end': 10207.295, 'text': "So I'm going to start off with slice and I'll kind of show you the differences as we go.", 'start': 10203.353, 'duration': 3.942}, {'end': 10209.517, 'text': 'So array dot slice.', 'start': 10207.856, 'duration': 1.661}, {'end': 10214.64, 'text': 'And what this takes in is the first is going to be the start index.', 'start': 10210.917, 'duration': 3.723}, {'end': 10217.643, 'text': 'So where do I want to start in this array.', 'start': 10214.701, 'duration': 2.942}, {'end': 10221.727, 'text': "Let's say we want to start here which is the one index.", 'start': 10217.683, 'duration': 4.044}, {'end': 10222.868, 'text': "So we'll pass that in.", 'start': 10221.787, 'duration': 1.081}, {'end': 10232.436, 'text': "Now if I don't pass anything else in what that's going to give me is that value and everything after that as you can see here.", 'start': 10223.668, 'duration': 8.768}, {'end': 10240.5, 'text': "So fifty five and everything after let's say I want to get just just 55, 95, and 20, so that and the two after.", 'start': 10232.776, 'duration': 7.724}, {'end': 10241.983, 'text': 'So then I would do one, two, four.', 'start': 10240.58, 'duration': 1.403}, {'end': 10246.367, 'text': 'All right.', 'start': 10246.027, 'duration': 0.34}, {'end': 10251.868, 'text': 'So how that works is we specify the one index and we want to go to the four.', 'start': 10246.427, 'duration': 5.441}, {'end': 10255.009, 'text': "So that's going to be one, two, three.", 'start': 10251.988, 'duration': 3.021}, {'end': 10257.009, 'text': 'And we stop at before the four.', 'start': 10255.109, 'duration': 1.9}, {'end': 10263.731, 'text': 'OK, now this is this is returning this array.', 'start': 10257.609, 'duration': 6.122}, {'end': 10269.032, 'text': "OK, the three that I selected into this X variable, it's not actually changing the array.", 'start': 10263.751, 'duration': 5.281}, {'end': 10275.356, 'text': "if i log the array in addition to that, you'll see it's unchanged.", 'start': 10269.532, 'duration': 5.824}, {'end': 10276.616, 'text': 'okay, so keep that in mind.', 'start': 10275.356, 'duration': 1.26}, {'end': 10285.421, 'text': 'about slice now, splice, you can do kind of the same thing, but it does manipulate or it does change the original array.', 'start': 10276.616, 'duration': 8.805}, {'end': 10295.217, 'text': 'so if i say x equals array, dot splice And the arguments we pass in, or I should say the second argument is a little different.', 'start': 10285.421, 'duration': 9.796}, {'end': 10298.3, 'text': 'The first is the start index, just like with slice.', 'start': 10295.317, 'duration': 2.983}, {'end': 10303.284, 'text': 'The second is the number of elements that we want to go over.', 'start': 10298.78, 'duration': 4.504}, {'end': 10307.368, 'text': "So let's say I'm starting at one, which is 55, and I want to go over four.", 'start': 10303.444, 'duration': 3.924}, {'end': 10308.689, 'text': 'So one, two, three, four.', 'start': 10307.448, 'duration': 1.241}, {'end': 10315.751, 'text': 'I should get 55 to 15.', 'start': 10308.709, 'duration': 7.042}, {'end': 10319.976, 'text': "So if I do four here and I save now, look what we're logging.", 'start': 10315.751, 'duration': 4.225}, {'end': 10326.482, 'text': "We're logging X, which is what we basically plucked out one to one and then four over.", 'start': 10320.096, 'duration': 6.386}, {'end': 10328.765, 'text': 'So 55 to 15.', 'start': 10326.703, 'duration': 2.062}, {'end': 10334.951, 'text': "Now the array that I'm logging only has 34 in it because I basically plucked the rest out.", 'start': 10328.765, 'duration': 6.186}, {'end': 10337.513, 'text': "OK, so slice doesn't do that.", 'start': 10335.712, 'duration': 1.801}, {'end': 10340.315, 'text': "It doesn't change the initial array.", 'start': 10337.573, 'duration': 2.742}, {'end': 10341.376, 'text': 'Splice does.', 'start': 10340.475, 'duration': 0.901}, {'end': 10349.381, 'text': "Not only are you taking it out and putting whatever into the variable one point four, but you're also changing the array.", 'start': 10341.456, 'duration': 7.925}, {'end': 10353.484, 'text': "So you're not only getting the values, you're deleting them from the initial array.", 'start': 10349.441, 'duration': 4.043}, {'end': 10354.745, 'text': 'All right.', 'start': 10354.464, 'duration': 0.281}, {'end': 10358.007, 'text': "Now, if you just want to let's say you just want to delete one item.", 'start': 10354.845, 'duration': 3.162}, {'end': 10364.255, 'text': "Then you can let's comment that out so that we have our initial array.", 'start': 10359.011, 'duration': 5.244}, {'end': 10371.06, 'text': 'What you could do is say X equals and then say array dot splice.', 'start': 10365.175, 'duration': 5.885}, {'end': 10374.442, 'text': "And let's say we want to get rid of the 20.", 'start': 10371.88, 'duration': 2.562}, {'end': 10377.164, 'text': "So we know that's zero one two three.", 'start': 10374.442, 'duration': 2.722}, {'end': 10381.187, 'text': "So I'm going to put in the start at three and just one.", 'start': 10377.184, 'duration': 4.003}, {'end': 10382.868, 'text': 'I only want to take out one.', 'start': 10381.207, 'duration': 1.661}, {'end': 10388.037, 'text': "i'll save that and now you can see we have the 20 in x.", 'start': 10384.073, 'duration': 3.964}, {'end': 10395.225, 'text': "so it's set to x and then the array that we're logging doesn't have 20 in it anymore because we took it out.", 'start': 10388.037, 'duration': 7.188}, {'end': 10398.449, 'text': "so that's how you can remove a single element from an array.", 'start': 10395.225, 'duration': 3.224}, {'end': 10403.234, 'text': 'Now, the last thing I want to show you is how you can chain methods.', 'start': 10399.332, 'duration': 3.902}, {'end': 10410.897, 'text': "So I'm going to set X here equal to and let's just comment out the splice because we know that that that changes our initial array.", 'start': 10403.794, 'duration': 7.103}, {'end': 10414.198, 'text': "And let's move this down here.", 'start': 10412.137, 'duration': 2.061}, {'end': 10420.88, 'text': "So I'm going to set X equal to array and then I'm going to use slice here.", 'start': 10414.218, 'duration': 6.662}, {'end': 10427.043, 'text': "So slice, let's say one and we want to go for over from one.", 'start': 10422.281, 'duration': 4.762}, {'end': 10431.168, 'text': "So that's going to basically give us again.", 'start': 10428.106, 'duration': 3.062}, {'end': 10433.41, 'text': "it'll give us 55 through 15, right?", 'start': 10431.168, 'duration': 2.242}, {'end': 10438.794, 'text': "If I save this as it is and we look at the console log of x, we don't need array anymore.", 'start': 10433.45, 'duration': 5.344}, {'end': 10441.497, 'text': 'If I look at the console log of x, we get 55.', 'start': 10438.814, 'duration': 2.683}, {'end': 10446.801, 'text': "Well, actually it's, I'm sorry, I want to use splice.", 'start': 10441.497, 'duration': 5.304}, {'end': 10450.644, 'text': "If you use slice, it's only going to give you the three because it goes to the four index.", 'start': 10446.861, 'duration': 3.783}, {'end': 10453.286, 'text': 'Splice will actually go four over.', 'start': 10451.104, 'duration': 2.182}, {'end': 10456.692, 'text': 'And then what I want to do is reverse that.', 'start': 10454.471, 'duration': 2.221}, {'end': 10458.754, 'text': "So I'm going to do dot reverse.", 'start': 10456.712, 'duration': 2.042}, {'end': 10465.778, 'text': "And if I save that now you'll see it gives me that array that splice created and then reversed it.", 'start': 10459.814, 'duration': 5.964}, {'end': 10469.96, 'text': 'If I wanted to change that to a string I could do to string.', 'start': 10466.538, 'duration': 3.422}, {'end': 10477.465, 'text': 'And if I save that now I have it as a string and then I could use a method on a string member the char at.', 'start': 10471.021, 'duration': 6.444}, {'end': 10483.345, 'text': 'So char at you basically put in an index and it will give you that character.', 'start': 10477.921, 'duration': 5.424}, {'end': 10484.586, 'text': "So let's say zero.", 'start': 10483.425, 'duration': 1.161}, {'end': 10486.428, 'text': 'Save that and I get one.', 'start': 10485.026, 'duration': 1.402}, {'end': 10490.282, 'text': 'OK, because the first one was 15, the first number.', 'start': 10487.219, 'duration': 3.063}, {'end': 10493.565, 'text': 'So you can chain on methods like this.', 'start': 10490.983, 'duration': 2.582}, {'end': 10495.026, 'text': "And it's not just with arrays.", 'start': 10493.645, 'duration': 1.381}, {'end': 10496.428, 'text': "As you can see, it's with strings.", 'start': 10495.086, 'duration': 1.342}, {'end': 10499.19, 'text': "It's with anything that makes sense.", 'start': 10496.488, 'duration': 2.702}, {'end': 10502.093, 'text': 'I mean, it depends on what the method returns.', 'start': 10499.39, 'duration': 2.703}, {'end': 10505.136, 'text': 'This splice, we know that returns an array.', 'start': 10502.653, 'duration': 2.483}, {'end': 10508.138, 'text': 'And I can run reverse on an array.', 'start': 10505.656, 'duration': 2.482}, {'end': 10514.803, 'text': 'then I can turn an array into a string, and then I can get a character from a string.', 'start': 10509.059, 'duration': 5.744}, {'end': 10520.647, 'text': "If I just run charAt on the reversed array, that's not going to work.", 'start': 10515.463, 'duration': 5.184}, {'end': 10523.349, 'text': 'It says reversed charAt is not a function.', 'start': 10520.687, 'duration': 2.662}, {'end': 10528.953, 'text': "Okay, what it really means is it's not a function on whatever we're putting it on.", 'start': 10524.009, 'duration': 4.944}, {'end': 10533.796, 'text': "If I change that back and it's a string, then it is a function that works.", 'start': 10529.353, 'duration': 4.443}, {'end': 10535.491, 'text': 'All right.', 'start': 10535.031, 'duration': 0.46}, {'end': 10539.315, 'text': "And you'll see you'll see chaining like this all throughout JavaScript.", 'start': 10535.572, 'duration': 3.743}, {'end': 10545.901, 'text': 'So in the next video, I want to get a little more acquainted with arrays.', 'start': 10540.416, 'duration': 5.485}, {'end': 10550.546, 'text': "So we're going to look at things like nesting and concatenation with arrays.", 'start': 10546.101, 'duration': 4.445}, {'end': 10554.99, 'text': "We're going to look at something called the spread operator and we'll go from there.", 'start': 10550.566, 'duration': 4.424}, {'end': 10561.452, 'text': "All right, guys, so we're going to mess around a little bit more with arrays.", 'start': 10558.069, 'duration': 3.383}, {'end': 10567.998, 'text': 'So I want to look at nesting, concatenating and the spread operator and a couple other things.', 'start': 10561.672, 'duration': 6.326}, {'end': 10575.885, 'text': "So nesting in array is just it's basically just having an array as an index inside of another array.", 'start': 10568.598, 'duration': 7.287}, {'end': 10579.688, 'text': "So let's go ahead and create two separate arrays here.", 'start': 10576.425, 'duration': 3.263}, {'end': 10585.033, 'text': "I'm going to call this one fruits and we'll put in here apple pear.", 'start': 10579.708, 'duration': 5.325}, {'end': 10591.907, 'text': "and let's do orange all right, so that's our first one.", 'start': 10586.483, 'duration': 5.424}, {'end': 10593.528, 'text': "and then we'll do berries.", 'start': 10591.907, 'duration': 1.621}, {'end': 10600.734, 'text': "and yes, i know berries are fruits, so let's say strawberry and blueberry and raspberry.", 'start': 10593.528, 'duration': 7.206}, {'end': 10605.847, 'text': 'So we have two separate arrays.', 'start': 10604.266, 'duration': 1.581}, {'end': 10615.833, 'text': 'Now if I wanted to I could take fruits and we looked at the push method in the last video which will add something on to an array.', 'start': 10606.387, 'duration': 9.446}, {'end': 10624.378, 'text': "And let's say we want to add on the berries array and then we'll go ahead and console log fruits and let's see what we get.", 'start': 10616.293, 'duration': 8.085}, {'end': 10627.771, 'text': 'So we get an array with four items.', 'start': 10625.771, 'duration': 2}, {'end': 10630.932, 'text': 'The first three are apple, pear and orange.', 'start': 10628.452, 'duration': 2.48}, {'end': 10634.213, 'text': 'And then we added berries, which is another array.', 'start': 10630.972, 'duration': 3.241}, {'end': 10637.734, 'text': 'So we have an array within an array.', 'start': 10634.913, 'duration': 2.821}, {'end': 10639.214, 'text': "So that's how we can nest them.", 'start': 10637.814, 'duration': 1.4}, {'end': 10647.536, 'text': 'And you can go as many levels as you want now to access something in a nested array is pretty easy.', 'start': 10639.694, 'duration': 7.842}, {'end': 10653.158, 'text': "Basically, we can let's let's set this to an output variable.", 'start': 10648.737, 'duration': 4.421}, {'end': 10654.398, 'text': 'So say let X.', 'start': 10653.278, 'duration': 1.12}, {'end': 10658.88, 'text': "And then let's log.", 'start': 10657.739, 'duration': 1.141}, {'end': 10665.365, 'text': "Let's log X and we'll say X is equal to and then fruits.", 'start': 10660.401, 'duration': 4.964}, {'end': 10670.249, 'text': "And let's say I want to get blueberry, which is nested in the nested array.", 'start': 10665.385, 'duration': 4.864}, {'end': 10678.276, 'text': "So first of all, I want the three index, right? Because it's zero, one, two.", 'start': 10670.77, 'duration': 7.506}, {'end': 10681.659, 'text': 'And then we pushed on as the three index, the whole berries array.', 'start': 10678.476, 'duration': 3.183}, {'end': 10686.021, 'text': 'If I just log that, what I get is the nested array.', 'start': 10682.179, 'duration': 3.842}, {'end': 10692.524, 'text': "If I want to get blueberry, that's going to be the one index on the nested array.", 'start': 10686.441, 'duration': 6.083}, {'end': 10698.186, 'text': 'So I would just open another set of brackets and then put a one and that will give me blueberry.', 'start': 10692.664, 'duration': 5.522}, {'end': 10699.767, 'text': 'All right.', 'start': 10698.206, 'duration': 1.561}, {'end': 10709.392, 'text': "Now, let's say I wanted to create a whole new array called all fruits, and I want to nest both fruits and berries.", 'start': 10700.027, 'duration': 9.365}, {'end': 10714.058, 'text': "and we'll just set x for now.", 'start': 10711.276, 'duration': 2.782}, {'end': 10718.4, 'text': "we'll just set it to all fruits, just so we can log it out.", 'start': 10714.058, 'duration': 4.342}, {'end': 10723.123, 'text': "and it's an array with two items and both items are arrays.", 'start': 10718.4, 'duration': 4.723}, {'end': 10730.627, 'text': "okay, so we just nested those two arrays and if i wanted to access, let's say, strawberry, i would say all fruits,", 'start': 10723.123, 'duration': 7.504}, {'end': 10738.851, 'text': 'and i want the second array which is at the one index, and then i want the first item in that array which is at the zero index.', 'start': 10730.627, 'duration': 8.224}, {'end': 10741.995, 'text': 'save that and we get strawberry All right.', 'start': 10738.851, 'duration': 3.144}, {'end': 10748.579, 'text': 'So hopefully that just helps you understand that you can nest arrays inside of arrays as many levels as you want.', 'start': 10742.075, 'duration': 6.504}, {'end': 10758.965, 'text': 'If I had a third level, I could then access which I could access something within that, you know, so you can nest as far as you want now.', 'start': 10748.919, 'duration': 10.046}, {'end': 10761.028, 'text': "That's nesting.", 'start': 10760.287, 'duration': 0.741}, {'end': 10763.87, 'text': 'We can also concat arrays, which is different.', 'start': 10761.068, 'duration': 2.802}, {'end': 10774.718, 'text': "It's not putting the array inside the array, but it's taking the items from one array and basically adding them into a different array okay,", 'start': 10763.91, 'duration': 10.808}, {'end': 10777.179, 'text': 'as separate items on the same level.', 'start': 10774.718, 'duration': 2.461}, {'end': 10780.422, 'text': 'So to do that, we can use the concat method.', 'start': 10777.399, 'duration': 3.023}, {'end': 10783.184, 'text': "There's actually a few ways to do it, but concat is one of them.", 'start': 10780.602, 'duration': 2.582}, {'end': 10787.567, 'text': "So I can say fruits, and let's say we want to do .net.", 'start': 10783.264, 'duration': 4.303}, {'end': 10798.709, 'text': "concat Actually, let's comment this out because I want these to be two separate arrays again.", 'start': 10789.602, 'duration': 9.107}, {'end': 10801.971, 'text': "And yeah, the rest doesn't really matter.", 'start': 10798.729, 'duration': 3.242}, {'end': 10804.413, 'text': 'Comment that out as well.', 'start': 10803.152, 'duration': 1.261}, {'end': 10809.637, 'text': "All right, so I want to take fruits and then I'm going to concat onto that berries.", 'start': 10805.294, 'duration': 4.343}, {'end': 10813.373, 'text': "And let's save that.", 'start': 10811.952, 'duration': 1.421}, {'end': 10821.576, 'text': 'And what we get is one single array that has everything from fruits and then everything from berries.', 'start': 10813.393, 'duration': 8.183}, {'end': 10827.459, 'text': "So the berries here, they're not put in as an array, a nested array.", 'start': 10822.277, 'duration': 5.182}, {'end': 10830.7, 'text': "They're just put in alongside of the rest of the fruits.", 'start': 10827.479, 'duration': 3.221}, {'end': 10832.301, 'text': "So they're concatenated.", 'start': 10831.24, 'duration': 1.061}, {'end': 10839.244, 'text': 'Just like we concatenate strings with the plus sign, we can concatenate array items using this method.', 'start': 10832.341, 'duration': 6.903}, {'end': 10841.692, 'text': "Now that's one way of doing it.", 'start': 10840.191, 'duration': 1.501}, {'end': 10846.376, 'text': "The other is using the spread operator and I'll be I'll have comments throughout this.", 'start': 10841.932, 'duration': 4.444}, {'end': 10847.977, 'text': "I know I've said that a bunch of times.", 'start': 10846.396, 'duration': 1.581}, {'end': 10851.679, 'text': "I just don't want to take the time to write comments for everything.", 'start': 10848.577, 'duration': 3.102}, {'end': 10861.046, 'text': 'So the spread operator which is represented as three dots and this can be used with arrays as well as objects.', 'start': 10853.521, 'duration': 7.525}, {'end': 10865.069, 'text': "In fact you'll probably use it more with objects and I'll show you how to do that later.", 'start': 10861.126, 'duration': 3.943}, {'end': 10868.572, 'text': "But basically what we can do is let's say we want X.", 'start': 10866.05, 'duration': 2.522}, {'end': 10880.566, 'text': 'and instead of using concat, What I could do basically what we did here was we created an array and then we put two arrays inside of it.', 'start': 10869.828, 'duration': 10.738}, {'end': 10885.907, 'text': "Well let's say I just want the items that are in fruits and berries not the actual array itself.", 'start': 10880.606, 'duration': 5.301}, {'end': 10892.989, 'text': 'Then we would use the spread operator with fruits and then the spread operator with berries.', 'start': 10886.467, 'duration': 6.522}, {'end': 10896.65, 'text': "And now I'm going to log X which is this right here.", 'start': 10893.469, 'duration': 3.181}, {'end': 10899.571, 'text': 'We get the same exact result that we got with cat.', 'start': 10896.69, 'duration': 2.881}, {'end': 10905.034, 'text': 'It just took the items from both arrays and basically combined them.', 'start': 10900.171, 'duration': 4.863}, {'end': 10911.498, 'text': 'If I took the spread off of berries and I save, now berries is going to be an array.', 'start': 10906.075, 'duration': 5.423}, {'end': 10921.665, 'text': "But there's going to be a lot of times where you want to take something from one array and spread those items across inside of another array.", 'start': 10913.479, 'duration': 8.186}, {'end': 10925.027, 'text': "So that's where the spread operator comes in.", 'start': 10922.465, 'duration': 2.562}, {'end': 10928.429, 'text': "And same thing with objects, but I'll get to that in a little bit.", 'start': 10925.567, 'duration': 2.862}, {'end': 10935.873, 'text': "Now there's also a method we can use to flatten flatten flatten arrays.", 'start': 10929.471, 'duration': 6.402}, {'end': 10944.755, 'text': "And what I mean by that is, if we have an array that has nested arrays, let's do this one, two,", 'start': 10936.893, 'duration': 7.862}, {'end': 10955.238, 'text': "and then I'll have another array in here with three and four, and then we'll do five, and then let's do another array with six and seven.", 'start': 10944.755, 'duration': 10.483}, {'end': 10958.043, 'text': 'And then eight.', 'start': 10956.843, 'duration': 1.2}, {'end': 10958.744, 'text': 'All right.', 'start': 10958.464, 'duration': 0.28}, {'end': 10960.785, 'text': 'So I have some nested arrays in here.', 'start': 10958.764, 'duration': 2.021}, {'end': 10962.585, 'text': 'Right If I set.', 'start': 10961.285, 'duration': 1.3}, {'end': 10964.966, 'text': 'If I console log.', 'start': 10963.806, 'duration': 1.16}, {'end': 10972.269, 'text': 'Array Then you can see that we have two nested arrays in here.', 'start': 10966.587, 'duration': 5.682}, {'end': 10978.832, 'text': "Now let's say I want to flatten this and just make it all one array that has one through eight for that.", 'start': 10972.629, 'duration': 6.203}, {'end': 10984.374, 'text': "Let's say X equals and we can set we can do array dot flat.", 'start': 10979.652, 'duration': 4.722}, {'end': 10992.407, 'text': "And now if I log X and I save that, you'll see now we just have a single array with one through eight.", 'start': 10985.242, 'duration': 7.165}, {'end': 10994.109, 'text': "So we'll just flatten this.", 'start': 10992.447, 'duration': 1.662}, {'end': 10995.89, 'text': "There's no more nested arrays.", 'start': 10994.149, 'duration': 1.741}, {'end': 10998.152, 'text': 'All right.', 'start': 10997.851, 'duration': 0.301}, {'end': 11003.996, 'text': "So that's pretty much it for some of the methods on the array itself.", 'start': 10998.232, 'duration': 5.764}, {'end': 11008.179, 'text': 'Now I want to show you some static methods that are on the actual array object.', 'start': 11004.016, 'duration': 4.163}, {'end': 11011.621, 'text': 'Let me just put a comment in here.', 'start': 11009.16, 'duration': 2.461}, {'end': 11013.683, 'text': "We'll say static methods on array.", 'start': 11011.661, 'duration': 2.022}, {'end': 11016.431, 'text': 'array object.', 'start': 11015.091, 'duration': 1.34}, {'end': 11023.313, 'text': "And what I mean is if we say capital A array and then dot, there's some methods we can use.", 'start': 11017.692, 'duration': 5.621}, {'end': 11026.994, 'text': 'The first one I want to show you is is array.', 'start': 11023.373, 'duration': 3.621}, {'end': 11033.316, 'text': "So what this does is it checks to see if something is in array and I'm just going to set this to X.", 'start': 11027.534, 'duration': 5.782}, {'end': 11036.197, 'text': "So let's say is array and we'll pass in fruits.", 'start': 11033.316, 'duration': 2.881}, {'end': 11043.559, 'text': "And if I console log X, we're going to see true because yes, fruits is an array up here.", 'start': 11037.617, 'duration': 5.942}, {'end': 11049.66, 'text': "If I were to pass in like a string, then we're going to get false.", 'start': 11044.437, 'duration': 5.223}, {'end': 11059.506, 'text': "So there will be some times where you have data structures that might act like arrays but aren't quite, especially when you get into like the DOM.", 'start': 11050.02, 'duration': 9.486}, {'end': 11066.35, 'text': "There's like HTML collections and things like that where you want to check to see if it's an actual array.", 'start': 11059.746, 'duration': 6.604}, {'end': 11067.951, 'text': 'And this is how you can do it.', 'start': 11066.81, 'duration': 1.141}, {'end': 11071.051, 'text': 'So that is is array.', 'start': 11069.13, 'duration': 1.921}, {'end': 11077.094, 'text': 'The next one I want to show you is from which will create an array from an array like value.', 'start': 11071.091, 'duration': 6.003}, {'end': 11089.521, 'text': 'So if I say X equals and then array dot from and this again this is pretty useful when it comes to like HTML collections or node lists or whatever.', 'start': 11077.675, 'duration': 11.846}, {'end': 11096.525, 'text': "But let's put in here a string of one through five and let's see what that gives us.", 'start': 11090.041, 'duration': 6.484}, {'end': 11099.246, 'text': 'What it gives us is an array.', 'start': 11097.386, 'duration': 1.86}, {'end': 11105.908, 'text': 'So it takes the string of one through five and gives us an array that has one through five in as an element.', 'start': 11099.326, 'duration': 6.582}, {'end': 11108.309, 'text': "OK So that's from.", 'start': 11107.288, 'duration': 1.021}, {'end': 11114.87, 'text': 'And then we also have of array dot of which will create an array from a set of values.', 'start': 11108.789, 'duration': 6.081}, {'end': 11120.652, 'text': 'So maybe you have some variables where you want the values to all be inside of an array.', 'start': 11114.93, 'duration': 5.722}, {'end': 11125.953, 'text': "So I'll just do this const a equals one b equals two.", 'start': 11121.092, 'duration': 4.861}, {'end': 11138.993, 'text': 'C equals three and then I could say X equals array dot of and then we can pass in here a B and C.', 'start': 11127.683, 'duration': 11.31}], 'summary': 'The transcript covers arrays, methods like push, pop, shift, reverse, slice, splice, includes, indexof, concat, and spread operator. it also explains nesting, flattening, and static methods on the array object.', 'duration': 1290.018, 'max_score': 9848.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo9848975.jpg'}, {'end': 11218.928, 'src': 'embed', 'start': 11196.756, 'weight': 4, 'content': [{'end': 11205.941, 'text': "And then I want you to mutate that array using some of the methods that we've talked about and turn it into this, which is six through zero.", 'start': 11196.756, 'duration': 9.185}, {'end': 11207.322, 'text': 'All right.', 'start': 11205.961, 'duration': 1.361}, {'end': 11210.243, 'text': "So there's just a couple of methods that you can use.", 'start': 11207.442, 'duration': 2.801}, {'end': 11212.845, 'text': "I'm not going to give you any hints because this one's pretty easy.", 'start': 11210.543, 'duration': 2.302}, {'end': 11217.227, 'text': "I'd encourage you to try to remember the methods rather than go back and look.", 'start': 11213.205, 'duration': 4.022}, {'end': 11218.928, 'text': "But if you have to look, that's fine, too.", 'start': 11217.307, 'duration': 1.621}], 'summary': 'Mutate the array using known methods to transform it into six through zero.', 'duration': 22.172, 'max_score': 11196.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo11196756.jpg'}, {'end': 11267.311, 'src': 'embed', 'start': 11240.495, 'weight': 2, 'content': [{'end': 11249.3, 'text': "And as a hint, there's many ways to do this, but you can think of the concat method or the spread operator as well as the slice or splice methods.", 'start': 11240.495, 'duration': 8.805}, {'end': 11251.481, 'text': "And I'm gonna give you two solutions.", 'start': 11249.32, 'duration': 2.161}, {'end': 11256.004, 'text': "All right, so pause the video now if you're gonna try this out and then just come back.", 'start': 11252.082, 'duration': 3.922}, {'end': 11261.267, 'text': "All right, so let's go ahead and do challenge one.", 'start': 11257.505, 'duration': 3.762}, {'end': 11267.311, 'text': "So we're gonna have an array with just one through five.", 'start': 11262.648, 'duration': 4.663}], 'summary': 'The transcript discusses different methods for manipulating arrays and provides two solutions for a challenge involving an array of numbers 1 through 5.', 'duration': 26.816, 'max_score': 11240.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo11240495.jpg'}, {'end': 11344.744, 'src': 'embed', 'start': 11318.53, 'weight': 5, 'content': [{'end': 11326.014, 'text': 'Now we want to have a zero on the end so we could take the array and then we could push on to it a zero.', 'start': 11318.53, 'duration': 7.484}, {'end': 11327.335, 'text': 'We save that.', 'start': 11326.554, 'duration': 0.781}, {'end': 11328.855, 'text': 'Now we have five through zero.', 'start': 11327.395, 'duration': 1.46}, {'end': 11336.359, 'text': 'And then to add on to the beginning, we can use on shift and we can add on to the beginning a six.', 'start': 11329.276, 'duration': 7.083}, {'end': 11337.66, 'text': "And that's it.", 'start': 11337.12, 'duration': 0.54}, {'end': 11338.56, 'text': 'So pretty simple.', 'start': 11337.76, 'duration': 0.8}, {'end': 11342.682, 'text': 'Now you could have did it in a different order like you could have.', 'start': 11339.201, 'duration': 3.481}, {'end': 11344.744, 'text': "Let's save that.", 'start': 11343.903, 'duration': 0.841}], 'summary': 'Array manipulation: added zero to end, six to beginning.', 'duration': 26.214, 'max_score': 11318.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo11318530.jpg'}, {'end': 11524.6, 'src': 'embed', 'start': 11442.273, 'weight': 0, 'content': [{'end': 11446.875, 'text': 'And then what you needed to do is concatenate these two arrays.', 'start': 11442.273, 'duration': 4.602}, {'end': 11448.396, 'text': 'But they both have five.', 'start': 11446.956, 'duration': 1.44}, {'end': 11450.337, 'text': 'So you need to get rid of that five.', 'start': 11448.476, 'duration': 1.861}, {'end': 11456.38, 'text': "And I'm going to give you two different solutions and each each one is in kind of the opposite order.", 'start': 11450.737, 'duration': 5.643}, {'end': 11463.543, 'text': "So let's say solution one, and I'm going to create a new array called array three and take array one.", 'start': 11456.98, 'duration': 6.563}, {'end': 11475.689, 'text': "And what, basically, what I'm going to do is slice that, not slice the five out, but slice these, the ones that I want out,", 'start': 11467.705, 'duration': 7.984}, {'end': 11477.73, 'text': 'and put that into array three.', 'start': 11475.689, 'duration': 2.041}, {'end': 11479.371, 'text': 'So if I say dot slice.', 'start': 11477.81, 'duration': 1.561}, {'end': 11486.354, 'text': 'And remember, slice takes in the start index, which I want to start at the beginning because I want one through four.', 'start': 11481.152, 'duration': 5.202}, {'end': 11490.476, 'text': "And then I'm going to put in four as the end.", 'start': 11487.034, 'duration': 3.442}, {'end': 11493.978, 'text': 'If I save that, which we need to log this out.', 'start': 11490.496, 'duration': 3.482}, {'end': 11497.532, 'text': 'Array three.', 'start': 11496.792, 'duration': 0.74}, {'end': 11498.893, 'text': 'I save that.', 'start': 11497.552, 'duration': 1.341}, {'end': 11502.034, 'text': 'Now I have one through four in this array three.', 'start': 11498.953, 'duration': 3.081}, {'end': 11506.835, 'text': 'So now what I need to do is basically just add the rest of this on.', 'start': 11502.554, 'duration': 4.281}, {'end': 11508.775, 'text': 'Right Because I have one through four.', 'start': 11507.355, 'duration': 1.42}, {'end': 11515.877, 'text': "So I'm going to do that by chaining on can cat and I'm going to can cat array two.", 'start': 11508.795, 'duration': 7.082}, {'end': 11520.479, 'text': "And if I save that now I have one through 10 and there's no double fives.", 'start': 11516.458, 'duration': 4.021}, {'end': 11522.339, 'text': "So that's the first solution.", 'start': 11521.079, 'duration': 1.26}, {'end': 11524.6, 'text': 'The second solution.', 'start': 11523.079, 'duration': 1.521}], 'summary': 'Concatenate two arrays, remove duplicates, and create a new array with specified elements.', 'duration': 82.327, 'max_score': 11442.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo11442273.jpg'}], 'start': 9412.295, 'title': 'Javascript arrays and objects', 'summary': 'Covers basics of arrays and objects, array manipulation, and methods in javascript with practical examples, including array nesting, concatenation, spread operator, and challenges to test knowledge of array methods.', 'chapters': [{'end': 9724.734, 'start': 9412.295, 'title': 'Arrays and objects in javascript', 'summary': 'Covers the basics of arrays and objects in javascript, including their creation, manipulation, and access using indexes, with examples of array literals and array constructors, and concludes with a demonstration of accessing specific items and using them in expressions and template literals.', 'duration': 312.439, 'highlights': ['Demonstrating the creation and manipulation of arrays and objects The chapter covers the basics of arrays and objects in JavaScript, including their creation, manipulation, and access using indexes.', 'Examples of array literals and array constructors The chapter provides examples of array literals and array constructors, showcasing the different ways to create array objects in JavaScript.', 'Accessing specific items and using them in expressions and template literals The chapter concludes with a demonstration of accessing specific items and using them in expressions and template literals, providing practical examples of accessing and utilizing array elements.']}, {'end': 10091.719, 'start': 9724.794, 'title': 'Array basics and methods', 'summary': 'Covers the basics of arrays, including creating, accessing values by index, and using methods like push, pop, shift, and reverse to manipulate arrays and get information from them.', 'duration': 366.925, 'highlights': ['The chapter covers the basics of arrays, including creating, accessing values by index, and using methods like push, pop, shift, and reverse to manipulate arrays and get information from them. Covers the fundamentals of arrays, including creating, accessing values by index, and using methods like push, pop, shift, and reverse. These methods manipulate arrays and provide information from them.', 'The length property of arrays is used frequently to determine the number of items in an array. Discusses the frequent use of the length property to determine the number of items in an array, demonstrated with quantifiable data.', 'The push method adds a value to the end of the array. Explains the push method, which adds a value to the end of the array, demonstrated with an example of adding a value and the resulting change in the array.']}, {'end': 10545.901, 'start': 10092.72, 'title': 'Array methods in javascript', 'summary': 'Demonstrates the usage of array methods in javascript, including includes, index of, slice, splice, and method chaining, showcasing practical examples and outcomes.', 'duration': 453.181, 'highlights': ["The includes method checks if a specific value is in the array, returning true if the value exists and false if it doesn't. The includes method in JavaScript allows checking for the presence of a specific value in an array, providing a boolean (true/false) result. For example, when checking for the value 20, it returns true, and for the value 200, it returns false.", 'The index of method returns the index of a specific value in the array, with the ability to handle reversed arrays and non-existent values. The index of method in JavaScript returns the index of a specific value in an array. It also accounts for reversed arrays and non-existent values, providing the respective index or -1 in the case of a non-existent value.', 'The slice method selects and returns specified elements from the array without modifying the original array. The slice method in JavaScript allows selecting and returning specified elements from an array without altering the original array. It provides a convenient way to work with segments of the array without changing the original content.', 'The splice method selects and returns specified elements from the array, while also modifying the original array by removing the selected elements. The splice method in JavaScript selects and returns specified elements from an array, simultaneously modifying the original array by removing the selected elements. This method provides a way to both retrieve and alter array content.', 'Method chaining enables the sequential application of multiple array methods, as well as methods on other data types like strings. Method chaining in JavaScript allows for the sequential application of multiple array methods, as well as methods on other data types like strings. This results in a streamlined and expressive way of performing complex operations on data structures.']}, {'end': 10925.027, 'start': 10546.101, 'title': 'Array nesting, concatenation, and spread operator', 'summary': 'Discusses array nesting, concatenation, and the spread operator. it explains nesting arrays within arrays, accessing nested arrays, concatenating arrays, and using the spread operator to combine array items.', 'duration': 378.926, 'highlights': ['Nesting Arrays The chapter explains how to nest arrays within arrays, allowing for multiple levels of nesting and easy access to nested elements.', "Accessing Nested Arrays It details the process of accessing specific elements within nested arrays, using index notation to retrieve items like 'blueberry' and 'strawberry'.", 'Concatenating Arrays The chapter covers the process of concatenating arrays using the concat method, demonstrating how it combines the items from two arrays into a single array.', 'Spread Operator It introduces the spread operator as a method to combine array items from multiple arrays without creating a nested array, providing a more efficient alternative to concatenation.']}, {'end': 11155.774, 'start': 10925.567, 'title': 'Array methods and static methods on array object', 'summary': "Discusses array methods including flattening arrays, and demonstrates the usage of static methods like 'isarray', 'from' and 'of' to manipulate arrays and check array-like values, with examples and use cases.", 'duration': 230.207, 'highlights': ["The chapter discusses array methods including flattening arrays Demonstrates the usage of 'array.flat()' method to flatten nested arrays into a single array, providing a clear example and the resulting array length.", "Demonstrates the usage of static methods like 'isArray', 'from' and 'of' to manipulate arrays and check array-like values Illustrates the usage of 'Array.isArray()', 'Array.from()' and 'Array.of()' methods with examples, highlighting their utility in checking if something is an array and creating arrays from array-like values and sets of values."]}, {'end': 11578.486, 'start': 11155.955, 'title': 'Array challenges and methods', 'summary': 'Introduces array challenges to test knowledge of array methods and provides two challenges where the first one requires creating an array with numbers one through five and mutating it to six through zero using specific methods, and the second challenge involves concatenating two arrays while removing duplicate values.', 'duration': 422.531, 'highlights': ['The first challenge involves creating an array with numbers one through five and mutating it to six through zero using specific methods. The chapter introduces the first challenge of creating an array with numbers one through five and mutating it to six through zero using specific methods such as reverse, push, and unshift.', 'The second challenge requires concatenating two arrays while removing duplicate values. The second challenge involves concatenating two arrays while removing duplicate values, and provides two solutions involving methods like slice, concat, spread operator, and splice.']}], 'duration': 2166.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo9412295.jpg', 'highlights': ['Demonstrating the creation and manipulation of arrays and objects', 'Covers basics of arrays, including creating, accessing values by index, and using methods', 'The length property of arrays is used frequently to determine the number of items in an array', 'The push method adds a value to the end of the array', "The includes method checks if a specific value is in the array, returning true if the value exists and false if it doesn't", 'The index of method returns the index of a specific value in the array, with the ability to handle reversed arrays and non-existent values', 'The slice method selects and returns specified elements from the array without modifying the original array', 'The splice method selects and returns specified elements from the array, while also modifying the original array by removing the selected elements', 'Method chaining enables the sequential application of multiple array methods, as well as methods on other data types like strings', 'Nesting Arrays The chapter explains how to nest arrays within arrays, allowing for multiple levels of nesting and easy access to nested elements', "Accessing Nested Arrays It details the process of accessing specific elements within nested arrays, using index notation to retrieve items like 'blueberry' and 'strawberry'", 'Concatenating Arrays The chapter covers the process of concatenating arrays using the concat method, demonstrating how it combines the items from two arrays into a single array', 'Spread Operator It introduces the spread operator as a method to combine array items from multiple arrays without creating a nested array, providing a more efficient alternative to concatenation', "The chapter discusses array methods including flattening arrays Demonstrates the usage of 'array.flat()' method to flatten nested arrays into a single array, providing a clear example and the resulting array length", "Demonstrates the usage of static methods like 'isArray', 'from' and 'of' to manipulate arrays and check array-like values Illustrates the usage of 'Array.isArray()', 'Array.from()' and 'Array.of()' methods with examples, highlighting their utility in checking if something is an array and creating arrays from array-like values and sets of values", 'The first challenge involves creating an array with numbers one through five and mutating it to six through zero using specific methods', 'The second challenge requires concatenating two arrays while removing duplicate values']}, {'end': 13921.438, 'segs': [{'end': 12063.467, 'src': 'embed', 'start': 12031.769, 'weight': 4, 'content': [{'end': 12035.33, 'text': "Well right now it's telling us person has already been defined.", 'start': 12031.769, 'duration': 3.561}, {'end': 12043.974, 'text': "So let's change this to person to person to and it's still going to give me an error because it says unexpected identified identifier name.", 'start': 12035.37, 'duration': 8.604}, {'end': 12051.018, 'text': "Now, if you're going to do this again, I wouldn't recommend it using multiple words like this.", 'start': 12045.714, 'duration': 5.304}, {'end': 12055.361, 'text': 'This should be in this form or even this form.', 'start': 12051.438, 'duration': 3.923}, {'end': 12063.467, 'text': 'But if you do happen to come across this and you want to access it, you have to use the bracket notation.', 'start': 12056.062, 'duration': 7.405}], 'summary': 'Error encountered in variable definition, use bracket notation for access.', 'duration': 31.698, 'max_score': 12031.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo12031769.jpg'}, {'end': 13713.726, 'src': 'heatmap', 'start': 12417.622, 'weight': 0.78, 'content': [{'end': 12426.186, 'text': 'Now, if I want to add the properties from object one, I would pass object one in as the second argument.', 'start': 12417.622, 'duration': 8.564}, {'end': 12430.528, 'text': "And if I save, now you'll see those are added to this OBJ four.", 'start': 12426.226, 'duration': 4.302}, {'end': 12439.773, 'text': 'If I want to take the properties of object two, I would just add that as another argument, save, and now those get added.', 'start': 12431.109, 'duration': 8.664}, {'end': 12448.265, 'text': 'Okay, so whatever I pass in here, any objects I pass in here, the properties of those are going to get assigned to this empty object.', 'start': 12440.273, 'duration': 7.992}, {'end': 12454.551, 'text': "OK So both of these lines do the same exact thing and it's up to you on what you want to use.", 'start': 12448.945, 'duration': 5.606}, {'end': 12459.697, 'text': 'The spread operator to me is easier and more concise and just more modern.', 'start': 12454.992, 'duration': 4.705}, {'end': 12462.22, 'text': 'But if you want you can of course use this.', 'start': 12460.117, 'duration': 2.103}, {'end': 12469.362, 'text': "OK, so a lot of times we're going to be dealing with arrays of objects.", 'start': 12464.099, 'duration': 5.263}, {'end': 12477.027, 'text': 'anything any resources in the database like or from an API like to do is our users are blog posts.', 'start': 12469.362, 'duration': 7.665}, {'end': 12482.49, 'text': "You're usually going to deal with arrays of objects for those resources.", 'start': 12477.567, 'duration': 4.923}, {'end': 12484.831, 'text': "So let's say.", 'start': 12483.25, 'duration': 1.581}, {'end': 12489.014, 'text': "Should we do here, let's say we want to do.", 'start': 12487.173, 'duration': 1.841}, {'end': 12493.944, 'text': 'an array called to dues.', 'start': 12492.423, 'duration': 1.521}, {'end': 12500.929, 'text': "Right So we'll set that to an array and then in that array we'll have our first to do.", 'start': 12494.184, 'duration': 6.745}, {'end': 12502.29, 'text': "So it's going to be an object.", 'start': 12501.009, 'duration': 1.281}, {'end': 12506.053, 'text': "We'll say ID one and then name.", 'start': 12502.53, 'duration': 3.523}, {'end': 12510.356, 'text': "We'll say I don't know by milk again.", 'start': 12506.073, 'duration': 4.283}, {'end': 12516.12, 'text': "OK And I'm going to put a comma after that and copy it down a couple of times.", 'start': 12510.376, 'duration': 5.744}, {'end': 12522.385, 'text': 'And the second one, second object is going to have an idea to this love, an idea of three.', 'start': 12517.142, 'duration': 5.243}, {'end': 12534.53, 'text': "And here we'll say, I don't know, pick up kids from school and then we'll have take out trash.", 'start': 12523.465, 'duration': 11.065}, {'end': 12537.212, 'text': 'OK, so now we have an array.', 'start': 12534.791, 'duration': 2.421}, {'end': 12539.253, 'text': 'Yes, an array of objects.', 'start': 12537.752, 'duration': 1.501}, {'end': 12540.894, 'text': "I'm going to set this X here to.", 'start': 12539.273, 'duration': 1.621}, {'end': 12546.991, 'text': "to do is if I do that we're going to see our array of objects.", 'start': 12542.608, 'duration': 4.383}, {'end': 12556.696, 'text': 'Now, if I want to access a specific object, just like we do with any array, we use our brackets syntax say we want to get the first one.', 'start': 12547.971, 'duration': 8.725}, {'end': 12558.798, 'text': 'we use our zero index.', 'start': 12556.696, 'duration': 2.102}, {'end': 12560.018, 'text': 'that gives us that object.', 'start': 12558.798, 'duration': 1.22}, {'end': 12565.081, 'text': 'Now if I want to access specific property like name I simply do dot name.', 'start': 12560.439, 'duration': 4.642}, {'end': 12567.263, 'text': 'All right.', 'start': 12565.101, 'duration': 2.162}, {'end': 12568.904, 'text': 'So those are arrays of objects.', 'start': 12567.423, 'duration': 1.481}, {'end': 12580.503, 'text': "Now later on we're going to get into iteration and looping and being able to go through each object and do something to it or just display it.", 'start': 12568.964, 'duration': 11.539}, {'end': 12583.188, 'text': "But we're going to do that a little bit later.", 'start': 12580.984, 'duration': 2.204}, {'end': 12588.899, 'text': 'Now I want to show you a few other methods we have available on object.', 'start': 12584.315, 'duration': 4.584}, {'end': 12598.387, 'text': 'So if you want to get all of the keys in an object and put those into an array we can use object keys.', 'start': 12589.52, 'duration': 8.867}, {'end': 12602.051, 'text': "So let's say X equals object dot keys.", 'start': 12598.668, 'duration': 3.383}, {'end': 12605.934, 'text': 'And what do I want to use this on.', 'start': 12603.892, 'duration': 2.042}, {'end': 12610.018, 'text': "Let's do the to do object we created up here.", 'start': 12606.995, 'duration': 3.023}, {'end': 12617.551, 'text': "So say object dot keys and we'll pass in the to do object and then we want to log X and you'll see,", 'start': 12610.666, 'duration': 6.885}, {'end': 12623.756, 'text': 'now we have an array that has the value of ID name and completed.', 'start': 12617.551, 'duration': 6.205}, {'end': 12630.662, 'text': 'OK So it just took the keys from this to do object and put them into an array.', 'start': 12623.776, 'duration': 6.886}, {'end': 12640.197, 'text': "Now it's going to be times where you're going to want to get the length of an object meaning how many you know how many properties does it have in it.", 'start': 12632.236, 'duration': 7.961}, {'end': 12642.898, 'text': "And we can't use length on that.", 'start': 12640.978, 'duration': 1.92}, {'end': 12650.659, 'text': "Like if I try to do X equals and let's take our to do object and do length by do that it's going to say undefined.", 'start': 12642.938, 'duration': 7.721}, {'end': 12658.281, 'text': 'So the way that we can get it is by first getting the keys and then getting the length of that.', 'start': 12651.699, 'duration': 6.582}, {'end': 12663.731, 'text': 'So if I just take this And put that on there.', 'start': 12658.801, 'duration': 4.93}, {'end': 12665.092, 'text': "That's going to give me an array.", 'start': 12663.771, 'duration': 1.321}, {'end': 12667.494, 'text': 'Right And we can use length on an array.', 'start': 12665.192, 'duration': 2.302}, {'end': 12669.756, 'text': "So we'll simply do length.", 'start': 12668.415, 'duration': 1.341}, {'end': 12671.518, 'text': 'And if I save we get three.', 'start': 12669.856, 'duration': 1.662}, {'end': 12675.521, 'text': 'OK So up here you can see we have three.', 'start': 12671.538, 'duration': 3.983}, {'end': 12679.184, 'text': 'And I could have created an object literal as well.', 'start': 12675.541, 'duration': 3.643}, {'end': 12687.712, 'text': 'So the next thing is if you want to get an array with all the values just the values.', 'start': 12681.446, 'duration': 6.266}, {'end': 12691.896, 'text': 'We can use object dot values just like we can use object dot keys.', 'start': 12688.274, 'duration': 3.622}, {'end': 12699.641, 'text': "So let's say object dot values and we'll pass in to do save that.", 'start': 12692.337, 'duration': 7.304}, {'end': 12702.143, 'text': 'And now we just have an array of the values.', 'start': 12699.841, 'duration': 2.302}, {'end': 12708.587, 'text': 'Now if you want to get an array of the key value pairs you can do that with entries.', 'start': 12703.744, 'duration': 4.843}, {'end': 12715.551, 'text': "So let's say X equals object dot entries and then pass in our object.", 'start': 12709.147, 'duration': 6.404}, {'end': 12725.977, 'text': 'Save that, and now we have an array with arrays that have the key value pairs.', 'start': 12717.25, 'duration': 8.727}, {'end': 12735.705, 'text': "And then the last one I'm going to show you is hasOwnProperty, which will give you a Boolean indicating if the object has a specific property.", 'start': 12727.939, 'duration': 7.766}, {'end': 12742.631, 'text': "So let's say x equals, and then we actually call this on the actual object.", 'start': 12736.105, 'duration': 6.526}, {'end': 12743.992, 'text': 'So for instance, to do.', 'start': 12742.831, 'duration': 1.161}, {'end': 12751.595, 'text': "and then we can say has own property and let's pass in name.", 'start': 12745.411, 'duration': 6.184}, {'end': 12755.578, 'text': 'if i save that, we get true because it does have a name property.', 'start': 12751.595, 'duration': 3.983}, {'end': 12765.765, 'text': "right, if we put in i don't know age and i save that, then we get false because that to do object does not have a property of age.", 'start': 12755.578, 'duration': 10.187}, {'end': 12768.77, 'text': "So that's it.", 'start': 12767.708, 'duration': 1.062}, {'end': 12778.085, 'text': 'I just wanted you guys to get familiar with the spread operator and some of these these really helpful methods that you have on on your object.', 'start': 12768.97, 'duration': 9.115}, {'end': 12784.96, 'text': "So in the next video we're going to look at something called destructuring and also naming,", 'start': 12779.178, 'duration': 5.782}, {'end': 12788.481, 'text': 'because you do have a lot of properties inside of an object.', 'start': 12784.96, 'duration': 3.521}, {'end': 12794.363, 'text': "And sometimes you might not you might not want to do this because it's pretty long.", 'start': 12788.541, 'duration': 5.822}, {'end': 12802.426, 'text': "I'm going to show you how you can destructure so that you don't have to do as many, you know, as much as this dot notation.", 'start': 12795.124, 'duration': 7.302}, {'end': 12804.387, 'text': "So we'll get into that in the next video.", 'start': 12802.906, 'duration': 1.481}, {'end': 12815.39, 'text': 'OK so now I just want to show you a couple of things that you can do as far as naming and destructuring variable names from object literals.', 'start': 12807.608, 'duration': 7.782}, {'end': 12826.472, 'text': "So first off if you're creating an object where the key and the value are the same if the value is a variable then you don't have to add both.", 'start': 12816.15, 'duration': 10.322}, {'end': 12827.652, 'text': 'So let me show you what I mean.', 'start': 12826.592, 'duration': 1.06}, {'end': 12838.435, 'text': "If we have these variables here and let's say I want to create an object, so say cons, person, and let's say i want to set name or not name,", 'start': 12828.212, 'duration': 10.223}, {'end': 12844.658, 'text': 'first name, and i want to set that to the first name variable.', 'start': 12838.435, 'duration': 6.223}, {'end': 12858.244, 'text': "right, so you would do that and then i'll just copy that down and this one will be last name and this one last name, and then we have our age.", 'start': 12844.658, 'duration': 13.586}, {'end': 12869.709, 'text': 'okay, so now if i come down here and do a console log of person dot age and save that, of course i get 30..', 'start': 12860.467, 'duration': 9.242}, {'end': 12876.31, 'text': "so i'm setting the key of first name to the value of whatever is in the variable of first name.", 'start': 12869.709, 'duration': 6.601}, {'end': 12881.911, 'text': "if you do this and these are the same you don't need to add the second one, you don't need to add the value.", 'start': 12876.31, 'duration': 5.601}, {'end': 12885.312, 'text': 'you can simply do this get rid of the colon as well.', 'start': 12881.911, 'duration': 3.401}, {'end': 12891.087, 'text': 'And now, if I save that, we still get 30..', 'start': 12888.226, 'duration': 2.861}, {'end': 12892.407, 'text': 'So it saves you some typing.', 'start': 12891.087, 'duration': 1.32}, {'end': 12898.708, 'text': 'And and I just wanted to show you this because most most JavaScript developers will do this.', 'start': 12893.147, 'duration': 5.561}, {'end': 12901.589, 'text': "There's no sense in repeating yourself if you don't have to.", 'start': 12898.728, 'duration': 2.861}, {'end': 12905.949, 'text': 'So the next thing I want to look at is destructuring.', 'start': 12902.529, 'duration': 3.42}, {'end': 12911.37, 'text': 'So basically what we can do here.', 'start': 12907.39, 'duration': 3.98}, {'end': 12912.511, 'text': "let's say I wanted to get.", 'start': 12911.37, 'duration': 1.141}, {'end': 12924.29, 'text': "well, let's create another Object, so we'll create a to do object with an ID and let's say title take out trash.", 'start': 12912.511, 'duration': 11.779}, {'end': 12934.293, 'text': 'So if I want to create a variable of ID with the idea of that to do I could do this you know I could do that and then console log the ID.', 'start': 12924.991, 'duration': 9.302}, {'end': 12941.325, 'text': 'But what we can do is destructure properties from the object.', 'start': 12936.162, 'duration': 5.163}, {'end': 12944.647, 'text': 'So we want to set this equal to the object itself.', 'start': 12941.585, 'duration': 3.062}, {'end': 12951.871, 'text': 'And then any properties we want to extract or destructure are going to go into these curly braces.', 'start': 12945.207, 'duration': 6.664}, {'end': 12953.792, 'text': "So if I save that, you'll see I get one.", 'start': 12951.971, 'duration': 1.821}, {'end': 12954.752, 'text': 'I get the same thing.', 'start': 12953.812, 'duration': 0.94}, {'end': 12958.054, 'text': 'If I want to take out the name, I can do that as well.', 'start': 12955.293, 'duration': 2.761}, {'end': 12961.116, 'text': 'So you can, well, let me log it so you can see.', 'start': 12958.594, 'duration': 2.522}, {'end': 12971.747, 'text': "So you can think of this as I'm sorry not name title should be title and title.", 'start': 12962.421, 'duration': 9.326}, {'end': 12981.132, 'text': "So you can think of this as pulling these variables out of the of the object and you can go multiple levels deep, like, let's say,", 'start': 12972.547, 'duration': 8.585}, {'end': 12985.255, 'text': "we have a user in here and that's an object that has a name.", 'start': 12981.132, 'duration': 4.123}, {'end': 12995.274, 'text': "So if I want to get that, if I come down here and I destructure user, I'm just going to log that for now and save that.", 'start': 12986.348, 'duration': 8.926}, {'end': 12999.256, 'text': "And you see that it'll pull out the object to use this entire user object.", 'start': 12995.294, 'duration': 3.962}, {'end': 13005.621, 'text': 'If I want to get the name or any other property, what I could do is put a colon here,', 'start': 12999.797, 'duration': 5.824}, {'end': 13010.003, 'text': 'open up another set of curly braces and we want to take the name from the user.', 'start': 13005.621, 'duration': 4.382}, {'end': 13014.586, 'text': 'So now if I come down here, I should be able to just console log name.', 'start': 13010.784, 'duration': 3.802}, {'end': 13022.063, 'text': 'Now another thing we can do is rename properties or keys.', 'start': 13016.198, 'duration': 5.865}, {'end': 13027.828, 'text': "So let's say I'm destructuring ID but let's say I want to rename it to to do ID.", 'start': 13022.503, 'duration': 5.325}, {'end': 13034.193, 'text': 'If I want to do that I can put a colon and then just do to do ID like that.', 'start': 13028.508, 'duration': 5.685}, {'end': 13040.198, 'text': 'And then if I come down here and I console log to do ID I get one.', 'start': 13034.733, 'duration': 5.465}, {'end': 13046.621, 'text': 'OK, so this and this might might be a little confusing.', 'start': 13041.698, 'duration': 4.923}, {'end': 13050.964, 'text': "Just keep in mind that when you use the curly braces, you're destructuring.", 'start': 13046.741, 'duration': 4.223}, {'end': 13053.386, 'text': "If you don't, then you're just renaming.", 'start': 13051.384, 'duration': 2.002}, {'end': 13062.835, 'text': "Now we can also destructure arrays, and I know we're talking about objects in these in the last few videos,", 'start': 13055.109, 'duration': 7.726}, {'end': 13068.24, 'text': "but I figured it's relevant here to show you this stuff, even though it does have to do with arrays.", 'start': 13062.835, 'duration': 5.405}, {'end': 13075.025, 'text': "So I'm going to create an array called numbers and we'll set that to just whatever.", 'start': 13068.72, 'duration': 6.305}, {'end': 13079.489, 'text': "Thirty three and let's do one more.", 'start': 13076.887, 'duration': 2.602}, {'end': 13084.986, 'text': 'OK, and I just want to put a comment here that we can destructure arrays.', 'start': 13080.845, 'duration': 4.141}, {'end': 13090.148, 'text': 'Oops, that should be a comma.', 'start': 13086.246, 'duration': 3.902}, {'end': 13091.888, 'text': 'All right.', 'start': 13091.608, 'duration': 0.28}, {'end': 13099.99, 'text': 'So the way that we do this is we create variables for starting at the beginning for the first, second, third and so on.', 'start': 13093.028, 'duration': 6.962}, {'end': 13100.77, 'text': 'All right.', 'start': 13100.01, 'duration': 0.76}, {'end': 13102.731, 'text': "So let's say const.", 'start': 13100.85, 'duration': 1.881}, {'end': 13107.312, 'text': 'And then the way we destructure arrays is going to be with brackets objects.', 'start': 13102.851, 'duration': 4.461}, {'end': 13109.433, 'text': 'We use curly braces and arrays.', 'start': 13107.352, 'duration': 2.081}, {'end': 13110.233, 'text': 'We use brackets.', 'start': 13109.453, 'duration': 0.78}, {'end': 13113.292, 'text': "We're going to set that to the array name, which is numbers.", 'start': 13110.711, 'duration': 2.581}, {'end': 13117.414, 'text': "And then here I'm going to say first and second.", 'start': 13113.813, 'duration': 3.601}, {'end': 13119.215, 'text': 'So what this will do.', 'start': 13118.155, 'duration': 1.06}, {'end': 13124.057, 'text': "you'll see if I console log first and second.", 'start': 13119.215, 'duration': 4.842}, {'end': 13129.78, 'text': "it's going to give me the first two elements, the first two values in the array 23 and 67..", 'start': 13124.057, 'duration': 5.723}, {'end': 13135.763, 'text': 'And of course, if I put third in here, that would be the next one, 33.', 'start': 13129.78, 'duration': 5.983}, {'end': 13145.63, 'text': "Now, if you want to get the rest of the numbers and put them into a variable as an array, we can use what's called the rest operator.", 'start': 13135.763, 'duration': 9.867}, {'end': 13151.034, 'text': "Now, it's a little confusing because the rest operator is the same as the spread operator.", 'start': 13146.07, 'duration': 4.964}, {'end': 13152.495, 'text': "It's the three dots.", 'start': 13151.294, 'duration': 1.201}, {'end': 13156.718, 'text': "But in this use case, it's often called the rest operator.", 'start': 13153.076, 'duration': 3.642}, {'end': 13166.035, 'text': 'And the way we use that is, instead of just putting third, which would just get the next one, We would do three dots and then a variable name,', 'start': 13157.058, 'duration': 8.977}, {'end': 13167.416, 'text': 'oftentimes called rest.', 'start': 13166.035, 'duration': 1.381}, {'end': 13172.177, 'text': "And then what I'll do here is log first second and rest.", 'start': 13168.176, 'duration': 4.001}, {'end': 13177.399, 'text': "Now what you'll see is we're logging the first and second, twenty three, sixty,", 'start': 13172.898, 'duration': 4.501}, {'end': 13183.402, 'text': 'seven and then rest contains an array with the rest of the values in that array.', 'start': 13177.399, 'duration': 6.003}, {'end': 13185.642, 'text': 'In this case is thirty three and forty nine.', 'start': 13183.582, 'duration': 2.06}, {'end': 13191.415, 'text': "If I put in 52 here and save, that's going to get added to the rest array.", 'start': 13186.022, 'duration': 5.393}, {'end': 13200.737, 'text': "and just to show you i can change this to anything, i'll just say we'll say nums and then, if i come down here and i do nums,", 'start': 13191.415, 'duration': 9.322}, {'end': 13202.738, 'text': "that's going to give me the same thing.", 'start': 13200.737, 'duration': 2.001}, {'end': 13206.118, 'text': "but i'm just going to put that back to rest.", 'start': 13202.738, 'duration': 3.38}, {'end': 13208.059, 'text': "okay, so i know it's a little confusing.", 'start': 13206.118, 'duration': 1.941}, {'end': 13218.34, 'text': "spread operator, rest operator, it's just when you use it in this instance or in this use case, then you might see it called the rest operator right.", 'start': 13208.059, 'duration': 10.281}, {'end': 13220.38, 'text': "so that's it in the next video.", 'start': 13218.34, 'duration': 2.04}, {'end': 13225.821, 'text': 'i want to talk a little bit about json.', 'start': 13220.38, 'duration': 5.441}, {'end': 13233.183, 'text': "okay, so, since we've been talking about javascript objects, i think that this is a good place to introduce json.", 'start': 13225.821, 'duration': 7.362}, {'end': 13236.363, 'text': 'okay, which i get a lot of crap for saying it that way.', 'start': 13233.183, 'duration': 3.18}, {'end': 13241.925, 'text': "a lot of people say json, i say json, but it really doesn't matter.", 'start': 13236.363, 'duration': 5.562}, {'end': 13243.945, 'text': "it's j, j s o n.", 'start': 13241.925, 'duration': 2.02}, {'end': 13253.289, 'text': "Now, Jason, is something that you'll be working with a lot as a JavaScript developer, and it stands for JavaScript Object Notation,", 'start': 13244.725, 'duration': 8.564}, {'end': 13256.35, 'text': "and it's a lightweight data interchange format.", 'start': 13253.289, 'duration': 3.061}, {'end': 13262.553, 'text': "So it's essentially a way of storing data in a simple human readable format now.", 'start': 13256.41, 'duration': 6.143}, {'end': 13272.403, 'text': 'In web development, especially in JavaScript, we work a lot with APIs and APIs to send and receive data to and from a server.', 'start': 13263.16, 'duration': 9.243}, {'end': 13282.546, 'text': 'And several years ago, XML, which is extensible markup language, was kind of the standard for sending data or getting data from a server.', 'start': 13273.103, 'duration': 9.443}, {'end': 13285.446, 'text': 'But in recent years, JSON has become the standard.', 'start': 13282.626, 'duration': 2.82}, {'end': 13289.748, 'text': "So you'll very, very rarely work with XML these days.", 'start': 13285.506, 'duration': 4.242}, {'end': 13298.15, 'text': "Now, JSON, the syntax is very similar to JavaScript object literals, which is what we've been working with.", 'start': 13290.908, 'duration': 7.242}, {'end': 13305.069, 'text': 'now to give you kind of an example of an api that you may work with as a front-end developer.', 'start': 13298.863, 'duration': 6.206}, {'end': 13309.553, 'text': "you're going to work with back-end apis where you hit uh,", 'start': 13305.069, 'duration': 4.484}, {'end': 13319.422, 'text': "you know a url and you fetch some data or you post some data and we're going to get into all that later on apis and you know rest apis and stuff like that.", 'start': 13309.553, 'duration': 9.869}, {'end': 13325.875, 'text': 'now just to give you an example, github has has a public API that we can use.', 'start': 13319.422, 'duration': 6.453}, {'end': 13332.219, 'text': "So I'm going to go to one of the URLs just to kind of show you an example of of some data we'll get back.", 'start': 13325.935, 'duration': 6.284}, {'end': 13340.544, 'text': "So if we go to it's actually API API dot GitHub dot com and then we can go to slash users.", 'start': 13332.279, 'duration': 8.265}, {'end': 13342.045, 'text': 'If I do that.', 'start': 13341.244, 'duration': 0.801}, {'end': 13348.31, 'text': "we'll get an array of like, I think it's like the first 20 users of GitHub.", 'start': 13343.248, 'duration': 5.062}, {'end': 13356.273, 'text': "So as you can see, it's an array of JSON objects, which are very similar to JavaScript objects, right? We have key value pairs.", 'start': 13348.75, 'duration': 7.523}, {'end': 13363.455, 'text': 'Now the difference here is that the keys are going to have double quotes around them as well.', 'start': 13356.853, 'duration': 6.602}, {'end': 13367.597, 'text': "And with JavaScript object literals, we don't have quotes around the keys.", 'start': 13363.615, 'duration': 3.982}, {'end': 13372.66, 'text': 'And you have to have double quotes around the strings here as well.', 'start': 13368.557, 'duration': 4.103}, {'end': 13374.141, 'text': "Numbers, you don't have to.", 'start': 13372.8, 'duration': 1.341}, {'end': 13378.584, 'text': "But strings, you have to have double quotes around or it's not going to be valid JSON.", 'start': 13374.601, 'duration': 3.983}, {'end': 13388.03, 'text': "But this endpoint here, API GitHub dot com slash users is an example of something you'd hit with with the fetch API, which we'll learn about later.", 'start': 13379.425, 'duration': 8.605}, {'end': 13393.074, 'text': 'And you can make a request and get this data and bring it into your application.', 'start': 13388.491, 'duration': 4.583}, {'end': 13396.316, 'text': 'You could even do user slash and then your username.', 'start': 13393.494, 'duration': 2.822}, {'end': 13397.377, 'text': "So I'll put mine in here.", 'start': 13396.376, 'duration': 1.001}, {'end': 13404.772, 'text': 'then that gives me some information about my account, my login, my id number.', 'start': 13398.428, 'duration': 6.344}, {'end': 13410.736, 'text': 'it even gives me some other api urls that i can hit to get other things all right.', 'start': 13404.772, 'duration': 5.964}, {'end': 13416.819, 'text': 'so, for example, uh, is the repos so this repos url?', 'start': 13410.736, 'duration': 6.083}, {'end': 13422.823, 'text': 'if i were to hit that endpoint, i get an array of all my github repositories.', 'start': 13416.819, 'duration': 6.004}, {'end': 13425.516, 'text': 'OK, so as Jason objects.', 'start': 13423.815, 'duration': 1.701}, {'end': 13431.299, 'text': 'So I just wanted to kind of show you an example of an API that gives us Jason data.', 'start': 13426.156, 'duration': 5.143}, {'end': 13434.44, 'text': 'Now you can also have Jason files.', 'start': 13431.979, 'duration': 2.461}, {'end': 13446.806, 'text': "like, if I create a new file here and I'll just say I don't know to do dot Jason the way that I would do this it usually adjacent file is going to have an array of Jason objects.", 'start': 13434.44, 'duration': 12.366}, {'end': 13459.909, 'text': 'So you would have brackets just like in JavaScript and then each object would have curly braces but your keys have to have double quotes as well.', 'start': 13447.326, 'duration': 12.583}, {'end': 13471.733, 'text': "I'll say ID one this could be a number or a string and then let's say title title say take out trash.", 'start': 13460.169, 'duration': 11.564}, {'end': 13473.153, 'text': 'Now V.S.', 'start': 13472.613, 'duration': 0.54}, {'end': 13475.274, 'text': 'code will automatically validate this.', 'start': 13473.213, 'duration': 2.061}, {'end': 13480.341, 'text': "like, if I take those quotes off, it's gonna give me an error if i hover over.", 'start': 13475.274, 'duration': 5.067}, {'end': 13484.984, 'text': 'it says property keys must be double quoted because it knows them in a json file.', 'start': 13480.341, 'duration': 4.643}, {'end': 13488.606, 'text': 'okay, and there are websites where you can validate json as well.', 'start': 13484.984, 'duration': 3.622}, {'end': 13492.028, 'text': "you just paste it in and it will tell you if it's correct.", 'start': 13488.606, 'duration': 3.422}, {'end': 13495.871, 'text': "but yeah, it's pretty much just a javascript object with some double quotes.", 'start': 13492.028, 'duration': 3.843}, {'end': 13499.145, 'text': 'So what I want to do as far as JavaScript?', 'start': 13496.824, 'duration': 2.321}, {'end': 13503.748, 'text': 'to show you how we can convert our objects to Jason and the other way around?', 'start': 13499.145, 'duration': 4.603}, {'end': 13506.77, 'text': "So let's create an object here.", 'start': 13504.428, 'duration': 2.342}, {'end': 13508.151, 'text': "Let's do something different.", 'start': 13507.01, 'duration': 1.141}, {'end': 13510.832, 'text': "We'll do like which we do.", 'start': 13508.191, 'duration': 2.641}, {'end': 13518.216, 'text': "We'll do posts like a blog post and we'll set that to let's say title say post one.", 'start': 13510.872, 'duration': 7.344}, {'end': 13520.818, 'text': 'And this is just a JavaScript object literal.', 'start': 13518.417, 'duration': 2.401}, {'end': 13523.802, 'text': "So title, actually, let's put an ID, too.", 'start': 13521.4, 'duration': 2.402}, {'end': 13532.948, 'text': "So we'll say ID one and then let's put a body and I'll just say this is the body.", 'start': 13523.822, 'duration': 9.126}, {'end': 13538.132, 'text': 'OK, so we have a JavaScript object, right? I can console log that post.', 'start': 13533.228, 'duration': 4.904}, {'end': 13546.298, 'text': 'And if I want to convert this to a what we call a Jason string.', 'start': 13539.933, 'duration': 6.365}, {'end': 13551.027, 'text': "There's a JSON object we can use.", 'start': 13547.725, 'duration': 3.302}, {'end': 13553.868, 'text': "So let's say const str string.", 'start': 13551.127, 'duration': 2.741}, {'end': 13558.671, 'text': 'So this JSON object has a method called stringify.', 'start': 13554.468, 'duration': 4.203}, {'end': 13564.013, 'text': "So just stringify and parse are the two methods you're going to be using quite a bit when dealing with this.", 'start': 13559.371, 'duration': 4.642}, {'end': 13568.796, 'text': 'So stringify will turn an object into a JSON string.', 'start': 13564.694, 'duration': 4.102}, {'end': 13570.677, 'text': "So I'm going to pass in here post.", 'start': 13568.836, 'duration': 1.841}, {'end': 13574.859, 'text': "And then let's log str.", 'start': 13571.737, 'duration': 3.122}, {'end': 13578.132, 'text': "and notice it's formatted differently.", 'start': 13576.071, 'duration': 2.061}, {'end': 13581.373, 'text': "it doesn't have like the collapsible arrows and stuff like that.", 'start': 13578.132, 'duration': 3.241}, {'end': 13583.714, 'text': "it's just a simple string.", 'start': 13581.373, 'duration': 2.341}, {'end': 13588.817, 'text': 'okay, um, and this is what you would send if you were sending data to a server.', 'start': 13583.714, 'duration': 5.103}, {'end': 13590.677, 'text': 'this is what you would send.', 'start': 13588.817, 'duration': 1.86}, {'end': 13597.38, 'text': 'okay, now, when you use, like the fetch api or other libraries to make http requests a lot of times,', 'start': 13590.677, 'duration': 6.703}, {'end': 13603.143, 'text': 'it does this for you like you can just send the post like this and it will automatically stringify it.', 'start': 13597.38, 'duration': 5.763}, {'end': 13610.062, 'text': "Where you do end up using stringify and parse the next one I'm going to show you is with local storage,", 'start': 13604.039, 'duration': 6.023}, {'end': 13616.265, 'text': 'and local storage is a way to store things on your client in your browser, and they can only store.', 'start': 13610.062, 'duration': 6.203}, {'end': 13620.226, 'text': "it can only store strings, so you can't store like an object like this.", 'start': 13616.265, 'duration': 3.961}, {'end': 13627.129, 'text': 'So what you would do is stringify your object, put it into local storage and then, when you take it out,', 'start': 13620.626, 'duration': 6.503}, {'end': 13632.332, 'text': "you would parse it back into an object and we're going to get all into local storage later.", 'start': 13627.129, 'duration': 5.203}, {'end': 13636.704, 'text': 'So now that we have Jason string in the S.T.R.', 'start': 13633.001, 'duration': 3.703}, {'end': 13644.93, 'text': "variable let's parse that Jason so we can do that and I'm going to put this in a new variable called OBJ.", 'start': 13636.744, 'duration': 8.186}, {'end': 13648.857, 'text': "And we're going to set that to Jason dot parse.", 'start': 13646.036, 'duration': 2.821}, {'end': 13652.317, 'text': "And then we're going to pass the string Jason string in there.", 'start': 13649.657, 'duration': 2.66}, {'end': 13659.519, 'text': "And then let's go ahead and log OBJ and we're going to get our initial post object literal.", 'start': 13652.537, 'duration': 6.982}, {'end': 13665.24, 'text': "OK So these are the two methods that you'll be using quite a bit when dealing with this type of thing.", 'start': 13660.219, 'duration': 5.021}, {'end': 13668.381, 'text': "And then it doesn't have to just be a single object.", 'start': 13665.98, 'duration': 2.401}, {'end': 13670.221, 'text': 'It can be an array as well.', 'start': 13668.461, 'duration': 1.76}, {'end': 13675.662, 'text': "So if we say const let's say posts and we set that to an array.", 'start': 13670.321, 'duration': 5.341}, {'end': 13681.442, 'text': "objects. I'll just grab this one here and paste that in.", 'start': 13676.74, 'duration': 4.702}, {'end': 13687.884, 'text': "then we'll put a comma and we'll create another one and I'll just change that to a 2 and we'll say pose 2.", 'start': 13681.442, 'duration': 6.442}, {'end': 13691.345, 'text': 'so now we have an array of objects.', 'start': 13687.884, 'duration': 3.461}, {'end': 13704.749, 'text': "let's say down here const str2 and we'll set that to Jason dot, stringify and let's pass in our posts and then, if we log str2,", 'start': 13691.345, 'duration': 13.404}, {'end': 13713.726, 'text': "You'll see we have a JSON string that has a couple array, a couple array, a couple objects inside of an array.", 'start': 13706.923, 'duration': 6.803}], 'summary': 'The transcript covers working with javascript objects and arrays, using methods like object keys, values, and entries, destructuring objects and arrays, and understanding json format and its usage in web development.', 'duration': 1296.104, 'max_score': 12417.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo12417622.jpg'}, {'end': 12642.898, 'src': 'embed', 'start': 12617.551, 'weight': 3, 'content': [{'end': 12623.756, 'text': 'now we have an array that has the value of ID name and completed.', 'start': 12617.551, 'duration': 6.205}, {'end': 12630.662, 'text': 'OK So it just took the keys from this to do object and put them into an array.', 'start': 12623.776, 'duration': 6.886}, {'end': 12640.197, 'text': "Now it's going to be times where you're going to want to get the length of an object meaning how many you know how many properties does it have in it.", 'start': 12632.236, 'duration': 7.961}, {'end': 12642.898, 'text': "And we can't use length on that.", 'start': 12640.978, 'duration': 1.92}], 'summary': 'An array was created with id, name, and completed values. difficulty in getting object length.', 'duration': 25.347, 'max_score': 12617.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo12617551.jpg'}, {'end': 12735.705, 'src': 'embed', 'start': 12703.744, 'weight': 2, 'content': [{'end': 12708.587, 'text': 'Now if you want to get an array of the key value pairs you can do that with entries.', 'start': 12703.744, 'duration': 4.843}, {'end': 12715.551, 'text': "So let's say X equals object dot entries and then pass in our object.", 'start': 12709.147, 'duration': 6.404}, {'end': 12725.977, 'text': 'Save that, and now we have an array with arrays that have the key value pairs.', 'start': 12717.25, 'duration': 8.727}, {'end': 12735.705, 'text': "And then the last one I'm going to show you is hasOwnProperty, which will give you a Boolean indicating if the object has a specific property.", 'start': 12727.939, 'duration': 7.766}], 'summary': 'Javascript object methods: entries, hasownproperty. no quantifiable data.', 'duration': 31.961, 'max_score': 12703.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo12703744.jpg'}, {'end': 13236.363, 'src': 'embed', 'start': 13208.059, 'weight': 1, 'content': [{'end': 13218.34, 'text': "spread operator, rest operator, it's just when you use it in this instance or in this use case, then you might see it called the rest operator right.", 'start': 13208.059, 'duration': 10.281}, {'end': 13220.38, 'text': "so that's it in the next video.", 'start': 13218.34, 'duration': 2.04}, {'end': 13225.821, 'text': 'i want to talk a little bit about json.', 'start': 13220.38, 'duration': 5.441}, {'end': 13233.183, 'text': "okay, so, since we've been talking about javascript objects, i think that this is a good place to introduce json.", 'start': 13225.821, 'duration': 7.362}, {'end': 13236.363, 'text': 'okay, which i get a lot of crap for saying it that way.', 'start': 13233.183, 'duration': 3.18}], 'summary': 'Introduction to spread and rest operators, with a mention of json in the next video.', 'duration': 28.304, 'max_score': 13208.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo13208059.jpg'}, {'end': 13921.438, 'src': 'embed', 'start': 13885.312, 'weight': 0, 'content': [{'end': 13888.454, 'text': 'And you can put whatever you want for the titles and authors.', 'start': 13885.312, 'duration': 3.142}, {'end': 13890.655, 'text': "I'm going to say The Road Ahead.", 'start': 13888.574, 'duration': 2.081}, {'end': 13892.056, 'text': "I'm just putting anything here.", 'start': 13890.675, 'duration': 1.381}, {'end': 13893.857, 'text': 'This is by Bill Gates.', 'start': 13892.076, 'duration': 1.781}, {'end': 13904.283, 'text': 'And then we have the Steve Jobs biography by Walter Isaacson.', 'start': 13895.518, 'duration': 8.765}, {'end': 13906.984, 'text': "I think that's how you spell it.", 'start': 13904.303, 'duration': 2.681}, {'end': 13910.166, 'text': 'And then we have Mockingjay.', 'start': 13907.805, 'duration': 2.361}, {'end': 13915.71, 'text': "And that's by Suzanne Collins.", 'start': 13912.706, 'duration': 3.004}, {'end': 13921.438, 'text': "OK, so here's step one.", 'start': 13918.614, 'duration': 2.824}], 'summary': 'List of books mentioned by bill gates and authors.', 'duration': 36.126, 'max_score': 13885.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo13885312.jpg'}], 'start': 11578.666, 'title': 'Javascript objects and json', 'summary': 'Covers object literals, working with javascript objects, spread operator, object methods, arrays, json, with key points including accessing, updating, adding properties, and methods like object.keys, object.values, stringify, and parse.', 'chapters': [{'end': 11668.654, 'start': 11578.666, 'title': 'Javascript object literals', 'summary': 'Introduces object literals in javascript, explaining their structure as key value pairs and demonstrating their usage with examples, highlighting the use of different data types and properties.', 'duration': 89.988, 'highlights': ['Object literals in JavaScript are key value pairs, where the keys represent the properties and the values can be strings, numbers, or booleans.', 'The example demonstrates creating a person object with properties such as name, age, and isAdmin, showcasing the usage of different data types and properties.']}, {'end': 12055.361, 'start': 11670.695, 'title': 'Working with javascript objects', 'summary': 'Demonstrates accessing, updating, and adding properties to javascript objects, including using dot syntax and bracket notation, adding functions as properties, and the use of quotes for multi-word keys.', 'duration': 384.666, 'highlights': ['The chapter demonstrates accessing, updating, and adding properties to JavaScript objects. The chapter covers various operations such as accessing, updating, and adding properties to JavaScript objects.', 'The use of dot syntax and bracket notation for accessing specific properties from an object is explained. The use of dot syntax and bracket notation for accessing specific properties from an object is explained, with examples provided.', "Adding functions as properties to objects is demonstrated, including accessing other properties using the 'this' keyword within the function. The process of adding functions as properties to objects and accessing other properties using the 'this' keyword within the function is demonstrated.", 'The use of quotes for multi-word keys when creating object properties is discussed. The use of quotes for multi-word keys when creating object properties is discussed, with a cautionary note regarding its usage.']}, {'end': 12462.22, 'start': 12056.062, 'title': 'Using spread operator and object methods', 'summary': 'Discusses using the bracket notation to access objects, creating objects using object literals and the object constructor, nesting objects, using the spread operator with objects, and the assign method, with examples and comparisons between the two methods.', 'duration': 406.158, 'highlights': ['Using the spread operator with objects The spread operator can be used to combine properties of objects into a single object, simplifying the process of merging object properties, as demonstrated with examples.', 'Creating objects using object literals and object constructor The chapter explains creating objects using object literals, adding properties, and also using the object constructor, with a comparison of the two methods and their functionalities.', 'Nesting objects and accessing properties The concept of nesting objects within objects is explained, along with accessing nested properties using the dot notation, demonstrated with an example of nesting coordinates within an address object.', 'Using the object assign method The object assign method is introduced, demonstrating how it can be used to merge properties of different objects into a new object, with a comparison to the spread operator for achieving the same result.']}, {'end': 13208.059, 'start': 12464.099, 'title': 'Working with arrays and objects in javascript', 'summary': 'Discusses working with arrays and objects in javascript, covering key concepts such as creating arrays of objects, accessing specific objects and properties, and using methods like object.keys, object.values, object.entries, and hasownproperty. it also explains naming and destructuring variable names from object literals and demonstrates how to destructure arrays using the rest operator.', 'duration': 743.96, 'highlights': ['Creating arrays of objects and accessing specific objects and properties The chapter explains the process of creating arrays of objects and accessing specific objects and properties, emphasizing the use of bracket syntax for accessing specific objects and dot notation for accessing specific properties.', 'Using object.keys, object.values, object.entries, and hasOwnProperty methods The chapter demonstrates the use of object.keys to get all keys in an object, object.values to get an array with all the values, object.entries to get an array of key-value pairs, and hasOwnProperty method to check if an object has a specific property.', 'Naming and destructuring variable names from object literals The chapter showcases how to simplify the process of creating objects by using the same key and value for variables and explains destructuring properties from objects using curly braces and renaming properties or keys.', 'Destructuring arrays using the rest operator The chapter illustrates the process of destructuring arrays using the rest operator, allowing developers to extract specific elements and the rest of the values into a separate array using the three dots notation.']}, {'end': 13921.438, 'start': 13208.059, 'title': 'Introduction to json in javascript', 'summary': 'Introduces json as a lightweight data interchange format, the similarities and differences between json and javascript object literals, its usage in web development, and the methods stringify and parse in javascript for converting objects to json and vice versa. it also includes a challenge involving creating an array of objects with nested properties.', 'duration': 713.379, 'highlights': ['JSON is a lightweight data interchange format used in web development, similar to JavaScript object literals, and has become the standard for sending and receiving data from servers. JSON is a lightweight data interchange format used in web development and has become the standard for sending and receiving data from servers, replacing XML, with similarities to JavaScript object literals.', 'The JSON methods stringify and parse are used to convert JavaScript objects to JSON strings and vice versa, and are essential when dealing with JSON data. The JSON methods stringify and parse are essential for converting JavaScript objects to JSON strings and vice versa when dealing with JSON data.', 'A challenge is presented involving creating an array of objects with nested properties, such as title, author, and status, including using Boolean values. The chapter includes a challenge involving creating an array of objects with nested properties and Boolean values, requiring the construction of objects with specific properties.']}], 'duration': 2342.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo11578666.jpg', 'highlights': ['The JSON methods stringify and parse are essential for converting JavaScript objects to JSON strings and vice versa when dealing with JSON data.', 'The use of dot syntax and bracket notation for accessing specific properties from an object is explained, with examples provided.', 'Using the spread operator with objects simplifies the process of merging object properties, as demonstrated with examples.', 'The chapter explains the process of creating arrays of objects and accessing specific objects and properties, emphasizing the use of bracket syntax for accessing specific objects and dot notation for accessing specific properties.', 'The object assign method is introduced, demonstrating how it can be used to merge properties of different objects into a new object, with a comparison to the spread operator for achieving the same result.']}, {'end': 17796.114, 'segs': [{'end': 13973.328, 'src': 'embed', 'start': 13944.316, 'weight': 4, 'content': [{'end': 13952.561, 'text': "We're going to come down here and set all of the red values to true so you can pause the video and do it yourself.", 'start': 13944.316, 'duration': 8.245}, {'end': 13954.923, 'text': 'But this is going to be pretty simple.', 'start': 13953.402, 'duration': 1.521}, {'end': 13957.525, 'text': 'Basically you just want to say library.', 'start': 13955.043, 'duration': 2.482}, {'end': 13960.759, 'text': "And there's multiple ways you could do this.", 'start': 13959.158, 'duration': 1.601}, {'end': 13963.721, 'text': "You could loop through it, but we haven't gone over loops or anything.", 'start': 13960.799, 'duration': 2.922}, {'end': 13965.923, 'text': "So let's say library zero.", 'start': 13964.201, 'duration': 1.722}, {'end': 13973.328, 'text': 'And we want to set status, right? And then we want to set red to true.', 'start': 13965.943, 'duration': 7.385}], 'summary': 'Setting all red values to true in a simple process using library and status.', 'duration': 29.012, 'max_score': 13944.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo13944316.jpg'}, {'end': 14038.23, 'src': 'embed', 'start': 14002.609, 'weight': 0, 'content': [{'end': 14008.811, 'text': 'is to destructure the title from the first book and rename the variable to first book.', 'start': 14002.609, 'duration': 6.202}, {'end': 14013.552, 'text': 'So we went over destructuring and naming a couple of videos back.', 'start': 14009.351, 'duration': 4.201}, {'end': 14014.752, 'text': "So let's do that.", 'start': 14013.812, 'duration': 0.94}, {'end': 14016.713, 'text': "We're going to go.", 'start': 14016.012, 'duration': 0.701}, {'end': 14023.874, 'text': "Let's just put a comment here and pause the video if you're going to do it on your own and say step two.", 'start': 14016.733, 'duration': 7.141}, {'end': 14029.956, 'text': 'And this is step one.', 'start': 14023.894, 'duration': 6.062}, {'end': 14038.23, 'text': "OK so step three we're going to destructure.", 'start': 14032.415, 'duration': 5.815}], 'summary': 'Destructure title from the first book, rename variable to first book, and proceed to step three.', 'duration': 35.621, 'max_score': 14002.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo14002609.jpg'}, {'end': 14227.531, 'src': 'embed', 'start': 14207.134, 'weight': 11, 'content': [{'end': 14216.902, 'text': "And execution context is something that I think you'll benefit in learning now rather than two years down the road.", 'start': 14207.134, 'duration': 9.768}, {'end': 14221.466, 'text': "So it's just the last, I think, two or three videos we'll be talking about that stuff.", 'start': 14217.382, 'duration': 4.084}, {'end': 14227.531, 'text': "You're not going to need to learn any any advanced code or anything like that.", 'start': 14223.047, 'duration': 4.484}], 'summary': 'Learn execution context now to benefit, last 2-3 videos cover it.', 'duration': 20.397, 'max_score': 14207.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo14207134.jpg'}, {'end': 14918.879, 'src': 'embed', 'start': 14891.403, 'weight': 2, 'content': [{'end': 14896.986, 'text': "Again, I'm going to go over for loops in depth later, but let's say const num.", 'start': 14891.403, 'duration': 5.583}, {'end': 14900.228, 'text': "So we're going to say num of numbers.", 'start': 14897.887, 'duration': 2.341}, {'end': 14904.491, 'text': "So basically for each one of the numbers, we're going to call it num.", 'start': 14900.989, 'duration': 3.502}, {'end': 14916.318, 'text': "And then I'm going to take that total variable and I'm going to use the plus equals here so that I can add num onto each one after every iteration.", 'start': 14905.011, 'duration': 11.307}, {'end': 14918.879, 'text': "And then I'm just going to return the total.", 'start': 14916.898, 'duration': 1.981}], 'summary': 'Explaining for loops and adding numbers to a total variable.', 'duration': 27.476, 'max_score': 14891.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo14891403.jpg'}, {'end': 15422.514, 'src': 'heatmap', 'start': 14987.326, 'weight': 0.87, 'content': [{'end': 15001.581, 'text': "i guess yeah, we'll just put the user and let's say that user has a name property with the id of and then we'll do user dot.", 'start': 14987.326, 'duration': 14.255}, {'end': 15012.347, 'text': 'id is logged in, okay, and then down here what we could do is we could pass it in a few ways.', 'start': 15001.581, 'duration': 10.766}, {'end': 15028.027, 'text': 'we could put it into a variable like this and we could give it an id and then a name and then we could call login user and we could pass in.', 'start': 15012.347, 'duration': 15.68}, {'end': 15036.791, 'text': 'That user and if I save actually we returned it so we need to actually console log it.', 'start': 15030.008, 'duration': 6.783}, {'end': 15047.675, 'text': 'So if I do that we get the user John with the idea of one is logged in OK or you could pass it in to another console log.', 'start': 15038.972, 'duration': 8.703}, {'end': 15051.597, 'text': 'You could also just pass in like this.', 'start': 15049.656, 'duration': 1.941}, {'end': 15058.612, 'text': "Let's put the object and let's say ID 2 and name Sarah.", 'start': 15052.366, 'duration': 6.246}, {'end': 15063.076, 'text': 'And then we get the user Sarah with the ID of 2 is logged in.', 'start': 15059.372, 'duration': 3.704}, {'end': 15070.493, 'text': "So we can also pass in arrays, let's say arrays as params.", 'start': 15064.429, 'duration': 6.064}, {'end': 15074.355, 'text': "And now I'm going to actually create a function finally that's semi useful.", 'start': 15070.873, 'duration': 3.482}, {'end': 15080.498, 'text': "So we'll create a function that will get a random number from a specific array that we pass in.", 'start': 15074.755, 'duration': 5.743}, {'end': 15087.102, 'text': "And if you want to pause the video and try this on your own, you can because we've already looked at how to get random numbers and stuff like that.", 'start': 15080.518, 'duration': 6.584}, {'end': 15089.303, 'text': 'So you can do that if you want.', 'start': 15088.183, 'duration': 1.12}, {'end': 15092.826, 'text': "But I'm just going to create a function called let's call it get.", 'start': 15089.444, 'duration': 3.382}, {'end': 15098.008, 'text': "random and it's going to take in an array.", 'start': 15094.665, 'duration': 3.343}, {'end': 15109.718, 'text': "And then first thing I'll do is generate a random index for the array, for the element that we're getting, because, remember,", 'start': 15098.028, 'duration': 11.69}, {'end': 15112.08, 'text': 'we access the element through indexes.', 'start': 15109.718, 'duration': 2.362}, {'end': 15115.023, 'text': "So let's say random index.", 'start': 15112.741, 'duration': 2.282}, {'end': 15121.556, 'text': "And we'll set that to math dot floor.", 'start': 15117.612, 'duration': 3.944}, {'end': 15122.897, 'text': "So we're going to round down.", 'start': 15121.796, 'duration': 1.101}, {'end': 15125.119, 'text': 'Remember this from a couple sections back.', 'start': 15122.917, 'duration': 2.202}, {'end': 15128.402, 'text': "So we're going to round down a random number.", 'start': 15125.799, 'duration': 2.603}, {'end': 15130.784, 'text': "Let's say math dot random.", 'start': 15128.422, 'duration': 2.362}, {'end': 15133.827, 'text': 'That gives us a decimal between zero and one.', 'start': 15131.244, 'duration': 2.583}, {'end': 15138.631, 'text': 'So we want to multiply that by the length of the array.', 'start': 15134.467, 'duration': 4.164}, {'end': 15141.341, 'text': "OK, so this is all stuff that we've looked at.", 'start': 15139.36, 'duration': 1.981}, {'end': 15143.881, 'text': 'So that will give me a random index.', 'start': 15142.121, 'duration': 1.76}, {'end': 15148.203, 'text': "Now I'm just going to create a variable called item and set it to the array.", 'start': 15144.422, 'duration': 3.781}, {'end': 15151.264, 'text': 'And then the index is going to be random.', 'start': 15148.763, 'duration': 2.501}, {'end': 15152.724, 'text': 'So random index.', 'start': 15151.584, 'duration': 1.14}, {'end': 15153.984, 'text': 'We want to use that here.', 'start': 15152.804, 'duration': 1.18}, {'end': 15160.146, 'text': "OK, and then we'll just return or we'll just console log.", 'start': 15154.004, 'duration': 6.142}, {'end': 15162.947, 'text': 'The item.', 'start': 15162.247, 'duration': 0.7}, {'end': 15168.769, 'text': "OK, and then let's just call down here, get random.", 'start': 15162.967, 'duration': 5.802}, {'end': 15174.647, 'text': 'And we just want to pass in an array and you can put whatever numbers you want in here.', 'start': 15170.544, 'duration': 4.103}, {'end': 15178.449, 'text': "We'll do one through 10 and you'll see nine.", 'start': 15175.387, 'duration': 3.062}, {'end': 15182.811, 'text': 'If I reload nine, ten, three, ten, eight.', 'start': 15178.529, 'duration': 4.282}, {'end': 15187.294, 'text': "So, yeah, it'll just generate a random number that you pass in.", 'start': 15183.932, 'duration': 3.362}, {'end': 15194.899, 'text': 'Now, remember the the the rest parameters that will give you an array of anything you pass in.', 'start': 15188.195, 'duration': 6.704}, {'end': 15200.082, 'text': 'So another thing we could do here is just add on that.', 'start': 15195.039, 'duration': 5.043}, {'end': 15205.447, 'text': 'And then automatically whatever we pass in gets put into an array,', 'start': 15201.604, 'duration': 3.843}, {'end': 15211.351, 'text': 'so I could actually get rid of the brackets here and save and I should get the same result,', 'start': 15205.447, 'duration': 5.904}, {'end': 15222.779, 'text': "which will give me a random number between any of these numbers I pass in and I didn't need to pass in an array because the rest rest operator will turn whatever I pass in into an array.", 'start': 15211.351, 'duration': 11.428}, {'end': 15229.564, 'text': "But I'm going to put it back to how I had it just because this is supposed to be showing you how to pass in an array.", 'start': 15223.38, 'duration': 6.184}, {'end': 15235.366, 'text': "All right, cool, so in the next video, we're gonna start to look at scope.", 'start': 15231.141, 'duration': 4.225}, {'end': 15244.336, 'text': "OK, so in this video we're going to talk about scope and in particular global and function scope.", 'start': 15238.652, 'duration': 5.684}, {'end': 15252.883, 'text': "Now scope, it's an important concept in JavaScript and it refers to the current area or the context of a specific piece of code.", 'start': 15244.817, 'duration': 8.066}, {'end': 15257.166, 'text': "And there's certain rules for what we can access in specific scopes.", 'start': 15253.203, 'duration': 3.963}, {'end': 15260.369, 'text': 'Now global means just what it sounds like.', 'start': 15257.747, 'duration': 2.622}, {'end': 15265.753, 'text': 'It means that your global variables are going to be accessible from absolutely anywhere.', 'start': 15260.509, 'duration': 5.244}, {'end': 15269.115, 'text': 'In fact, the browser has a window object.', 'start': 15266.213, 'duration': 2.902}, {'end': 15273.558, 'text': "If I go ahead and type in window in the console, we'll see the window object here.", 'start': 15269.355, 'duration': 4.203}, {'end': 15278.441, 'text': 'that has a ton of methods and properties that we can access from anywhere,', 'start': 15273.558, 'duration': 4.883}, {'end': 15283.524, 'text': "whether we're just in our global page scope or if we're in a function or in a block or whatever.", 'start': 15278.441, 'duration': 5.083}, {'end': 15288.046, 'text': 'In fact, alert, the method alert is on that window object.', 'start': 15284.004, 'duration': 4.042}, {'end': 15290.428, 'text': 'If I say window dot alert.', 'start': 15288.126, 'duration': 2.302}, {'end': 15296.365, 'text': "And I pass in here, let's say hello, and I save that and run it, then we're gonna see that pop up.", 'start': 15291.463, 'duration': 4.902}, {'end': 15304.529, 'text': "Now, since window is the topmost object, it's at the top level, we don't even need to do the window dot.", 'start': 15296.725, 'duration': 7.804}, {'end': 15307.45, 'text': "We could just do alert, which is what you'll usually see.", 'start': 15304.749, 'duration': 2.701}, {'end': 15316.63, 'text': "OK And then there's other things like for instance we can do window dot inner width and that will give us the browser's inner width.", 'start': 15308.402, 'duration': 8.228}, {'end': 15320.733, 'text': "So you'll see down here it's logging 455.", 'start': 15317.29, 'duration': 3.443}, {'end': 15328.701, 'text': "And again we don't need window but in this case on something like this on inner width I would keep the window but it's it's really preference.", 'start': 15320.733, 'duration': 7.968}, {'end': 15330.963, 'text': 'But just to show you I could do it without it.', 'start': 15329.021, 'duration': 1.942}, {'end': 15332.469, 'text': 'All right.', 'start': 15332.128, 'duration': 0.341}, {'end': 15338.338, 'text': 'Now we can access these these window object properties and methods from anywhere.', 'start': 15332.609, 'duration': 5.729}, {'end': 15343.848, 'text': 'If I were to create a function and say run and then run that function.', 'start': 15338.399, 'duration': 5.449}, {'end': 15348.962, 'text': "And in here, let's just do console log.", 'start': 15346.221, 'duration': 2.741}, {'end': 15353.904, 'text': "We'll do window dot, let's say, inner height, which is another property.", 'start': 15349.002, 'duration': 4.902}, {'end': 15358.305, 'text': "If I do that, it's going to show down here my window height is 136.", 'start': 15354.244, 'duration': 4.061}, {'end': 15362.007, 'text': "And it's measuring from here to the console.", 'start': 15358.305, 'duration': 3.702}, {'end': 15363.923, 'text': 'All right.', 'start': 15363.663, 'duration': 0.26}, {'end': 15369.748, 'text': "Now, as far as creating our own variables in the global scope, that's really what we've been doing.", 'start': 15364.103, 'duration': 5.645}, {'end': 15375.612, 'text': "If you're creating a variable that's not in a function or in a block or anything, that's in your global scope.", 'start': 15370.028, 'duration': 5.584}, {'end': 15378.32, 'text': "So let's say X equals 100.", 'start': 15375.712, 'duration': 2.608}, {'end': 15381.321, 'text': 'And obviously I can access it from the global scope.', 'start': 15378.32, 'duration': 3.001}, {'end': 15387.364, 'text': "If I do X, I'm just going to also put a string in here that says, we'll just say in global.", 'start': 15381.341, 'duration': 6.023}, {'end': 15388.565, 'text': 'Save that.', 'start': 15388.045, 'duration': 0.52}, {'end': 15390.846, 'text': "We're going to see 100 and in global.", 'start': 15388.585, 'duration': 2.261}, {'end': 15395.068, 'text': "Now since that's global, I can also access that in functions.", 'start': 15391.366, 'duration': 3.702}, {'end': 15400.57, 'text': "So I'll say console log X and let's say in function.", 'start': 15395.528, 'duration': 5.042}, {'end': 15401.291, 'text': 'Save it.', 'start': 15400.87, 'duration': 0.421}, {'end': 15403.992, 'text': 'And you can see we can access it there as well.', 'start': 15401.911, 'duration': 2.081}, {'end': 15411.128, 'text': "If I have a block like an if statement, which I know we haven't talked about yet, but just to show you real quick, if I say if true.", 'start': 15404.864, 'duration': 6.264}, {'end': 15414.45, 'text': 'So since I put true, whatever I put in here is going to run.', 'start': 15411.708, 'duration': 2.742}, {'end': 15418.932, 'text': "I'll do a console log of X and I'll say in block.", 'start': 15414.97, 'duration': 3.962}, {'end': 15420.093, 'text': 'Save that.', 'start': 15419.553, 'duration': 0.54}, {'end': 15422.514, 'text': "You can see we're accessing it from there as well.", 'start': 15420.193, 'duration': 2.321}], 'summary': 'The transcript discusses passing objects, arrays, and functions in javascript, and explains global and function scope.', 'duration': 435.188, 'max_score': 14987.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo14987326.jpg'}, {'end': 15522.353, 'src': 'embed', 'start': 15491.534, 'weight': 12, 'content': [{'end': 15491.794, 'text': 'All right.', 'start': 15491.534, 'duration': 0.26}, {'end': 15495.516, 'text': "So I'm just going to undo that and I'll comment this out to get rid of that error.", 'start': 15491.834, 'duration': 3.682}, {'end': 15502.647, 'text': 'Now I can access the global variable X inside of any function I want.', 'start': 15496.405, 'duration': 6.242}, {'end': 15510.563, 'text': "So if I were to go right here, let's say console log X plus Y and I'm going to get 150.", 'start': 15503.067, 'duration': 7.496}, {'end': 15510.843, 'text': 'All right.', 'start': 15510.563, 'duration': 0.28}, {'end': 15516.508, 'text': 'Now, if I were to in this add function, create a variable called X.', 'start': 15510.983, 'duration': 5.525}, {'end': 15518.89, 'text': "If I do that and save, you're going to see now we get 51.", 'start': 15516.508, 'duration': 2.382}, {'end': 15522.353, 'text': "It's adding this X and this Y.", 'start': 15518.89, 'duration': 3.463}], 'summary': 'Accessing global variable x inside function yields 150, adding local x and y yields 51.', 'duration': 30.819, 'max_score': 15491.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo15491534.jpg'}, {'end': 15571.7, 'src': 'embed', 'start': 15544.426, 'weight': 1, 'content': [{'end': 15548.828, 'text': "If we're talking about this one, then where the local scope is the global scope.", 'start': 15544.426, 'duration': 4.402}, {'end': 15549.618, 'text': 'All right.', 'start': 15549.318, 'duration': 0.3}, {'end': 15553.48, 'text': 'Now that is global and function scope.', 'start': 15550.179, 'duration': 3.301}, {'end': 15554.721, 'text': 'In the next video.', 'start': 15553.641, 'duration': 1.08}, {'end': 15559.944, 'text': "even though we haven't gone over like if statements and loops and stuff like that, which are blocks,", 'start': 15554.721, 'duration': 5.223}, {'end': 15562.946, 'text': 'I think this is a good place to talk about block scope.', 'start': 15559.944, 'duration': 3.002}, {'end': 15566.179, 'text': 'All right.', 'start': 15565.899, 'duration': 0.28}, {'end': 15569.22, 'text': 'So we talked about global scope and function scope.', 'start': 15566.239, 'duration': 2.981}, {'end': 15571.7, 'text': "Now we're going to talk about block level scope.", 'start': 15569.64, 'duration': 2.06}], 'summary': 'Discussion on global, function, and block level scope in javascript.', 'duration': 27.274, 'max_score': 15544.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo15544426.jpg'}, {'end': 16283.624, 'src': 'heatmap', 'start': 15848.901, 'weight': 0.734, 'content': [{'end': 15853.923, 'text': 'When we create a global variable with VAR, if we look at the window object.', 'start': 15848.901, 'duration': 5.022}, {'end': 15856.404, 'text': 'Just take a look here.', 'start': 15855.404, 'duration': 1}, {'end': 15861.536, 'text': "you'll see that it actually gets added to the window object.", 'start': 15857.674, 'duration': 3.862}, {'end': 15866.578, 'text': 'When we use letter const, that does not get added to the window object.', 'start': 15862.576, 'duration': 4.002}, {'end': 15868.358, 'text': "So you can see here there's no foo.", 'start': 15866.678, 'duration': 1.68}, {'end': 15874.381, 'text': "So that's another kind of difference between const and let and var.", 'start': 15869.239, 'duration': 5.142}, {'end': 15879.803, 'text': "And you're probably not going to want your global variables on the window object.", 'start': 15874.581, 'duration': 5.222}, {'end': 15888.315, 'text': "All right guys so now we're going to look at how scope works with nested functions and nested blocks.", 'start': 15882.631, 'duration': 5.684}, {'end': 15894.719, 'text': "Now nested functions relate to something called closures, and we'll look at ways to use closures later on,", 'start': 15888.775, 'duration': 5.944}, {'end': 15897.881, 'text': "but I think it's a bit too early to learn them.", 'start': 15894.719, 'duration': 3.162}, {'end': 15904.386, 'text': 'A lot of people are intimidated by them but we can at least look at how scopes work with nested functions.', 'start': 15897.941, 'duration': 6.445}, {'end': 15906.727, 'text': "So let's go ahead and create a function.", 'start': 15904.866, 'duration': 1.861}, {'end': 15911.971, 'text': "I'm going to call it first and then in first we'll create a variable.", 'start': 15906.747, 'duration': 5.224}, {'end': 15914.853, 'text': 'Called x, set it to 100.', 'start': 15912.731, 'duration': 2.122}, {'end': 15917.576, 'text': 'And then what I can do here is nest another function.', 'start': 15914.853, 'duration': 2.723}, {'end': 15919.337, 'text': "So I'm going to call this one second.", 'start': 15917.596, 'duration': 1.741}, {'end': 15922.38, 'text': "Okay, so it's nested inside first.", 'start': 15919.357, 'duration': 3.023}, {'end': 15927.205, 'text': "And here we'll create a variable called y and set that to 200.", 'start': 15923.281, 'duration': 3.924}, {'end': 15931.208, 'text': "And then in second, I'm going to console.log x.", 'start': 15927.205, 'duration': 4.003}, {'end': 15933.884, 'text': 'plus Y.', 'start': 15932.483, 'duration': 1.401}, {'end': 15938.205, 'text': 'Now, in order for a second to run, I have to call it within first.', 'start': 15933.884, 'duration': 4.321}, {'end': 15940.546, 'text': "Right So we're going to run second here.", 'start': 15938.565, 'duration': 1.981}, {'end': 15943.547, 'text': 'And in order for first to run, I have to call it here.', 'start': 15940.826, 'duration': 2.721}, {'end': 15945.828, 'text': "So I'm going to go ahead and save that.", 'start': 15943.567, 'duration': 2.261}, {'end': 15948.365, 'text': "And you'll see I get 300.", 'start': 15945.968, 'duration': 2.397}, {'end': 15957.809, 'text': 'So you can see I can access from the parent function from I should say from the child I can access any variables that are in the parent scope.', 'start': 15948.365, 'duration': 9.444}, {'end': 15960.571, 'text': "However it doesn't work the other way around.", 'start': 15958.33, 'duration': 2.241}, {'end': 15964.412, 'text': "I can't access from the parent variables in the child scope.", 'start': 15960.711, 'duration': 3.701}, {'end': 15970.275, 'text': "So if I if in first I try and console log why then that's going to give me an error.", 'start': 15964.452, 'duration': 5.823}, {'end': 15976.689, 'text': "OK, so remember, you can access parent variables, but you can't access child variables.", 'start': 15971.147, 'duration': 5.542}, {'end': 15978.55, 'text': "So they're two separate scopes.", 'start': 15977.129, 'duration': 1.421}, {'end': 15982.192, 'text': "Now, it's very similar with blocks.", 'start': 15979.31, 'duration': 2.882}, {'end': 15984.072, 'text': "So let's go down here.", 'start': 15982.552, 'duration': 1.52}, {'end': 15987.054, 'text': "Let's say if we'll just say if true.", 'start': 15984.092, 'duration': 2.962}, {'end': 15994.357, 'text': "And then in here, I'm going to say const X and I'm on a different scope so I can use X.", 'start': 15988.274, 'duration': 6.083}, {'end': 15997.678, 'text': "And then let's say we have another if a nested if.", 'start': 15994.357, 'duration': 3.321}, {'end': 16004.809, 'text': "And here we'll say if X equals 100.", 'start': 15998.807, 'duration': 6.002}, {'end': 16007.03, 'text': "And again, I know we haven't gone over if statements.", 'start': 16004.809, 'duration': 2.221}, {'end': 16008.13, 'text': "We're going to get to that soon.", 'start': 16007.13, 'duration': 1}, {'end': 16009.151, 'text': 'I just want to show you this.', 'start': 16008.17, 'duration': 0.981}, {'end': 16016.573, 'text': "This is kind of the same type of thing where we have, let's say, Y and we can console log here.", 'start': 16009.271, 'duration': 7.302}, {'end': 16019.794, 'text': "Let's say X plus Y.", 'start': 16017.233, 'duration': 2.561}, {'end': 16025.136, 'text': "And if I save that, we have to comment this out because it's giving us an error.", 'start': 16019.794, 'duration': 5.342}, {'end': 16030.051, 'text': "If I comment that out, you'll see we get 300, right? Because I'm able to access here.", 'start': 16025.589, 'duration': 4.462}, {'end': 16034.614, 'text': "I'm able to access the parent scopes variable of X.", 'start': 16030.091, 'duration': 4.523}, {'end': 16044.487, 'text': "But if I go outside of this child if or this nested if, and I try to console log y, which was created in there, then that's not going to work.", 'start': 16034.614, 'duration': 9.873}, {'end': 16048.17, 'text': "okay?. Because this is a separate scope that I can't access.", 'start': 16044.487, 'duration': 3.683}, {'end': 16051.433, 'text': 'But you can access the parent from within the child.', 'start': 16048.71, 'duration': 2.723}, {'end': 16053.114, 'text': 'So hopefully that makes sense.', 'start': 16051.993, 'duration': 1.121}, {'end': 16058.719, 'text': "I know it's a little confusing, but I figured this was a good place to mention this since we're talking about scope.", 'start': 16053.154, 'duration': 5.565}, {'end': 16069.826, 'text': 'OK so up to this point we know how to declare functions and invoke them or call them or execute them whatever however you want to put it.', 'start': 16061.96, 'duration': 7.866}, {'end': 16074.59, 'text': "There is another way that we can create functions and that's with a function expression.", 'start': 16070.387, 'duration': 4.203}, {'end': 16078.132, 'text': "So let's first declare a function just like we've been doing.", 'start': 16075.09, 'duration': 3.042}, {'end': 16079.614, 'text': "So I'll say function.", 'start': 16078.213, 'duration': 1.401}, {'end': 16082.416, 'text': 'This is called a function declaration.', 'start': 16079.634, 'duration': 2.782}, {'end': 16090.462, 'text': "Right So we do that by just putting the function keyword first and then let's call this add dollar sign.", 'start': 16083.277, 'duration': 7.185}, {'end': 16095.645, 'text': 'And what this will do is take in a value and then just prefix it with a dollar sign.', 'start': 16091.002, 'duration': 4.643}, {'end': 16102.29, 'text': "So we'll return from this a string with a dollar sign and then we'll just concatenate the value.", 'start': 16095.685, 'duration': 6.605}, {'end': 16108.534, 'text': "And then if we want to invoke it, we can just let's let's do it in a console log since this is returning.", 'start': 16103.01, 'duration': 5.524}, {'end': 16109.735, 'text': "So we'll say add.", 'start': 16109.114, 'duration': 0.621}, {'end': 16114.709, 'text': "dollar sign and let's pass in here one hundred.", 'start': 16111.587, 'duration': 3.122}, {'end': 16116.91, 'text': 'So if I save that we get one hundred dollars.', 'start': 16114.749, 'duration': 2.161}, {'end': 16118.952, 'text': "So that's a function declaration.", 'start': 16117.491, 'duration': 1.461}, {'end': 16123.174, 'text': 'We start off with the word function and then name it and so on.', 'start': 16119.012, 'duration': 4.162}, {'end': 16130.759, 'text': 'But we can also use a function expression where we actually create a variable.', 'start': 16123.675, 'duration': 7.084}, {'end': 16132.881, 'text': "So let's call this add plus sign.", 'start': 16130.859, 'duration': 2.022}, {'end': 16137.964, 'text': 'Same idea but with a plus sign and we set that equal to a function.', 'start': 16132.961, 'duration': 5.003}, {'end': 16143.724, 'text': "And that will take in a value and then we'll go ahead and just return.", 'start': 16139.022, 'duration': 4.702}, {'end': 16148.926, 'text': "We'll do a plus sign and then we'll concatenate the value.", 'start': 16145.004, 'duration': 3.922}, {'end': 16158.61, 'text': "And then if we want to invoke it, we can do a console log and say add plus sign and let's do 200.", 'start': 16149.726, 'duration': 8.884}, {'end': 16161.738, 'text': 'And if I save that, we get plus 200.', 'start': 16158.61, 'duration': 3.128}, {'end': 16164.979, 'text': 'So notice that we invoke them the same exact way.', 'start': 16161.738, 'duration': 3.241}, {'end': 16169.36, 'text': "We just call the function, pass in a value, but they're declared differently.", 'start': 16165.199, 'duration': 4.161}, {'end': 16172.001, 'text': 'The expression is just a variable.', 'start': 16169.68, 'duration': 2.321}, {'end': 16173.882, 'text': "It's a function assigned to a variable.", 'start': 16172.101, 'duration': 1.781}, {'end': 16176.842, 'text': "Now in JavaScript, you don't have to use semicolons.", 'start': 16174.482, 'duration': 2.36}, {'end': 16177.583, 'text': "They're optional.", 'start': 16176.862, 'duration': 0.721}, {'end': 16181.164, 'text': 'But notice at the end of the expression, we do have a semicolon.', 'start': 16177.743, 'duration': 3.421}, {'end': 16185.165, 'text': "We don't add a semicolon to the end of a function declaration.", 'start': 16181.524, 'duration': 3.641}, {'end': 16191.244, 'text': 'Now, there are some differences here and it comes down to something called hoisting.', 'start': 16186.081, 'duration': 5.163}, {'end': 16196.428, 'text': "Now, I'm not going to really go into hoisting as far as how it works right now.", 'start': 16191.805, 'duration': 4.623}, {'end': 16199.93, 'text': "I'll do that later when we talk about something called the execution context.", 'start': 16196.528, 'duration': 3.402}, {'end': 16202.071, 'text': 'But in very simple terms,', 'start': 16200.41, 'duration': 1.661}, {'end': 16210.957, 'text': 'hoisting is the process of moving all the function and variable declarations to the top of the current scope before the code is run.', 'start': 16202.071, 'duration': 8.886}, {'end': 16214.479, 'text': 'So you can think of it before your code is actually executed.', 'start': 16211.417, 'duration': 3.062}, {'end': 16225.307, 'text': 'You can think of a step before that where it goes through and it looks for all your funk function declarations and your expressions and your variables and puts it all at the put puts,', 'start': 16214.8, 'duration': 10.507}, {'end': 16226.909, 'text': 'all those at the top of the page.', 'start': 16225.307, 'duration': 1.602}, {'end': 16233.873, 'text': 'Now, even though this happens, only function declarations are available before the code is executed.', 'start': 16227.549, 'duration': 6.324}, {'end': 16235.234, 'text': 'So let me show you what I mean.', 'start': 16234.073, 'duration': 1.161}, {'end': 16246.682, 'text': "If I take this right here where I'm calling add dollar sign and I move it up above where it's actually declared and I save that, it works.", 'start': 16235.294, 'duration': 11.388}, {'end': 16253.885, 'text': "Which might seem a little weird because we're calling add dollar sign before we actually defined it.", 'start': 16247.697, 'duration': 6.188}, {'end': 16256.788, 'text': 'So how does it know that? And the reason for that is hoisting.', 'start': 16253.945, 'duration': 2.843}, {'end': 16265.038, 'text': 'Because again, you can think of it as a separate step before your code is actually executed where this is moved up top.', 'start': 16257.088, 'duration': 7.95}, {'end': 16271.841, 'text': 'Now, like I said, only declarations are available before the code is executed.', 'start': 16265.939, 'duration': 5.902}, {'end': 16274.081, 'text': 'So if I do the same with an expression,', 'start': 16271.901, 'duration': 2.18}, {'end': 16283.624, 'text': 'if I take this console log and I move it above where we define it and I save that it says uncaught reference error cannot access.', 'start': 16274.081, 'duration': 9.543}], 'summary': 'Key differences between var, let, and const; how scopes work with nested functions and blocks; the distinction between function declaration and expression; and the concept of hoisting.', 'duration': 434.723, 'max_score': 15848.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo15848901.jpg'}, {'end': 15922.38, 'src': 'embed', 'start': 15897.941, 'weight': 3, 'content': [{'end': 15904.386, 'text': 'A lot of people are intimidated by them but we can at least look at how scopes work with nested functions.', 'start': 15897.941, 'duration': 6.445}, {'end': 15906.727, 'text': "So let's go ahead and create a function.", 'start': 15904.866, 'duration': 1.861}, {'end': 15911.971, 'text': "I'm going to call it first and then in first we'll create a variable.", 'start': 15906.747, 'duration': 5.224}, {'end': 15914.853, 'text': 'Called x, set it to 100.', 'start': 15912.731, 'duration': 2.122}, {'end': 15917.576, 'text': 'And then what I can do here is nest another function.', 'start': 15914.853, 'duration': 2.723}, {'end': 15919.337, 'text': "So I'm going to call this one second.", 'start': 15917.596, 'duration': 1.741}, {'end': 15922.38, 'text': "Okay, so it's nested inside first.", 'start': 15919.357, 'duration': 3.023}], 'summary': 'Demonstrating nested functions and scopes with an example of creating and nesting functions within each other.', 'duration': 24.439, 'max_score': 15897.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo15897941.jpg'}, {'end': 16618.626, 'src': 'embed', 'start': 16589.205, 'weight': 15, 'content': [{'end': 16593.186, 'text': "So to give you an example, let's say const, we'll call this function just create.", 'start': 16589.205, 'duration': 3.981}, {'end': 16599.43, 'text': "object and doesn't have to take anything in.", 'start': 16595.627, 'duration': 3.803}, {'end': 16603.313, 'text': "but let's say i want this to return an object that has a name.", 'start': 16599.43, 'duration': 3.883}, {'end': 16613.662, 'text': "you know, just do that and then, if i save, you'll see that prettier automatically thinks to put a semicolon here,", 'start': 16603.313, 'duration': 10.349}, {'end': 16618.626, 'text': "which obviously isn't what i want if i'm trying to make this an object.", 'start': 16613.662, 'duration': 4.964}], 'summary': 'Example of a function creating an object with a name, causing an unwanted semicolon to be added.', 'duration': 29.421, 'max_score': 16589.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo16589205.jpg'}, {'end': 16692.082, 'src': 'embed', 'start': 16666.467, 'weight': 8, 'content': [{'end': 16670.989, 'text': "And we haven't gone over this yet, but we'll be getting deep into these types of methods later on.", 'start': 16666.467, 'duration': 4.522}, {'end': 16677.733, 'text': 'But just to show you, if we do numbers for each, what you pass in here is a function.', 'start': 16671.57, 'duration': 6.163}, {'end': 16679.914, 'text': 'OK, and you could do it like this.', 'start': 16677.753, 'duration': 2.161}, {'end': 16686.418, 'text': 'You could just pass in a regular anonymous function and just pass in whatever you want to use for each number.', 'start': 16679.954, 'duration': 6.464}, {'end': 16687.719, 'text': "I'll just use a variable called N.", 'start': 16686.478, 'duration': 1.241}, {'end': 16690.822, 'text': "And then I'll just do a console log of N.", 'start': 16688.598, 'duration': 2.224}, {'end': 16692.082, 'text': 'I save that.', 'start': 16690.822, 'duration': 1.26}], 'summary': 'Introduction to passing functions and using variables for each number.', 'duration': 25.615, 'max_score': 16666.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo16666467.jpg'}, {'end': 16869.234, 'src': 'embed', 'start': 16841.789, 'weight': 14, 'content': [{'end': 16847.699, 'text': "And we can say that this is coming from some other library that we didn't even write so that another developer created.", 'start': 16841.789, 'duration': 5.91}, {'end': 16849.923, 'text': "So we'll say another script JS.", 'start': 16848.26, 'duration': 1.663}, {'end': 16854.772, 'text': "If I include that, now we're seeing that that Brad value, which is in this user variable.", 'start': 16849.943, 'duration': 4.829}, {'end': 16860.188, 'text': "Now, let's say in our script, well, we want to have a variable called user as well.", 'start': 16855.464, 'duration': 4.724}, {'end': 16862.729, 'text': "So I'm going to set const user to John.", 'start': 16860.228, 'duration': 2.501}, {'end': 16869.234, 'text': "And as soon as I do that and save and it runs, I'm going to get this user has already been declared,", 'start': 16863.29, 'duration': 5.944}], 'summary': 'The script involves including a library, creating variables, and encountering an error when redeclaring a variable.', 'duration': 27.445, 'max_score': 16841.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo16841789.jpg'}], 'start': 13921.859, 'title': 'Javascript functions and scope', 'summary': 'Covers manipulating javascript objects, functions and scope basics, javascript scope and function parameters, function declarations and expressions, arrow functions and immediately invoked functions, and javascript function challenges, with practical examples and demonstrations.', 'chapters': [{'end': 14144.131, 'start': 13921.859, 'title': 'Manipulating javascript objects', 'summary': "Demonstrates manipulating javascript objects by setting 'read' value to true for all books, destructuring the title from the first book and renaming the variable to 'first book', and turning the library object into a json string.", 'duration': 222.272, 'highlights': ["Step 2: Setting 'read' value to true for all books in the library.", 'Step 4: Turning the library object into a JSON string.', "Step 3: Destructuring the title from the first book and renaming the variable to 'first book'.", 'Step 1: Creating an array with three objects with specified properties.']}, {'end': 14918.879, 'start': 14145.071, 'title': 'Functions and scope basics', 'summary': 'Covers the basics of functions and scope in javascript, including creating basic functions, using parameters and arguments, understanding function scope, defining default parameters, and utilizing rest parameters for handling variable arguments.', 'duration': 773.808, 'highlights': ['Creating Basic Functions Functions are important in programming to create blocks of code that can be run anywhere and at any time, allowing for more readable and easier to understand code.', 'Parameters and Arguments Explains the difference between parameters and arguments, demonstrating how to pass data into a function using parameters and arguments.', 'Function Scope and Default Parameters Discusses function scope and provides examples of using default parameters to set initial values for function parameters.', 'Rest Parameters Introduces rest parameters for handling variable arguments, demonstrating how to gather multiple function arguments into an array and perform operations on them.']}, {'end': 16051.433, 'start': 14919.85, 'title': 'Javascript scope and function parameters', 'summary': 'Covers the use of rest parameters to pass an unlimited number of arguments into an array, using objects and arrays as function parameters, and understanding global, function, and block level scope in javascript, including the differences between using var, let, and const for variable declaration.', 'duration': 1131.583, 'highlights': ['The chapter covers the use of rest parameters to pass an unlimited number of arguments into an array. The transcript explains how the rest operator allows for an unlimited number of arguments to be passed into a function, which are then placed into an array.', 'Understanding global, function, and block level scope in JavaScript. The transcript delves into the concept of scope in JavaScript, explaining global scope, function scope, and block level scope, and how variables can be accessed within these different scopes.', 'The differences between using var, let, and const for variable declaration. The transcript highlights the differences between var, let, and const for variable declaration, emphasizing how var is not block level scoped, while let and const are, and how using var can lead to accessing variables outside of their intended scope.']}, {'end': 16644.342, 'start': 16051.993, 'title': 'Function declarations and expressions in javascript', 'summary': 'Explains the concept of function declarations and expressions in javascript, illustrating the difference between using function declarations and expressions, including examples and the concept of hoisting.', 'duration': 592.349, 'highlights': ['The chapter explains the concept of function declarations and expressions in JavaScript It provides an overview of creating functions using function declarations and expressions and their usage in JavaScript.', 'Illustrating the difference between using function declarations and expressions, including examples It compares and contrasts the syntax and usage of function declarations and expressions through examples, demonstrating the differences in their implementation.', 'The concept of hoisting It introduces the concept of hoisting, explaining how function and variable declarations are moved to the top of the current scope before code execution, with practical examples of hoisting in function declarations and expressions.']}, {'end': 17058.33, 'start': 16645.153, 'title': 'Arrow functions and immediately invoked functions', 'summary': 'Introduces arrow functions as a concise alternative to regular functions, demonstrating their use in array methods like foreach, and then explains the concept of immediately invoked functions (iife) to avoid global scope pollution, with examples and benefits.', 'duration': 413.177, 'highlights': ['The chapter introduces arrow functions as a concise alternative to regular functions, demonstrating their use in array methods like forEach. Arrow functions are shown as a neater and more concise alternative to regular anonymous functions, demonstrated in the context of the forEach method on arrays.', 'The concept of immediately invoked functions (IIFE) is explained to avoid global scope pollution, with examples and benefits. The concept of immediately invoked functions is explained, highlighting their use to prevent global scope pollution, with a demonstration of creating a function and invoking it at the same time, along with the benefits of using IIFE.']}, {'end': 17796.114, 'start': 17058.33, 'title': 'Javascript function challenges', 'summary': 'Covers javascript function challenges including creating a named function, converting it into a one line arrow function, and solving challenges related to temperature conversion, finding the minimum and maximum numbers in an array, and creating an iife to calculate the area of a rectangle.', 'duration': 737.784, 'highlights': ['Creating a named function and converting it into a one line arrow function for temperature conversion The chapter explains creating a function called getCelsius that takes a temperature in Fahrenheit as an argument and returns the temperature in Celsius. It also demonstrates converting it into a one line arrow function, achieving the expected result of Fahrenheit to Celsius conversion and displaying the output as a string.', 'Solving a challenge to find the minimum and maximum numbers in an array The chapter presents a challenge to create an arrow function called minmax that takes in an array of numbers and returns an object with the minimum and maximum numbers in the array. It provides a detailed explanation using the math.min and math.max methods along with the spread operator to achieve the desired output.', 'Creating an IIFE to calculate the area of a rectangle and logging the result to the console The chapter introduces a challenge to create an IIFE that takes in the length and width of a rectangle and outputs the area to the console as soon as the page loads. It demonstrates how to use an arrow function within an IIFE to calculate the area and log the message with varying input values.']}], 'duration': 3874.255, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo13921859.jpg', 'highlights': ['The chapter covers manipulating javascript objects, functions, and scope basics with practical examples.', 'Creating an array with three objects with specified properties.', 'Turning the library object into a JSON string.', "Destructuring the title from the first book and renaming the variable to 'first book'.", 'Explains the difference between parameters and arguments, demonstrating how to pass data into a function using parameters and arguments.', 'Introduces rest parameters for handling variable arguments, demonstrating how to gather multiple function arguments into an array and perform operations on them.', 'The chapter covers the use of rest parameters to pass an unlimited number of arguments into an array.', 'Understanding global, function, and block level scope in JavaScript.', 'The differences between using var, let, and const for variable declaration.', 'The chapter explains the concept of function declarations and expressions in JavaScript.', 'Illustrating the difference between using function declarations and expressions, including examples.', 'The concept of hoisting and its practical examples in function declarations and expressions.', 'The chapter introduces arrow functions as a concise alternative to regular functions.', 'The concept of immediately invoked functions (IIFE) is explained to avoid global scope pollution, with examples and benefits.', 'Creating a named function and converting it into a one line arrow function for temperature conversion.', 'Solving a challenge to find the minimum and maximum numbers in an array using arrow function.', 'Creating an IIFE to calculate the area of a rectangle and logging the result to the console.']}, {'end': 18906.694, 'segs': [{'end': 17914.375, 'src': 'embed', 'start': 17882.869, 'weight': 1, 'content': [{'end': 17887.232, 'text': "And when it's first created, that's called the global execution context.", 'start': 17882.869, 'duration': 4.363}, {'end': 17889.373, 'text': 'You can think of it as like the global scope.', 'start': 17887.512, 'duration': 1.861}, {'end': 17898.139, 'text': 'And then any time you invoke a function, that function will have its own execution context that will last for the span of the function.', 'start': 17889.973, 'duration': 8.166}, {'end': 17902.002, 'text': 'When the function is done, then that function execution context is done.', 'start': 17898.579, 'duration': 3.423}, {'end': 17907.47, 'text': 'Now to kind of visualize the execution context, I created this box.', 'start': 17902.867, 'duration': 4.603}, {'end': 17914.375, 'text': "So you can think of it as a box with two sides where you have your variable, what's called the variable environment on one side.", 'start': 17907.49, 'duration': 6.885}], 'summary': 'Javascript has global execution context and function-specific execution contexts.', 'duration': 31.506, 'max_score': 17882.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo17882869.jpg'}, {'end': 18231.551, 'src': 'embed', 'start': 18202.598, 'weight': 5, 'content': [{'end': 18207.379, 'text': "It's going to now invoke get some because remember in the execution phase.", 'start': 18202.598, 'duration': 4.781}, {'end': 18208.44, 'text': 'So this is a function.', 'start': 18207.419, 'duration': 1.021}, {'end': 18213.621, 'text': "It's going to get run and it's going to create a new function execution context.", 'start': 18208.9, 'duration': 4.721}, {'end': 18214.601, 'text': 'All right.', 'start': 18214.301, 'duration': 0.3}, {'end': 18219.902, 'text': 'Now remember when we when a new execution context is created it has two phases once again.', 'start': 18214.641, 'duration': 5.261}, {'end': 18222.943, 'text': "So now we're going to be in the memory creation phase for.", 'start': 18220.022, 'duration': 2.921}, {'end': 18231.551, 'text': 'that get some function execution context, so you can think of it as like a nested execution context.', 'start': 18223.403, 'duration': 8.148}], 'summary': 'A function is invoked, creating a new function execution context with two phases: memory creation and execution.', 'duration': 28.953, 'max_score': 18202.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo18202598.jpg'}, {'end': 18367.199, 'src': 'embed', 'start': 18339.279, 'weight': 2, 'content': [{'end': 18345.205, 'text': "Once we hit seven, it sees there's a function that opens up another execution context for the function.", 'start': 18339.279, 'duration': 5.926}, {'end': 18352.653, 'text': 'OK, and then it goes through the memory phase for the function, then the execution phase for the function and then moves to line eight.', 'start': 18345.686, 'duration': 6.967}, {'end': 18355.315, 'text': "And it'll have to do the same thing because we hit another function.", 'start': 18352.753, 'duration': 2.562}, {'end': 18356.356, 'text': 'All right.', 'start': 18356.096, 'duration': 0.26}, {'end': 18367.199, 'text': "So this doesn't really affect how you write your code right now, but it will benefit you in the future just knowing how this works behind the scenes.", 'start': 18356.516, 'duration': 10.683}], 'summary': 'Understanding function execution context and memory phase.', 'duration': 27.92, 'max_score': 18339.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo18339279.jpg'}, {'end': 18425.761, 'src': 'embed', 'start': 18383.725, 'weight': 0, 'content': [{'end': 18393.129, 'text': 'we talked about execution context and we stepped through a block of code and I showed you what happened during the memory creation phase and the execution phase.', 'start': 18383.725, 'duration': 9.404}, {'end': 18395.05, 'text': "Well here I'm going to do the same thing.", 'start': 18393.509, 'duration': 1.541}, {'end': 18398.231, 'text': 'You can see I have the same exact code in in my V.S.', 'start': 18395.07, 'duration': 3.161}, {'end': 18404.454, 'text': "code and we're going to do the same thing from within the browser and we can do that by using the sources tab.", 'start': 18398.291, 'duration': 6.163}, {'end': 18412.517, 'text': "in the dev tools and over here you'll see our files and if I click on script.js we're going to see this the same code right here.", 'start': 18405.174, 'duration': 7.343}, {'end': 18420.959, 'text': "Now using the debugger I can put what we call a breakpoint anywhere I want and that's going to stop the code from running at that point.", 'start': 18413.197, 'duration': 7.762}, {'end': 18425.761, 'text': "So what I'm going to do is put it right at the beginning so it's actually not going to execute the script.", 'start': 18421.34, 'duration': 4.421}], 'summary': 'Execution context and code analysis demonstrated using vs code and browser debugger.', 'duration': 42.036, 'max_score': 18383.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo18383725.jpg'}, {'end': 18494.184, 'src': 'embed', 'start': 18470.49, 'weight': 3, 'content': [{'end': 18479.335, 'text': 'One interesting thing is if you used VAR instead of const or let, then those variables would be put on the global scope as well.', 'start': 18470.49, 'duration': 8.845}, {'end': 18483.658, 'text': 'And that we can get into hoisting and stuff later on.', 'start': 18480.096, 'duration': 3.562}, {'end': 18492.403, 'text': 'But what I want to show you now is if I step through this so I can use this little arrow icon to execute the line, the code line by line,', 'start': 18484.298, 'duration': 8.105}, {'end': 18494.184, 'text': "and you're going to see what happens over here.", 'start': 18492.403, 'duration': 1.781}], 'summary': 'Using var instead of const or let places variables in global scope.', 'duration': 23.694, 'max_score': 18470.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo18470490.jpg'}], 'start': 17796.194, 'title': 'Javascript execution context', 'summary': 'Discusses the creation of global execution context, two sides of execution context box, single-threaded and synchronous nature of javascript, memory creation phase, memory creation and execution phase, demonstrating nested execution context for functions, and emphasizing the last in, first out (lifo) nature of the call stack.', 'chapters': [{'end': 18053.395, 'start': 17796.194, 'title': 'Execution context in javascript', 'summary': "Discusses the execution context in javascript, covering the creation of the global execution context, the two sides of the execution context box, the single-threaded and synchronous nature of javascript, and the memory creation phase that involves creating the global object, the 'this' object, setting up the memory heap, and setting the value of variables and functions to undefined.", 'duration': 257.201, 'highlights': ["JavaScript is single threaded and synchronous, executed line by line. JavaScript's single-threaded and synchronous nature means it is executed line by line, providing a fundamental understanding of how the code is executed.", "Creation of the global execution context and its resemblance to the global scope. The global execution context is analogous to the global scope and is created when the code initially runs, providing a foundational environment for the code's execution.", 'Description of the two sides of the execution context box: variable environment and thread of execution. The execution context box consists of the variable environment, storing variables and functions as key-value pairs in memory, and the thread of execution, where the code is executed line by line.', "Memory creation phase involves creating the global object, 'this' object, setting up the memory heap, and setting the value of variables and functions to undefined. During the memory creation phase, the global object (e.g., window in the browser), the 'this' object, and the memory heap for storing variables and function references are established, with all values initially set to undefined."]}, {'end': 18425.761, 'start': 18053.395, 'title': 'Understanding javascript execution context', 'summary': 'Explains the two phases of javascript execution context, memory creation, and execution phase, using a simple code example to emphasize the process of putting variables and functions into memory and then executing the code, creating a nested execution context for functions and demonstrating the use of browser debugger for code execution.', 'duration': 372.366, 'highlights': ['The chapter explains the two phases of JavaScript execution context, memory creation, and execution phase. Explains the two phases of JavaScript execution context.', 'The chapter uses a simple code example to emphasize the process of putting variables and functions into memory and then executing the code. Emphasizes the process of putting variables and functions into memory and then executing the code.', 'The chapter demonstrates creating a nested execution context for functions. Demonstrates creating a nested execution context for functions.', 'The chapter explains the use of browser debugger for code execution. Explains the use of browser debugger for code execution.']}, {'end': 18906.694, 'start': 18426.301, 'title': 'Javascript execution and call stack', 'summary': 'Explains the process of memory creation phase, function execution, and the call stack in javascript, emphasizing the last in, first out (lifo) nature of the call stack and demonstrating its operation through code examples and browser debugging.', 'duration': 480.393, 'highlights': ['The memory creation phase puts variables in memory and sets them to undefined before the execution, and functions get stored in memory along with the entire code in the function. The memory creation phase sets variables like x, y, someone, and some two to undefined in memory before the execution. Functions are stored in memory, and the entire code in the function is stored as well.', 'Functions create a new function execution context when invoked, and the call stack operates as a last in, first out (LIFO) data structure, managing the execution contexts. When a function is invoked, it creates a new function execution context. The call stack operates as a last in, first out (LIFO) data structure, managing the execution contexts, with the global execution context at the bottom.', 'Demonstrates the operation of the call stack using code examples and browser debugging to show how functions are pushed onto the call stack and popped off after execution. The speaker demonstrates the operation of the call stack using code examples and browser debugging, showing how functions are pushed onto the call stack and popped off after execution, in line with the last in, first out (LIFO) nature.']}], 'duration': 1110.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo17796194.jpg', 'highlights': ['JavaScript is single threaded and synchronous, executed line by line. Provides fundamental understanding of code execution.', 'Creation of global execution context resembling global scope. Foundational environment for code execution.', 'Description of two sides of execution context box: variable environment and thread of execution. Consists of variable environment and line-by-line code execution.', "Memory creation phase involves creating global object, 'this' object, setting up memory heap, and setting value of variables and functions to undefined. Establishes global object, 'this' object, and memory heap with initial values set to undefined.", 'Two phases of JavaScript execution context: memory creation and execution phase. Emphasizes putting variables and functions into memory and executing the code.', 'Demonstrates creating nested execution context for functions.', 'Use of browser debugger for code execution.', 'Memory creation phase sets variables to undefined and stores functions in memory along with entire code in function. Functions create new function execution context when invoked. Call stack operates as last in, first out (LIFO) data structure, managing execution contexts.', 'Operation of call stack using code examples and browser debugging. Functions pushed onto call stack and popped off after execution, in line with last in, first out (LIFO) nature.']}, {'end': 20092.903, 'segs': [{'end': 19252.688, 'src': 'embed', 'start': 19222.428, 'weight': 2, 'content': [{'end': 19224.989, 'text': "It doesn't really matter what I want to show you here.", 'start': 19222.428, 'duration': 2.561}, {'end': 19229.184, 'text': 'If I save that we get 20 is 20.', 'start': 19225.922, 'duration': 3.262}, {'end': 19236.17, 'text': "But if I were to try to access that Z variable I can't do that.", 'start': 19229.184, 'duration': 6.986}, {'end': 19237.451, 'text': 'Z is not defined.', 'start': 19236.31, 'duration': 1.141}, {'end': 19239.372, 'text': "And that's because I use const.", 'start': 19237.811, 'duration': 1.561}, {'end': 19244.816, 'text': 'If I use let here to define Z I get the same thing.', 'start': 19239.472, 'duration': 5.344}, {'end': 19245.937, 'text': 'If I use var.', 'start': 19244.956, 'duration': 0.981}, {'end': 19251.426, 'text': 'It actually works because VAR is not block level scoped.', 'start': 19247.682, 'duration': 3.744}, {'end': 19252.688, 'text': "It's function scoped.", 'start': 19251.646, 'duration': 1.042}], 'summary': 'Using const or let to define z results in z being not accessible, but using var makes it function scoped.', 'duration': 30.26, 'max_score': 19222.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo19222428.jpg'}, {'end': 19763.905, 'src': 'embed', 'start': 19733.321, 'weight': 0, 'content': [{'end': 19739.902, 'text': "In that case I could put a double ampersand and that's going to be the and operator.", 'start': 19733.321, 'duration': 6.581}, {'end': 19744.943, 'text': 'So I could say and if the hour is less than 15.', 'start': 19739.962, 'duration': 4.981}, {'end': 19746.584, 'text': "So let's say that's the work day.", 'start': 19744.943, 'duration': 1.641}, {'end': 19751.525, 'text': "So I'll just do console log and say it it is work time.", 'start': 19746.724, 'duration': 4.801}, {'end': 19754.242, 'text': 'All right.', 'start': 19753.982, 'duration': 0.26}, {'end': 19759.144, 'text': "So if I save that, I don't see it because right now the hour is at 21.", 'start': 19754.362, 'duration': 4.782}, {'end': 19763.905, 'text': "But let's set it to we'll say 9 a.m. and we're going to see it is work time.", 'start': 19759.144, 'duration': 4.761}], 'summary': "Using the 'and' operator to determine work time based on the hour, e.g. at 9 a.m.", 'duration': 30.584, 'max_score': 19733.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo19733321.jpg'}], 'start': 18907.315, 'title': 'Javascript control flow and logic', 'summary': 'Covers javascript fundamentals of control flow and logic, including if statements, logical operators, shorthand if statements, and the ternary operator, emphasizing the importance of these concepts in programming. it also introduces if-else statements, else if, and nesting, showcasing examples of condition testing, nested if statements, and multiple conditions within a single if statement, as well as the concept of using switch statements in javascript to evaluate expressions and values based on different cases, providing examples of using switch to determine the month and time of day, demonstrating its flexibility and utility.', 'chapters': [{'end': 19389.541, 'start': 18907.315, 'title': 'Javascript fundamentals: control flow and logic', 'summary': 'Covers the fundamentals of control flow and logic in javascript, including if statements, logical operators, shorthand if statements, and the ternary operator, emphasizing the importance of these concepts in programming.', 'duration': 482.226, 'highlights': ['The chapter emphasizes the importance of understanding control flow and logic as fundamental concepts in JavaScript, necessary for any programming task.', 'It explains the usage of if statements to make decisions based on true or false conditions, demonstrating the evaluation of expressions with operators like equals, greater than, and less than.', 'The chapter illustrates the concept of block-level scope in if statements, explaining the restriction of accessing variables defined within the if statement block.', "It demonstrates the use of shorthand if statements and the ability to perform multiple lines using a comma, while highlighting the speaker's personal preference against cluttered syntax."]}, {'end': 19819.148, 'start': 19389.601, 'title': 'Javascript if-else statements', 'summary': 'Introduces if-else statements, else if and nesting in javascript, showcasing examples of condition testing, nested if statements, and multiple conditions within a single if statement.', 'duration': 429.547, 'highlights': ['The chapter introduces if-else statements, else if and nesting in JavaScript. Provides an overview of the main topics covered in the transcript.', 'Showcases examples of condition testing, nested if statements, and multiple conditions within a single if statement. Demonstrates practical examples of using if-else statements, nesting, and multiple conditions for conditional logic in JavaScript.', 'Illustrates the use of else if for testing multiple conditions and running code based on these conditions. Shows how else if can be used to handle multiple conditions and execute code based on those conditions.', 'Demonstrates nesting if statements to create more complex conditional logic and provide additional options. Illustrates how to nest if statements to create more intricate conditional logic and expand the available options for code execution.', "Explains the use of logical operators such as 'and' and 'or' to test multiple conditions within a single if statement. Explains the usage of logical operators 'and' and 'or' for testing multiple conditions together within a single if statement."]}, {'end': 20092.903, 'start': 19819.168, 'title': 'Using switch to evaluate expressions', 'summary': 'Introduces the concept of using switch statements in javascript to evaluate expressions and values based on different cases and provides examples of using switch to determine the month and time of day, demonstrating its flexibility and utility.', 'duration': 273.735, 'highlights': ['The chapter introduces the concept of using switch statements in JavaScript to evaluate expressions and values based on different cases. This highlights the primary focus of the chapter, introducing the concept of using switch statements to evaluate expressions and values based on different cases.', 'Examples of using switch to determine the month and time of day are provided. The chapter provides examples of using switch to determine the month and time of day, demonstrating practical application and relevance of the switch statement.', 'Demonstrates the flexibility and utility of switch statements in JavaScript. The chapter demonstrates the flexibility and utility of switch statements in JavaScript through examples of determining the month and time of day, showcasing its practical application and versatility.']}], 'duration': 1185.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo18907315.jpg', 'highlights': ['The chapter emphasizes the importance of understanding control flow and logic as fundamental concepts in JavaScript, necessary for any programming task.', 'The chapter introduces if-else statements, else if and nesting in JavaScript. Provides an overview of the main topics covered in the transcript.', 'Examples of using switch to determine the month and time of day are provided. The chapter provides examples of using switch to determine the month and time of day, demonstrating practical application and relevance of the switch statement.']}, {'end': 22524.636, 'segs': [{'end': 20498.225, 'src': 'embed', 'start': 20474.082, 'weight': 0, 'content': [{'end': 20483.725, 'text': "Now zero, If I pass in zero to X, we get the same result because if we pass zero into an if statement, that's a false value.", 'start': 20474.082, 'duration': 9.643}, {'end': 20488.569, 'text': "So we're going to get false for that if we pass in an empty string.", 'start': 20484.045, 'duration': 4.524}, {'end': 20490.68, 'text': "That's also a false value.", 'start': 20489.059, 'duration': 1.621}, {'end': 20498.225, 'text': "That's why a lot of times like with web forms, when you're doing validation, you'll check to see if the value is there or not.", 'start': 20491.1, 'duration': 7.125}], 'summary': 'In programming, passing zero or an empty string results in a false value, commonly used for validation in web forms.', 'duration': 24.143, 'max_score': 20474.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo20474082.jpg'}, {'end': 21079.919, 'src': 'embed', 'start': 21055.941, 'weight': 2, 'content': [{'end': 21062.524, 'text': "So those are some of the caveats that you might run into when you're dealing with truthy and false values.", 'start': 21055.941, 'duration': 6.583}, {'end': 21066.705, 'text': "I don't know if caveat's the right word, but some areas of confusion.", 'start': 21062.584, 'duration': 4.121}, {'end': 21069.806, 'text': 'So hopefully that clears that confusion up.', 'start': 21066.925, 'duration': 2.881}, {'end': 21072.632, 'text': 'All right.', 'start': 21072.332, 'duration': 0.3}, {'end': 21079.919, 'text': "So in this video we're going to get more familiar with the logical operators, especially the double ampersand and the double pipes,", 'start': 21072.712, 'duration': 7.207}], 'summary': 'Clarifying confusion around truthy and false values in logical operators.', 'duration': 23.978, 'max_score': 21055.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo21055941.jpg'}, {'end': 22288.639, 'src': 'embed', 'start': 22260.44, 'weight': 1, 'content': [{'end': 22263.801, 'text': 'Right And then I want to set that redirect variable.', 'start': 22260.44, 'duration': 3.361}, {'end': 22267.523, 'text': 'I want to set that to slash dashboard.', 'start': 22264.302, 'duration': 3.221}, {'end': 22278.353, 'text': "else then we're going to alert and let's say access denied because we're not logged in.", 'start': 22268.567, 'duration': 9.786}, {'end': 22288.639, 'text': "and then i want to set that redirect variable to slash login all right, and then we'll just do a console log of the redirect variable here.", 'start': 22278.353, 'duration': 10.286}], 'summary': 'Setting redirect variable and handling access denied in code.', 'duration': 28.199, 'max_score': 22260.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo22260440.jpg'}, {'end': 22499.085, 'src': 'embed', 'start': 22470.499, 'weight': 4, 'content': [{'end': 22472.761, 'text': "If we're using the ternary, we need to have an else.", 'start': 22470.499, 'duration': 2.262}, {'end': 22473.842, 'text': "I can't just do this.", 'start': 22472.861, 'duration': 0.981}, {'end': 22476.624, 'text': "If I do that, I'm gonna get a syntax error.", 'start': 22474.503, 'duration': 2.121}, {'end': 22477.826, 'text': 'So I have to have an else.', 'start': 22476.665, 'duration': 1.161}, {'end': 22481.569, 'text': "but if I don't want anything to happen, I could do this.", 'start': 22477.826, 'duration': 3.743}, {'end': 22483.29, 'text': 'I could say no, right?', 'start': 22481.569, 'duration': 1.721}, {'end': 22485.472, 'text': "So now it's gonna.", 'start': 22483.33, 'duration': 2.142}, {'end': 22488.415, 'text': "let me just comment this out, because I don't wanna keep getting that alert.", 'start': 22485.472, 'duration': 2.943}, {'end': 22494.121, 'text': 'OK so we see welcome to the dashboard because this is true.', 'start': 22491.258, 'duration': 2.863}, {'end': 22499.085, 'text': "If this is false then we're not going to see anything because I just set this to null.", 'start': 22494.281, 'duration': 4.804}], 'summary': 'Using a ternary requires an else; setting to null if false.', 'duration': 28.586, 'max_score': 22470.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo22470499.jpg'}], 'start': 20092.903, 'title': 'Javascript operators and values', 'summary': 'Covers the use of switch statements in creating a calculator function, truthy and falsy values, logical operators like &&, ||, and ??, and practical examples of using ternary operators to condense code. it emphasizes understanding these concepts to avoid confusion in code.', 'chapters': [{'end': 20751.945, 'start': 20092.903, 'title': 'Using switch statements and truthy/falsy values', 'summary': 'Covers the use of switch statements in creating a calculator function that handles plus, minus, multiplication, or division operations and returns the result, along with an explanation of truthy and falsy values in javascript.', 'duration': 659.042, 'highlights': ['Creating a calculator function using switch statements The chapter demonstrates creating a calculator function that takes in three parameters (num1, num2, and operator) and uses a switch statement to handle plus, minus, multiplication, or division operations, returning the result or an error message if an invalid operator is passed.', 'Explanation of truthy and falsy values in JavaScript The chapter provides a detailed explanation of truthy and falsy values in JavaScript, discussing how different values like empty string, null, undefined, and NaN are evaluated as falsy, while other values like true, zero within a string, and non-empty arrays or objects are considered truthy.']}, {'end': 21263.531, 'start': 20752.826, 'title': 'Truthy and falsey values', 'summary': 'Discusses the caveats of truthy and falsey values, such as checking for empty arrays and objects, using loose equality, and understanding logical operators like double ampersand and double pipes. it emphasizes the importance of understanding these concepts to avoid confusion in code.', 'duration': 510.705, 'highlights': ['Understanding logical operators like double ampersand and double pipes Explains the behavior of logical operators and gives examples of using double ampersand (and) and double pipes (or) to evaluate conditions.', 'Caveats of truthy and falsey values, such as checking for empty arrays and objects Discusses the challenges of working with truthy and falsey values, including checking for empty arrays and objects, and provides solutions to handle these cases.', 'Importance of using strict equality (triple equal sign) instead of loose equality (double equal sign) Highlights the importance of using strict equality to avoid unexpected results when comparing values, emphasizing the use of triple equal sign over double equal sign.']}, {'end': 22209.532, 'start': 21264.172, 'title': 'Logical operators & assignment', 'summary': 'Covers practical examples and explanations of logical operators such as &&, ||, and ??, including their usage in conditions and assignments, with detailed examples and use cases. it also introduces the ternary operator and demonstrates how to use it to write conditional statements in a concise manner, as well as scenarios for assigning conditional values to variables using the ternary operator.', 'duration': 945.36, 'highlights': ['The chapter covers practical examples and explanations of logical operators such as &&, ||, and ??, including their usage in conditions and assignments, with detailed examples and use cases. It provides practical examples of using logical operators like &&, ||, and ?? in conditions and assignments, explaining their usage and providing detailed examples and use cases.', 'It also introduces the ternary operator and demonstrates how to use it to write conditional statements in a concise manner. Introduces the ternary operator and demonstrates how to use it to write conditional statements concisely.', 'The chapter further discusses scenarios for assigning conditional values to variables using the ternary operator. Discusses scenarios for assigning conditional values to variables using the ternary operator.']}, {'end': 22524.636, 'start': 22210.073, 'title': 'Using ternary and shorthand operators', 'summary': 'Demonstrates the use of ternary operators to condense code by evaluating a condition and executing different code blocks based on the result, achieving the same result in a shorter and more concise manner, with examples and comparisons.', 'duration': 314.563, 'highlights': ['The chapter demonstrates the use of ternary operators to condense code by evaluating a condition and executing different code blocks based on the result. The chapter provides an example of using a ternary operator to condense code by evaluating a condition and executing different code blocks based on the result.', 'The code achieves the same result in a shorter and more concise manner. The code using ternary operators achieves the same result as the longer version, but in a shorter and more concise manner.', 'Comparisons between using ternary operators and traditional if/else statements are made, showing the benefits of using ternary operators. The chapter provides comparisons between using ternary operators and traditional if/else statements, showing the benefits of using ternary operators for condensing code.']}], 'duration': 2431.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo20092903.jpg', 'highlights': ['Creating a calculator function using switch statements', 'Explanation of truthy and falsy values in JavaScript', 'The chapter covers practical examples and explanations of logical operators such as &&, ||, and ??', 'Introduces the ternary operator and demonstrates how to use it to write conditional statements concisely', 'The chapter demonstrates the use of ternary operators to condense code by evaluating a condition and executing different code blocks based on the result']}, {'end': 23866.365, 'segs': [{'end': 22592.989, 'src': 'embed', 'start': 22552.366, 'weight': 0, 'content': [{'end': 22560.091, 'text': "All right guys so most of the stuff that we've done has been pretty basic aside from a few things like scope and execution context etc.", 'start': 22552.366, 'duration': 7.725}, {'end': 22567.355, 'text': "Now we're going to step it up a little bit and learn about loops and iteration, as well as some high order array methods,", 'start': 22560.551, 'duration': 6.804}, {'end': 22573.178, 'text': 'which are methods that we can use on arrays that take in a function as an argument,', 'start': 22567.355, 'duration': 5.823}, {'end': 22580.923, 'text': 'and we can use these methods to loop through or iterate through arrays and do specific operations on each element.', 'start': 22573.178, 'duration': 7.745}, {'end': 22584.945, 'text': "And these these are methods that you'll be using all the time in JavaScript.", 'start': 22581.443, 'duration': 3.502}, {'end': 22587.766, 'text': 'So this section is really important.', 'start': 22585.405, 'duration': 2.361}, {'end': 22592.989, 'text': "And after this, in the next section, we're finally going to get into, you know,", 'start': 22588.126, 'duration': 4.863}], 'summary': 'Learning loops, iteration, and high order array methods in javascript, essential for frequent use.', 'duration': 40.623, 'max_score': 22552.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo22552366.jpg'}, {'end': 23014.245, 'src': 'embed', 'start': 22986.757, 'weight': 5, 'content': [{'end': 22990.72, 'text': "i'll say as long as i is less than or equal to 10, and i'm sorry, j.", 'start': 22986.757, 'duration': 3.963}, {'end': 22992.488, 'text': "You don't want to do that.", 'start': 22991.547, 'duration': 0.941}, {'end': 22993.869, 'text': 'you want to do J.', 'start': 22992.488, 'duration': 1.381}, {'end': 23001.878, 'text': "Yeah or else you're going to get an infinite infinite loop and then let's increment J.", 'start': 22993.869, 'duration': 8.009}, {'end': 23014.245, 'text': 'And then in here what I want to do is show I want this to do the console log like we already have here starting at one and under each number here.', 'start': 23001.878, 'duration': 12.367}], 'summary': 'Loop through values of i and j, ensuring i<=10, incrementing j, and logging results.', 'duration': 27.488, 'max_score': 22986.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo22986757.jpg'}, {'end': 23166.291, 'src': 'embed', 'start': 23135.238, 'weight': 1, 'content': [{'end': 23144.803, 'text': 'And then here for a condition, we can say as long as I is less than is less than the length of the array.', 'start': 23135.238, 'duration': 9.565}, {'end': 23147.724, 'text': "So we'll say names dot length.", 'start': 23145.363, 'duration': 2.361}, {'end': 23152.364, 'text': "And then we need to increment i, so we'll say i++.", 'start': 23149.062, 'duration': 3.302}, {'end': 23157.827, 'text': 'And then within here, we can access each one by its index.', 'start': 23152.924, 'duration': 4.903}, {'end': 23163.109, 'text': 'i is now gonna represent its index, right? Because it starts at zero, so this will be zero.', 'start': 23158.107, 'duration': 5.002}, {'end': 23166.291, 'text': "Then that'll be one, two, three, and four.", 'start': 23163.57, 'duration': 2.721}], 'summary': 'Iterating through array elements using index i.', 'duration': 31.053, 'max_score': 23135.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo23135238.jpg'}, {'end': 23866.365, 'src': 'embed', 'start': 23804.529, 'weight': 2, 'content': [{'end': 23808.332, 'text': "So let's say while I is less than or equal to 20.", 'start': 23804.529, 'duration': 3.803}, {'end': 23812.114, 'text': "OK And I don't know why.", 'start': 23808.332, 'duration': 3.782}, {'end': 23814.396, 'text': 'Open parentheses here.', 'start': 23812.194, 'duration': 2.202}, {'end': 23815.336, 'text': "We don't want those.", 'start': 23814.416, 'duration': 0.92}, {'end': 23816.317, 'text': 'All right.', 'start': 23815.356, 'duration': 0.961}, {'end': 23817.818, 'text': 'So this is a do while loop.', 'start': 23816.337, 'duration': 1.481}, {'end': 23818.899, 'text': "So let's run this.", 'start': 23817.898, 'duration': 1.001}, {'end': 23822.982, 'text': 'And as you can see, we get we get one through 20.', 'start': 23819.779, 'duration': 3.203}, {'end': 23825.763, 'text': 'Remember, this is set to one now.', 'start': 23822.982, 'duration': 2.781}, {'end': 23834.184, 'text': 'Like I said, the thing with this is this code right here is always going to run once, even if this is never true.', 'start': 23827.021, 'duration': 7.163}, {'end': 23842.527, 'text': 'So if I were to come up here and set I to 21, this condition is never met.', 'start': 23834.384, 'duration': 8.143}, {'end': 23847.169, 'text': 'However, if I save this, I get number 21.', 'start': 23842.887, 'duration': 4.282}, {'end': 23850.53, 'text': 'So it runs this code here no matter what.', 'start': 23847.169, 'duration': 3.361}, {'end': 23852.991, 'text': "So that's the big difference with this.", 'start': 23851.03, 'duration': 1.961}, {'end': 23854.011, 'text': 'If I..', 'start': 23853.851, 'duration': 0.16}, {'end': 23857.218, 'text': 'uncomment this.', 'start': 23855.757, 'duration': 1.461}, {'end': 23857.618, 'text': 'where is it??', 'start': 23857.218, 'duration': 0.4}, {'end': 23866.365, 'text': 'This right here, where it says i is less than or equal to 21, and I comment out the do while and save we get nothing right?', 'start': 23857.739, 'duration': 8.626}], 'summary': 'Demonstration of do-while loop with i ranging from 1 to 20, and its behavior when the condition is not met.', 'duration': 61.836, 'max_score': 23804.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo23804529.jpg'}], 'start': 22524.676, 'title': 'Javascript loop fundamentals', 'summary': "Covers javascript loop fundamentals, including for, while, and do while loops, if-else statements, and nested loops, with emphasis on 'let' for block-scoped variables and usage of break and continue statements, providing examples for better understanding.", 'chapters': [{'end': 22905.753, 'start': 22524.676, 'title': 'Javascript basics: loops and iteration', 'summary': "Covers the fundamentals of javascript syntax, focusing on loops and iteration, explaining the for loop syntax and emphasizing the use of 'let' for block-scoped variables, and provides examples for better understanding.", 'duration': 381.077, 'highlights': ["Explaining the for loop syntax and emphasizing the use of 'let' for block-scoped variables Emphasizes the use of 'let' for block-scoped variables in for loops", 'Provides examples for better understanding of for loop with different initializations and conditions Provides examples for better understanding of for loop with different initializations and conditions']}, {'end': 23108.588, 'start': 22905.753, 'title': 'Javascript loops and conditionals', 'summary': 'Covers using if-else statements and nested loops in javascript, with an example of iterating through numbers and a demonstration of nested loops, as well as a brief mention of looping through arrays.', 'duration': 202.835, 'highlights': ['Nested loops example demonstrating iterating through numbers and changing the range, with a mention of performance improvement when dealing with large ranges.', 'Use of if-else statements to control the output based on a specified condition, with a specific example of outputting a message for a certain number.', 'Explanation of using a for loop to iterate through an array in JavaScript, with a note on the availability of the forEach method for the same purpose.']}, {'end': 23458.473, 'start': 23109.189, 'title': 'For loops and break/continue in javascript', 'summary': 'Explains for loops in javascript, including looping through arrays, handling infinite loops, and introduces break and continue statements, providing examples of their usage.', 'duration': 349.284, 'highlights': ["The chapter explains for loops in JavaScript and demonstrates looping through arrays using the 'for' loop, accessing elements by their index, and console logging each element. demonstrates looping through arrays, accessing elements by their index, console logging each element", 'It introduces the concept of an infinite loop, warns about the consequences of an infinite loop, and advises how to handle it by ensuring that the loop condition is properly set. introduces the concept of an infinite loop, warns about the consequences, advises how to handle it', "The chapter introduces the 'break' statement in JavaScript, which allows breaking out of a loop based on a specific condition, and provides an example demonstrating its usage. introduces the 'break' statement, demonstrates its usage", "It explains the 'continue' statement in JavaScript, which allows skipping the rest of the code in the current iteration and continuing to the next iteration, and provides an example to illustrate its usage. explains the 'continue' statement, provides an example to illustrate its usage"]}, {'end': 23866.365, 'start': 23459.173, 'title': 'Javascript loop types and nested loops', 'summary': 'Covers the syntax and usage of while loops, for loops, and do while loops in javascript. it also explains the concept of nesting while loops and highlights the differences between these loop types, emphasizing their importance in programming.', 'duration': 407.192, 'highlights': ['The for loop, while loop, and do while loop are fundamental ways of doing iteration in JavaScript, with the for loop being used when the number of iterations is known. The for loop, while loop, and do while loop are fundamental ways of doing iteration in JavaScript. The for loop is recommended when the number of iterations is known, emphasizing its significance in programming.', "While loops are suitable for scenarios where the number of iterations is unknown, and it's essential to remember to include the increment to avoid an infinite loop. While loops are suitable when the number of iterations is unknown. It's crucial to include the increment to avoid an infinite loop, highlighting the importance of proper implementation.", "Nesting while loops allows for executing multiple iterations, and it's crucial to remember to increment both the inner and outer loop variables. Nesting while loops enables the execution of multiple iterations, emphasizing the importance of incrementing both the inner and outer loop variables.", 'The do while loop always runs at least once, even if the condition is false, making it suitable for scenarios where the block of code should run at least once. The do while loop always runs at least once, even if the condition is false, making it suitable for scenarios where the block of code should run at least once, emphasizing its unique behavior.']}], 'duration': 1341.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo22524676.jpg', 'highlights': ['The for loop, while loop, and do while loop are fundamental ways of doing iteration in JavaScript. The for loop is recommended when the number of iterations is known, emphasizing its significance in programming.', 'Nested loops example demonstrating iterating through numbers and changing the range, with a mention of performance improvement when dealing with large ranges.', "Explaining the for loop syntax and emphasizing the use of 'let' for block-scoped variables.", "The chapter introduces the 'break' statement in JavaScript, which allows breaking out of a loop based on a specific condition, and provides an example demonstrating its usage.", "The chapter explains for loops in JavaScript and demonstrates looping through arrays using the 'for' loop, accessing elements by their index, and console logging each element.", 'Use of if-else statements to control the output based on a specified condition, with a specific example of outputting a message for a certain number.', 'The chapter introduces the concept of an infinite loop, warns about the consequences, advises how to handle it.', 'The do while loop always runs at least once, even if the condition is false, making it suitable for scenarios where the block of code should run at least once, emphasizing its unique behavior.']}, {'end': 26062.406, 'segs': [{'end': 23922.917, 'src': 'embed', 'start': 23891.636, 'weight': 2, 'content': [{'end': 23891.916, 'text': 'All right.', 'start': 23891.636, 'duration': 0.28}, {'end': 23896.92, 'text': 'so when you go to get a job as a web developer and you go to different interviews,', 'start': 23891.916, 'duration': 5.004}, {'end': 23903.204, 'text': 'you may be given specific programming challenges to do on the computer or on a whiteboard.', 'start': 23896.92, 'duration': 6.284}, {'end': 23910.329, 'text': "And it's good practice to do challenges like this, not only for job interviews, but it also just sharpens your skills in general.", 'start': 23903.664, 'duration': 6.665}, {'end': 23915.112, 'text': "And you'll find that most challenges have some kind of iteration involved.", 'start': 23910.769, 'duration': 4.343}, {'end': 23919.856, 'text': "And one of the most common ones that you'll run across is called FizzBuzz.", 'start': 23915.152, 'duration': 4.704}, {'end': 23922.917, 'text': 'And this has to do with the loops and conditionals.', 'start': 23920.496, 'duration': 2.421}], 'summary': 'Web developers often face programming challenges in interviews, such as fizzbuzz, to sharpen their skills.', 'duration': 31.281, 'max_score': 23891.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo23891636.jpg'}, {'end': 25282.876, 'src': 'heatmap', 'start': 24417.677, 'weight': 1, 'content': [{'end': 24422.683, 'text': 'Now if you remember with a for loop what we would do is we would initialize.', 'start': 24417.677, 'duration': 5.006}, {'end': 24433.76, 'text': 'a variable here, set it to 0, and then we would do as long as i is less than whatever that array length, so items.length,', 'start': 24424.437, 'duration': 9.323}, {'end': 24436.781, 'text': 'and then we would increment that i variable.', 'start': 24433.76, 'duration': 3.021}, {'end': 24444.903, 'text': 'And then if we want to access each specific item, we would have to do items and pass in the variable as the index.', 'start': 24436.861, 'duration': 8.042}, {'end': 24447.784, 'text': 'Now a cleaner way to do this is with for of.', 'start': 24445.023, 'duration': 2.761}, {'end': 24455.795, 'text': "So instead of doing all this in here, we can simply do I'm using cons, but you can use let if you want.", 'start': 24447.884, 'duration': 7.911}, {'end': 24465.784, 'text': "But we can simply say const and then give a variable name for each individual item, which I'll just call item and then say of items.", 'start': 24456.596, 'duration': 9.188}, {'end': 24467.145, 'text': 'All right.', 'start': 24466.905, 'duration': 0.24}, {'end': 24473.01, 'text': "And then in here, I don't need to do this because we can just simply access the item variable.", 'start': 24467.285, 'duration': 5.725}, {'end': 24475.752, 'text': 'If I save that and run it, we get the same result.', 'start': 24473.05, 'duration': 2.702}, {'end': 24478.975, 'text': 'And this is much cleaner and just much more modern looking.', 'start': 24475.852, 'duration': 3.123}, {'end': 24486.345, 'text': "And if we wanted to have an array with objects in it, like, let's say, users,", 'start': 24480.322, 'duration': 6.023}, {'end': 24492.289, 'text': "and we'll set that to say an array of objects and we'll just give these a name.", 'start': 24486.345, 'duration': 5.944}, {'end': 24501.193, 'text': "So we'll say name Brad and a couple more here say Kate and say Steve.", 'start': 24493.089, 'duration': 8.104}, {'end': 24501.814, 'text': 'All right.', 'start': 24501.454, 'duration': 0.36}, {'end': 24507.377, 'text': "And then let's comment this out and we'll say for.", 'start': 24501.954, 'duration': 5.423}, {'end': 24518.045, 'text': "And we'll call it, we'll say for const user of users and then I'll console log user.", 'start': 24509.483, 'duration': 8.562}, {'end': 24520.466, 'text': 'OK, so now we have all of our objects.', 'start': 24518.905, 'duration': 1.561}, {'end': 24528.148, 'text': 'If I want to access a specific property, then I would do user dot and then whatever that property in this case name now.', 'start': 24520.526, 'duration': 7.622}, {'end': 24537.72, 'text': 'my first choice for looping through arrays is to use the for each method, which is a high order array method that you can use on that.', 'start': 24529.278, 'duration': 8.442}, {'end': 24539.381, 'text': 'you can use directly on arrays,', 'start': 24537.72, 'duration': 1.661}, {'end': 24549.744, 'text': 'but i think this is a better way to do it than using a standard for loop or a while loop or a do while loop or anything like that.', 'start': 24539.381, 'duration': 10.363}, {'end': 24553.745, 'text': 'so we can also use this to loop over strings.', 'start': 24549.744, 'duration': 4.001}, {'end': 24561.865, 'text': "okay, let me just put a comment up here And I'll say loop through arrays.", 'start': 24553.745, 'duration': 8.12}, {'end': 24564.247, 'text': 'All right.', 'start': 24562.465, 'duration': 1.782}, {'end': 24572.093, 'text': "Now for strings, let's say const and we'll just say STR and we'll set that to, let's say, hello world.", 'start': 24564.307, 'duration': 7.786}, {'end': 24578.198, 'text': 'And then if I want to loop over that, I can simply do for and then give a variable.', 'start': 24573.494, 'duration': 4.704}, {'end': 24584.283, 'text': "Let's just say letter because that's what we're going to get is a letter and then of our string.", 'start': 24578.238, 'duration': 6.045}, {'end': 24594.355, 'text': "And then if we console log here letter and save, then you see it's going to loop through and it's going to output each letter of that string.", 'start': 24585.751, 'duration': 8.604}, {'end': 24601.379, 'text': "Another thing you can do is loop over maps, which we haven't talked about yet.", 'start': 24595.856, 'duration': 5.523}, {'end': 24610.804, 'text': "I'll get into this later on, but just to give you a quick example, we can create a map, a variable called map and set it to a new map.", 'start': 24602.54, 'duration': 8.264}, {'end': 24617.908, 'text': "Not a nap, although I could use one of those, but we'll set it to a new map and then we can add key value pairs.", 'start': 24611.704, 'duration': 6.204}, {'end': 24624.733, 'text': "So I could do map dot set and we could set, let's say, name to John.", 'start': 24617.968, 'duration': 6.765}, {'end': 24627.915, 'text': "And then I could set let's do an age.", 'start': 24625.673, 'duration': 2.242}, {'end': 24632.038, 'text': "So we'll say age 30.", 'start': 24629.796, 'duration': 2.242}, {'end': 24635.26, 'text': 'And if I wanted to loop through these, I could do a four of.', 'start': 24632.038, 'duration': 3.222}, {'end': 24639.319, 'text': 'so i would do cons now.', 'start': 24637.518, 'duration': 1.801}, {'end': 24649.505, 'text': 'we can get the key and the value by putting brackets in here and just saying key value of the map.', 'start': 24639.319, 'duration': 10.186}, {'end': 24651.306, 'text': 'and now, if i console log here,', 'start': 24649.505, 'duration': 1.801}, {'end': 24660.752, 'text': "i'll go ahead and log both the key and the value and now you'll see down here both the key value pairs name john and age 30..", 'start': 24651.306, 'duration': 9.446}, {'end': 24665.295, 'text': 'so you can use it to to loop over maps as well pretty much any iterable object.', 'start': 24660.752, 'duration': 4.543}, {'end': 24672.97, 'text': 'Now there is another type of loop called for in that allows you to loop through object object literal values,', 'start': 24666.027, 'duration': 6.943}, {'end': 24674.571, 'text': "which we'll talk about in the next video.", 'start': 24672.97, 'duration': 1.601}, {'end': 24688.958, 'text': "All right now there may be times where you want to actually loop through an object's values and we can do that with the four in the loop.", 'start': 24680.634, 'duration': 8.324}, {'end': 24691.96, 'text': "So let's go ahead and create an object here.", 'start': 24689.299, 'duration': 2.661}, {'end': 24693.981, 'text': "I'm just going to call this color object.", 'start': 24691.98, 'duration': 2.001}, {'end': 24700.553, 'text': "and set that to some curly braces and then we're going to do color one.", 'start': 24695.132, 'duration': 5.421}, {'end': 24705.735, 'text': "set that to a string of red and we'll do that for a few colors.", 'start': 24700.553, 'duration': 5.182}, {'end': 24716.498, 'text': 'say color two is going to be blue, say orange, be color three, color four.', 'start': 24705.735, 'duration': 10.763}, {'end': 24721.859, 'text': "we'll do green right and we want to loop through and get these colors.", 'start': 24716.498, 'duration': 5.361}, {'end': 24725.783, 'text': 'so a for in loop is very similar to a for of loop.', 'start': 24721.859, 'duration': 3.924}, {'end': 24733.31, 'text': "so we would just say for and then inside here we're going to say const and we can get the key.", 'start': 24725.783, 'duration': 7.527}, {'end': 24745.064, 'text': 'so if i do key in color object And then we console log that key, we get color one through color four, so we get the keys.', 'start': 24733.31, 'duration': 11.754}, {'end': 24758.573, 'text': "Now if we want to get the value all we have to do actually we'll just log it here is take the color object variable and then pass in here the key.", 'start': 24745.584, 'duration': 12.989}, {'end': 24764.698, 'text': 'I do that then you can see we get the values red blue orange and green.', 'start': 24759.534, 'duration': 5.164}, {'end': 24771.07, 'text': "Now let's say we want to use this with an array because we can we can use for in loops with arrays.", 'start': 24765.666, 'duration': 5.404}, {'end': 24784.982, 'text': "So we'll say const and say color array and we'll set that to an array with red green blue and say yellow.", 'start': 24771.551, 'duration': 13.431}, {'end': 24785.683, 'text': 'All right.', 'start': 24785.482, 'duration': 0.201}, {'end': 24788.725, 'text': "So we have this array of colors and I'm going to do this.", 'start': 24785.703, 'duration': 3.022}, {'end': 24789.566, 'text': "We'll say for.", 'start': 24788.825, 'duration': 0.741}, {'end': 24793.735, 'text': "and then we'll do cons.", 'start': 24792.034, 'duration': 1.701}, {'end': 24796.397, 'text': "let's say color uh, not of.", 'start': 24793.735, 'duration': 2.662}, {'end': 24805.644, 'text': "we're going to do an in so in the color array and then let's console log color.", 'start': 24796.397, 'duration': 9.247}, {'end': 24811.849, 'text': "if i save that, we're actually going to get 0, 1, 2, 3 instead of this.", 'start': 24805.644, 'duration': 6.205}, {'end': 24821.321, 'text': "so what's happening here is it's giving us the keys, It's giving us the keys, which are in this case these are going to be numeric keys 0,, 1,, 2, 3..", 'start': 24811.849, 'duration': 9.472}, {'end': 24824.603, 'text': 'So we can still get the values of an array here.', 'start': 24821.322, 'duration': 3.281}, {'end': 24829.845, 'text': "But what we have to do is let's change color.", 'start': 24825.443, 'duration': 4.402}, {'end': 24831.566, 'text': "Let's change that to key.", 'start': 24830.165, 'duration': 1.401}, {'end': 24838.749, 'text': 'And then we can say color array and then just pass in the key like that.', 'start': 24832.166, 'duration': 6.583}, {'end': 24843.29, 'text': "If I save that and run it now you can see we're getting the values of the array.", 'start': 24839.548, 'duration': 3.742}, {'end': 24844.071, 'text': 'So you can also.', 'start': 24843.35, 'duration': 0.721}, {'end': 24848.913, 'text': "there's so many different ways to iterate through arrays,", 'start': 24844.071, 'duration': 4.842}, {'end': 24855.957, 'text': 'but this is most commonly going to be used if you want to get the either the keys and or the values of an object literal.', 'start': 24848.913, 'duration': 7.044}, {'end': 24862.141, 'text': "So now, in the next video, we're going to start to look at high order array methods, which are extremely helpful,", 'start': 24856.598, 'duration': 5.543}, {'end': 24866.984, 'text': "and you're going to be using them all the time within JavaScript, and we're going to start with for each.", 'start': 24862.141, 'duration': 4.843}, {'end': 24873.892, 'text': "All right, guys, so now we're going to get into high order array methods in this particular video.", 'start': 24869.366, 'duration': 4.526}, {'end': 24875.194, 'text': "We're going to look at for each.", 'start': 24873.912, 'duration': 1.282}, {'end': 24878.138, 'text': "But there's a lot of these that can do different things.", 'start': 24875.594, 'duration': 2.544}, {'end': 24883.645, 'text': 'Now, they all work in a similar way in that they take in a function.', 'start': 24878.538, 'duration': 5.107}, {'end': 24887.527, 'text': 'as an argument, which this is called a callback function.', 'start': 24884.586, 'duration': 2.941}, {'end': 24897.352, 'text': 'And in that callback function, we can pass in a variable for each element in that array or each item in that array.', 'start': 24888.268, 'duration': 9.084}, {'end': 24900.333, 'text': 'Now, what a for each does is it just simply loops through.', 'start': 24897.752, 'duration': 2.581}, {'end': 24901.714, 'text': "It doesn't return anything.", 'start': 24900.373, 'duration': 1.341}, {'end': 24909.957, 'text': 'It just loops through as if we were using a for or a for of loop to just go through the array and do something specific.', 'start': 24902.134, 'duration': 7.823}, {'end': 24910.758, 'text': 'All right.', 'start': 24910.438, 'duration': 0.32}, {'end': 24913.179, 'text': "So let's go ahead and jump in here.", 'start': 24910.878, 'duration': 2.301}, {'end': 24916.465, 'text': 'And we just want to create an array of some sort.', 'start': 24913.823, 'duration': 2.642}, {'end': 24920.607, 'text': "I'm going to call this socials and just going to have a bunch of strings in here.", 'start': 24916.485, 'duration': 4.122}, {'end': 24929.433, 'text': "So Twitter let's say LinkedIn do Facebook and let's do Instagram.", 'start': 24920.647, 'duration': 8.786}, {'end': 24930.34, 'text': 'All right.', 'start': 24930.14, 'duration': 0.2}, {'end': 24933.642, 'text': 'So we just have an array of strings and this could be an array of anything.', 'start': 24930.46, 'duration': 3.182}, {'end': 24942.748, 'text': 'And before I show you the for each, I just want to console, log here socials and then the prototype chain, which is double underscore, proto,', 'start': 24934.323, 'duration': 8.425}, {'end': 24943.729, 'text': 'double underscore.', 'start': 24942.748, 'duration': 0.981}, {'end': 24948.932, 'text': 'And I think I showed you this back when we looked at some of the simple methods like push and pop.', 'start': 24944.349, 'duration': 4.583}, {'end': 24951.134, 'text': 'So you can see that those are here as well.', 'start': 24949.353, 'duration': 1.781}, {'end': 24962.58, 'text': 'So any, any methods or properties, like length on the array, are going to get shown here and you can see we have For each right here we have map,', 'start': 24951.194, 'duration': 11.386}, {'end': 24965.461, 'text': 'map filter, find, reduce.', 'start': 24962.58, 'duration': 2.881}, {'end': 24969.443, 'text': 'These are all high order array methods and they work in a similar way.', 'start': 24965.481, 'duration': 3.962}, {'end': 24973.224, 'text': "So basically it's going to comment that out for now.", 'start': 24970.063, 'duration': 3.161}, {'end': 24976.505, 'text': 'Basically what happens is we call the method.', 'start': 24973.884, 'duration': 2.621}, {'end': 24984.488, 'text': 'So in this case for each And then that method is going to take in a callback function, an anonymous function.', 'start': 24976.705, 'duration': 7.783}, {'end': 24985.528, 'text': "It's not going to be named.", 'start': 24984.528, 'duration': 1}, {'end': 24987.829, 'text': 'And we can do that in a few different ways.', 'start': 24985.628, 'duration': 2.201}, {'end': 24991.971, 'text': 'We could just use the standard function syntax.', 'start': 24988.289, 'duration': 3.682}, {'end': 24995.732, 'text': 'And then what gets passed in here, if we look at..', 'start': 24992.531, 'duration': 3.201}, {'end': 25004.184, 'text': 'this documentation page here, what gets passed in, you can call it element like they did here, but you can call it anything.', 'start': 24997.341, 'duration': 6.843}, {'end': 25007.506, 'text': 'It just represents each item in the array.', 'start': 25004.224, 'duration': 3.282}, {'end': 25010.047, 'text': 'Okay So here we just have ABC for us.', 'start': 25007.526, 'duration': 2.521}, {'end': 25011.448, 'text': 'We have these strings here.', 'start': 25010.087, 'duration': 1.361}, {'end': 25018.731, 'text': "So you can call it, I mean, a common thing I'll do is call it the singular version of the array, or I'll call it item.", 'start': 25012.048, 'duration': 6.683}, {'end': 25022.753, 'text': "I don't usually use element, but again, you can call it whatever you want.", 'start': 25018.951, 'duration': 3.802}, {'end': 25027.905, 'text': 'And then you have access to that in here so we can do console log item.', 'start': 25022.893, 'duration': 5.012}, {'end': 25037.847, 'text': 'OK So this this function right here that we pass in is going to get run for every element or every item that we have in the array.', 'start': 25028.445, 'duration': 9.402}, {'end': 25040.008, 'text': "So in this case it's going to get run four times.", 'start': 25037.867, 'duration': 2.141}, {'end': 25043.349, 'text': "And what we're doing is just logging it to the console.", 'start': 25040.748, 'duration': 2.601}, {'end': 25048.29, 'text': 'So if I save that and we take a look we should see these in the console.', 'start': 25043.369, 'duration': 4.921}, {'end': 25049.663, 'text': 'All right.', 'start': 25049.363, 'duration': 0.3}, {'end': 25055.545, 'text': 'And if you want to kind of slow it down a little bit, you could go to sources and go to script.', 'start': 25049.703, 'duration': 5.842}, {'end': 25061.568, 'text': 'OK, we looked at this debugger back when we looked at execution context and the call stack.', 'start': 25055.565, 'duration': 6.003}, {'end': 25068.951, 'text': "But what I'm going to do is put a breakpoint right here on the for each and then I'm going to reload the page.", 'start': 25062.108, 'duration': 6.843}, {'end': 25071.647, 'text': 'OK, so nothing is run yet.', 'start': 25070.026, 'duration': 1.621}, {'end': 25078.752, 'text': "But if I come down here to the step arrow and I hit that and then it's going to go into the function, we're going to run the for each.", 'start': 25071.747, 'duration': 7.005}, {'end': 25080.453, 'text': "I'm sorry, run the console log.", 'start': 25079.012, 'duration': 1.441}, {'end': 25081.854, 'text': 'And now we get Twitter.', 'start': 25080.873, 'duration': 0.981}, {'end': 25087.498, 'text': "OK, if I go back again, it's going to run console log again because there's another item in the array.", 'start': 25081.874, 'duration': 5.624}, {'end': 25090.8, 'text': 'Again, Facebook, again, Instagram.', 'start': 25087.518, 'duration': 3.282}, {'end': 25093.882, 'text': "And then it's going to end because there's no more items in the array.", 'start': 25090.88, 'duration': 3.002}, {'end': 25098.624, 'text': "okay, so that's kind of a step by step of what's happening.", 'start': 25095.123, 'duration': 3.501}, {'end': 25099.484, 'text': 'let me just remove.', 'start': 25098.624, 'duration': 0.86}, {'end': 25107.326, 'text': "i just want to remove that break point there all right, and then we'll go back into the console.", 'start': 25099.484, 'duration': 7.842}, {'end': 25114.147, 'text': "now, like i said, you could pass in a function this way, or let's actually comment that out,", 'start': 25107.326, 'duration': 6.821}, {'end': 25122.553, 'text': 'or you could first of all get rid of the function keyword and then add on our arrow.', 'start': 25114.147, 'duration': 8.406}, {'end': 25124.194, 'text': 'So this is valid.', 'start': 25123.074, 'duration': 1.12}, {'end': 25132.338, 'text': "But since it's just a one line expression we can actually take away the curly braces as well by save that we get the same thing.", 'start': 25124.314, 'duration': 8.024}, {'end': 25140.061, 'text': 'Now in addition to the item that we pass in to the callback there are some other arguments that we can pass in.', 'start': 25132.878, 'duration': 7.183}, {'end': 25144.787, 'text': "So I just want to go back here and we'll come down.", 'start': 25140.181, 'duration': 4.606}, {'end': 25146.167, 'text': 'So these are the parameters right.', 'start': 25144.827, 'duration': 1.34}, {'end': 25151.81, 'text': 'We have our callback function and then in that callback function we have the item or element.', 'start': 25146.207, 'duration': 5.603}, {'end': 25157.552, 'text': 'But in addition to that we can also pass in the index of the current element being processed in the array.', 'start': 25152.15, 'duration': 5.402}, {'end': 25159.433, 'text': "And of course it's going to start at zero.", 'start': 25157.832, 'duration': 1.601}, {'end': 25163.556, 'text': 'the array so we can also get the entire array.', 'start': 25160.154, 'duration': 3.402}, {'end': 25167.118, 'text': 'There might be times where you need that within your your function.', 'start': 25163.616, 'duration': 3.502}, {'end': 25172.84, 'text': "So let's go ahead and pass in the index and then we'll pass in the entire array.", 'start': 25167.198, 'duration': 5.642}, {'end': 25175.082, 'text': 'So those are the additional parameters.', 'start': 25172.94, 'duration': 2.142}, {'end': 25178.103, 'text': "So here what I'll do is I'll console log.", 'start': 25175.522, 'duration': 2.581}, {'end': 25185.077, 'text': "Let's just put in some back ticks here and Of course, we need to wrap the item in that.", 'start': 25178.603, 'duration': 6.474}, {'end': 25187.499, 'text': "And then let's also do before it.", 'start': 25185.537, 'duration': 1.962}, {'end': 25190.141, 'text': "We'll do the index and then slash.", 'start': 25187.539, 'duration': 2.602}, {'end': 25195.525, 'text': "So we'll say index dash and then the dash, not a slash.", 'start': 25190.902, 'duration': 4.623}, {'end': 25200.77, 'text': 'And then if we look here, you can see the index starts at zero and then increments.', 'start': 25196.166, 'duration': 4.604}, {'end': 25205.173, 'text': "And then let's pass in after the back tick here.", 'start': 25201.41, 'duration': 3.763}, {'end': 25206.975, 'text': "We'll just pass in the entire array.", 'start': 25205.213, 'duration': 1.762}, {'end': 25210.878, 'text': 'So you can see that you have access to to that as well.', 'start': 25207.515, 'duration': 3.363}, {'end': 25216.329, 'text': 'Now you can also pass in a named function rather than an anonymous callback.', 'start': 25211.547, 'duration': 4.782}, {'end': 25223.752, 'text': "So, for example, let's create a function called log socials and that's going to take in an item.", 'start': 25216.429, 'duration': 7.323}, {'end': 25229.654, 'text': 'or we can just say like social and then we just want to console log social.', 'start': 25223.752, 'duration': 5.902}, {'end': 25234.616, 'text': "So we want this function to run for every item that's in the array.", 'start': 25230.055, 'duration': 4.561}, {'end': 25243.446, 'text': 'So what we can do is just take socials, call for each and then simply pass in log socials.', 'start': 25234.696, 'duration': 8.75}, {'end': 25247.569, 'text': "all right, if i save that, let's just comment this one out.", 'start': 25243.446, 'duration': 4.123}, {'end': 25251.733, 'text': "if i save that, you'll see it's going to log all the social items here.", 'start': 25247.569, 'duration': 4.164}, {'end': 25257.999, 'text': "now, when you pass this in, you don't want to execute it, right, you don't want to pass in the parentheses,", 'start': 25251.733, 'duration': 6.266}, {'end': 25263.444, 'text': 'you want to just pass in the definition of the function, just like you do here.', 'start': 25257.999, 'duration': 5.445}, {'end': 25264.065, 'text': "you know, you don't?", 'start': 25263.444, 'duration': 0.621}, {'end': 25265.866, 'text': "you don't execute this function here.", 'start': 25264.065, 'duration': 1.801}, {'end': 25266.547, 'text': "it's a callback.", 'start': 25265.866, 'duration': 0.681}, {'end': 25275.274, 'text': "Now, the last thing I want to show you is with objects, because usually, when you pass, when you use for each, it's usually on an array of objects.", 'start': 25267.751, 'duration': 7.523}, {'end': 25282.876, 'text': "So let's say social objects and we'll set that to an array and each object will have.", 'start': 25275.894, 'duration': 6.982}], 'summary': 'The transcript discusses various looping methods such as for loop, for of, for in, and for each, demonstrating their usage with arrays, strings, maps, and objects.', 'duration': 865.199, 'max_score': 24417.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo24417677.jpg'}, {'end': 24758.573, 'src': 'embed', 'start': 24725.783, 'weight': 6, 'content': [{'end': 24733.31, 'text': "so we would just say for and then inside here we're going to say const and we can get the key.", 'start': 24725.783, 'duration': 7.527}, {'end': 24745.064, 'text': 'so if i do key in color object And then we console log that key, we get color one through color four, so we get the keys.', 'start': 24733.31, 'duration': 11.754}, {'end': 24758.573, 'text': "Now if we want to get the value all we have to do actually we'll just log it here is take the color object variable and then pass in here the key.", 'start': 24745.584, 'duration': 12.989}], 'summary': 'Demonstrating how to retrieve keys and values from a color object using javascript.', 'duration': 32.79, 'max_score': 24725.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo24725783.jpg'}, {'end': 24976.505, 'src': 'embed', 'start': 24951.194, 'weight': 0, 'content': [{'end': 24962.58, 'text': 'So any, any methods or properties, like length on the array, are going to get shown here and you can see we have For each right here we have map,', 'start': 24951.194, 'duration': 11.386}, {'end': 24965.461, 'text': 'map filter, find, reduce.', 'start': 24962.58, 'duration': 2.881}, {'end': 24969.443, 'text': 'These are all high order array methods and they work in a similar way.', 'start': 24965.481, 'duration': 3.962}, {'end': 24973.224, 'text': "So basically it's going to comment that out for now.", 'start': 24970.063, 'duration': 3.161}, {'end': 24976.505, 'text': 'Basically what happens is we call the method.', 'start': 24973.884, 'duration': 2.621}], 'summary': 'Demonstration of high order array methods including for each, map, filter, find, and reduce.', 'duration': 25.311, 'max_score': 24951.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo24951194.jpg'}], 'start': 23866.405, 'title': 'Javascript array methods and high-order functions', 'summary': 'Covers javascript looping methods, including for each, for of, and for in, and high-order array methods such as map, filter, find, and reduce. it also demonstrates efficient array filtering and extraction using concise arrow functions.', 'chapters': [{'end': 24528.148, 'start': 23866.405, 'title': 'Javascript loops and fizzbuzz challenge', 'summary': 'Covers the differences between do-while and while loops, fizzbuzz challenge, and introduces for of loop for iterating through arrays, with a demonstration of implementing fizzbuzz challenge using for and while loops.', 'duration': 661.743, 'highlights': ['The chapter covers the differences between do-while and while loops It explains the fundamental difference between do-while and while loops, emphasizing that do-while loop runs at least once and then checks the condition, while while loop checks the condition first.', 'Introduction to FizzBuzz challenge and its significance in job interviews The chapter introduces the FizzBuzz challenge as a common programming challenge in job interviews, highlighting the importance of practicing such challenges to sharpen programming skills.', 'Demonstration of implementing FizzBuzz challenge using for and while loops The chapter provides a detailed demonstration of implementing the FizzBuzz challenge using for and while loops, explaining the logic and code structure to achieve the desired output.', 'Introduction to for of loop for iterating through arrays It introduces the for of loop as a modern way to iterate through iterable objects like arrays, demonstrating its usage for looping through arrays with a cleaner and more concise syntax.']}, {'end': 24913.179, 'start': 24529.278, 'title': 'Javascript: loops and high order array method', 'summary': 'Introduces different looping methods in javascript, including for each, for of, and for in, highlighting their use cases for arrays, strings, maps, and objects, and concludes with an introduction to high order array methods, starting with for each.', 'duration': 383.901, 'highlights': ['Introduction to different looping methods The chapter covers various looping methods in JavaScript, such as for each, for of, and for in, highlighting their different use cases for different data types like arrays, strings, maps, and objects.', 'Demonstration of looping through arrays and strings The speaker demonstrates looping through arrays using for each method and looping through strings using a simple for loop, showcasing the output of each letter of the string.', 'Explaining looping over maps and objects The chapter explains how to loop over maps by creating a new map with key-value pairs and iterating through it using the for of loop, and also covers looping through object literal values using the for in loop, demonstrating how to get both keys and values.', 'Introduction to high order array methods, starting with for each The chapter introduces high order array methods and emphasizes the usage of for each, highlighting its functionality of looping through arrays and taking a callback function as an argument.']}, {'end': 25216.329, 'start': 24913.823, 'title': 'Array high-order methods', 'summary': 'Explains high-order array methods like for each, map, filter, find, and reduce, showcasing the use of for each with an anonymous function and additional parameters for the index and the entire array.', 'duration': 302.506, 'highlights': ['The chapter explains high-order array methods like for each, map, filter, find, and reduce, showcasing the use of for each with an anonymous function and additional parameters for the index and the entire array', 'The method for each is demonstrated with an anonymous function, showcasing how it runs for every element in the array and logs each item to the console', 'It is shown that for each can also take additional parameters for the index of the current element being processed in the array and the entire array itself']}, {'end': 25450.347, 'start': 25216.429, 'title': 'Javascript array methods', 'summary': 'Covers examples of using the foreach and filter high order array methods in javascript, demonstrating iterating over arrays and objects and the difference between foreach and filter, with the latter returning a modified array.', 'duration': 233.918, 'highlights': ['Demonstrates using forEach to iterate over arrays and objects, showing how to access specific properties and explaining the use of trailing commas in arrays. The chapter demonstrates using forEach to iterate over arrays and objects, showing how to access specific properties and explaining the use of trailing commas in arrays. It mentions logging each item in the array and accessing specific properties, such as URLs.', 'Explains the difference between forEach and filter, with filter returning a modified array and the former not returning anything. The chapter explains the difference between forEach and filter, with filter returning a modified array and the former not returning anything. It clarifies that forEach does not return anything, while filter and other high order array methods return an array.']}, {'end': 25703.891, 'start': 25450.547, 'title': 'Array filtering and testing even numbers', 'summary': 'Demonstrates filtering arrays to test conditions and extract elements, using filter and foreach functions to obtain even numbers, with the concise arrow function proving to be more efficient, resulting in the array [2, 4, 6, 8, 10].', 'duration': 253.344, 'highlights': ['The chapter demonstrates filtering arrays to test conditions and extract elements The transcript illustrates the process of filtering arrays based on a condition to extract elements that pass the test.', 'using filter and forEach functions to obtain even numbers The chapter shows the use of filter and forEach functions to obtain even numbers from an array of numbers.', 'the concise arrow function proving to be more efficient The transcript highlights the efficiency of using a concise arrow function for filtering arrays, as it simplifies the code and improves readability.', 'resulting in the array [2, 4, 6, 8, 10] The practical demonstration yields the array [2, 4, 6, 8, 10] after filtering out odd numbers from the original array.']}, {'end': 26062.406, 'start': 25703.971, 'title': 'Using filter method with array objects', 'summary': 'Demonstrates the use of the filter method to extract specific data from an array of company objects, including retrieving retail companies, companies starting and ending within specific years, and companies lasting 10 years or more.', 'duration': 358.435, 'highlights': ['Retrieving retail companies using the filter method The script filters out retail companies from the array, resulting in three values: company two, company four, and company nine.', 'Extracting companies starting in or after 1980 and ending in or before 2005 The filter operation yields three companies: company one, company seven, and company nine, matching the specified date range criteria.', 'Identifying companies lasting 10 years or more The filter method identifies and returns five companies that lasted 10 years or more, based on the calculated difference between end and start dates.']}], 'duration': 2196.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo23866405.jpg', 'highlights': ['Covers javascript looping methods, including for each, for of, and for in, and high-order array methods such as map, filter, find, and reduce.', 'Introduction to for of loop for iterating through arrays', 'Demonstration of implementing FizzBuzz challenge using for and while loops', 'Introduction to high order array methods, starting with for each', 'The chapter explains high-order array methods like for each, map, filter, find, and reduce, showcasing the use of for each with an anonymous function and additional parameters for the index and the entire array', 'The chapter demonstrates filtering arrays to test conditions and extract elements', 'the concise arrow function proving to be more efficient']}, {'end': 28120.389, 'segs': [{'end': 26584.911, 'src': 'embed', 'start': 26547.606, 'weight': 5, 'content': [{'end': 26551.269, 'text': "We'll say return an object with the name.", 'start': 26547.606, 'duration': 3.663}, {'end': 26554.631, 'text': 'So we have access to company with all the properties.', 'start': 26551.909, 'duration': 2.722}, {'end': 26555.231, 'text': 'So name.', 'start': 26554.691, 'duration': 0.54}, {'end': 26559.174, 'text': "And then let's create a new property called length.", 'start': 26555.732, 'duration': 3.442}, {'end': 26561.636, 'text': "And that's where we'll take the company dot.", 'start': 26559.334, 'duration': 2.302}, {'end': 26564.538, 'text': 'What is it? Company dot end.', 'start': 26562.997, 'duration': 1.541}, {'end': 26569.601, 'text': 'Subtract the company dot start.', 'start': 26565.198, 'duration': 4.403}, {'end': 26571.503, 'text': 'Okay So now.', 'start': 26570.662, 'duration': 0.841}, {'end': 26577.445, 'text': "Let's do console log of company years.", 'start': 26573.041, 'duration': 4.404}, {'end': 26584.911, 'text': 'And now we should have objects with the name and the length of years.', 'start': 26579.206, 'duration': 5.705}], 'summary': 'Return object with company name and length of years.', 'duration': 37.305, 'max_score': 26547.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo26547606.jpg'}, {'end': 26857.365, 'src': 'embed', 'start': 26818.858, 'weight': 10, 'content': [{'end': 26823.179, 'text': 'If I were to have another dot map whatever I return from here will go into there.', 'start': 26818.858, 'duration': 4.321}, {'end': 26832.381, 'text': 'In fact I could say map again and pass in a function in here.', 'start': 26823.239, 'duration': 9.142}, {'end': 26836.962, 'text': "Let's just say square root doubled.", 'start': 26832.461, 'duration': 4.501}, {'end': 26840.081, 'text': "And then we'll return.", 'start': 26838.621, 'duration': 1.46}, {'end': 26846.843, 'text': "Let's say, I don't know, we'll just let's multiply that.", 'start': 26842.162, 'duration': 4.681}, {'end': 26850.344, 'text': "Yeah, we'll just multiply that by three.", 'start': 26847.583, 'duration': 2.761}, {'end': 26852.944, 'text': 'And save.', 'start': 26852.204, 'duration': 0.74}, {'end': 26857.365, 'text': 'Whoops, this should be square root doubled.', 'start': 26854.504, 'duration': 2.861}], 'summary': 'Using map and functions to process data and return a value.', 'duration': 38.507, 'max_score': 26818.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo26818858.jpg'}, {'end': 27097.805, 'src': 'embed', 'start': 27068.029, 'weight': 2, 'content': [{'end': 27069.93, 'text': 'This is also called the accumulator.', 'start': 27068.029, 'duration': 1.901}, {'end': 27074.431, 'text': 'So if you hear accumulator and previous value those are both usually mean the same thing.', 'start': 27070.15, 'duration': 4.281}, {'end': 27079.972, 'text': "then the current value is, whatever the current element we're on, okay,", 'start': 27075.308, 'duration': 4.664}, {'end': 27089.098, 'text': 'and then you can also pass in as an additional argument here the initial value, which is whatever you want the initial previous value to be,', 'start': 27079.972, 'duration': 9.126}, {'end': 27093.161, 'text': "because obviously your first loop through you're not going to have a previous value.", 'start': 27089.098, 'duration': 4.063}, {'end': 27097.805, 'text': "so you can set that here and in most cases it's going to be set to zero.", 'start': 27093.161, 'duration': 4.644}], 'summary': 'Accumulator, previous value, and current value are key concepts in looping, often set to zero.', 'duration': 29.776, 'max_score': 27068.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo27068029.jpg'}, {'end': 27214.854, 'src': 'embed', 'start': 27138.993, 'weight': 0, 'content': [{'end': 27144.095, 'text': 'So the function will take in the either the previous value or accumulator.', 'start': 27138.993, 'duration': 5.102}, {'end': 27148.656, 'text': 'I usually use accumulator and then the current value.', 'start': 27144.195, 'duration': 4.461}, {'end': 27150.377, 'text': 'All right.', 'start': 27148.676, 'duration': 1.701}, {'end': 27156.606, 'text': "And then to set the initial value, which isn't actually required.", 'start': 27150.677, 'duration': 5.929}, {'end': 27162.647, 'text': 'but if you want to set that, you can add it after the the curly braces here.', 'start': 27156.606, 'duration': 6.041}, {'end': 27166.768, 'text': "and let's say zero set to zero, set that to zero, oops.", 'start': 27162.647, 'duration': 4.121}, {'end': 27171.929, 'text': 'and then in here what i want to do is return the accumulator.', 'start': 27166.768, 'duration': 5.161}, {'end': 27178.29, 'text': "so every time this runs, i'm going to take the accumulator or the previous value and add it to the current value,", 'start': 27171.929, 'duration': 6.361}, {'end': 27182.898, 'text': 'And that should in the end give us a sum of all the numbers.', 'start': 27179.833, 'duration': 3.065}, {'end': 27185.502, 'text': "So let's come down here and console log sum.", 'start': 27182.958, 'duration': 2.544}, {'end': 27188.746, 'text': "And let's go to our console.", 'start': 27185.522, 'duration': 3.224}, {'end': 27191.446, 'text': 'And you see we get fifty five.', 'start': 27189.966, 'duration': 1.48}, {'end': 27195.788, 'text': "So basically it started at zero because that's what we said here.", 'start': 27192.287, 'duration': 3.501}, {'end': 27200.589, 'text': 'Then it went through ran a function for each element took the previous value.', 'start': 27195.868, 'duration': 4.721}, {'end': 27205.431, 'text': 'So for instance when it was on to it took one and then added the current value.', 'start': 27200.709, 'duration': 4.722}, {'end': 27214.854, 'text': 'So it added to, then the function ran again for the next element and it took three and added the previous item or value, which is two,', 'start': 27205.551, 'duration': 9.303}], 'summary': 'A function is used to calculate the sum of numbers, resulting in a total of 55.', 'duration': 75.861, 'max_score': 27138.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo27138993.jpg'}, {'end': 27577.994, 'src': 'embed', 'start': 27543.433, 'weight': 8, 'content': [{'end': 27548.795, 'text': "OK. so now we're going to do a couple of challenges with array methods, and these aren't too difficult.", 'start': 27543.433, 'duration': 5.362}, {'end': 27554.837, 'text': 'if you watch the past three or four videos, then you should be able to get this at least one of them.', 'start': 27548.795, 'duration': 6.042}, {'end': 27563.2, 'text': 'So the first challenge is to you can see we have an array of people has a first name last name email phone and age.', 'start': 27555.657, 'duration': 7.543}, {'end': 27577.994, 'text': 'So the instruction is to take the people array and create an array called young people that stores objects with only a name and email property of all the people that are under 25 or 25 and under.', 'start': 27563.78, 'duration': 14.214}], 'summary': 'Challenges involve array methods to filter people under 25.', 'duration': 34.561, 'max_score': 27543.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo27543433.jpg'}, {'end': 27636.611, 'src': 'embed', 'start': 27609.709, 'weight': 9, 'content': [{'end': 27615.311, 'text': "So if we console log young people, then we're only going to get these three because they're all 25 or under.", 'start': 27609.709, 'duration': 5.602}, {'end': 27617.551, 'text': 'You can see we have a name property.', 'start': 27615.331, 'duration': 2.22}, {'end': 27618.331, 'text': 'All right.', 'start': 27617.571, 'duration': 0.76}, {'end': 27622.512, 'text': 'So if you want to try that out, go ahead and pause the video and you can do it on your own.', 'start': 27618.351, 'duration': 4.161}, {'end': 27623.952, 'text': 'All right.', 'start': 27623.632, 'duration': 0.32}, {'end': 27626.733, 'text': "So I'm going to copy this array so we can use this.", 'start': 27623.972, 'duration': 2.761}, {'end': 27631.89, 'text': "And then let's go over here and let's paste that in.", 'start': 27629.149, 'duration': 2.741}, {'end': 27632.95, 'text': 'All right.', 'start': 27631.91, 'duration': 1.04}, {'end': 27636.611, 'text': 'So we need to first of all.', 'start': 27633.11, 'duration': 3.501}], 'summary': 'Demonstration of filtering young people 25 or under using console log and array manipulation.', 'duration': 26.902, 'max_score': 27609.709, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo27609709.jpg'}, {'end': 27725.677, 'src': 'embed', 'start': 27695.852, 'weight': 4, 'content': [{'end': 27698.693, 'text': "So I'm saying just person, which is the entire object.", 'start': 27695.852, 'duration': 2.841}, {'end': 27700.394, 'text': 'Of course, we want the age.', 'start': 27699.253, 'duration': 1.141}, {'end': 27705.446, 'text': 'And if we check it out, we get Jane, Sarah and Jose.', 'start': 27701.525, 'duration': 3.921}, {'end': 27706.807, 'text': 'That looks correct.', 'start': 27705.886, 'duration': 0.921}, {'end': 27709.647, 'text': 'So Bob is 45.', 'start': 27707.587, 'duration': 2.06}, {'end': 27710.808, 'text': 'Jane is 25.', 'start': 27709.647, 'duration': 1.161}, {'end': 27711.848, 'text': "So she's included.", 'start': 27710.808, 'duration': 1.04}, {'end': 27713.308, 'text': 'John is 30.', 'start': 27712.408, 'duration': 0.9}, {'end': 27714.129, 'text': "He's not included.", 'start': 27713.308, 'duration': 0.821}, {'end': 27715.789, 'text': "So it looks like we haven't filtered down.", 'start': 27714.169, 'duration': 1.62}, {'end': 27718.39, 'text': 'Now we still have all the properties.', 'start': 27716.349, 'duration': 2.041}, {'end': 27725.677, 'text': 'We want to narrow this down to only have a single name property with both first and last name and email.', 'start': 27719.229, 'duration': 6.448}], 'summary': 'Filtering process: 3 persons, bob 45, jane 25, john 30, aiming to narrow to single name property with first and last name and email.', 'duration': 29.825, 'max_score': 27695.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo27695852.jpg'}], 'start': 26062.466, 'title': 'Array methods in javascript', 'summary': "Discusses the map method for modifying arrays, chaining map methods and different methods, understanding the 'reduce' method, dom challenges, and javascript array challenges, highlighting practical examples and functionalities.", 'chapters': [{'end': 26626.225, 'start': 26062.466, 'title': 'Understanding and implementing the map method', 'summary': 'Discusses the map method, which returns a new array based on a function that can modify each element in the original array, demonstrated through examples of doubling numbers, extracting company names, creating objects with company names and categories, and calculating the length of each company in years.', 'duration': 563.759, 'highlights': ['The map method returns a new array by modifying each element in the original array based on a given function, as demonstrated by doubling numbers and prefixing them with a string. The map method allows the modification of each element in the original array by applying a given function, such as doubling numbers or prefixing them with a string.', 'The map method is used to extract company names and create a new array containing only the names of the companies. By using the map method, it is possible to extract specific data from an array of objects, such as extracting company names and creating a new array containing only the names of the companies.', 'The map method can be utilized to create an array of objects containing specific properties, such as company names and categories, from an array of objects. With the map method, it is possible to create an array of objects with specific properties, such as company names and categories, by iterating through an array of objects and constructing new objects based on the specified properties.', "The map method can be used to calculate the length of each company's existence in years by subtracting the start date from the end date, resulting in an array of the length of each company in years. By utilizing the map method, it is possible to calculate the length of each company's existence in years by subtracting the start date from the end date, resulting in an array of the length of each company in years."]}, {'end': 27000.654, 'start': 26626.265, 'title': 'Chaining map methods and chaining different methods', 'summary': 'Demonstrates the concept of chaining map methods to perform operations like square root and doubling, and also showcases chaining different methods like filtering even numbers and then doubling them, emphasizing the flexibility and versatility of these methods.', 'duration': 374.389, 'highlights': ['Chaining map methods allows for performing operations like square root and doubling, showcasing the flexibility of these methods. The chapter demonstrates chaining map methods to first calculate the square root of a number and then doubling it, showcasing the flexibility and versatility of these methods.', 'Chaining different methods like filtering even numbers and then doubling them showcases the versatility of the methods and their ability to be combined in various sequences. The chapter showcases chaining different methods like filtering even numbers and then doubling them, emphasizing the flexibility and versatility of these methods.']}, {'end': 27522.793, 'start': 27001.015, 'title': "Understanding the array method 'reduce'", 'summary': "Discusses the array method 'reduce', which is used to reduce an array down to a single value, illustrated through examples of summing numbers and calculating the total price of a shopping cart, along with comparisons to other array methods.", 'duration': 521.778, 'highlights': ["The method 'reduce' is used to reduce an array down to a single value, such as calculating the total price of a shopping cart, which can be achieved by using an initial value and passing a function that takes in the accumulator and current value.", "The example of summing numbers using 'reduce' demonstrates how the method functions by taking the previous value and adding it to the current value, ultimately resulting in the sum of all numbers in the array.", "Comparisons to other array methods, such as using a for loop or forEach instead of 'reduce', highlight the flexibility and multiple ways to achieve the same outcome."]}, {'end': 27798.417, 'start': 27523.413, 'title': 'Dom challenges with array methods', 'summary': "Covers challenges with array methods, demonstrating filtering and mapping to create a new array 'young people' that includes individuals under 25 with a name and email property.", 'duration': 275.004, 'highlights': ["Demonstrating filtering and mapping to create 'young people' array The chapter covers filtering the 'people' array to include only individuals under 25 and then mapping the filtered result to create a new array called 'young people' with a name and email property.", "Using filter to select individuals under 25 The instructor demonstrates using the filter method to select individuals under 25 from the 'people' array, resulting in the extraction of individuals such as Jane, Sarah, and Jose.", 'Chaining map method to rearrange array properties The chapter explains the utilization of the map method to rearrange the filtered array properties, emphasizing the creation of a single name property with both first and last names, along with the email property.']}, {'end': 28120.389, 'start': 27798.417, 'title': 'Javascript array challenges', 'summary': 'Covers challenges related to arrays, including filtering positive numbers for a sum, using map to capitalize words, and manipulating arrays to achieve specific results.', 'duration': 321.972, 'highlights': ['The challenge of adding all positive numbers in the array resulted in a sum of 79, comprising 50, 20, 2, and 7. The challenge involved filtering the positive numbers in the array and using the reduce method to obtain the sum, resulting in a total of 79.', 'Creating a new array with capitalized words from an existing array was demonstrated using the map function and specific string manipulation methods. The process involved using the map function to capitalize the first letter of each word in the array, demonstrating string manipulation methods such as charAt and slice.', 'The initial challenge involved manipulating the structure of an array by filtering specific data based on defined conditions. The initial challenge focused on filtering specific data in an array based on defined conditions, showcasing the use of the filter method to achieve the desired result.']}], 'duration': 2057.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo26062466.jpg', 'highlights': ['The map method allows the modification of each element in the original array by applying a given function, such as doubling numbers or prefixing them with a string.', 'The map method is used to extract company names and create a new array containing only the names of the companies.', 'The map method can be utilized to create an array of objects containing specific properties, such as company names and categories, from an array of objects.', "The map method can be used to calculate the length of each company's existence in years by subtracting the start date from the end date, resulting in an array of the length of each company in years.", 'Chaining map methods allows for performing operations like square root and doubling, showcasing the flexibility of these methods.', 'Chaining different methods like filtering even numbers and then doubling them showcases the versatility of the methods and their ability to be combined in various sequences.', "The method 'reduce' is used to reduce an array down to a single value, such as calculating the total price of a shopping cart, which can be achieved by using an initial value and passing a function that takes in the accumulator and current value.", "The example of summing numbers using 'reduce' demonstrates how the method functions by taking the previous value and adding it to the current value, ultimately resulting in the sum of all numbers in the array.", "Demonstrating filtering and mapping to create 'young people' array The chapter covers filtering the 'people' array to include only individuals under 25 and then mapping the filtered result to create a new array called 'young people' with a name and email property.", "Using filter to select individuals under 25 The instructor demonstrates using the filter method to select individuals under 25 from the 'people' array, resulting in the extraction of individuals such as Jane, Sarah, and Jose.", 'The challenge of adding all positive numbers in the array resulted in a sum of 79, comprising 50, 20, 2, and 7.', 'Creating a new array with capitalized words from an existing array was demonstrated using the map function and specific string manipulation methods.', 'The initial challenge involved manipulating the structure of an array by filtering specific data based on defined conditions.']}, {'end': 29649.176, 'segs': [{'end': 28628.019, 'src': 'embed', 'start': 28573.795, 'weight': 2, 'content': [{'end': 28584.589, 'text': "typically, you don't access elements with direct properties like this because there's methods like getElementById and querySelector that I'm gonna show you very soon.", 'start': 28573.795, 'duration': 10.794}, {'end': 28588.213, 'text': 'that helps you target what you want much more easily.', 'start': 28584.589, 'duration': 3.624}, {'end': 28594.388, 'text': 'But I do wanna just show you some of the, I guess, the more difficult ways of doing it first.', 'start': 28589.367, 'duration': 5.021}, {'end': 28597.389, 'text': "So let's say we wanna get all the links on a page.", 'start': 28594.868, 'duration': 2.521}, {'end': 28602.61, 'text': "I shouldn't say more difficult, but using properties rather than using the methods.", 'start': 28598.329, 'duration': 4.281}, {'end': 28614.793, 'text': "So let's create a link here, and I'll just have it go to my site, travestymedia.com, and say Travesty Media for the text.", 'start': 28603.59, 'duration': 11.203}, {'end': 28616.152, 'text': 'All right.', 'start': 28615.851, 'duration': 0.301}, {'end': 28618.938, 'text': "And then let's say I wanted to access all the links.", 'start': 28616.272, 'duration': 2.666}, {'end': 28621.564, 'text': 'I could say console log and then document.', 'start': 28618.998, 'duration': 2.566}, {'end': 28628.019, 'text': 'And if we look over here in the properties, There should be a links.', 'start': 28622.046, 'duration': 5.973}], 'summary': 'The transcript covers accessing elements using direct properties and methods like getelementbyid and queryselector. it also demonstrates accessing all the links on a page using console log and document.', 'duration': 54.224, 'max_score': 28573.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo28573795.jpg'}, {'end': 29020.881, 'src': 'embed', 'start': 28992.289, 'weight': 5, 'content': [{'end': 28997.37, 'text': "to use icons like this right here, I believe, is actually no, that's not part of font.", 'start': 28992.289, 'duration': 5.081}, {'end': 29000.151, 'text': 'Awesome I think just the delete buttons are here.', 'start': 28997.49, 'duration': 2.661}, {'end': 29006.692, 'text': "But yeah, so we're just bringing that in, bringing the CDN and then we're linking in our style sheet.", 'start': 29001.171, 'duration': 5.521}, {'end': 29008.612, 'text': 'So this is just custom CSS.', 'start': 29006.812, 'duration': 1.8}, {'end': 29010.172, 'text': 'So very simple.', 'start': 29009.192, 'duration': 0.98}, {'end': 29013.813, 'text': "We're not using like Tailwind or any CSS framework.", 'start': 29011.012, 'duration': 2.801}, {'end': 29020.881, 'text': 'And then we have our header, our container with our header, just has this little image and heading.', 'start': 29014.44, 'duration': 6.441}], 'summary': 'Adding custom css with icons and delete buttons, without using frameworks.', 'duration': 28.592, 'max_score': 28992.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo28992289.jpg'}, {'end': 29141.847, 'src': 'heatmap', 'start': 28271.633, 'weight': 0, 'content': [{'end': 28275.874, 'text': 'It is essentially a programming interface for Web or HTML elements.', 'start': 28271.633, 'duration': 4.241}, {'end': 28284.956, 'text': 'We already know we can display the content of Web pages using HTML tags with text and we can style it using CSS.', 'start': 28276.314, 'duration': 8.642}, {'end': 28287.637, 'text': 'You guys should definitely know that at this point.', 'start': 28284.976, 'duration': 2.661}, {'end': 28293.278, 'text': 'And the Dom is is the structure of the Web page that we can interact with.', 'start': 28288.517, 'duration': 4.761}, {'end': 28298.179, 'text': 'We can interface with using JavaScript and you can use other languages as well.', 'start': 28293.338, 'duration': 4.841}, {'end': 28300.52, 'text': "But for the most part, you're going to be using JavaScript.", 'start': 28298.219, 'duration': 2.301}, {'end': 28303.71, 'text': 'And it generally includes all the HTML tags.', 'start': 28301.187, 'duration': 2.523}, {'end': 28308.655, 'text': 'So you have access to those attributes, the text between tags.', 'start': 28303.89, 'duration': 4.765}, {'end': 28310.036, 'text': 'Those are called text nodes.', 'start': 28308.675, 'duration': 1.361}, {'end': 28317.984, 'text': 'And when you visualize the DOM, you usually visualize it as like a tree structure similar to what you see here on the right.', 'start': 28310.717, 'duration': 7.267}, {'end': 28325.43, 'text': 'And what you see on the right is a tree structure of this web page here, which is very simple.', 'start': 28318.625, 'duration': 6.805}, {'end': 28328.933, 'text': 'So we just have our HTML tags, head and body tags.', 'start': 28325.55, 'duration': 3.383}, {'end': 28331.514, 'text': 'We have a div and each one a paragraph.', 'start': 28328.973, 'duration': 2.541}, {'end': 28336.418, 'text': "So over here, I'm going to talk about window and document in a few minutes.", 'start': 28332.115, 'duration': 4.303}, {'end': 28338.639, 'text': "So let's just look at HTML.", 'start': 28336.478, 'duration': 2.161}, {'end': 28345.384, 'text': 'Now, this HTML element here represents this HTML tag in our page structure.', 'start': 28339.1, 'duration': 6.284}, {'end': 28349.527, 'text': "And we have we'll be able to access that through the document object.", 'start': 28345.984, 'duration': 3.543}, {'end': 28355.35, 'text': 'And in that HTML tag, we have two children or child tags or elements.', 'start': 28350.166, 'duration': 5.184}, {'end': 28357.452, 'text': 'We have the head and then we have the body.', 'start': 28355.37, 'duration': 2.082}, {'end': 28360.874, 'text': 'Now in the head, we have another title element.', 'start': 28358.132, 'duration': 2.742}, {'end': 28364.057, 'text': 'And in that title element is a text node.', 'start': 28361.515, 'duration': 2.542}, {'end': 28373.112, 'text': 'So a lot of people when they start out, A lot of them think that the DOM just, it just refers to the tags, right? The elements.', 'start': 28364.617, 'duration': 8.495}, {'end': 28375.834, 'text': 'Well, it also refers to text nodes.', 'start': 28373.572, 'duration': 2.262}, {'end': 28377.856, 'text': 'It also refers to attributes.', 'start': 28376.194, 'duration': 1.662}, {'end': 28383.62, 'text': 'So you can see in the head tag we have a meta tag and that has a character set,', 'start': 28378.116, 'duration': 5.504}, {'end': 28390.506, 'text': 'a char set attribute on it which we can easily access and do things to add, to remove or whatever.', 'start': 28383.62, 'duration': 6.886}, {'end': 28397.178, 'text': 'In the body, we have a div, and that div has an attribute on it of ID.', 'start': 28391.857, 'duration': 5.321}, {'end': 28402.579, 'text': 'And then in the div with the ID of main, we have an H1.', 'start': 28398.138, 'duration': 4.441}, {'end': 28408.1, 'text': 'That H1 has both an attribute, has a class on it, and it has a text node in it.', 'start': 28403.159, 'duration': 4.941}, {'end': 28412.501, 'text': 'And then the paragraph has a text node in it as well.', 'start': 28409.06, 'duration': 3.441}, {'end': 28421.993, 'text': "So when you look at HTML structure, You should be able to kind of picture this type of thing in your head when you're dealing with the Dom.", 'start': 28413.261, 'duration': 8.732}, {'end': 28423.094, 'text': 'All right.', 'start': 28422.793, 'duration': 0.301}, {'end': 28428.238, 'text': 'Now I want to just jump into this code now and just kind of look at some of this real quick.', 'start': 28423.154, 'duration': 5.084}, {'end': 28430.72, 'text': "So in the console, I've already showed you this.", 'start': 28428.318, 'duration': 2.402}, {'end': 28431.881, 'text': 'If we type in window.', 'start': 28430.8, 'duration': 1.081}, {'end': 28441.149, 'text': "It's going to show us that the window object, which is the the top most or the global object in the browser that has a ton of stuff on it,", 'start': 28433.206, 'duration': 7.943}, {'end': 28442.91, 'text': 'including the document object.', 'start': 28441.149, 'duration': 1.761}, {'end': 28447.151, 'text': 'And we can of course access that from within our code as well.', 'start': 28443.23, 'duration': 3.921}, {'end': 28448.252, 'text': 'All right.', 'start': 28447.171, 'duration': 1.081}, {'end': 28449.692, 'text': "That's going to give us the same thing.", 'start': 28448.272, 'duration': 1.42}, {'end': 28453.533, 'text': 'And in that window object is the document object.', 'start': 28450.152, 'duration': 3.381}, {'end': 28454.854, 'text': 'So right here.', 'start': 28453.994, 'duration': 0.86}, {'end': 28460.512, 'text': 'And that has a bunch of properties and a bunch of helpful methods that we can use as well.', 'start': 28455.709, 'duration': 4.803}, {'end': 28466.475, 'text': 'So we could do a console log window dot document.', 'start': 28461.112, 'duration': 5.363}, {'end': 28469.316, 'text': "And I'm just going to comment this out.", 'start': 28467.395, 'duration': 1.921}, {'end': 28471.977, 'text': "So now you'll see document.", 'start': 28470.437, 'duration': 1.54}, {'end': 28477.24, 'text': "And since we did a console log to the document, it's going to just show us the element.", 'start': 28472.438, 'duration': 4.802}, {'end': 28482.543, 'text': 'If we want to see like the properties and methods and stuff, then we can do a console dot dir.', 'start': 28477.34, 'duration': 5.203}, {'end': 28484.464, 'text': 'And now if we take a look.', 'start': 28483.343, 'duration': 1.121}, {'end': 28490.07, 'text': "You can see all this stuff here and I'm going to go over a lot of the different properties in the next video.", 'start': 28485.287, 'duration': 4.783}, {'end': 28495.914, 'text': "Now I'm just going to show you a couple of things and we're going to touch on all this stuff much more later on.", 'start': 28490.591, 'duration': 5.323}, {'end': 28499.837, 'text': "But let's just do a console log here and we'll say document.", 'start': 28496.014, 'duration': 3.823}, {'end': 28502.519, 'text': "Now we don't have to prefix it with window.", 'start': 28500.217, 'duration': 2.302}, {'end': 28505.301, 'text': 'You can because it is on the window object.', 'start': 28502.839, 'duration': 2.462}, {'end': 28510.564, 'text': "But since window is the top level object you don't need to prefix this stuff with window.", 'start': 28505.661, 'duration': 4.903}, {'end': 28514.247, 'text': "In fact you'll very rarely see window dot document.", 'start': 28510.624, 'duration': 3.623}, {'end': 28520.748, 'text': "So as you can see over here, there's a body property here and that that references the body element.", 'start': 28514.887, 'duration': 5.861}, {'end': 28526.349, 'text': "So if I say document dot body and save that, it's going to show me the actual element.", 'start': 28521.088, 'duration': 5.261}, {'end': 28530.57, 'text': 'OK, so you see the body element, you can see the H1 and the script tag.', 'start': 28526.929, 'duration': 3.641}, {'end': 28535.33, 'text': 'Some of this stuff is injected by live server, but we can see everything in the body.', 'start': 28530.95, 'duration': 4.38}, {'end': 28538.531, 'text': "Right And then there's properties we can use on this.", 'start': 28535.551, 'duration': 2.98}, {'end': 28541.432, 'text': "Like, let's say we just want the HTML in the body.", 'start': 28538.571, 'duration': 2.861}, {'end': 28543.872, 'text': 'We could use inner HTML.', 'start': 28541.792, 'duration': 2.08}, {'end': 28545.052, 'text': 'Save that.', 'start': 28544.452, 'duration': 0.6}, {'end': 28548.255, 'text': 'And now you can see we have an H1 and our script tag.', 'start': 28545.213, 'duration': 3.042}, {'end': 28551.497, 'text': "And if we look at the HTML page, that's exactly what's there.", 'start': 28548.275, 'duration': 3.222}, {'end': 28558.681, 'text': "If we wanted to get, let's say, just the text we could use in our text, save that and we just get Dom intro.", 'start': 28551.977, 'duration': 6.704}, {'end': 28559.622, 'text': 'All right.', 'start': 28558.701, 'duration': 0.921}, {'end': 28566.146, 'text': 'If I were to add something else in here and just put a paragraph with hello, just the text is going to show here.', 'start': 28559.682, 'duration': 6.464}, {'end': 28572.11, 'text': "If I go back to using inner HTML, it's going to show the paragraph as well.", 'start': 28566.726, 'duration': 5.384}, {'end': 28573.795, 'text': 'All right now.', 'start': 28573.174, 'duration': 0.621}, {'end': 28584.589, 'text': "typically, you don't access elements with direct properties like this because there's methods like getElementById and querySelector that I'm gonna show you very soon.", 'start': 28573.795, 'duration': 10.794}, {'end': 28588.213, 'text': 'that helps you target what you want much more easily.', 'start': 28584.589, 'duration': 3.624}, {'end': 28594.388, 'text': 'But I do wanna just show you some of the, I guess, the more difficult ways of doing it first.', 'start': 28589.367, 'duration': 5.021}, {'end': 28597.389, 'text': "So let's say we wanna get all the links on a page.", 'start': 28594.868, 'duration': 2.521}, {'end': 28602.61, 'text': "I shouldn't say more difficult, but using properties rather than using the methods.", 'start': 28598.329, 'duration': 4.281}, {'end': 28614.793, 'text': "So let's create a link here, and I'll just have it go to my site, travestymedia.com, and say Travesty Media for the text.", 'start': 28603.59, 'duration': 11.203}, {'end': 28616.152, 'text': 'All right.', 'start': 28615.851, 'duration': 0.301}, {'end': 28618.938, 'text': "And then let's say I wanted to access all the links.", 'start': 28616.272, 'duration': 2.666}, {'end': 28621.564, 'text': 'I could say console log and then document.', 'start': 28618.998, 'duration': 2.566}, {'end': 28628.019, 'text': 'And if we look over here in the properties, There should be a links.', 'start': 28622.046, 'duration': 5.973}, {'end': 28632.223, 'text': "You can see there's images to access all the images and then you also have links.", 'start': 28628.12, 'duration': 4.103}, {'end': 28640.449, 'text': "Now, since there's more than one link on the page, what this gives us is something called an HTML collection, which is very similar to an array.", 'start': 28632.843, 'duration': 7.606}, {'end': 28644.533, 'text': 'You can access each link by index just like you could an array.', 'start': 28640.83, 'duration': 3.703}, {'end': 28648.876, 'text': "So let's say document dot links and we'll console log that.", 'start': 28644.993, 'duration': 3.883}, {'end': 28652.219, 'text': "In fact, let's comment out this stuff here.", 'start': 28649.376, 'duration': 2.843}, {'end': 28657.944, 'text': "So as you can see, I get an HTML collection and there's a single link in there.", 'start': 28653.021, 'duration': 4.923}, {'end': 28659.585, 'text': 'It has an index of zero.', 'start': 28657.964, 'duration': 1.621}, {'end': 28665.968, 'text': 'So if I want to access that, I can simply put brackets just like I would with an array and then put the zero.', 'start': 28659.945, 'duration': 6.023}, {'end': 28668.089, 'text': 'And there it shows me the link.', 'start': 28666.629, 'duration': 1.46}, {'end': 28673.833, 'text': 'OK And if there were if there was another link, I could use one as the index.', 'start': 28669.07, 'duration': 4.763}, {'end': 28674.613, 'text': "There's not.", 'start': 28674.033, 'duration': 0.58}, {'end': 28676.174, 'text': "So it's going to just be undefined.", 'start': 28674.673, 'duration': 1.501}, {'end': 28680.429, 'text': 'Now this for instance this document dot body.', 'start': 28677.406, 'duration': 3.023}, {'end': 28681.67, 'text': 'this is not read.', 'start': 28680.429, 'duration': 1.241}, {'end': 28683.632, 'text': 'only I can change that from here.', 'start': 28681.67, 'duration': 1.962}, {'end': 28692.339, 'text': 'I could say document dot body equals, or actually say document dot body dot in our HTML equals,', 'start': 28683.632, 'duration': 8.707}, {'end': 28695.422, 'text': "and then we'll just put an H1 in here and we'll say hello world.", 'start': 28692.339, 'duration': 3.083}, {'end': 28704.736, 'text': "right. so if i go ahead and save that, it's going to replace everything that's in the body with just this h1, even if we had, you know,", 'start': 28697.95, 'duration': 6.786}, {'end': 28707.118, 'text': 'a ton of content on the page.', 'start': 28704.736, 'duration': 2.382}, {'end': 28711.522, 'text': 'if i set the body inner html to this h1, it just replaces it.', 'start': 28707.118, 'duration': 4.404}, {'end': 28717.608, 'text': "now i'm going to show you all kinds of methods to insert things where you want, but this is just saying well,", 'start': 28711.522, 'duration': 6.086}, {'end': 28721.711, 'text': "i just want the entire page to show this h1, which is something you're not going to do.", 'start': 28717.608, 'duration': 4.103}, {'end': 28724.535, 'text': "Now there's also methods.", 'start': 28723.013, 'duration': 1.522}, {'end': 28725.816, 'text': "I'm just going to comment that out.", 'start': 28724.555, 'duration': 1.261}, {'end': 28731.543, 'text': "There's also methods on the document on the document object.", 'start': 28726.157, 'duration': 5.386}, {'end': 28734.307, 'text': "So one of them which you don't see very much is right.", 'start': 28731.604, 'duration': 2.703}, {'end': 28739.053, 'text': 'So right will actually take whatever you put in here and write it to the browser.', 'start': 28734.888, 'duration': 4.165}, {'end': 28741.196, 'text': 'So if I say hello from J.S.', 'start': 28739.093, 'duration': 2.103}, {'end': 28743.279, 'text': 'And I save it gets added.', 'start': 28741.857, 'duration': 1.422}, {'end': 28747.064, 'text': "Now the reason you don't see this used very much is because there's no targeting.", 'start': 28743.639, 'duration': 3.425}, {'end': 28750.67, 'text': 'It just basically puts it at the whatever at the end of the file.', 'start': 28747.104, 'duration': 3.566}, {'end': 28753.954, 'text': "And it's not it's just not very helpful.", 'start': 28751.351, 'duration': 2.603}, {'end': 28756.799, 'text': "But this is a method, right? It's a function.", 'start': 28754.355, 'duration': 2.444}, {'end': 28767.705, 'text': "Now, there's also methods to select certain elements in the DOM, and those are very, very helpful, and we'll be going over those in depth.", 'start': 28757.299, 'duration': 10.406}, {'end': 28778.251, 'text': "But just to give you an idea, let's go to the HTML, and I'm going to wrap all this, the H1 and the link, with an ID of main.", 'start': 28768.125, 'duration': 10.126}, {'end': 28785.875, 'text': "So I have this div with the ID of main, and I'm going to move the H1 and the link inside of that.", 'start': 28779.151, 'duration': 6.724}, {'end': 28791.176, 'text': "And let's say I want to select that mean that mean ID.", 'start': 28786.673, 'duration': 4.503}, {'end': 28794.878, 'text': "So I'm going to just console log document dot.", 'start': 28791.356, 'duration': 3.522}, {'end': 28798.68, 'text': 'And then the method I want to use is get element by ID.', 'start': 28794.958, 'duration': 3.722}, {'end': 28806.978, 'text': "OK, so we'll say get element by D and in here is going to be the idea I want to grab, which is main.", 'start': 28800.433, 'duration': 6.545}, {'end': 28812.121, 'text': 'I save that and you see it grabs that div with the idea of main.', 'start': 28807.458, 'duration': 4.663}, {'end': 28814.242, 'text': 'Now I can do what I want with that.', 'start': 28812.721, 'duration': 1.521}, {'end': 28820.347, 'text': 'I could say document dot get element by D main.', 'start': 28814.363, 'duration': 5.984}, {'end': 28822.188, 'text': 'I could also put this into a variable.', 'start': 28820.447, 'duration': 1.741}, {'end': 28826.531, 'text': 'So, for instance, const main equals that.', 'start': 28822.348, 'duration': 4.183}, {'end': 28829.173, 'text': 'And then I could say main dot inner div.', 'start': 28826.791, 'duration': 2.382}, {'end': 28836.856, 'text': "html equals and then we'll put an h1 and we'll say hello from maine.", 'start': 28830.231, 'duration': 6.625}, {'end': 28845.402, 'text': "okay, save that and it's going to replace everything within that that div with the idea of maine with this h1.", 'start': 28836.856, 'duration': 8.546}, {'end': 28848.584, 'text': 'okay, just like i replaced it up here, i placed the body.', 'start': 28845.402, 'duration': 3.182}, {'end': 28851.946, 'text': 'this is just replacing this specific element.', 'start': 28848.584, 'duration': 3.362}, {'end': 28857.61, 'text': "okay, and there's there's even better selectors like query selector, where you can select anything you want.", 'start': 28851.946, 'duration': 5.664}, {'end': 28864.623, 'text': 'So, for example, if I wanted to select just the H1, I could say document.query.', 'start': 28858.16, 'duration': 6.463}, {'end': 28868.045, 'text': "And don't worry, we're going to go over this much, much more in depth.", 'start': 28865.384, 'duration': 2.661}, {'end': 28870.766, 'text': 'So I could say query selector.', 'start': 28868.665, 'duration': 2.101}, {'end': 28875.449, 'text': "And let's say I want the ID of main.", 'start': 28872.607, 'duration': 2.842}, {'end': 28881.412, 'text': 'So I would use the number sign here because you can choose classes or just straight elements, whatever.', 'start': 28875.489, 'duration': 5.923}, {'end': 28883.373, 'text': 'And then I want the H1.', 'start': 28881.992, 'duration': 1.381}, {'end': 28887.935, 'text': "So it's basically like if you were styling this with CSS, you can put any selector in here.", 'start': 28883.433, 'duration': 4.502}, {'end': 28896.773, 'text': "And let's say I want to take the inner will do the inner text of that H1 and let's set it to hello.", 'start': 28889.188, 'duration': 7.585}, {'end': 28901.236, 'text': 'Save that and now just the H1 gets change.', 'start': 28898.514, 'duration': 2.722}, {'end': 28906.099, 'text': 'So this is just a very very high level example of some of the things that we can do.', 'start': 28901.576, 'duration': 4.523}, {'end': 28907.1, 'text': 'All right.', 'start': 28906.119, 'duration': 0.981}, {'end': 28912.684, 'text': 'So in the next video I want to look more at some of the properties on this document object.', 'start': 28907.26, 'duration': 5.424}, {'end': 28920.234, 'text': 'Alright. so in the last video we looked at the document object model and what that is.', 'start': 28915.469, 'duration': 4.765}, {'end': 28929.845, 'text': 'we looked at the actual document object that we have access to within the window object and some of its properties and some of the methods we can use.', 'start': 28920.234, 'duration': 9.611}, {'end': 28935.912, 'text': "So I want to take a look at some more properties that's on that object that you have accessible to you that you can.", 'start': 28930.246, 'duration': 5.666}, {'end': 28943.18, 'text': 'You can access you can also use to overwrite and, you know, add things through JavaScript.', 'start': 28936.257, 'duration': 6.923}, {'end': 28951.324, 'text': "So a lot of these you're not really going to use because instead of selecting them, the elements with these properties,", 'start': 28943.76, 'duration': 7.564}, {'end': 28955.325, 'text': "you're going to use methods like get element by ID and query selector.", 'start': 28951.324, 'duration': 4.001}, {'end': 28958.187, 'text': 'But I do want you to at least know that they exist.', 'start': 28955.646, 'duration': 2.541}, {'end': 28959.027, 'text': 'All right.', 'start': 28958.767, 'duration': 0.26}, {'end': 28963.369, 'text': "So you'll notice that we actually have some life in the browser finally.", 'start': 28959.247, 'duration': 4.122}, {'end': 28967.853, 'text': "So this is a UI for the shopping list application that we're going to build in a little bit.", 'start': 28963.749, 'duration': 4.104}, {'end': 28969.814, 'text': "And it's not functioning.", 'start': 28968.493, 'duration': 1.321}, {'end': 28971.516, 'text': "You'll see I cannot add anything.", 'start': 28969.974, 'duration': 1.542}, {'end': 28972.717, 'text': "I can't delete anything.", 'start': 28971.576, 'duration': 1.141}, {'end': 28975.079, 'text': "That's because there's no JavaScript at all.", 'start': 28973.077, 'duration': 2.002}, {'end': 28976.86, 'text': "It's just HTML and CSS.", 'start': 28975.119, 'duration': 1.741}, {'end': 28979.903, 'text': "And you'll have this in the sandbox.", 'start': 28977.541, 'duration': 2.362}, {'end': 28985.148, 'text': "You'll also have it in, you should have it in the current video module that you're watching.", 'start': 28979.963, 'duration': 5.185}, {'end': 28986.148, 'text': 'All right.', 'start': 28985.868, 'duration': 0.28}, {'end': 28992.289, 'text': "And just to take a quick look at the HTML, we're just bringing in font awesome, which is a library.", 'start': 28986.228, 'duration': 6.061}, {'end': 28997.37, 'text': "to use icons like this right here, I believe, is actually no, that's not part of font.", 'start': 28992.289, 'duration': 5.081}, {'end': 29000.151, 'text': 'Awesome I think just the delete buttons are here.', 'start': 28997.49, 'duration': 2.661}, {'end': 29006.692, 'text': "But yeah, so we're just bringing that in, bringing the CDN and then we're linking in our style sheet.", 'start': 29001.171, 'duration': 5.521}, {'end': 29008.612, 'text': 'So this is just custom CSS.', 'start': 29006.812, 'duration': 1.8}, {'end': 29010.172, 'text': 'So very simple.', 'start': 29009.192, 'duration': 0.98}, {'end': 29013.813, 'text': "We're not using like Tailwind or any CSS framework.", 'start': 29011.012, 'duration': 2.801}, {'end': 29020.881, 'text': 'And then we have our header, our container with our header, just has this little image and heading.', 'start': 29014.44, 'duration': 6.441}, {'end': 29026.242, 'text': 'And then the form here with the input to add an item, the button to add an item.', 'start': 29021.341, 'duration': 4.901}, {'end': 29028.643, 'text': 'Then we have a filter input as well.', 'start': 29026.663, 'duration': 1.98}, {'end': 29030.803, 'text': "So we'll be able to filter these items down.", 'start': 29028.703, 'duration': 2.1}, {'end': 29034.224, 'text': 'Then we have the unordered list, which is the item list.', 'start': 29031.304, 'duration': 2.92}, {'end': 29036.325, 'text': 'And then we have the clear all button.', 'start': 29034.684, 'duration': 1.641}, {'end': 29037.445, 'text': "So that's pretty much it.", 'start': 29036.345, 'duration': 1.1}, {'end': 29041.406, 'text': "And then we're linking in a script JS, which is completely empty.", 'start': 29037.845, 'duration': 3.561}, {'end': 29042.606, 'text': "That's why nothing works.", 'start': 29041.426, 'duration': 1.18}, {'end': 29048.915, 'text': "OK, and in a little later on, we'll create this whole application and get it functioning.", 'start': 29043.191, 'duration': 5.724}, {'end': 29058.761, 'text': 'But I want to use it just as an example UI for the next few videos, so that I can show you how to manipulate the DOM and you know,', 'start': 29048.955, 'duration': 9.806}, {'end': 29061.343, 'text': 'access certain elements, change things, and so on.', 'start': 29058.761, 'duration': 2.582}, {'end': 29066.032, 'text': 'So again, I want to look at some of the properties on the document object.', 'start': 29062.31, 'duration': 3.722}, {'end': 29073.517, 'text': "So I'm going to just initialize a variable here called output so that I can console log different things.", 'start': 29066.372, 'duration': 7.145}, {'end': 29077.339, 'text': "And let's open up our console over here.", 'start': 29074.857, 'duration': 2.482}, {'end': 29082.902, 'text': "So the first property I'm going to show you is actually deprecated, but I still think you should know it.", 'start': 29078.179, 'duration': 4.723}, {'end': 29084.563, 'text': "And that's document dot all.", 'start': 29082.962, 'duration': 1.601}, {'end': 29089.586, 'text': 'So I want to set output to that so we can log it.', 'start': 29085.303, 'duration': 4.283}, {'end': 29095.528, 'text': "Now you'll see it actually has a strike through in VS code because it says it is deprecated.", 'start': 29090.086, 'duration': 5.442}, {'end': 29100.491, 'text': 'But if we look over here, what it gives us is an HTML all collection.', 'start': 29096.189, 'duration': 4.302}, {'end': 29111.616, 'text': "So this is similar to an array and you can see it has brackets and it's basically an array or a collection of all of the different parts of this page,", 'start': 29100.951, 'duration': 10.665}, {'end': 29112.916, 'text': 'the DOM for this page.', 'start': 29111.616, 'duration': 1.3}, {'end': 29123.56, 'text': 'So HTML tags, a script tag, head tag, everything in here, the form, the inputs, everything is going to be in this html all collection,', 'start': 29113.336, 'duration': 10.224}, {'end': 29128.162, 'text': 'and we can even access access elements by index.', 'start': 29123.56, 'duration': 4.602}, {'end': 29131.903, 'text': 'so if i do 10, that gives us the body.', 'start': 29128.162, 'duration': 3.741}, {'end': 29135.765, 'text': 'if i do 11, that gives us the container.', 'start': 29131.903, 'duration': 3.862}, {'end': 29139.086, 'text': 'so you can access items or elements like this.', 'start': 29135.765, 'duration': 3.321}, {'end': 29141.847, 'text': 'but this is not like the way you want to do it.', 'start': 29139.086, 'duration': 2.761}], 'summary': 'The transcript explains the dom, its elements, properties, and methods, as well as accessing and manipulating elements using javascript.', 'duration': 28.511, 'max_score': 28271.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo28271633.jpg'}, {'end': 29422.647, 'src': 'embed', 'start': 29389.339, 'weight': 1, 'content': [{'end': 29393.221, 'text': "There's also no action, which is where it submits to.", 'start': 29389.339, 'duration': 3.882}, {'end': 29395.862, 'text': "if there isn't an action, It's going to submit to that page.", 'start': 29393.221, 'duration': 2.641}, {'end': 29402.365, 'text': 'but I could get the action with dot action And it should just be the same page.', 'start': 29395.862, 'duration': 6.503}, {'end': 29408.128, 'text': "so the page that I'm on Now, if I wanted to change the ID of the form,", 'start': 29402.365, 'duration': 5.763}, {'end': 29422.647, 'text': "I could do that by saying document dot forms and grab the first form in the document and take the id and set it to, let's say, new dash id.", 'start': 29408.128, 'duration': 14.519}], 'summary': "The form's action is the same page; the id can be changed using javascript.", 'duration': 33.308, 'max_score': 29389.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo29389339.jpg'}], 'start': 28120.953, 'title': 'Working with the document object model', 'summary': 'Covers the fundamentals before delving into the document object model (dom) in javascript, explaining its structure and functionality, including methods for selecting elements, traversing the dom, and dynamically changing page elements and styles.', 'chapters': [{'end': 28676.174, 'start': 28120.953, 'title': 'Working with the document object model', 'summary': 'Covers the importance of understanding fundamentals like iteration, control structures, and data types before delving into working with the document object model (dom) in javascript. it explains the structure and functionality of the dom, including methods for selecting elements, traversing the dom, and dynamically changing page elements and styles.', 'duration': 555.221, 'highlights': ['The importance of understanding fundamentals like iteration, control structures, and data types before working with the Document Object Model (DOM) in JavaScript Understanding fundamentals such as iteration, control structures, and data types is emphasized before delving into working with the Document Object Model (DOM) in JavaScript.', 'Explanation of the structure and functionality of the DOM, including methods for selecting elements, traversing the DOM, and dynamically changing page elements and styles The chapter explains the structure and functionality of the Document Object Model (DOM), covering methods for selecting elements, traversing the DOM, and dynamically changing page elements and styles.', 'Demonstration of accessing and manipulating elements in the DOM using properties and methods The chapter demonstrates accessing and manipulating elements in the Document Object Model (DOM) using properties and methods, such as innerHTML, getElementById, and querySelector.']}, {'end': 29164.961, 'start': 28677.406, 'title': 'Manipulating the dom with javascript', 'summary': "Explores methods to manipulate the dom using javascript, including replacing elements, selecting elements by id, using query selectors, and accessing properties of the document object. it also introduces a deprecated property, 'document.all', and highlights its usage and limitations.", 'duration': 487.555, 'highlights': ['The chapter explores methods to manipulate the DOM using JavaScript, including replacing elements, selecting elements by ID, using query selectors, and accessing properties of the document object. The chapter delves into various methods for manipulating the Document Object Model (DOM) using JavaScript, such as replacing elements and selecting elements by ID or using query selectors. It also covers accessing properties of the document object to modify the DOM.', "It introduces a deprecated property, 'document.all', and highlights its usage and limitations. The chapter introduces the deprecated property 'document.all' and explains its usage to access an HTML all collection, which is similar to an array and contains all parts of the page's DOM. However, it also highlights the limitations and advises against its convenient usage."]}, {'end': 29649.176, 'start': 29165.061, 'title': 'Accessing html elements', 'summary': 'Discusses accessing various properties and collections in html elements using javascript, including accessing the document type, domain, url, character set, content type, forms, links, images, and classes. it also covers accessing specific attributes and changing their values. the chapter emphasizes that while this method is not the best, it is important to be aware of it for potential use cases.', 'duration': 484.115, 'highlights': ['Accessing properties like document type, domain, URL, character set, and content type provides essential information for application development.', 'Demonstrating how to access forms, links, and images, including getting specific attributes and changing their values, offers practical insight into manipulating HTML elements with JavaScript.', 'Highlighting the importance of knowing these methods, despite not being the best practice, for potential use cases emphasizes the value of understanding various approaches to accessing HTML elements.']}], 'duration': 1528.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo28120953.jpg', 'highlights': ['Understanding fundamentals such as iteration, control structures, and data types is emphasized before delving into working with the Document Object Model (DOM) in JavaScript.', 'The chapter explains the structure and functionality of the Document Object Model (DOM), covering methods for selecting elements, traversing the DOM, and dynamically changing page elements and styles.', 'The chapter demonstrates accessing and manipulating elements in the Document Object Model (DOM) using properties and methods, such as innerHTML, getElementById, and querySelector.', 'The chapter delves into various methods for manipulating the Document Object Model (DOM) using JavaScript, such as replacing elements and selecting elements by ID or using query selectors. It also covers accessing properties of the document object to modify the DOM.', "The chapter introduces the deprecated property 'document.all' and explains its usage to access an HTML all collection, which is similar to an array and contains all parts of the page's DOM. However, it also highlights the limitations and advises against its convenient usage.", 'Accessing properties like document type, domain, URL, character set, and content type provides essential information for application development.', 'Demonstrating how to access forms, links, and images, including getting specific attributes and changing their values, offers practical insight into manipulating HTML elements with JavaScript.', 'Emphasizes the value of understanding various approaches to accessing HTML elements, despite not being the best practice, for potential use cases.']}, {'end': 30969.834, 'segs': [{'end': 30052.872, 'src': 'embed', 'start': 30025.989, 'weight': 0, 'content': [{'end': 30032.432, 'text': 'Like if you have to use this selector more than once, you might want to put it into a variable so we can do that.', 'start': 30025.989, 'duration': 6.443}, {'end': 30040.3, 'text': 'by just setting a variable and then setting this to get element by D and app dash title.', 'start': 30033.553, 'duration': 6.747}, {'end': 30045.525, 'text': "So now if I were to console log title, then that's going to give us the element.", 'start': 30041.201, 'duration': 4.324}, {'end': 30052.872, 'text': "Now, I know that this video is showing you these different selectors and we've only looked at get element by ID.", 'start': 30046.431, 'duration': 6.441}], 'summary': 'Using a variable for selectors makes code more efficient and reusable.', 'duration': 26.883, 'max_score': 30025.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo30025989.jpg'}], 'start': 29650.253, 'title': 'Javascript dom manipulation', 'summary': 'Covers methods for manipulating dom elements, including working with html collections, manipulating css styles, and selecting elements using queryselector. it demonstrates various methods for selecting and manipulating elements, such as document.getelementbyid, getattribute, setattribute, textcontent and innerhtml. additionally, the chapter previews upcoming discussions on methods for selecting elements from the dom. the chapter also emphasizes the importance of dynamic interface and covers the array-like nature of html collections and the method to convert an html collection to an array.', 'chapters': [{'end': 29821.567, 'start': 29650.253, 'title': 'Working with html collections', 'summary': 'Explains how to work with html collections, highlighting the array-like nature of html collections, the inability to use foreach directly on html collections, and the method to convert an html collection to an array. it also previews the upcoming discussion on methods for selecting elements from the dom.', 'duration': 171.314, 'highlights': ['HTML collection is array-like but cannot use forEach directly: An HTML collection, obtained when working with document forms, behaves like an array but does not support the forEach method, requiring conversion to an array for iteration.', 'Method to convert HTML collection to array using array.from: Demonstrates the use of the array.from method to convert an HTML collection to an array for easier iteration and manipulation.', "Preview of upcoming discussion on methods for selecting elements from the DOM: Provides a glimpse of the next video's focus on practical methods for selecting single and multiple elements from the DOM."]}, {'end': 30155.479, 'start': 29821.587, 'title': 'Dom element manipulation', 'summary': 'Covers various methods to manipulate dom elements, including document.getelementbyid, getattribute, setattribute, and properties like textcontent and innerhtml, demonstrating the ability to retrieve and modify element attributes and content.', 'duration': 333.892, 'highlights': ['The chapter covers various methods to manipulate DOM elements The chapter discusses different methods like document.getElementById, getAttribute, setAttribute, textContent, and innerHTML to manipulate DOM elements.', 'demonstrating the ability to retrieve and modify element attributes and content The methods such as getAttribute, setAttribute, textContent, and innerHTML are demonstrated to show the ability to retrieve and modify element attributes and content.', 'document.getElementById allows us to get any element in the DOM by its ID The method document.getElementById is explained to allow the retrieval of any element in the DOM by its ID.']}, {'end': 30491.19, 'start': 30156.999, 'title': 'Javascript dom manipulation', 'summary': 'Covers manipulating css styles using javascript, the importance of dynamic interface, and the introduction of document.queryselector for single element selection, enabling the selection of elements by id, class, attributes, and pseudo-selectors.', 'duration': 334.191, 'highlights': ['The importance of dynamic interface and using JavaScript to manipulate CSS styles for dynamic changes. JavaScript allows for dynamic interface changes by manipulating CSS styles, such as setting color to red or black, adding padding, and changing class to show or hidden.', 'Introduction of document.queryselector for single element selection, enabling the selection of elements by ID, class, attributes, and pseudo-selectors. The introduction of document.queryselector allows for single element selection by ID, class, attributes, and pseudo-selectors, providing more flexibility than using getelementbyid or jQuery.', 'Demonstration of selecting elements by ID, class, attributes, and pseudo-selectors using document.queryselector. The demonstration includes selecting elements by ID, class, attributes like type=text, and using pseudo-selectors like nth-child to target specific elements on the page.']}, {'end': 30969.834, 'start': 30492.571, 'title': 'Javascript dom manipulation', 'summary': 'Covers manipulating the document object model (dom) using javascript, including changing elements such as color and text, selecting elements using queryselector, and working with node lists and html collections.', 'duration': 477.263, 'highlights': ['The chapter covers manipulating the Document Object Model (DOM) using JavaScript The tutorial discusses how to manipulate the DOM using JavaScript, providing practical examples and encouraging experimentation.', "Changing elements such as color and text Demonstrates how to change the color and text of elements using JavaScript, with examples of modifying the color and text of items such as 'apple juice' and 'oranges'.", 'Selecting elements using querySelector Explains how to use querySelector to select specific elements in the DOM, showcasing examples of selecting the entire unordered list and the first list item.', 'Working with node lists and HTML collections Discusses the differences between node lists and HTML collections, and demonstrates how to work with node lists, including accessing individual elements and using forEach loops for manipulation.']}], 'duration': 1319.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo29650253.jpg', 'highlights': ['Demonstration of selecting elements by ID, class, attributes, and pseudo-selectors using document.queryselector.', 'Method to convert HTML collection to array using array.from: Demonstrates the use of the array.from method to convert an HTML collection to an array for easier iteration and manipulation.', 'The chapter covers various methods to manipulate DOM elements The chapter discusses different methods like document.getElementById, getAttribute, setAttribute, textContent, and innerHTML to manipulate DOM elements.', 'The importance of dynamic interface and using JavaScript to manipulate CSS styles for dynamic changes.']}, {'end': 33582.531, 'segs': [{'end': 31228.65, 'src': 'embed', 'start': 31203.177, 'weight': 2, 'content': [{'end': 31208.72, 'text': "Everything in the DOM is a node and there's other types of nodes like text node comments nodes.", 'start': 31203.177, 'duration': 5.543}, {'end': 31212.443, 'text': "We're going to talk about those in the next video because there are certain properties.", 'start': 31208.961, 'duration': 3.482}, {'end': 31218.506, 'text': "If you want to work with those types of nodes in this video we're specifically going to look at element nodes.", 'start': 31212.823, 'duration': 5.683}, {'end': 31222.027, 'text': 'Okay, so any HTML tag on the page is an element.', 'start': 31218.806, 'duration': 3.221}, {'end': 31228.65, 'text': 'And I also want you to just be familiar with relationships, which you should be if you know HTML.', 'start': 31222.607, 'duration': 6.043}], 'summary': 'The dom contains various nodes such as element nodes, text nodes, and comment nodes, and this video focuses specifically on element nodes in html.', 'duration': 25.473, 'max_score': 31203.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo31203177.jpg'}, {'end': 31497.268, 'src': 'embed', 'start': 31467.902, 'weight': 1, 'content': [{'end': 31472.167, 'text': 'If I take the second one here and change it to an ally then node name is going to be ally.', 'start': 31467.902, 'duration': 4.265}, {'end': 31473.569, 'text': 'All right.', 'start': 31472.267, 'duration': 1.302}, {'end': 31478.034, 'text': 'So we can treat it just like we could treat a directly selected element.', 'start': 31473.629, 'duration': 4.405}, {'end': 31481.419, 'text': 'Now I can change things as well.', 'start': 31479.318, 'duration': 2.101}, {'end': 31497.268, 'text': "So if I want to grab let's say parent dot children and then one and let's set we'll say text not text inner text or text content whichever one.", 'start': 31481.499, 'duration': 15.769}], 'summary': 'Demonstrating changes to node elements and accessing content within the dom.', 'duration': 29.366, 'max_score': 31467.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo31467902.jpg'}, {'end': 32699.65, 'src': 'embed', 'start': 32672.254, 'weight': 3, 'content': [{'end': 32681, 'text': 'So the other properties we looked at, like next element sibling, previous element sibling, parent element.', 'start': 32672.254, 'duration': 8.746}, {'end': 32688.105, 'text': 'What else? Children as the as an HTML collection, as opposed to these child nodes.', 'start': 32682.021, 'duration': 6.084}, {'end': 32691.181, 'text': "So that stuff you'll probably be working with more.", 'start': 32688.658, 'duration': 2.523}, {'end': 32694.264, 'text': 'But again, I want this to be a front to back course.', 'start': 32691.281, 'duration': 2.983}, {'end': 32697.567, 'text': 'I want you to know everything, you know, as far as I know.', 'start': 32694.284, 'duration': 3.283}, {'end': 32698.669, 'text': 'All right.', 'start': 32697.587, 'duration': 1.082}, {'end': 32699.65, 'text': "So that's it.", 'start': 32698.829, 'duration': 0.821}], 'summary': 'Covered properties like next/previous element sibling, parent element, children as html collection, and emphasized comprehensive learning in the front to back course.', 'duration': 27.396, 'max_score': 32672.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo32672254.jpg'}, {'end': 32983.533, 'src': 'embed', 'start': 32958.328, 'weight': 0, 'content': [{'end': 32965.136, 'text': "Now, append child is a very important method that you're going to need to understand because you're going to use it all the time.", 'start': 32958.328, 'duration': 6.808}, {'end': 32967.218, 'text': "And it's easy to understand.", 'start': 32965.576, 'duration': 1.642}, {'end': 32974.527, 'text': "It appends a child to whether that's an element or whether that's a tech node, a tech node, a text node.", 'start': 32967.318, 'duration': 7.209}, {'end': 32979.25, 'text': 'it appends it to or inserts it into whatever this is.', 'start': 32974.987, 'duration': 4.263}, {'end': 32983.533, 'text': "So in this case, we're putting the text inside of the div.", 'start': 32979.57, 'duration': 3.963}], 'summary': 'Append child method inserts child into element or text node.', 'duration': 25.205, 'max_score': 32958.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo32958328.jpg'}, {'end': 33027.493, 'src': 'embed', 'start': 33005.167, 'weight': 4, 'content': [{'end': 33013.633, 'text': "append child and then pass in our div, and if I save that, you'll see that hello world is now put at the very bottom.", 'start': 33005.167, 'duration': 8.466}, {'end': 33020.377, 'text': "so if we were to inspect our element here, it's right before the the ending body tag.", 'start': 33013.633, 'duration': 6.744}, {'end': 33026.243, 'text': "okay, it's above the scripts and stuff and the live server stuff, but it's after everything else.", 'start': 33020.377, 'duration': 5.866}, {'end': 33027.493, 'text': 'All right.', 'start': 33027.173, 'duration': 0.32}], 'summary': "Adding a child div placed 'hello world' at the bottom of the page.", 'duration': 22.326, 'max_score': 33005.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo33005167.jpg'}], 'start': 30969.974, 'title': 'Javascript dom manipulation', 'summary': 'Covers element selection, relationships, and navigation in the dom using javascript. it includes methods for selecting dom elements, navigating relationships between elements, accessing and manipulating different node types, creating and appending elements with practical examples and demonstrations.', 'chapters': [{'end': 31178.183, 'start': 30969.974, 'title': 'Javascript dom element selection', 'summary': 'Covers various methods for selecting dom elements in javascript, including getelementsbyclassname, getelementsbytagname, and converting html collections to arrays using array.from to enable array methods like foreach, with practical examples provided.', 'duration': 208.209, 'highlights': ['The chapter covers various methods for selecting DOM elements in JavaScript Provides an overview of the main topic of the chapter.', 'including getElementsByClassName, getElementsByTagName Specifically mentions the methods covered in the transcript.', 'converting HTML collections to arrays using Array.from to enable array methods like forEach Explains the process of converting HTML collections to arrays and the purpose behind it.', 'with practical examples provided Emphasizes the inclusion of practical examples in the chapter.']}, {'end': 32027.086, 'start': 31178.703, 'title': 'Dom relationship and navigation', 'summary': 'Introduces the relationships between element nodes in the dom, emphasizing the properties for traversing the dom, such as parent element, first and last element child, next and previous element sibling, and children property, with practical demonstrations and explanations.', 'duration': 848.383, 'highlights': ['The chapter introduces the relationships between element nodes in the DOM. It discusses the parent-child and sibling relationships within the DOM, providing a foundational understanding of the structure.', 'Emphasizes the properties for traversing the DOM, such as parent element, first and last element child, next and previous element sibling, and children property. It highlights the essential properties for navigating and accessing element nodes within the DOM, enabling efficient manipulation and interaction with elements.', 'Practical demonstrations and explanations provided for better understanding. The tutorial includes practical demonstrations and detailed explanations, improving the comprehension and application of the discussed DOM traversal properties.']}, {'end': 32772.502, 'start': 32027.206, 'title': 'Javascript nodes and navigation', 'summary': 'Covers navigating dom elements using child nodes, parent nodes, and siblings, demonstrating how to access and manipulate different node types, with a focus on understanding nodes in general versus element nodes. it also introduces the concept of creating elements in javascript for future document manipulation.', 'duration': 745.296, 'highlights': ['Accessing Child Nodes and Node Types Demonstrated accessing child nodes and navigating different node types, including text nodes, comments, and element nodes, illustrating the difference between HTML collection and node list.', 'Manipulating Nodes and Understanding Node Relationships Illustrated manipulating nodes by changing text content, inner HTML, and styles, and explained the relationships between parent nodes, parent elements, and child nodes.', 'Introduction to Creating Elements in JavaScript Introduced the concept of creating elements in JavaScript and highlighted the significance of inserting new elements into the document, providing a real-world example with a shopping list.']}, {'end': 33058.027, 'start': 32772.502, 'title': 'Creating and appending elements in javascript', 'summary': "Explains how to create a new div element, add attributes like class and id, append text to the div using 'createtextnode' method, and use 'appendchild' to insert the div into the document body or a specified element.", 'duration': 285.525, 'highlights': ["The 'createElement' method is used to create a new div element in JavaScript. The speaker demonstrates using the 'createElement' method to create a new div element in JavaScript.", "Attributes like class, ID, and title can be added to the created div using 'className', 'id', and 'setAttribute' methods. The process of adding attributes like class, ID, and title to the created div using various methods is explained.", "The 'createTextNode' method is used to add text content to the created div element. The 'createTextNode' method is utilized to add text content such as 'hello world' to the created div element.", "The 'appendChild' method is used to insert the created div into the document body or a specified element. The 'appendChild' method is illustrated to insert the created div into the document body and a specified element like an unordered list."]}, {'end': 33582.531, 'start': 33059.587, 'title': 'Creating and adding elements to the dom', 'summary': "Covers creating and adding elements to the dom using 'create element' and 'append child' methods, and demonstrates two ways to add a new list item to a shopping list, highlighting the more performant approach of creating new elements and appending them.", 'duration': 522.944, 'highlights': ["The chapter covers creating and adding elements to the DOM using 'create element' and 'append child' methods. The chapter explains the two main methods for creating and adding elements to the DOM, which are 'create element' and 'append child'.", 'Demonstrates two ways to add a new list item to a shopping list, highlighting the more performant approach of creating new elements and appending them. Two methods for adding a new list item to a shopping list are showcased, emphasizing the importance of the more performant approach of creating new elements and appending them over using inner HTML.']}], 'duration': 2612.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo30969974.jpg', 'highlights': ['The chapter covers various methods for selecting DOM elements in JavaScript Provides an overview of the main topic of the chapter.', 'The chapter introduces the relationships between element nodes in the DOM. It discusses the parent-child and sibling relationships within the DOM, providing a foundational understanding of the structure.', 'Accessing Child Nodes and Node Types Demonstrated accessing child nodes and navigating different node types, including text nodes, comments, and element nodes, illustrating the difference between HTML collection and node list.', "The 'createElement' method is used to create a new div element in JavaScript. The speaker demonstrates using the 'createElement' method to create a new div element in JavaScript.", "The chapter covers creating and adding elements to the DOM using 'create element' and 'append child' methods. The chapter explains the two main methods for creating and adding elements to the DOM, which are 'create element' and 'append child'."]}, {'end': 34708.822, 'segs': [{'end': 33802.709, 'src': 'embed', 'start': 33744.298, 'weight': 1, 'content': [{'end': 33749.622, 'text': 'And then ultimately from here, we just want to return return the button.', 'start': 33744.298, 'duration': 5.324}, {'end': 33761.111, 'text': 'And then what we can do in the create new item is just set a new variable button to the return value of create button.', 'start': 33751.203, 'duration': 9.908}, {'end': 33764.314, 'text': 'And then we can pass our classes in.', 'start': 33762.532, 'duration': 1.782}, {'end': 33767.683, 'text': "If I save that we're going to get the same exact thing.", 'start': 33765.282, 'duration': 2.401}, {'end': 33772.524, 'text': 'Now I want to do the same thing with icons with the icon.', 'start': 33768.843, 'duration': 3.681}, {'end': 33782.247, 'text': "So I'm going to grab those two lines and in our create icon, let's paste that in and I'm going to cut these classes,", 'start': 33772.564, 'duration': 9.683}, {'end': 33788.249, 'text': 'set that to the classes that come in as arguments and then return the icon.', 'start': 33782.247, 'duration': 6.002}, {'end': 33791.09, 'text': 'And then that way we could come up here now.', 'start': 33788.969, 'duration': 2.121}, {'end': 33802.709, 'text': 'This is another thing that you have preference on, if you want to have the icon or create icon function called in here or in the button,', 'start': 33792.665, 'duration': 10.044}], 'summary': 'Creating and returning buttons and icons with specified classes in functions.', 'duration': 58.411, 'max_score': 33744.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo33744298.jpg'}, {'end': 34288.187, 'src': 'heatmap', 'start': 33841.055, 'weight': 0, 'content': [{'end': 33844.678, 'text': "we're just setting the button to the return value of of the create button.", 'start': 33841.055, 'duration': 3.623}, {'end': 33852.384, 'text': "we're appending it to the list item and then ultimately we're appending the list item to the, the ul and the dom.", 'start': 33844.678, 'duration': 7.706}, {'end': 33852.684, 'text': 'all right.', 'start': 33852.384, 'duration': 0.3}, {'end': 33862.246, 'text': "so if i were to call another function here, create new item and we'll put in i don't know sauce, Save that and you'll see that gets added.", 'start': 33852.684, 'duration': 9.562}, {'end': 33864.688, 'text': "So it's completely up to you.", 'start': 33863.347, 'duration': 1.341}, {'end': 33868.67, 'text': "I'll talk about like clean code practices and stuff throughout the course.", 'start': 33864.888, 'duration': 3.782}, {'end': 33871.632, 'text': 'But like I said I think a lot of it is preference.', 'start': 33868.79, 'duration': 2.842}, {'end': 33875.554, 'text': 'All right guys.', 'start': 33875.174, 'duration': 0.38}, {'end': 33883.038, 'text': "So when it comes to inserting elements into the Dom we've looked at a pen child which is very common.", 'start': 33875.574, 'duration': 7.464}, {'end': 33887.721, 'text': "You'll probably be using that a lot but there are other methods as well.", 'start': 33883.198, 'duration': 4.523}, {'end': 33890.507, 'text': 'that you can use and I want to show you those in this video.', 'start': 33888.226, 'duration': 2.281}, {'end': 33894.689, 'text': "So the first three are they're all related.", 'start': 33891.027, 'duration': 3.662}, {'end': 33897.71, 'text': "It just it's the only difference is what you're inserting.", 'start': 33894.709, 'duration': 3.001}, {'end': 33900.231, 'text': 'So we have this insert adjacent element.', 'start': 33897.77, 'duration': 2.461}, {'end': 33908.094, 'text': "If you're inserting a new custom element insert adjacent text if you're inserting text and insert adjacent HTML.", 'start': 33900.731, 'duration': 7.363}, {'end': 33910.374, 'text': "If you're inserting HTML.", 'start': 33908.672, 'duration': 1.702}, {'end': 33916.08, 'text': 'So the way these work is they take in a position which is going to be one of these four.', 'start': 33910.915, 'duration': 5.165}, {'end': 33919.344, 'text': 'So here I just put this example of a paragraph.', 'start': 33916.481, 'duration': 2.863}, {'end': 33924.81, 'text': "And if you choose to insert before begin it's going to go above the paragraph.", 'start': 33919.905, 'duration': 4.905}, {'end': 33927.914, 'text': "OK Or whatever element you're using as a reference.", 'start': 33924.99, 'duration': 2.924}, {'end': 33936.13, 'text': 'And then, after begin, would be directly inside of it, at the top, above all the content, and then, before end,', 'start': 33928.467, 'duration': 7.663}, {'end': 33944.014, 'text': 'would be after the content but still within the paragraph and after and would be after the entire paragraph or whatever element.', 'start': 33936.13, 'duration': 7.884}, {'end': 33944.834, 'text': 'All right.', 'start': 33944.554, 'duration': 0.28}, {'end': 33951.417, 'text': "So let's start off with the insert adjacent element and I'm just going to create separate functions to run for each of these.", 'start': 33944.854, 'duration': 6.563}, {'end': 33956.359, 'text': "So this one will call insert element just so we're not in the global scope.", 'start': 33951.897, 'duration': 4.462}, {'end': 33962.123, 'text': 'And first thing we need is a reference element on the page.', 'start': 33957.319, 'duration': 4.804}, {'end': 33964.885, 'text': 'So where do we want to insert our new element.', 'start': 33962.183, 'duration': 2.702}, {'end': 33969.248, 'text': "Let's say we want to do it before this filter items input.", 'start': 33965.005, 'duration': 4.243}, {'end': 33972.991, 'text': 'So we need to bring in that filter items input.', 'start': 33969.749, 'duration': 3.242}, {'end': 33974.793, 'text': "So it's a document dot.", 'start': 33973.191, 'duration': 1.602}, {'end': 33976.746, 'text': 'Query selector.', 'start': 33975.725, 'duration': 1.021}, {'end': 33982.072, 'text': 'And I believe that has a div around it with the class of filter.', 'start': 33977.087, 'duration': 4.985}, {'end': 33983.674, 'text': 'So we want to choose that.', 'start': 33982.392, 'duration': 1.282}, {'end': 33984.615, 'text': 'All right.', 'start': 33984.315, 'duration': 0.3}, {'end': 33986.617, 'text': 'Then we want to create our new element.', 'start': 33984.695, 'duration': 1.922}, {'end': 33994.025, 'text': "And this could be whatever anything you want to put on the page, whether it's a new list item or it's some data from an API, whatever it might be.", 'start': 33986.777, 'duration': 7.248}, {'end': 33995.607, 'text': "In our case, I'm just going to create an H1.", 'start': 33994.166, 'duration': 1.441}, {'end': 34007.186, 'text': "So let's say document dot create element and we're going to create a new H1 and then I'm just going to add some text to that with text content.", 'start': 33996.795, 'duration': 10.391}, {'end': 34009.969, 'text': "So let's set this.", 'start': 34008.507, 'duration': 1.462}, {'end': 34014.733, 'text': "I'll just put the the name of the method we're looking at as the text.", 'start': 34010.049, 'duration': 4.684}, {'end': 34016.395, 'text': 'All right.', 'start': 34016.075, 'duration': 0.32}, {'end': 34020.019, 'text': "And then to insert it we're going to take the filter.", 'start': 34016.515, 'duration': 3.504}, {'end': 34024.558, 'text': "And then that's where we call insert a Jason element.", 'start': 34021.397, 'duration': 3.161}, {'end': 34026.498, 'text': "And it's going to take in two things.", 'start': 34025.038, 'duration': 1.46}, {'end': 34029.639, 'text': 'The first is going to be the position, which is going to be one of these four.', 'start': 34026.558, 'duration': 3.081}, {'end': 34031.539, 'text': "I'm going to choose before begin.", 'start': 34030.059, 'duration': 1.48}, {'end': 34032.839, 'text': 'All right.', 'start': 34031.559, 'duration': 1.28}, {'end': 34034.94, 'text': "So that that'll that'll put it right above it.", 'start': 34032.959, 'duration': 1.981}, {'end': 34038.141, 'text': 'And the second is the element we want to insert.', 'start': 34035.58, 'duration': 2.561}, {'end': 34039.241, 'text': 'All right.', 'start': 34038.941, 'duration': 0.3}, {'end': 34046.442, 'text': "So now let's just run this function so that this code runs and we'll say insert element.", 'start': 34039.321, 'duration': 7.121}, {'end': 34047.983, 'text': 'Save that.', 'start': 34047.322, 'duration': 0.661}, {'end': 34055.644, 'text': 'Oops And you can see that my H1 has been put above the filter form.', 'start': 34048.003, 'duration': 7.641}, {'end': 34061.566, 'text': "If I change this to, let's say, after end, it's going to be put below it.", 'start': 34056.204, 'duration': 5.362}, {'end': 34067.928, 'text': "All right, so it's just another way to insert content onto the page through JavaScript.", 'start': 34062.786, 'duration': 5.142}, {'end': 34073.569, 'text': 'Now the text, insert adjacent text, works in a very similar way.', 'start': 34068.428, 'duration': 5.141}, {'end': 34085.614, 'text': "So let's create a function here called insert, And we're going to figure out what text do we want to choose,", 'start': 34074.19, 'duration': 11.424}, {'end': 34089.116, 'text': 'or what element do we want to choose to put our text before or after?', 'start': 34085.614, 'duration': 3.502}, {'end': 34092.357, 'text': "I'm going to choose the first list item here.", 'start': 34089.476, 'duration': 2.881}, {'end': 34100.181, 'text': "So let's say const and say item and document dot query selector.", 'start': 34092.898, 'duration': 7.283}, {'end': 34104.363, 'text': "And we'll just put in ally here.", 'start': 34102.563, 'duration': 1.8}, {'end': 34107.904, 'text': 'We could do ally colon first dash child.', 'start': 34104.423, 'duration': 3.481}, {'end': 34109.845, 'text': 'Either one is going to give us the first one.', 'start': 34108.024, 'duration': 1.821}, {'end': 34117.826, 'text': "And then on that item, we're going to run the insert adjacent text method.", 'start': 34110.565, 'duration': 7.261}, {'end': 34119.667, 'text': "And that's going to take in a position.", 'start': 34118.046, 'duration': 1.621}, {'end': 34122.007, 'text': "Let's say we'll do after end.", 'start': 34119.747, 'duration': 2.26}, {'end': 34128.289, 'text': "And then we can put in, I'm sorry, not item, whatever text we want, which I'll just do.", 'start': 34123.027, 'duration': 5.262}, {'end': 34130.329, 'text': "I'll just do the name of the method.", 'start': 34128.309, 'duration': 2.02}, {'end': 34132.888, 'text': 'Save that.', 'start': 34132.228, 'duration': 0.66}, {'end': 34134.509, 'text': 'Actually, we have to run it.', 'start': 34133.529, 'duration': 0.98}, {'end': 34139.812, 'text': "So let's come down here, insert text, save that.", 'start': 34134.689, 'duration': 5.123}, {'end': 34143.453, 'text': "And now you can see that it's after the first list item.", 'start': 34139.912, 'duration': 3.541}, {'end': 34149.056, 'text': 'If I change it to before begin, then it goes above it.', 'start': 34143.933, 'duration': 5.123}, {'end': 34150.977, 'text': 'I can also do after begin.', 'start': 34149.456, 'duration': 1.521}, {'end': 34155.259, 'text': "That'll put it inside or before and which will put it inside at the bottom.", 'start': 34151.017, 'duration': 4.242}, {'end': 34157.84, 'text': 'And this is similar to what a pen child does.', 'start': 34155.379, 'duration': 2.461}, {'end': 34164.037, 'text': "Right So for HTML that's just pretty much the same thing.", 'start': 34157.94, 'duration': 6.097}, {'end': 34172.763, 'text': "We'll say insert HTML and let's choose let's choose the clear button down at the bottom.", 'start': 34164.157, 'duration': 8.606}, {'end': 34187.033, 'text': "So we'll say clear BTN and document query selector and it has an ID of clear and then on the clear button let's say dot insert.", 'start': 34172.903, 'duration': 14.13}, {'end': 34192.967, 'text': "adjacent html and it's going to take in a position.", 'start': 34187.904, 'duration': 5.063}, {'end': 34199.191, 'text': "so let's say before begin and then we can just pass in basically a string with html.", 'start': 34192.967, 'duration': 6.224}, {'end': 34212.659, 'text': "so let's put an h2 and we'll say insert, insert adjacent html and close our h2.", 'start': 34199.191, 'duration': 13.468}, {'end': 34219.106, 'text': 'save that i keep forgetting to run it, Insert HTML.', 'start': 34212.659, 'duration': 6.447}, {'end': 34223.648, 'text': "There we go, so it's put before if I do after.", 'start': 34221.026, 'duration': 2.622}, {'end': 34227.309, 'text': "Then it's put after.", 'start': 34226.269, 'duration': 1.04}, {'end': 34238.534, 'text': "OK, so again, these all work and they work the same way, it just depends on what you're inserting an element, a text, just regular text or HTML.", 'start': 34228.71, 'duration': 9.824}, {'end': 34245.977, 'text': 'And this is insert HTML or insert adjacent HTML works like inner HTML.', 'start': 34240.034, 'duration': 5.943}, {'end': 34255.091, 'text': "Now, there's another function or method that I want to show you called insert before, which is similar to a pen child and how it works.", 'start': 34247.088, 'duration': 8.003}, {'end': 34257.052, 'text': "But it's a little more complicated,", 'start': 34255.652, 'duration': 1.4}, {'end': 34267.056, 'text': 'because what you do is you define a parent or you bring in a parent and then you choose the item inside that parent that you want to insert your item before.', 'start': 34257.052, 'duration': 10.004}, {'end': 34268.077, 'text': 'All right.', 'start': 34267.076, 'duration': 1.001}, {'end': 34272.999, 'text': "So let's create a function called insert before item.", 'start': 34268.117, 'duration': 4.882}, {'end': 34279.821, 'text': "And we'll create the parent or select the parent, which I'll use the unordered list.", 'start': 34275.138, 'duration': 4.683}, {'end': 34288.187, 'text': "So let's say document dot query, query selector, and then we'll choose the UL.", 'start': 34279.881, 'duration': 8.306}], 'summary': 'Demonstrating different methods for inserting elements into the dom using javascript.', 'duration': 31.135, 'max_score': 33841.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo33841055.jpg'}, {'end': 34346.017, 'src': 'embed', 'start': 34313.835, 'weight': 6, 'content': [{'end': 34320.82, 'text': 'And then what we do is select an item inside the parent where we want to insert before.', 'start': 34313.835, 'duration': 6.985}, {'end': 34325.65, 'text': "So let's select the, Let's get the third item.", 'start': 34320.9, 'duration': 4.75}, {'end': 34327.771, 'text': "so I'll say const.", 'start': 34325.65, 'duration': 2.121}, {'end': 34343.156, 'text': "third, third item and we can do that with document dot query selector and then I'm going to do ally and then we'll use and dash child three.", 'start': 34327.771, 'duration': 15.385}, {'end': 34346.017, 'text': 'OK so that will give me the third one.', 'start': 34343.176, 'duration': 2.841}], 'summary': 'The speaker explains how to select and insert an item at a specific position, targeting the third item using document.queryselector and nth-child.', 'duration': 32.182, 'max_score': 34313.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo34313835.jpg'}], 'start': 33583.071, 'title': 'Dom and custom insertion methods', 'summary': 'Discusses the benefits of creating separate functions for creating buttons and icons, and covers various methods for inserting elements, text, and html into the dom using javascript. it also explains creating a custom insert after function in javascript and encourages reference to mdn docs for understanding these properties.', 'chapters': [{'end': 33875.554, 'start': 33583.071, 'title': 'Separate functions for creating buttons and icons', 'summary': 'Discusses the benefits of creating separate functions for creating buttons and icons, making the code more reusable and readable, ultimately enhancing the clean code practices.', 'duration': 292.483, 'highlights': ['Creating separate functions for creating buttons and icons makes the code more reusable and readable. By creating separate functions for creating buttons and icons, the code becomes more reusable and readable, enhancing the clean code practices.', 'Preference plays a significant role in writing clean code, but separating functions for specific tasks is considered a good practice. While preference is essential in writing clean code, separating functions for specific tasks, such as creating buttons and icons, is considered a good practice.', 'The approach of having separate functions for creating buttons and icons provides flexibility and options for developers to choose from. Having separate functions for creating buttons and icons provides flexibility and options for developers to choose from, contributing to the maintainability of the codebase.']}, {'end': 34426.843, 'start': 33875.574, 'title': 'Dom insertion methods in javascript', 'summary': 'Covers various methods for inserting elements, text, and html into the dom using javascript, such as insertadjacentelement, insertadjacenttext, and insertadjacenthtml, highlighting their respective functionalities and implementations with code examples.', 'duration': 551.269, 'highlights': ['The chapter covers various methods for inserting elements, text, and HTML into the DOM using JavaScript It explores different methods like insertAdjacentElement, insertAdjacentText, and insertAdjacentHTML for DOM manipulation.', 'insertAdjacentElement, insertAdjacentText, and insertAdjacentHTML are demonstrated with code examples The specific functionalities of insertAdjacentElement, insertAdjacentText, and insertAdjacentHTML are illustrated through code examples and their respective positions for insertion.', 'The insertAdjacentElement method is used to insert a new custom element at a specified position The insertAdjacentElement method allows inserting a new custom element at specific positions like before begin, after begin, before end, and after end.', 'insertAdjacentText method is utilized to insert text before or after a specified element The insertAdjacentText method is demonstrated to insert text before or after a selected element, with examples of positions like before begin, after begin, before end, and after end.', 'The insertAdjacentHTML method is employed to insert HTML content in the DOM It shows the usage of insertAdjacentHTML to insert HTML content at different positions such as before begin, after begin, before end, and after end.', 'The insertBefore method is presented for inserting an element before a specified reference element The insertBefore method is explained, where a new element is inserted before a specified reference element within a parent element.']}, {'end': 34708.822, 'start': 34427.144, 'title': 'Creating custom insert after function', 'summary': 'Covers creating a custom insert after function in javascript, where a new element is inserted after an existing element using parent element and next sibling properties, and insert before method. the video also encourages reference to mdn docs for understanding these properties.', 'duration': 281.678, 'highlights': ['A custom insert after function is demonstrated in JavaScript, where a new element is inserted after an existing element using parent element and next sibling properties, and insert before method.', 'The importance of understanding properties like parent element and next sibling, and methods like insert before is emphasized, with encouragement to reference MDN docs for further understanding.', 'The demonstration includes using the custom insert after function to insert a new element after an existing element, showcasing the practical application of the concept.', 'The video encourages viewers to view it as a challenge and try creating the custom insert after function themselves, fostering engagement and practical learning.']}], 'duration': 1125.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo33583071.jpg', 'highlights': ['Creating separate functions for creating buttons and icons enhances clean code practices.', 'Having separate functions for creating buttons and icons provides flexibility and options for developers.', 'The chapter covers various methods for inserting elements, text, and HTML into the DOM using JavaScript.', 'The insertAdjacentElement method allows inserting a new custom element at specific positions.', 'The insertAdjacentText method is demonstrated to insert text before or after a selected element.', 'The insertAdjacentHTML method is employed to insert HTML content in the DOM.', 'A custom insert after function is demonstrated in JavaScript, showcasing the practical application of the concept.', 'The importance of understanding properties like parent element and next sibling, and methods like insert before is emphasized.']}, {'end': 37160.494, 'segs': [{'end': 34831.391, 'src': 'embed', 'start': 34756.513, 'weight': 1, 'content': [{'end': 34757.795, 'text': "So I'm going to show you a couple.", 'start': 34756.513, 'duration': 1.282}, {'end': 34763.16, 'text': "Now I'm going to create a couple functions just because we're doing a few things.", 'start': 34757.815, 'duration': 5.345}, {'end': 34765.462, 'text': 'So I want to be able to run separate functions.', 'start': 34763.2, 'duration': 2.262}, {'end': 34772.65, 'text': "So let's create a function and we'll say replace first item.", 'start': 34766.123, 'duration': 6.527}, {'end': 34778.334, 'text': 'OK, so I want this function to replace the first item, which right now is apples.', 'start': 34773.809, 'duration': 4.525}, {'end': 34782.778, 'text': 'So first we want to bring in the item we want to replace.', 'start': 34779.094, 'duration': 3.684}, {'end': 34788.985, 'text': "So we'll call this first item and we'll select that from the Dom with query selector.", 'start': 34783.019, 'duration': 5.966}, {'end': 34794.951, 'text': 'And just put in here, you could do ally or you could do first child.', 'start': 34790.586, 'duration': 4.365}, {'end': 34796.773, 'text': "Either way, it's going to select the first one.", 'start': 34795.031, 'duration': 1.742}, {'end': 34800.144, 'text': 'And then we want to create our new element.', 'start': 34798.143, 'duration': 2.001}, {'end': 34804.307, 'text': 'So document dot create element.', 'start': 34800.545, 'duration': 3.762}, {'end': 34810.15, 'text': "And notice we've been kind of repeating ourselves quite a bit throughout this section.", 'start': 34805.027, 'duration': 5.123}, {'end': 34812.832, 'text': "And that's a good thing because it's drilling into your head.", 'start': 34810.45, 'duration': 2.382}, {'end': 34814.593, 'text': 'How do I select elements.', 'start': 34813.212, 'duration': 1.381}, {'end': 34817.175, 'text': 'How do I create them insert them and so on.', 'start': 34814.633, 'duration': 2.542}, {'end': 34820.817, 'text': 'Now we want to create a list item to replace it.', 'start': 34818.195, 'duration': 2.622}, {'end': 34827.321, 'text': "I'm just going to add some text content and you can use text content or inner text.", 'start': 34820.837, 'duration': 6.484}, {'end': 34831.391, 'text': "And let's just make that say replaced first.", 'start': 34828.109, 'duration': 3.282}], 'summary': 'Creating and using functions to replace the first item in a list with a new element.', 'duration': 74.878, 'max_score': 34756.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo34756513.jpg'}, {'end': 35157.462, 'src': 'embed', 'start': 35113.325, 'weight': 3, 'content': [{'end': 35121.471, 'text': 'But all we have to do is say for each and pass in here our function.', 'start': 35113.325, 'duration': 8.146}, {'end': 35124.633, 'text': "We'll say for each item and we also want to get the index.", 'start': 35121.511, 'duration': 3.122}, {'end': 35131.879, 'text': "And then here we'll just say the item dot we'll use outer.", 'start': 35125.394, 'duration': 6.485}, {'end': 35134.675, 'text': 'Outer HTML.', 'start': 35133.635, 'duration': 1.04}, {'end': 35138.456, 'text': 'So we want to set that to a condition.', 'start': 35135.336, 'duration': 3.12}, {'end': 35141.037, 'text': 'OK Our ternary.', 'start': 35138.476, 'duration': 2.561}, {'end': 35157.462, 'text': "So we'll say if the index is equal to is equal to one then we want this this outer HTML to be list item and then second item.", 'start': 35141.397, 'duration': 16.065}], 'summary': 'Using javascript, a function is applied to each item in a list to set the outer html based on the index value.', 'duration': 44.137, 'max_score': 35113.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo35113325.jpg'}, {'end': 37014.312, 'src': 'embed', 'start': 36988.069, 'weight': 0, 'content': [{'end': 36994.054, 'text': "and here we're waiting five seconds and then we're basically clicking this just from within our script,", 'start': 36988.069, 'duration': 5.985}, {'end': 36996.697, 'text': 'rather than coming over to the browser and clicking the button.', 'start': 36994.054, 'duration': 2.643}, {'end': 36997.617, 'text': 'All right.', 'start': 36996.717, 'duration': 0.9}, {'end': 37005.585, 'text': 'Because there might be some cases where you need to do that, where you need to actually fire off an event from, you know, from your script.', 'start': 36997.637, 'duration': 7.948}, {'end': 37014.312, 'text': 'So now what I want to do instead of just having this alert clear items is make this actually work where we click clear and all of these go away.', 'start': 37006.667, 'duration': 7.645}], 'summary': 'Demonstrating automation of clicking a button within a script, emphasizing the need to fire off events and clear items.', 'duration': 26.243, 'max_score': 36988.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo36988069.jpg'}], 'start': 34710.302, 'title': 'Dom manipulation and event handling in javascript', 'summary': 'Covers methods for replacing, manipulating dom elements, css class manipulation, and event handling in javascript, including specific methods, practical applications, and advantages, along with detailed examples for each method.', 'chapters': [{'end': 35048.967, 'start': 34710.302, 'title': 'Replacing elements in the dom', 'summary': 'Covers methods for replacing elements in the dom, including using replacewith and outerhtml, along with a demonstration of replacing all list items using a foreach loop.', 'duration': 338.665, 'highlights': ['The chapter covers methods for replacing elements in the DOM It discusses various methods for replacing elements in the DOM, providing insights into the process of manipulating the DOM.', 'including using replaceWith and outerHTML It demonstrates using replaceWith method and outerHTML to replace elements in the DOM, showcasing different techniques for element replacement.', 'demonstration of replacing all list items using a forEach loop It includes a demonstration of replacing all list items using a forEach loop, showcasing a practical application of the forEach method for element manipulation.']}, {'end': 35774.535, 'start': 35051.608, 'title': 'Manipulating dom elements', 'summary': 'Covers various methods of manipulating dom elements, including choosing specific items, using ternary instead of if statements, replacing elements with different tags, and removing elements using remove and removechild methods.', 'duration': 722.927, 'highlights': ['The chapter covers various methods of manipulating DOM elements The transcript includes explanations on different techniques for manipulating DOM elements, including choosing specific items, using ternary instead of if statements, replacing elements with different tags, and removing elements using remove and removeChild methods.', 'Using ternary instead of if statements The speaker suggests using a ternary instead of an if statement for brevity and cleaner code.', 'Replacing elements with different tags The speaker demonstrates replacing an H1 tag with an H2 tag by selecting the parent element and using the replaceChild method.', 'Removing elements using remove and removeChild methods The transcript provides examples of using the remove method and the removeChild method to remove specific elements from the DOM.']}, {'end': 35960.657, 'start': 35775.68, 'title': 'Css class manipulation and event handling', 'summary': 'Focuses on manipulating css classes and event handling, discussing properties and practices for dynamic functionality, including the use of classes for styling and the introduction of event handling for dynamic functionality.', 'duration': 184.977, 'highlights': ['The chapter introduces the manipulation of CSS classes and the use of event handling for dynamic functionality, emphasizing the importance of events in changing classes and styles.', 'The speaker demonstrates the selection of HTML elements using querySelector and querySelectorAll methods, optimizing the targeting of specific classes and items for manipulation.', 'An upcoming section will delve into event handling, focusing on setting the onclick event and creating functions for dynamic functionality.']}, {'end': 36359.896, 'start': 35962.038, 'title': 'Manipulating classes and styles in javascript', 'summary': 'Covers manipulating classes and styles in javascript, including adding, removing, toggling, and replacing classes, as well as changing css properties directly, with examples demonstrating the practical application of each method.', 'duration': 397.858, 'highlights': ['The classList property provides methods to add, remove, and toggle classes, allowing dynamic manipulation of classes without overwriting existing ones. The classList property allows for dynamic manipulation of classes, providing methods to add, remove, and toggle classes, ensuring that existing classes are not overwritten.', 'Using the style property, CSS properties can be directly manipulated, allowing for real-time changes to the appearance of elements. The style property enables direct manipulation of CSS properties, facilitating real-time changes to the appearance of elements.', 'Looping through elements using forEach and targeting specific elements based on index allows for precise styling and manipulation of individual elements. Looping through elements using forEach and targeting specific elements based on index enables precise styling and manipulation of individual elements, allowing for customized appearance and behavior.']}, {'end': 36837.292, 'start': 36359.916, 'title': 'Javascript event listeners', 'summary': 'Covers the basics of events in javascript, including how to listen for events, different ways to add event listeners, and the advantages of using addeventlistener method, enabling the creation of multiple event listeners for the same element and event.', 'duration': 477.376, 'highlights': ['The chapter covers the basics of events in JavaScript The chapter focuses on teaching the basics of events in JavaScript, including the various types of events and how to listen for them.', 'Different ways to add event listeners The transcript outlines three different ways to add event listeners in JavaScript, including using inline event listeners in HTML, using JavaScript event listener, and the recommended approach of using addEventListener method.', 'Advantages of addEventListener method The addEventListener method is recommended as the most modern way to add event listeners, allowing the creation of multiple event listeners for the same element and event, and also provides the flexibility to use named functions as callbacks.']}, {'end': 37160.494, 'start': 36837.792, 'title': 'Javascript event listeners', 'summary': 'Covers the usage of event listeners in javascript, including the addeventlistener and removeeventlistener methods, as well as the settimeout function to remove an event listener after five seconds and programmatically trigger an event. it also demonstrates different ways to clear items from a list, including setting innerhtml to nothing, using queryselectorall and foreach loop, and employing a while loop for better performance.', 'duration': 322.702, 'highlights': ['The chapter covers the usage of event listeners in JavaScript, including the addEventListener and removeEventListener methods It explains the two methods for managing event listeners, providing a foundational understanding of how to add and remove event listeners in JavaScript.', 'demonstrates different ways to clear items from a list, including setting innerHTML to nothing, using querySelectorAll and forEach loop, and employing a while loop for better performance It showcases various approaches to clearing items from a list, emphasizing simplicity, performance, and different use cases for each method.', 'demonstrates the setTimeout function to remove an event listener after five seconds and programmatically trigger an event It illustrates the usage of setTimeout to delay the removal of an event listener and programmatically trigger an event after a specified time, providing a practical example of asynchronous behavior in JavaScript.']}], 'duration': 2450.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo34710302.jpg', 'highlights': ['The chapter covers methods for replacing elements in the DOM, including using replaceWith and outerHTML.', 'The chapter covers various methods of manipulating DOM elements, including choosing specific items, using ternary instead of if statements, replacing elements with different tags, and removing elements using remove and removeChild methods.', 'The chapter introduces the manipulation of CSS classes and the use of event handling for dynamic functionality, emphasizing the importance of events in changing classes and styles.', 'The classList property provides methods to add, remove, and toggle classes, allowing dynamic manipulation of classes without overwriting existing ones.', 'The chapter covers the basics of events in JavaScript, including the various types of events and how to listen for them.', 'The chapter covers the usage of event listeners in JavaScript, including the addEventListener and removeEventListener methods.']}, {'end': 38373.815, 'segs': [{'end': 37633.814, 'src': 'embed', 'start': 37603.416, 'weight': 5, 'content': [{'end': 37606.198, 'text': 'So those are the events for the buttons.', 'start': 37603.416, 'duration': 2.782}, {'end': 37609.281, 'text': 'Now, we also have events for hovering.', 'start': 37606.899, 'duration': 2.382}, {'end': 37614.145, 'text': "There isn't an actual hover event that I know that for me.", 'start': 37609.801, 'duration': 4.344}, {'end': 37619.129, 'text': "back in the day when I learned JavaScript, I also learned jQuery at the same time, which I wouldn't recommend.", 'start': 37614.145, 'duration': 4.984}, {'end': 37622.291, 'text': "And there's a hover event in jQuery.", 'start': 37619.529, 'duration': 2.762}, {'end': 37626.535, 'text': 'But with JavaScript, you have mouse over and mouse out.', 'start': 37622.712, 'duration': 3.823}, {'end': 37630.138, 'text': "So let's say let's copy this down.", 'start': 37627.175, 'duration': 2.963}, {'end': 37633.814, 'text': "And let's say mouse over.", 'start': 37631.753, 'duration': 2.061}], 'summary': 'Javascript has mouse over and mouse out events, not hover event like in jquery.', 'duration': 30.398, 'max_score': 37603.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo37603416.jpg'}, {'end': 38135.18, 'src': 'embed', 'start': 38109.52, 'weight': 0, 'content': [{'end': 38114.304, 'text': 'and then bubbles up to that parent and that parent, all the way up to the body, up to the HTML.', 'start': 38109.52, 'duration': 4.784}, {'end': 38116.445, 'text': "And I'm going to go over event bubbling soon.", 'start': 38114.324, 'duration': 2.121}, {'end': 38125.572, 'text': 'But that causes us to get two different things for target and current target if we put a listener on something like the body.', 'start': 38117.626, 'duration': 7.946}, {'end': 38132.898, 'text': "When we put it on the image, there's obviously nothing is nested inside of that that we'd click on.", 'start': 38126.673, 'duration': 6.225}, {'end': 38135.18, 'text': "We're clicking on the image, and that's where the event is.", 'start': 38132.938, 'duration': 2.242}], 'summary': 'Event bubbling causes different targets for body and image listeners.', 'duration': 25.66, 'max_score': 38109.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo38109520.jpg'}], 'start': 37160.494, 'title': 'Javascript event handling', 'summary': 'Covers event handling in javascript, including mouse events, event functions, event object properties and methods, and mouse click coordinates and positioning. it provides practical demonstrations and coding examples for various user actions, such as click, double-click, right-click, mouse down, mouse up, and mouse wheel events.', 'chapters': [{'end': 37349.02, 'start': 37160.494, 'title': 'Javascript mouse events', 'summary': 'Demonstrates adding event listeners for click and double click mouse events in javascript, along with the use of removechild to remove list items, with practical demonstrations and coding examples.', 'duration': 188.526, 'highlights': ['The chapter demonstrates adding event listeners for click and double click mouse events in JavaScript, along with the use of removeChild to remove list items.', 'The speaker explains the process of utilizing removeChild to remove the first child in a list item, facilitating the removal of list items until there are no more children.', 'Practical demonstrations are provided, including coding examples to illustrate the implementation of event listeners for click and double click mouse events in JavaScript.', 'The speaker emphasizes the importance of specificity when defining event listener functions, using examples such as on click and on double click to demonstrate the process.']}, {'end': 37600.605, 'start': 37349.02, 'title': 'Event handling in javascript', 'summary': 'Explains event handling in javascript, including changing the background color and text color based on user actions, such as double-click, right-click, mouse down, mouse up, and mouse wheel events, with practical demonstration and explanation.', 'duration': 251.585, 'highlights': ['Changing background and text color based on user actions Demonstrates changing the background and text color based on user actions, such as double-click, with the ability to toggle the colors, providing practical demonstration.', 'Handling right-click event Explains how to handle the right-click event and demonstrates its functionality, including opening a context menu and displaying the console log.', 'Understanding mouse down and mouse up events Provides understanding of the mouse down and mouse up events, with a practical demonstration showing the difference between holding the mouse button down and releasing it.', 'Utilizing mouse wheel event Illustrates the use of the mouse wheel event and its functionality, demonstrating its occurrence when scrolling over a specific item.']}, {'end': 37806.396, 'start': 37603.416, 'title': 'Javascript events and their functions', 'summary': 'Covers javascript events including mouse over, mouse out, drag start, drag, and drag end, with examples of their functionality and behavior.', 'duration': 202.98, 'highlights': ['The chapter covers JavaScript events including mouse over, mouse out, drag start, drag, and drag end. This provides an overview of the main JavaScript events discussed in the chapter.', 'Mouse over and mouse out events are demonstrated with examples of their functionality. The demonstration of mouse over and mouse out events showcases their behavior when interacting with the logo.', 'The functionality and behavior of drag start, drag, and drag end events are explained and exemplified. The chapter provides examples and explanations of the functionality and behavior of drag start, drag, and drag end events, including their firing off and continuous triggering.']}, {'end': 37952.535, 'start': 37806.416, 'title': 'Event object in javascript', 'summary': 'Explores the event object in javascript, demonstrating its properties and methods, and how to access it when adding event listeners to elements in the dom.', 'duration': 146.119, 'highlights': ['The event object in JavaScript provides properties and methods that can be accessed when adding event listeners, such as click events, to elements in the DOM.', 'Demonstrates accessing the event object through both anonymous and named functions when adding event listeners to elements in the DOM.', 'Explains the functionality and usage of the event object, showcasing a console log of the event object and emphasizing that not all properties and methods need to be utilized.']}, {'end': 38157.807, 'start': 37952.615, 'title': 'Event handling in javascript', 'summary': "Covers the properties of event objects in javascript, including target and current target, highlighting their differences and use cases for accessing and manipulating dom elements, and explaining event bubbling. it also explores the 'type' property of the event object.", 'duration': 205.192, 'highlights': ["The difference between 'target' and 'current target' is explained, showing how they can be the same or different based on event listener attachment and element clicked, providing insights into event bubbling and its impact on target and current target properties.", "Demonstrated accessing and manipulating DOM elements using 'E.dot.target' and 'current target', showcasing the ability to change element styles, such as the background color, upon event triggering, illustrating practical use cases of these properties in event handling.", "The 'type' property of the event object is introduced, exemplifying how it reflects the type of event triggered, with 'click' being displayed as an example upon clicking the logo, emphasizing the relevance of understanding event types in JavaScript."]}, {'end': 38373.815, 'start': 38158.247, 'title': 'Mouse click coordinates and positioning', 'summary': 'Discusses how to access and utilize various mouse click coordinates and positioning properties in javascript, including client x and client y, offset x and offset y, page x and page y, and screen x and screen y, providing insights and examples on their usage.', 'duration': 215.568, 'highlights': ['Explaining the client X and client Y coordinates for mouse click relative to the window, with examples of obtaining specific values such as 27 and 58, and the change in values with cursor movement. The explanation of client X and client Y coordinates provides specific values like 27 and 58 for mouse click positioning relative to the window, highlighting the impact of cursor movement on these coordinates.', 'Detailing the offset X and offset Y properties for the position of the mouse click relative to the element, with examples indicating specific values like 10 and 11, and the variation in values with cursor movement within the element. The detailed explanation of offset X and offset Y properties showcases specific values like 10 and 11 for mouse click positioning relative to the element, emphasizing the impact of cursor movement within the element on these coordinates.', 'Illustrating the page X and page Y coordinates for mouse click relative to the page, along with examples of obtaining specific values like 29 and 61, and the impact of browser resizing on these values. The illustration of page X and page Y coordinates highlights specific values like 29 and 61 for mouse click positioning relative to the page, emphasizing the influence of browser resizing on these coordinates.', 'Explaining the screen X and screen Y properties for the position of the mouse click relative to the entire monitor, with examples of obtaining specific values like 366 and 2916, and acknowledging the impact of screen size on these values. The explanation of screen X and screen Y properties showcases specific values like 366 and 2916 for mouse click positioning relative to the entire monitor, acknowledging the influence of screen size on these coordinates.']}], 'duration': 1213.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo37160494.jpg', 'highlights': ['Practical demonstrations of adding event listeners for click and double click mouse events in JavaScript.', 'Understanding mouse down and mouse up events with a practical demonstration.', 'Demonstration of mouse over and mouse out events with examples of their functionality.', 'Accessing the event object through both anonymous and named functions when adding event listeners.', "Explaining the difference between 'target' and 'current target' and their relevance in event handling.", 'Detailing the client X and client Y coordinates for mouse click relative to the window.', 'Illustrating the offset X and offset Y properties for the position of the mouse click relative to the element.', 'Explaining the page X and page Y coordinates for mouse click relative to the page.', 'Explaining the screen X and screen Y properties for the position of the mouse click relative to the entire monitor.']}, {'end': 40810.631, 'segs': [{'end': 38478.883, 'src': 'embed', 'start': 38451.889, 'weight': 16, 'content': [{'end': 38457.196, 'text': 'And then instead of going to the page, I want to stop it with prevent default, which is a method.', 'start': 38451.889, 'duration': 5.307}, {'end': 38458.518, 'text': 'So we want our parentheses.', 'start': 38457.256, 'duration': 1.262}, {'end': 38465.147, 'text': "Okay And then let's say I just want to have a console log instead and just say link was clicked.", 'start': 38459.179, 'duration': 5.968}, {'end': 38472.918, 'text': "so if i save that now and i come over here and i click the google link, you'll see it doesn't take me anywhere because of this.", 'start': 38467.614, 'duration': 5.304}, {'end': 38478.883, 'text': "it's it prevents the default behavior and then it will do whatever javascript i have underneath.", 'start': 38472.918, 'duration': 5.965}], 'summary': 'Using preventdefault method to stop link behavior on click.', 'duration': 26.994, 'max_score': 38451.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo38451889.jpg'}, {'end': 39319.201, 'src': 'embed', 'start': 39285.191, 'weight': 1, 'content': [{'end': 39286.933, 'text': "I'll use the letter L.", 'start': 39285.191, 'duration': 1.742}, {'end': 39292.819, 'text': "And what it's going to give us, this 76, this is actually the event.key code.", 'start': 39286.933, 'duration': 5.886}, {'end': 39295.502, 'text': 'Remember, we have a number for every key.', 'start': 39293.039, 'duration': 2.463}, {'end': 39300.407, 'text': 'And then down here, you can see what you get for event.key, which would be L.', 'start': 39295.962, 'duration': 4.445}, {'end': 39303.13, 'text': 'You have event.code, which would be key L.', 'start': 39300.407, 'duration': 2.723}, {'end': 39307.733, 'text': "We're not going to do these other things, which you could because these are also on the event object.", 'start': 39303.63, 'duration': 4.103}, {'end': 39319.201, 'text': 'But what I want to do is kind of recreate this application and just show the event key, the event key code and the event code.', 'start': 39308.133, 'duration': 11.068}], 'summary': 'Using letter l gives event.key code 76 and event.code l.', 'duration': 34.01, 'max_score': 39285.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo39285191.jpg'}, {'end': 39807.265, 'src': 'embed', 'start': 39778.03, 'weight': 17, 'content': [{'end': 39781.45, 'text': 'So basically we can do this same thing that we did right here.', 'start': 39778.03, 'duration': 3.42}, {'end': 39783.651, 'text': "So I'll just.", 'start': 39782.911, 'duration': 0.74}, {'end': 39785.133, 'text': 'Put that in there.', 'start': 39784.212, 'duration': 0.921}, {'end': 39787.654, 'text': "It's just going to test to see if it's an empty space.", 'start': 39785.193, 'duration': 2.461}, {'end': 39790.536, 'text': "If it is, it'll just replace it with a string space.", 'start': 39788.134, 'duration': 2.402}, {'end': 39793.537, 'text': 'So next we want the key code property.', 'start': 39791.436, 'duration': 2.101}, {'end': 39797.279, 'text': "So for the title here, we'll just say key code.", 'start': 39793.597, 'duration': 3.682}, {'end': 39799.941, 'text': 'Make sure you put quotes around that.', 'start': 39797.319, 'duration': 2.622}, {'end': 39804.463, 'text': 'And the value is going to be e.keycode, which will be the actual value.', 'start': 39800.461, 'duration': 4.002}, {'end': 39807.265, 'text': 'And then we also want e.code.', 'start': 39805.124, 'duration': 2.141}], 'summary': 'Code snippet tests for empty space and replaces it, accessing e.keycode and e.code.', 'duration': 29.235, 'max_score': 39778.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo39778030.jpg'}, {'end': 39938.458, 'src': 'embed', 'start': 39911.668, 'weight': 3, 'content': [{'end': 39918.555, 'text': "So we'll say div dot class name and we'll set that to key right now.", 'start': 39911.668, 'duration': 6.887}, {'end': 39920.357, 'text': 'We also want a small element.', 'start': 39918.595, 'duration': 1.762}, {'end': 39921.839, 'text': "So I'm going to create that as well.", 'start': 39920.397, 'duration': 1.442}, {'end': 39928.806, 'text': 'Say small equals document dot and then create element.', 'start': 39922.019, 'duration': 6.787}, {'end': 39930.508, 'text': "And that's going to be a small tag.", 'start': 39929.006, 'duration': 1.502}, {'end': 39938.458, 'text': "All right, now for the text that we want to put in here, I'm going to create a variable for, let's say, key text.", 'start': 39931.977, 'duration': 6.481}], 'summary': 'Creating div class and small element in javascript.', 'duration': 26.79, 'max_score': 39911.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo39911668.jpg'}, {'end': 40030.069, 'src': 'embed', 'start': 39998.953, 'weight': 4, 'content': [{'end': 40006.839, 'text': 'And then what we want to pass in here to get the value, we can say key codes and then use the index of the key.', 'start': 39998.953, 'duration': 7.886}, {'end': 40014.243, 'text': 'Right So we could say key codes and then in brackets put any of these and it will give us the value.', 'start': 40008.041, 'duration': 6.202}, {'end': 40015.844, 'text': "And that's going to go in here.", 'start': 40014.783, 'duration': 1.061}, {'end': 40019.965, 'text': 'Now we just want to append the text nodes to the elements.', 'start': 40016.464, 'duration': 3.501}, {'end': 40030.069, 'text': "So let's take the small element and let's say a pen child, and we want to append into the small the key text which is like the title,", 'start': 40020.285, 'duration': 9.784}], 'summary': 'Using key codes and index to retrieve values and appending text nodes to elements.', 'duration': 31.116, 'max_score': 39998.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo39998953.jpg'}, {'end': 40391.154, 'src': 'embed', 'start': 40366.29, 'weight': 8, 'content': [{'end': 40372.695, 'text': 'So if I start to type, every time I hit a key, it gives me the target element, which is the input tag itself.', 'start': 40366.29, 'duration': 6.405}, {'end': 40374.437, 'text': "Now, of course, we don't want that.", 'start': 40373.236, 'duration': 1.201}, {'end': 40376.278, 'text': "We want the value that's typed in.", 'start': 40374.477, 'duration': 1.801}, {'end': 40381.543, 'text': "So there's a value property that we can access with e.target.value.", 'start': 40376.719, 'duration': 4.824}, {'end': 40388.611, 'text': "So now if I start to type in here, you'll see that it'll give me whatever is in the form field.", 'start': 40382.023, 'duration': 6.588}, {'end': 40391.154, 'text': "And it's giving me the entire input.", 'start': 40389.252, 'duration': 1.902}], 'summary': 'Accessing the value property using e.target.value to get the typed input in the form field.', 'duration': 24.864, 'max_score': 40366.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo40366290.jpg'}, {'end': 40457.797, 'src': 'embed', 'start': 40430.396, 'weight': 0, 'content': [{'end': 40440.643, 'text': "we can take this heading and let's take the text content and let's bind whatever is in, whatever is typed in that form,", 'start': 40430.396, 'duration': 10.247}, {'end': 40449.25, 'text': 'which will make this dynamic where we can type and it gets put into the heading in real time, which is which is cool but not very useful.', 'start': 40440.643, 'duration': 8.607}, {'end': 40457.797, 'text': "I mean it might be useful in some cases, but yeah, and obviously that's only on your own machine and that's only you know in your browser,", 'start': 40449.41, 'duration': 8.387}], 'summary': 'Text content can be dynamically bound to a heading in real time, but may not be very useful.', 'duration': 27.401, 'max_score': 40430.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo40430396.jpg'}, {'end': 40509.832, 'src': 'embed', 'start': 40485.725, 'weight': 2, 'content': [{'end': 40494.987, 'text': "what's going to happen is it's going to fire this input event and this is going to run and I can still get the target dot value with this,", 'start': 40485.725, 'duration': 9.262}, {'end': 40495.987, 'text': 'with this select list.', 'start': 40494.987, 'duration': 1}, {'end': 40500.548, 'text': "So if I choose to, you'll see now the H1 is actually outputting to three.", 'start': 40496.367, 'duration': 4.181}, {'end': 40506.69, 'text': "So whatever I choose and it's always going to be the value, obviously, you know, in the HTML.", 'start': 40500.928, 'duration': 5.762}, {'end': 40509.832, 'text': "It's not going to be what you put in the middle here.", 'start': 40507.831, 'duration': 2.001}], 'summary': 'An input event triggers value selection, outputting to h1, always displaying the selected value.', 'duration': 24.107, 'max_score': 40485.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo40485725.jpg'}, {'end': 40593.875, 'src': 'embed', 'start': 40560.211, 'weight': 5, 'content': [{'end': 40563.995, 'text': "So let's listen for, we're gonna use input here.", 'start': 40560.211, 'duration': 3.784}, {'end': 40567.685, 'text': "But I'm not going to do the on input.", 'start': 40565.964, 'duration': 1.721}, {'end': 40569.265, 'text': "I'm going to do on checked.", 'start': 40567.705, 'duration': 1.56}, {'end': 40572.967, 'text': "Okay And then we'll come over here.", 'start': 40569.285, 'duration': 3.682}, {'end': 40578.349, 'text': "I'll say function on checked passing our event object.", 'start': 40573.047, 'duration': 5.302}, {'end': 40581.41, 'text': "And then I'm just going to console log here.", 'start': 40579.329, 'duration': 2.081}, {'end': 40585.472, 'text': 'E dot target dot checked.', 'start': 40581.43, 'duration': 4.042}, {'end': 40590.434, 'text': "Okay Now when I select it, you'll see that we get true.", 'start': 40586.532, 'duration': 3.902}, {'end': 40593.875, 'text': 'If I unselect it, then we get false.', 'start': 40591.734, 'duration': 2.141}], 'summary': 'Using on checked instead of on input, console logs true and false when selecting and unselecting.', 'duration': 33.664, 'max_score': 40560.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo40560211.jpg'}, {'end': 40670.033, 'src': 'embed', 'start': 40641.592, 'weight': 10, 'content': [{'end': 40647.135, 'text': "so let's save that and then i'm going to go ahead and check it and now you'll see the h1 changes to checked.", 'start': 40641.592, 'duration': 5.543}, {'end': 40648.836, 'text': 'uncheck it, we get not checked.', 'start': 40647.135, 'duration': 1.701}, {'end': 40657.804, 'text': "right now there's two other input uh events that i want to show you, and that's focus and blur,", 'start': 40650.518, 'duration': 7.286}, {'end': 40664.188, 'text': 'which has to do with clicking in and activating the input and clicking out of it and unactivating.', 'start': 40657.804, 'duration': 6.384}, {'end': 40670.033, 'text': 'so clicking in it is going to be focus and and clicking outside will be blur.', 'start': 40664.188, 'duration': 5.845}], 'summary': 'Demonstrated checking and unchecking of input, and explained focus and blur events.', 'duration': 28.441, 'max_score': 40641.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo40641592.jpg'}], 'start': 38375.201, 'title': 'Javascript event handling', 'summary': 'Explains the usage of preventdefault method, event object, keyboard events, key codes, and input events in javascript, with practical examples and applications. it covers stopping default form submission, dynamic interactions, key press tracking, key codes for specific keys, and handling input events for form elements.', 'chapters': [{'end': 38490.132, 'start': 38375.201, 'title': 'Using preventdefault in javascript', 'summary': 'Explains the usage of preventdefault method in javascript, which is commonly used for stopping default form submission or link redirection, through examples and practical applications.', 'duration': 114.931, 'highlights': ['The preventDefault method in JavaScript is commonly used for preventing default form submission or link redirection, and is a useful tool for front-end validation and fetch requests.', 'By using preventDefault, the form submission behavior can be stopped, allowing for custom JavaScript actions without the form actually submitting to the page.', 'The method can also be used on links to prevent their default behavior of redirecting to another page, providing an alternative action when the link is clicked.']}, {'end': 38973.427, 'start': 38490.132, 'title': 'Event object and keyboard events', 'summary': 'Explains how to use the event object in javascript to create dynamic interactions, such as tracking positions and using events. it also demonstrates the handling of keyboard events including key down, key up, and key press, along with properties like key, key code, and code, which provide information about the keys being pressed.', 'duration': 483.295, 'highlights': ['The event object allows for the creation of dynamic interactions, such as tracking positions and using events, which can be utilized for various purposes like games. Demonstrates using the event object to create dynamic interactions and track positions, enabling the development of dynamic applications like games.', 'The chapter demonstrates the handling of keyboard events including key down, key up, and key press, which are essential for detecting and responding to user input. Illustrates the handling of key down, key up, and key press events, essential for detecting and responding to user input.', 'Properties like key, key code, and code in the event object provide information about the keys being pressed, enabling the detection of specific key inputs for various functionalities. Explains properties like key, key code, and code in the event object, which offer information about the keys being pressed, crucial for detecting specific key inputs.']}, {'end': 39400.522, 'start': 38974.571, 'title': 'Understanding keyboard events and key codes', 'summary': 'Explains keyboard events and key codes, including key code for enter, checking for specific keys, using repeat property to detect key hold, and identifying key combinations like shift, control, and alt. it also introduces a project to build an application displaying event key, event key code, and event code.', 'duration': 425.951, 'highlights': ['Key Code for Enter It explains the key code for enter, which is 13, and how to check for it in a script, providing a practical demonstration.', 'Using Repeat Property It demonstrates the usage of the repeat property to detect if a key is being held down by the user, with a clear explanation of its functionality.', 'Identifying Key Combinations It illustrates the identification of key combinations like shift, control, and alt, and how to check for their usage in an if statement, accompanied by practical examples.']}, {'end': 40141.762, 'start': 39401.243, 'title': 'Dynamic key code display', 'summary': 'Demonstrates two methods for dynamically displaying key codes on a web page, with the second method providing a more sophisticated and structured approach by using object mapping and dynamic element creation.', 'duration': 740.519, 'highlights': ['The second method demonstrates a more sophisticated approach by using object mapping and dynamic element creation. The second method involves creating an object map for key codes, using a for...in loop to iterate through the map and dynamically creating div elements for each key, providing a more structured and sophisticated approach.', 'The first method involves listening for a key down event on the window and directly manipulating the HTML to display the key code information. The first method uses an event listener on the window for key down events, directly manipulating the HTML to display the key code information, offering a simpler but less structured approach.']}, {'end': 40810.631, 'start': 40142.622, 'title': 'Input events and form handling', 'summary': 'Covers how to handle input events for form elements in javascript, including obtaining values from text fields, select lists, and checkboxes, as well as using focus and blur events for styling, with practical examples provided throughout the explanation.', 'duration': 668.009, 'highlights': ["In JavaScript, input events are used to handle form input fields, such as text fields, select lists, and checkboxes, where the 'input' event is recommended for most input fields due to its ability to capture changes in real-time, and the 'change' event is also applicable for select lists.", "To obtain the value from a form input field in JavaScript, the 'e.target.value' property is used, allowing real-time updates to be displayed, and for checkboxes, the 'e.target.checked' property can be used to determine if the checkbox is checked or not.", "Additionally, the 'focus' and 'blur' events can be utilized for styling purposes, where 'focus' is triggered when clicking into the input field and 'blur' when clicking out, enabling the application of specific styles to the input element based on its focus state."]}], 'duration': 2435.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo38375201.jpg', 'highlights': ['The preventDefault method in JavaScript is commonly used for preventing default form submission or link redirection, and is a useful tool for front-end validation and fetch requests.', 'By using preventDefault, the form submission behavior can be stopped, allowing for custom JavaScript actions without the form actually submitting to the page.', 'The method can also be used on links to prevent their default behavior of redirecting to another page, providing an alternative action when the link is clicked.', 'The event object allows for the creation of dynamic interactions, such as tracking positions and using events, which can be utilized for various purposes like games.', 'Demonstrates using the event object to create dynamic interactions and track positions, enabling the development of dynamic applications like games.', 'The chapter demonstrates the handling of keyboard events including key down, key up, and key press, which are essential for detecting and responding to user input.', 'Illustrates the handling of key down, key up, and key press events, essential for detecting and responding to user input.', 'Properties like key, key code, and code in the event object provide information about the keys being pressed, enabling the detection of specific key inputs for various functionalities.', 'Explains properties like key, key code, and code in the event object, which offer information about the keys being pressed, crucial for detecting specific key inputs.', 'Key Code for Enter It explains the key code for enter, which is 13, and how to check for it in a script, providing a practical demonstration.', 'Using Repeat Property It demonstrates the usage of the repeat property to detect if a key is being held down by the user, with a clear explanation of its functionality.', 'Identifying Key Combinations It illustrates the identification of key combinations like shift, control, and alt, and how to check for their usage in an if statement, accompanied by practical examples.', 'The second method demonstrates a more sophisticated approach by using object mapping and dynamic element creation.', 'The second method involves creating an object map for key codes, using a for...in loop to iterate through the map and dynamically creating div elements for each key, providing a more structured and sophisticated approach.', 'The first method involves listening for a key down event on the window and directly manipulating the HTML to display the key code information.', 'The first method uses an event listener on the window for key down events, directly manipulating the HTML to display the key code information, offering a simpler but less structured approach.', "In JavaScript, input events are used to handle form input fields, such as text fields, select lists, and checkboxes, where the 'input' event is recommended for most input fields due to its ability to capture changes in real-time, and the 'change' event is also applicable for select lists.", "To obtain the value from a form input field in JavaScript, the 'e.target.value' property is used, allowing real-time updates to be displayed, and for checkboxes, the 'e.target.checked' property can be used to determine if the checkbox is checked or not.", "Additionally, the 'focus' and 'blur' events can be utilized for styling purposes, where 'focus' is triggered when clicking into the input field and 'blur' when clicking out, enabling the application of specific styles to the input element based on its focus state."]}, {'end': 42839.12, 'segs': [{'end': 41051.269, 'src': 'embed', 'start': 41021.657, 'weight': 4, 'content': [{'end': 41027.864, 'text': "I'm going to show you the first way, which I really already showed you, and that's to use the the value target dot value.", 'start': 41021.657, 'duration': 6.207}, {'end': 41031.708, 'text': "But there's also a form data object that you can use as well.", 'start': 41028.284, 'duration': 3.424}, {'end': 41039.702, 'text': "So to use the value what I'll do is I'll put the basically we have the item and we have the priority.", 'start': 41032.538, 'duration': 7.164}, {'end': 41040.803, 'text': 'So we have two fields.', 'start': 41039.742, 'duration': 1.061}, {'end': 41051.269, 'text': "So I'm going to set item to document dot and we'll say get element by D and that has an ID of item dash input.", 'start': 41041.223, 'duration': 10.046}], 'summary': 'Demonstrating usage of form data object and value target dot value for setting item and priority fields.', 'duration': 29.612, 'max_score': 41021.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo41021657.jpg'}, {'end': 42044.262, 'src': 'embed', 'start': 42014.899, 'weight': 0, 'content': [{'end': 42017.22, 'text': 'So let me just show you what that looks like.', 'start': 42014.899, 'duration': 2.321}, {'end': 42019.841, 'text': "So we're going to select the parent which is the UL.", 'start': 42017.52, 'duration': 2.321}, {'end': 42033.726, 'text': "So it's a document dot query selector and we're going to select the UL and I'm just going to comment this this out for now and we want to put the event listener on the parent.", 'start': 42020.101, 'duration': 13.625}, {'end': 42040.448, 'text': "So list dot add event listener and listen for a click and then we'll have a function.", 'start': 42033.766, 'duration': 6.682}, {'end': 42044.262, 'text': 'All right.', 'start': 42043.922, 'duration': 0.34}], 'summary': 'Demonstrating how to select the parent ul and add a click event listener.', 'duration': 29.363, 'max_score': 42014.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo42014899.jpg'}, {'end': 42557.207, 'src': 'embed', 'start': 42527.58, 'weight': 3, 'content': [{'end': 42532.862, 'text': "Now it's just a couple other events that I want to show you that we can use on the windows.", 'start': 42527.58, 'duration': 5.282}, {'end': 42539.744, 'text': "So let's say window dot add event listener and we can listen for a resize.", 'start': 42533.022, 'duration': 6.722}, {'end': 42551.929, 'text': "OK so there's a resize event and what I'm going to do here is I'm going to actually take this and move this into here.", 'start': 42539.764, 'duration': 12.165}, {'end': 42557.207, 'text': "But I'm going to set the the text to show the size of the window.", 'start': 42552.765, 'duration': 4.442}], 'summary': 'Demonstrating the use of window event listeners for resize events.', 'duration': 29.627, 'max_score': 42527.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo42527580.jpg'}], 'start': 40812.833, 'title': 'Javascript form handling and best practices', 'summary': 'Covers javascript form submission, validation, form data object, handling events, event delegation, and best practices for loading javascript. it emphasizes front-end javascript and provides demonstrations for preventing default form submission, event bubbling, and using window events.', 'chapters': [{'end': 41103.489, 'start': 40812.833, 'title': 'Form submission in javascript', 'summary': "Covers form submission in javascript, including preventing default form submission, capturing form input values, and using event listeners to handle form submission, emphasizing the use of front-end javascript and providing a demonstration of preventing default form submission with 'e.preventdefault'.", 'duration': 290.656, 'highlights': ["Preventing default form submission with 'e.preventDefault' The chapter emphasizes the use of front-end JavaScript and provides a demonstration of preventing default form submission with 'e.preventDefault', showcasing the use of event listeners to handle form submission.", "Capturing form input values using 'target.value' The chapter discusses capturing form input values using 'target.value' and demonstrates how to retrieve values from form inputs using 'document.getElementById' and 'value' property.", "Using event listeners to handle form submission The chapter demonstrates the use of event listeners to handle form submission, showcasing the addition of an event listener to the form to listen for the submit event and trigger a function 'onSubmit' when the event occurs."]}, {'end': 41498.093, 'start': 41103.729, 'title': 'Form validation and form data object', 'summary': 'Covers form validation in javascript, including front-end and back-end validation, and demonstrates the usage of the form data object to access form field values and entries.', 'duration': 394.364, 'highlights': ['Form validation process with alert messages and return behavior The speaker demonstrates simple form validation by checking for empty fields and specific values, triggering alert messages and return behavior when conditions are met.', "Utilizing the form data object to access individual form field values The usage of the form data object to access individual form field values is illustrated through the 'get' method, allowing the retrieval of specific form field values such as item and priority.", 'Accessing all form field entries using the form data object entries method The form data object entries method is utilized to access all form field entries, demonstrating how to iterate through and extract both the name and value of each form field entry.']}, {'end': 42228.136, 'start': 41498.213, 'title': 'Handling events and event delegation', 'summary': 'Explains event bubbling, with examples demonstrating how events bubble up the dom tree, and event delegation, showcasing how to efficiently handle events on multiple elements using a single event listener and targeting specific elements.', 'duration': 729.923, 'highlights': ['The chapter explains event bubbling and how events bubble up the DOM tree when an event listener is added onto an element, demonstrating the propagation of events through parents. This includes examples of adding event listeners on elements, demonstrating how the event bubbles up to its parent elements, and how to use stop propagation method to prevent event bubbling.', 'The chapter showcases event delegation, demonstrating how to efficiently handle events on multiple elements using a single event listener and targeting specific elements. It includes examples of adding a single event listener onto the parent element and targeting specific child elements based on the event target, showcasing efficient event handling on multiple elements.', 'The chapter discusses the window object, highlighting its properties, methods, APIs, and events, particularly focusing on page loading events. It explains the global window object, its properties, methods, APIs, and events, specifically delving into page loading events and their relevance in web development.']}, {'end': 42526.702, 'start': 42228.717, 'title': 'Javascript loading best practices', 'summary': "Discusses the best practices for loading javascript, including using the load event, addeventlistener, domcontentloaded, and the defer attribute for efficient page loading and preventing null errors, with emphasis on the defer attribute's role in deferring javascript execution until the dom is fully loaded.", 'duration': 297.985, 'highlights': ["The defer attribute allows JavaScript code to defer its execution until the DOM is fully loaded, preventing null errors and enabling efficient page loading. The defer attribute in JavaScript ensures that the script's execution is deferred until the DOM is fully loaded, preventing null errors and enabling efficient page loading.", "The load event and addEventListener with 'load' can be used to wait for the entire page, including resources, to load before executing JavaScript code. The load event and addEventListener with 'load' can be used to wait for the entire page, including resources, to load before executing JavaScript code, ensuring that all resources are loaded before running the script.", 'The DOMContentLoaded event runs as soon as the DOM is parsed and loaded, allowing JavaScript to execute once the DOM is ready, without waiting for the entire page and resources to load. The DOMContentLoaded event runs as soon as the DOM is parsed and loaded, allowing JavaScript to execute once the DOM is ready, without waiting for the entire page and resources to load, providing a more responsive and efficient approach.']}, {'end': 42839.12, 'start': 42527.58, 'title': 'Window events in javascript', 'summary': 'Covers how to use window events in javascript, including resize, scroll, focus, and blur, to create dynamic ui effects such as displaying window size on resize, changing background color on scroll, and changing text color on focus and blur.', 'duration': 311.54, 'highlights': ['The chapter covers how to use window events in JavaScript The chapter introduces the usage of window events in JavaScript to create dynamic UI effects.', 'including resize, scroll, focus, and blur The chapter demonstrates the usage of key window events such as resize, scroll, focus, and blur.', 'to create dynamic UI effects such as displaying window size on resize, changing background color on scroll, and changing text color on focus and blur The chapter provides practical examples of using window events to create dynamic UI effects, like displaying window size on resize, changing background color on scroll, and changing text color on focus and blur.']}], 'duration': 2026.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BI1o2H9z9fo/pics/BI1o2H9z9fo40812833.jpg', 'highlights': ['The defer attribute allows JavaScript code to defer its execution until the DOM is fully loaded, preventing null errors and enabling efficient page loading.', "The load event and addEventListener with 'load' can be used to wait for the entire page, including resources, to load before executing JavaScript code.", 'The DOMContentLoaded event runs as soon as the DOM is parsed and loaded, allowing JavaScript to execute once the DOM is ready, without waiting for the entire page and resources to load, providing a more responsive and efficient approach.', 'The chapter explains event bubbling and how events bubble up the DOM tree when an event listener is added onto an element, demonstrating the propagation of events through parents.', 'The chapter showcases event delegation, demonstrating how to efficiently handle events on multiple elements using a single event listener and targeting specific elements.', 'The chapter discusses the window object, highlighting its properties, methods, APIs, and events, particularly focusing on page loading events.']}], 'highlights': ['JavaScript is a core technology of web development, enabling dynamic user interfaces, data manipulation, and interaction with databases, both on the client and server sides.', 'The browser developer tools are essential for front end or full stack web developers and are used throughout the entire course and career, highlighting their importance and frequent usage (quantifiable data: importance emphasized).', 'The chapter emphasizes the preference for using const over let, except in specific cases, such as in game scores.', 'The chapter covers basic arithmetic operators, assignment operators, and comparison operators. It explains the exponent, increment, decrement, value assignment, addition, multiplication, subtraction, division, modulus, and comparison operators.', 'The chapter covers JavaScript data types, including primitive and reference types, providing a foundational understanding.', 'The chapter covers working with number objects in JavaScript, including creating number variables and using number constructors.', 'Demonstrating the creation and manipulation of arrays and objects.', 'The JSON methods stringify and parse are essential for converting JavaScript objects to JSON strings and vice versa when dealing with JSON data.', 'The chapter covers manipulating javascript objects, functions, and scope basics with practical examples.', 'JavaScript is single threaded and synchronous, executed line by line. Provides fundamental understanding of code execution.', 'The for loop, while loop, and do while loop are fundamental ways of doing iteration in JavaScript. The for loop is recommended when the number of iterations is known, emphasizing its significance in programming.', 'Understanding fundamentals such as iteration, control structures, and data types is emphasized before delving into working with the Document Object Model (DOM) in JavaScript.', 'The chapter covers various methods for selecting DOM elements in JavaScript Provides an overview of the main topic of the chapter.', 'The chapter covers various methods for inserting elements, text, and HTML into the DOM using JavaScript.', 'The chapter covers various methods for replacing elements in the DOM, including using replaceWith and outerHTML.', 'Practical demonstrations of adding event listeners for click and double click mouse events in JavaScript.', 'The preventDefault method in JavaScript is commonly used for preventing default form submission or link redirection, and is a useful tool for front-end validation and fetch requests.', 'The chapter explains event bubbling and how events bubble up the DOM tree when an event listener is added onto an element, demonstrating the propagation of events through parents.', 'The defer attribute allows JavaScript code to defer its execution until the DOM is fully loaded, preventing null errors and enabling efficient page loading.']}