title
JavaScript Tutorial

description
Get the Cheat Sheet Here : http://goo.gl/TxNsQO Subscribe to Me: http://bit.ly/2FWQZTx Best Book on JavaScript : http://amzn.to/1WbMYvm ❇️ LIVESTREAMS : https://www.twitch.tv/derekbanas ❇️ DISCORD : https://discord.gg/2dkDmpVvgD ( Contact Me Anytime ) MY UDEMY COURSES ARE 87.5% OFF TIL December 19th ($9.99) ONE IS FREE ➡️ Python Data Science Series for $9.99 : Highest Rated & Largest Python Udemy Course + 56 Hrs + 200 Videos + Data Science https://bit.ly/Master_Python_41 ➡️ C++ Programming Bootcamp Series for $9.99 : Over 23 Hrs + 53 Videos + Quizzes + Graded Assignments + New Videos Every Month https://bit.ly/C_Course_41 ➡️ FREE 15 hour Golang Course!!! : https://bit.ly/go-tutorial3 Like the channel? Consider becoming a Patreon! Check it out here: ►► https://www.patreon.com/derekbanas 00:22 Introduction 03:27 Variables 04:27 Math 12:00 Random Numbers 13:21 Strings 17:24 Styling Strings 18:14 If 21:44 Switch 23:04 Ternary Operator 23:55 While 24:51 Do While 25:52 For 27:37 For In 28:39 Arrays 34:42 Functions 36:41 Pass Function as Parameter 39:42 Receive Variable Number of Arguments 40:55 Return Variable Number of Arguments 42:02 Recursive Functions 43:54 Event Handling 46:24 Mouse Events 51:30 Key Events 54:02 Change Tag Value 56:41 Change Class 58:02 Change Input Element 59:20 Mouse X / Y Coordinates 1:01:42 Get Elements by Tag Name 1:03:00 Element Styling 1:05:48 Manipulating URLs 1:09:37 Editing Child Nodes 1:15:08 Setting Attributes 1:18:11 Adding Elements 1:19:50 OO JavaScript 1:28:33 Form Validation 1:34:54 Exception Handling *Watch More Learn in One Videos* ►► Java - https://youtu.be/n-xAqcBCws4 ►► C++ - https://youtu.be/Rub-JsjMhWY ►► Python - https://youtu.be/N4mEzFDjqtA ►► MySQL - https://youtu.be/yPu6qV5byu4 ►► PHP - https://youtu.be/7TF00hJI78Y ►► Kotlin - https://youtu.be/H_oGi8uuDpA ►► C# - https://youtu.be/lisiwUZJXqQ ►► JavaScript - https://youtu.be/fju9ii8YsGs

detail
{'title': 'JavaScript Tutorial', 'heatmap': [{'end': 238.528, 'start': 172.352, 'weight': 0.811}, {'end': 1755.395, 'start': 1625.633, 'weight': 0.872}, {'end': 1882.338, 'start': 1806.106, 'weight': 0.93}, {'end': 2101.942, 'start': 1979.22, 'weight': 0.936}, {'end': 2392.042, 'start': 2328.146, 'weight': 0.739}, {'end': 2741.694, 'start': 2622.062, 'weight': 0.892}, {'end': 2979.202, 'start': 2911.848, 'weight': 0.741}, {'end': 3149.274, 'start': 3087.791, 'weight': 0.803}, {'end': 3324.82, 'start': 3205.225, 'weight': 0.727}], 'summary': "The 'javascript tutorial' video covers fundamental javascript concepts equivalent to a 300-page book, including code import, user interaction, html manipulation, variables, math functions, string manipulation, conditions, loops, array manipulation, functions, event handling, dom manipulation, page reloading, styling, and form validation, with practical examples and quantifiable outcomes.", 'chapters': [{'end': 512.678, 'segs': [{'end': 29.847, 'src': 'embed', 'start': 0.12, 'weight': 0, 'content': [{'end': 2.981, 'text': 'Well hello internet and welcome to my JavaScript video tutorial.', 'start': 0.12, 'duration': 2.861}, {'end': 8.643, 'text': "In this one tutorial I'm going to teach you pretty much everything you would learn in a standard 300 page book on JavaScript.", 'start': 3.021, 'duration': 5.622}, {'end': 15.846, 'text': 'And in the description underneath the video I have links to all the individual parts so you can jump to specifically what you want to learn about.', 'start': 8.803, 'duration': 7.043}, {'end': 19.327, 'text': 'And also I have the code, everything down there is free.', 'start': 16.286, 'duration': 3.041}, {'end': 21.188, 'text': "And I have a lot to do, so let's get into it.", 'start': 19.467, 'duration': 1.721}, {'end': 29.847, 'text': 'Okay, so on the left side of the screen I have Sublime Text and the name of the file is jstut.html.', 'start': 22.116, 'duration': 7.731}], 'summary': 'Javascript video tutorial covering content of a 300-page book, with free code and links for specific topics.', 'duration': 29.727, 'max_score': 0.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs120.jpg'}, {'end': 79.278, 'src': 'embed', 'start': 52.64, 'weight': 1, 'content': [{'end': 58.601, 'text': "Alright, so the first thing I'm going to cover here is how we can import some JavaScript code directly in here and use that.", 'start': 52.64, 'duration': 5.961}, {'end': 59.381, 'text': "It's very simple.", 'start': 58.621, 'duration': 0.76}, {'end': 61.882, 'text': "All we're going to do is come in and type script.", 'start': 59.481, 'duration': 2.401}, {'end': 68.468, 'text': "And then source is equal to and then let's say that I have a JavaScript file called JSTUT.", 'start': 62.202, 'duration': 6.266}, {'end': 75.734, 'text': "And now what I'll be able to do is come in here and import any of the functions that are inside of this file inside of here,", 'start': 68.728, 'duration': 7.006}, {'end': 79.278, 'text': 'and run them and keep my code and my screen overall very, very clean.', 'start': 75.734, 'duration': 3.544}], 'summary': 'Demonstrating how to import javascript code into the current environment for a cleaner codebase.', 'duration': 26.638, 'max_score': 52.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs52640.jpg'}, {'end': 168.188, 'src': 'embed', 'start': 137.453, 'weight': 2, 'content': [{'end': 144.06, 'text': 'What I want to do is I want to take the name and put a little message right here inside of my paragraph tags.', 'start': 137.453, 'duration': 6.607}, {'end': 144.941, 'text': 'To do so.', 'start': 144.3, 'duration': 0.641}, {'end': 148.444, 'text': "I'm going to go document and I need to get a hold of that element.", 'start': 144.941, 'duration': 3.503}, {'end': 155.292, 'text': "and how I'm going to get a hold of that element is go, get element by ID and of course the ID for this guy is say hello,", 'start': 148.444, 'duration': 6.848}, {'end': 156.333, 'text': 'just like it says right there.', 'start': 155.292, 'duration': 1.041}, {'end': 159.857, 'text': 'And then I want to put this inside of the HTML tags.', 'start': 156.593, 'duration': 3.264}, {'end': 168.188, 'text': "To do that, you go enter HTML and then I'm going to say something like hello space and to concatenate or to combine the strings.", 'start': 159.917, 'duration': 8.271}], 'summary': 'Using getelementbyid to insert a message into html tags.', 'duration': 30.735, 'max_score': 137.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs137453.jpg'}, {'end': 238.528, 'src': 'heatmap', 'start': 172.352, 'weight': 0.811, 'content': [{'end': 175.153, 'text': 'now what I want to do is provide another condition.', 'start': 172.352, 'duration': 2.801}, {'end': 182.975, 'text': "else, if they did have a value of null for your name, which means that they didn't give me a name, I want to do something different.", 'start': 175.153, 'duration': 7.822}, {'end': 190.938, 'text': "what I'm going to do here is open up an alert pop-up that says please enter a name next time, and there we go.", 'start': 182.975, 'duration': 7.963}, {'end': 192.119, 'text': 'got that all set up.', 'start': 190.938, 'duration': 1.181}, {'end': 197.424, 'text': "now if we save that, jump over here and reload our page, you're gonna see right here it says what is your name.", 'start': 192.119, 'duration': 5.305}, {'end': 201.048, 'text': "I'm gonna say Derek and I'm gonna click on OK, and you're gonna see over here.", 'start': 197.424, 'duration': 3.624}, {'end': 204.07, 'text': 'it pops up inside of my paragraph tag hello, Derek.', 'start': 201.048, 'duration': 3.022}, {'end': 207.413, 'text': 'so pretty simple example, but it gives you an overview of a bunch of different things.', 'start': 204.07, 'duration': 3.343}, {'end': 209.996, 'text': "so now let's jump over and talk a little bit more about variables.", 'start': 207.413, 'duration': 2.583}, {'end': 217.509, 'text': 'Now, your variables are not going to be able to start with a number or contain spaces, but they can of course contain letters, numbers,', 'start': 210.762, 'duration': 6.747}, {'end': 219.251, 'text': 'underscores or dollar signs.', 'start': 217.509, 'duration': 1.742}, {'end': 221.414, 'text': 'And remember, they are case sensitive.', 'start': 219.572, 'duration': 1.842}, {'end': 229.763, 'text': "So if you have a variable named your name like that, it's going to be different than a variable called your name with a lowercase values.", 'start': 221.514, 'duration': 8.249}, {'end': 238.528, 'text': 'and, as you just saw, you create these variables by just saying var and then you give them a name and then you assign a value to them,', 'start': 230.023, 'duration': 8.505}], 'summary': 'Javascript tutorial covers handling null values, variable naming rules, and creating variables with values.', 'duration': 66.176, 'max_score': 172.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs172352.jpg'}, {'end': 238.528, 'src': 'embed', 'start': 204.07, 'weight': 3, 'content': [{'end': 207.413, 'text': 'so pretty simple example, but it gives you an overview of a bunch of different things.', 'start': 204.07, 'duration': 3.343}, {'end': 209.996, 'text': "so now let's jump over and talk a little bit more about variables.", 'start': 207.413, 'duration': 2.583}, {'end': 217.509, 'text': 'Now, your variables are not going to be able to start with a number or contain spaces, but they can of course contain letters, numbers,', 'start': 210.762, 'duration': 6.747}, {'end': 219.251, 'text': 'underscores or dollar signs.', 'start': 217.509, 'duration': 1.742}, {'end': 221.414, 'text': 'And remember, they are case sensitive.', 'start': 219.572, 'duration': 1.842}, {'end': 229.763, 'text': "So if you have a variable named your name like that, it's going to be different than a variable called your name with a lowercase values.", 'start': 221.514, 'duration': 8.249}, {'end': 238.528, 'text': 'and, as you just saw, you create these variables by just saying var and then you give them a name and then you assign a value to them,', 'start': 230.023, 'duration': 8.505}], 'summary': 'Overview of variable rules and creation process in programming.', 'duration': 34.458, 'max_score': 204.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs204070.jpg'}, {'end': 373.354, 'src': 'embed', 'start': 344.773, 'weight': 4, 'content': [{'end': 349.897, 'text': "Of course, we're also going to be able to come in here and perform all of the common mathematical operations.", 'start': 344.773, 'duration': 5.124}, {'end': 359.303, 'text': "We'll be able to come in, for example, and do some subtraction on this and some multiplication and some division, as well as modulus,", 'start': 350.297, 'duration': 9.006}, {'end': 361.885, 'text': 'which is going to give us the remainder of a division.', 'start': 359.303, 'duration': 2.582}, {'end': 366.328, 'text': 'And you can see all the different mathematical calculations we can perform that are built into JavaScript.', 'start': 362.125, 'duration': 4.203}, {'end': 373.354, 'text': "Another thing that's important to understand is that there is a standard way to store numbers inside of JavaScript.", 'start': 366.508, 'duration': 6.846}], 'summary': 'Javascript allows common math operations and standard number storage.', 'duration': 28.581, 'max_score': 344.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs344773.jpg'}, {'end': 482.92, 'src': 'embed', 'start': 456.365, 'weight': 5, 'content': [{'end': 460.686, 'text': 'So say we have a customer that has a balance at our store.', 'start': 456.365, 'duration': 4.321}, {'end': 465.147, 'text': 'And we want to come in here and we want to print out that value.', 'start': 461.066, 'duration': 4.081}, {'end': 469.869, 'text': 'And we also want to verify or make sure that it comes out to two decimal places.', 'start': 465.548, 'duration': 4.321}, {'end': 476.474, 'text': "Now let's say that we want to set up something like a monthly payment for this customer so they can pay off their balance.", 'start': 470.327, 'duration': 6.147}, {'end': 482.92, 'text': "Again, we're going to put a comma inside of there and we're going to take their balance and we're going to divide that by 12,", 'start': 476.494, 'duration': 6.426}], 'summary': 'Print customer balance, verify to 2 decimal places, set up monthly payment.', 'duration': 26.555, 'max_score': 456.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs456365.jpg'}], 'start': 0.12, 'title': 'Javascript fundamentals', 'summary': 'Covers a comprehensive javascript tutorial equivalent to a 300-page book, demonstrating code import, user interaction, and html manipulation. it also delves into javascript variables, rules for naming, math functions, precision limitations, and rounding techniques.', 'chapters': [{'end': 204.07, 'start': 0.12, 'title': 'Javascript tutorial overview', 'summary': 'Covers a comprehensive javascript tutorial, equivalent to a 300-page book, with instructions on how to import javascript code, interact with users, and manipulate html elements, all demonstrated through practical examples.', 'duration': 203.95, 'highlights': ['The tutorial covers a comprehensive JavaScript tutorial, equivalent to a 300-page book. The instructor aims to teach everything in JavaScript equivalent to a standard 300-page book.', 'Instructions on how to import JavaScript code and interact with users are provided. The tutorial demonstrates how to import JavaScript code directly into the HTML file and interact with users through prompts and alerts.', 'Practical examples of manipulating HTML elements are given. The tutorial provides practical examples of manipulating HTML elements, such as updating paragraph content based on user input.']}, {'end': 512.678, 'start': 204.07, 'title': 'Javascript variables and math functions', 'summary': 'Provides an overview of javascript variables, including rules for naming and case sensitivity, and demonstrates math functions such as addition, subtraction, multiplication, division, modulus, and precision limitations, while also illustrating rounding techniques for numerical values.', 'duration': 308.608, 'highlights': ['The chapter provides an overview of JavaScript variables, including rules for naming and case sensitivity. It explains that variables cannot start with a number or contain spaces but can contain letters, numbers, underscores, or dollar signs and are case sensitive.', 'Demonstrates math functions such as addition, subtraction, multiplication, division, modulus, and precision limitations. It shows examples of performing mathematical operations and highlights the limitation of precision up to 16 digits for decimal values.', "Illustrates rounding techniques for numerical values. It demonstrates the use of 'toFixed' method to round off numerical values to a specific number of decimal places, providing an example of calculating monthly payment for a customer's balance."]}], 'duration': 512.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs120.jpg', 'highlights': ['The tutorial covers a comprehensive JavaScript tutorial, equivalent to a 300-page book. The instructor aims to teach everything in JavaScript equivalent to a standard 300-page book.', 'Instructions on how to import JavaScript code and interact with users are provided. The tutorial demonstrates how to import JavaScript code directly into the HTML file and interact with users through prompts and alerts.', 'Practical examples of manipulating HTML elements are given. The tutorial provides practical examples of manipulating HTML elements, such as updating paragraph content based on user input.', 'The chapter provides an overview of JavaScript variables, including rules for naming and case sensitivity. It explains that variables cannot start with a number or contain spaces but can contain letters, numbers, underscores, or dollar signs and are case sensitive.', 'Demonstrates math functions such as addition, subtraction, multiplication, division, modulus, and precision limitations. It shows examples of performing mathematical operations and highlights the limitation of precision up to 16 digits for decimal values.', "Illustrates rounding techniques for numerical values. It demonstrates the use of 'toFixed' method to round off numerical values to a specific number of decimal places, providing an example of calculating monthly payment for a customer's balance."]}, {'end': 1092.977, 'segs': [{'end': 668.316, 'src': 'embed', 'start': 638.257, 'weight': 0, 'content': [{'end': 643.201, 'text': "But since we put the parentheses here it's going to first add these then multiply that times 5.", 'start': 638.257, 'duration': 4.944}, {'end': 645.062, 'text': 'And you can see there how that differs.', 'start': 643.201, 'duration': 1.861}, {'end': 651.206, 'text': 'Now there are numerous different properties and methods built into math libraries inside of JavaScript.', 'start': 645.362, 'duration': 5.844}, {'end': 653.067, 'text': "So let's take a look at a couple of those.", 'start': 651.246, 'duration': 1.821}, {'end': 659.391, 'text': "We would just access them, like let's say we wanted to get the value of the numerical constant e.", 'start': 653.447, 'duration': 5.944}, {'end': 662.352, 'text': 'What we would do is just do exactly what you see right here.', 'start': 659.391, 'duration': 2.961}, {'end': 668.316, 'text': 'And we could also come in and do the same thing with pi, two numbers that are built inside of JavaScript.', 'start': 662.653, 'duration': 5.663}], 'summary': "Javascript's math library includes properties like e and pi.", 'duration': 30.059, 'max_score': 638.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs638257.jpg'}, {'end': 776.765, 'src': 'embed', 'start': 749.109, 'weight': 2, 'content': [{'end': 752.092, 'text': 'and if I reload this, you can see that it came out with a value of 3.', 'start': 749.109, 'duration': 2.983}, {'end': 756.455, 'text': "and if I reload it multiple times, you see it's going to give us multiple different random values.", 'start': 752.092, 'duration': 4.363}, {'end': 757.457, 'text': 'and there we are.', 'start': 756.877, 'duration': 0.58}, {'end': 764.4, 'text': "Another thing that's important to know is how to convert strings into numbers and to convert a string into a number.", 'start': 757.477, 'duration': 6.923}, {'end': 773.784, 'text': 'we would just type in number like that and then throw in an actual string value or a reference to a variable that contains a number or whatever you want inside of there,', 'start': 764.4, 'duration': 9.384}, {'end': 776.765, 'text': 'and that will convert a string into a number.', 'start': 773.784, 'duration': 2.981}], 'summary': "Reloading yields random values; converting strings to numbers with 'number' function.", 'duration': 27.656, 'max_score': 749.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs749109.jpg'}, {'end': 926.706, 'src': 'embed', 'start': 898.087, 'weight': 4, 'content': [{'end': 900.049, 'text': "So that's what I mean when I talk about index.", 'start': 898.087, 'duration': 1.962}, {'end': 905.212, 'text': "Let's come in and get just part of our string and we're going to do that with slice.", 'start': 900.369, 'duration': 4.843}, {'end': 909.335, 'text': 'so we went in here and we found out that goes starts at the 19th position.', 'start': 905.212, 'duration': 4.123}, {'end': 914.878, 'text': "so we're going to slice that out and we're going to type in 19 and then we're going to say what index we want to stop at,", 'start': 909.335, 'duration': 5.543}, {'end': 922.423, 'text': "and that's going to be the 23rd and we'll see exactly what that looks like in a moment, because we're going to do another slice and with this guy.", 'start': 914.878, 'duration': 7.545}, {'end': 924.825, 'text': "well, actually, let's come in here and get rid of that.", 'start': 922.423, 'duration': 2.402}, {'end': 925.665, 'text': 'get rid of that.', 'start': 924.825, 'duration': 0.84}, {'end': 926.706, 'text': 'there we go much better.', 'start': 925.665, 'duration': 1.041}], 'summary': 'Demonstration of slicing a string from index 19 to 23.', 'duration': 28.619, 'max_score': 898.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs898087.jpg'}, {'end': 1056.34, 'src': 'embed', 'start': 957.647, 'weight': 3, 'content': [{'end': 958.928, 'text': "That's exactly how that would be done.", 'start': 957.647, 'duration': 1.281}, {'end': 959.689, 'text': 'And reload it.', 'start': 959.148, 'duration': 0.541}, {'end': 963.512, 'text': 'You can see it grabs goes in the second situation, which is this guy right here.', 'start': 959.769, 'duration': 3.743}, {'end': 966.154, 'text': "It's going to grab goes and the rest of the string.", 'start': 963.752, 'duration': 2.402}, {'end': 971.598, 'text': 'And here is another way that we can grab goes by defining the length of the word that we want to get a hold of.', 'start': 966.374, 'duration': 5.224}, {'end': 976.217, 'text': 'We could also come in here and replace part of a string with something else.', 'start': 971.854, 'duration': 4.363}, {'end': 980.339, 'text': 'So we can go random string like this and call replace.', 'start': 976.517, 'duration': 3.822}, {'end': 986.703, 'text': "And let's say that we want to come in here and replace the words and on with the word forever.", 'start': 980.739, 'duration': 5.964}, {'end': 990.592, 'text': 'And you can see the string is now a long string that goes on forever.', 'start': 986.991, 'duration': 3.601}, {'end': 994.753, 'text': 'We could also come in and get a specific character at an index.', 'start': 990.812, 'duration': 3.941}, {'end': 998.094, 'text': "So let's say at index 2.", 'start': 995.133, 'duration': 2.961}, {'end': 1001.315, 'text': 'And we want to print out exactly what is at index 2.', 'start': 998.094, 'duration': 3.221}, {'end': 1003.315, 'text': 'We would go random string like this.', 'start': 1001.315, 'duration': 2}, {'end': 1008.199, 'text': "And then we would just say character at, and of course we're going to put index 2 inside of there.", 'start': 1003.716, 'duration': 4.483}, {'end': 1011.202, 'text': 'We could also split a string into an array.', 'start': 1008.339, 'duration': 2.863}, {'end': 1018.51, 'text': 'We would do that just by going random string and split, and then, if we wanted to split everything at all, the spaces between the words,', 'start': 1011.362, 'duration': 7.148}, {'end': 1019.631, 'text': 'we would just put that there.', 'start': 1018.51, 'duration': 1.121}, {'end': 1022.494, 'text': 'If there were commas between the words we would just put that like that.', 'start': 1019.731, 'duration': 2.763}, {'end': 1032.182, 'text': 'whatever, and we could also come in and trim any white space off of the beginning or the end of our string just by going random string and calling the trim function,', 'start': 1022.734, 'duration': 9.448}, {'end': 1033.763, 'text': 'and that will handle that for us.', 'start': 1032.182, 'duration': 1.581}, {'end': 1041.17, 'text': "and then there's also two built-in ways to convert our string to all uppercase letters and as well to all lowercase letters,", 'start': 1033.763, 'duration': 7.407}, {'end': 1043.813, 'text': 'and you can see all those different guys there on our screen.', 'start': 1041.17, 'duration': 2.643}, {'end': 1050.116, 'text': 'Another thing we can do is we can style our strings using JavaScript in numerous different ways.', 'start': 1044.053, 'duration': 6.063}, {'end': 1052.217, 'text': "But here I'm going to show you a very specific way.", 'start': 1050.196, 'duration': 2.021}, {'end': 1054.319, 'text': "To do this, I'm going to create another variable.", 'start': 1052.277, 'duration': 2.042}, {'end': 1056.34, 'text': "I'm going to call this StringToStyle.", 'start': 1054.339, 'duration': 2.001}], 'summary': 'Demonstrates various string manipulation methods in javascript.', 'duration': 98.693, 'max_score': 957.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs957647.jpg'}], 'start': 512.958, 'title': 'Javascript variables and string manipulation', 'summary': 'Covers working with variables, math functions, and manipulating strings in javascript, including incrementing, decrementing, calculations, obtaining index, slicing, replacing, converting case, splitting, trimming, and styling strings, with practical examples and outputs.', 'chapters': [{'end': 840, 'start': 512.958, 'title': 'Javascript variables and math functions', 'summary': 'Covers various ways to work with variables, including incrementing, decrementing, and performing calculations, as well as utilizing math functions and manipulating strings in javascript.', 'duration': 327.042, 'highlights': ["Demonstrated different shortcut ways to perform common operations on variables, such as incrementing by one and adding values to the variable. The transcript illustrates different shortcut methods for performing common operations on variables, including incrementing by one using '++' and adding values to the variable using '+=', with examples and demonstrations.", 'Explained order of operations and the use of parentheses in calculations, showcasing the impact on the results of mathematical expressions. The transcript provides an explanation of the order of operations and demonstrates the use of parentheses in calculations to control the order of operations, affecting the results of mathematical expressions.', "Showcased built-in math properties, constants, and methods in JavaScript, including accessing numerical constants 'e' and 'pi', as well as various mathematical functions and calculations. The chapter showcases built-in math properties, constants, and methods in JavaScript, such as accessing numerical constants 'e' and 'pi', along with a range of mathematical functions and calculations available.", "Illustrated generating random values and converting strings into numbers, demonstrating the use of 'math.random' and conversion methods like 'number', 'parseInt', and 'parseFloat'. The transcript illustrates the process of generating random values and converting strings into numbers using 'math.random' and conversion methods like 'number', 'parseInt', and 'parseFloat', providing examples and outcomes.", "Covered string manipulation techniques, including combining strings using the '+' operator and obtaining the length of a string. The chapter covers string manipulation techniques, such as combining strings using the '+' operator and obtaining the length of a string, with practical examples and explanations."]}, {'end': 1092.977, 'start': 840, 'title': 'Manipulating strings in javascript', 'summary': 'Covers various methods for manipulating strings in javascript, including obtaining the index of a word, slicing a string, replacing part of a string, converting to uppercase and lowercase, splitting a string into an array, trimming white spaces, and styling strings using html tags, demonstrating practical examples and outputs.', 'duration': 252.977, 'highlights': ["Obtaining the index of a word 'goes' using the indexOf method, which returns the 19th character position within the string.", 'Demonstrating the usage of the slice method to extract a specific portion of the string, starting at the 19th character and ending at the 23rd character.', "Replacing part of a string using the replace method, altering 'and on' to 'forever' within the string.", 'Converting the string to all uppercase and all lowercase using built-in methods.', 'Splitting a string into an array using the split method to separate words based on spaces or other delimiters.', 'Trimming white spaces from the beginning or end of the string using the trim method.', 'Styling strings using HTML tags such as big, bold, font color, font size, italics, link, small, strike, sub, and sup, showcasing various styles in the browser output.']}], 'duration': 580.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs512957.jpg', 'highlights': ['Covers working with variables, math functions, and manipulating strings in JavaScript.', 'Showcases built-in math properties, constants, and methods in JavaScript.', 'Illustrates generating random values and converting strings into numbers.', 'Covers string manipulation techniques with practical examples and explanations.', 'Demonstrates the usage of the slice method to extract a specific portion of the string.', 'Replaces part of a string using the replace method.', 'Converts the string to all uppercase and all lowercase using built-in methods.', 'Splits a string into an array using the split method.', 'Trims white spaces from the beginning or end of the string using the trim method.', 'Styles strings using HTML tags, showcasing various styles in the browser output.']}, {'end': 1978.92, 'segs': [{'end': 1147.906, 'src': 'embed', 'start': 1093.057, 'weight': 0, 'content': [{'end': 1095.198, 'text': "Now let's go and take a look at conditionals.", 'start': 1093.057, 'duration': 2.141}, {'end': 1106.597, 'text': 'Okay, so there are multiple different relational operators and this is going to be different ways that we can compare values and then perform different or execute different amounts of code,', 'start': 1096.348, 'duration': 10.249}, {'end': 1108.038, 'text': 'depending upon certain conditions.', 'start': 1106.597, 'duration': 1.441}, {'end': 1109.479, 'text': "That's the whole point of conditionals.", 'start': 1108.078, 'duration': 1.401}, {'end': 1116.085, 'text': 'Now there is equal to, there is not equal to, there is greater than, less than, greater than or equal to, or less than or equal to.', 'start': 1109.799, 'duration': 6.286}, {'end': 1121.349, 'text': "But for the most part, what you're going to use instead of equal to is one, two, three equal signs.", 'start': 1116.365, 'duration': 4.984}, {'end': 1127.553, 'text': 'And the difference here is whenever you just use two equal signs, that is just going to verify that the values are equal.', 'start': 1121.749, 'duration': 5.804}, {'end': 1134.667, 'text': 'When you use three, that is going to verify that the value of a variable as well as the type of the variable are going to be equal.', 'start': 1127.753, 'duration': 6.914}, {'end': 1137.231, 'text': "So for the most part, you're just going to use the SQL signs.", 'start': 1134.867, 'duration': 2.364}, {'end': 1142.718, 'text': 'Another thing we can use are logical operators, and those are AND, OR, as well as NOT.', 'start': 1137.511, 'duration': 5.207}, {'end': 1147.906, 'text': "And why don't we just go in here and start using these guys so that they make a little bit more sense.", 'start': 1143.119, 'duration': 4.787}], 'summary': 'Learning about relational and logical operators for conditionals.', 'duration': 54.849, 'max_score': 1093.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1093057.jpg'}, {'end': 1461.326, 'src': 'embed', 'start': 1430.703, 'weight': 3, 'content': [{'end': 1432.224, 'text': 'You can go ahead and do that on your own.', 'start': 1430.703, 'duration': 1.521}, {'end': 1435.026, 'text': 'So that is how we work with conditional operators.', 'start': 1432.504, 'duration': 2.522}, {'end': 1437.148, 'text': "Now let's jump over and take a look at looping.", 'start': 1435.086, 'duration': 2.062}, {'end': 1443.792, 'text': 'Now looping is going to be used anytime you want to perform a calculation a certain number of times as long as a condition is true.', 'start': 1437.368, 'duration': 6.424}, {'end': 1447.214, 'text': "And the first looping tool we're going to talk about is the while loop.", 'start': 1444.172, 'duration': 3.042}, {'end': 1451.317, 'text': "So let's go and create a variable called i and give it a value of 1.", 'start': 1447.435, 'duration': 3.882}, {'end': 1453.079, 'text': 'And this is what the while loop that looks like.', 'start': 1451.317, 'duration': 1.762}, {'end': 1461.326, 'text': "So we're going to say something like, we're going to continue to execute the code inside of our while loop as long as i is less than or equal to 10.", 'start': 1453.179, 'duration': 8.147}], 'summary': 'Introduction to conditional and looping operators, while loop executed for i<=10', 'duration': 30.623, 'max_score': 1430.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1430703.jpg'}, {'end': 1755.395, 'src': 'heatmap', 'start': 1625.633, 'weight': 0.872, 'content': [{'end': 1632.338, 'text': 'We can come in and say if j is equal to 15, for example, Then we want to break out of the looping structure altogether.', 'start': 1625.633, 'duration': 6.705}, {'end': 1639.122, 'text': 'What that says is we want to jump completely out of here and perform whatever execution comes down here after the for loop.', 'start': 1632.378, 'duration': 6.744}, {'end': 1643.064, 'text': "Otherwise, we're going to come in here and just print out the values of j.", 'start': 1639.302, 'duration': 3.762}, {'end': 1647.687, 'text': "And if we execute this guy, you're going to see that it only prints out our odd numbers like this.", 'start': 1643.064, 'duration': 4.623}, {'end': 1654.752, 'text': 'And instead of following this rule right here and printing the whole way up to 20, it instead hits this guy right here, which has a value of 15,', 'start': 1648.268, 'duration': 6.484}, {'end': 1656.493, 'text': 'and jumps out of the loop altogether.', 'start': 1654.752, 'duration': 1.741}, {'end': 1661.415, 'text': 'another type of for loop that we have available and of course, all this code is available in the description.', 'start': 1656.673, 'duration': 4.742}, {'end': 1662.575, 'text': 'so go ahead and get that.', 'start': 1661.415, 'duration': 1.16}, {'end': 1663.255, 'text': "if you'd like.", 'start': 1662.575, 'duration': 0.68}, {'end': 1671.458, 'text': "let's come in here and create a customer, and what we can do here is use key valued pairs, where the key in this situation is going to be name.", 'start': 1663.255, 'duration': 8.203}, {'end': 1678.101, 'text': "we'll get more into the specifics of this as the tutorial comes on, but I just wanted to show you another way of using a for type of loop.", 'start': 1671.458, 'duration': 6.643}, {'end': 1686.323, 'text': "then we have address like this and one, two, three main, and then finally we'll go and create another one called balance,", 'start': 1678.101, 'duration': 8.222}, {'end': 1689.244, 'text': "and let's say it's fifty dollars and fifty cents.", 'start': 1686.323, 'duration': 2.921}, {'end': 1695.125, 'text': "what we're going to be able to do is cycle through these innumerable properties of an object.", 'start': 1689.244, 'duration': 5.881}, {'end': 1701.187, 'text': "like i said, we'll get more into objects here later on, and to do so we'd use the, what is called the for, in loop.", 'start': 1695.125, 'duration': 6.062}, {'end': 1703.688, 'text': "so we'll be able to go okay in customer.", 'start': 1701.187, 'duration': 2.501}, {'end': 1706.309, 'text': "it's going to be our keys Throw in a document right.", 'start': 1703.688, 'duration': 2.621}, {'end': 1712.216, 'text': "And then if we want to reference different parts of the customer, we're just going to throw our value of k inside of there.", 'start': 1706.51, 'duration': 5.706}, {'end': 1717.242, 'text': 'And if we reload this, you can see that it prints out all the different values that we have stored inside of there.', 'start': 1712.456, 'duration': 4.786}, {'end': 1719.224, 'text': "So that's how the for in block works.", 'start': 1717.302, 'duration': 1.922}, {'end': 1721.447, 'text': "Now let's go and take a look at arrays.", 'start': 1719.364, 'duration': 2.083}, {'end': 1730.935, 'text': 'now an array can actually hold multiple different values of multiple different data types, and arrays in JavaScript anyway are variable in size.', 'start': 1721.867, 'duration': 9.068}, {'end': 1737.059, 'text': "so you'll be able to store multiple different values inside of here without defining a size.", 'start': 1730.935, 'duration': 6.124}, {'end': 1741.963, 'text': "so let's say we want to do something like put some information about Tom Smith inside of here.", 'start': 1737.059, 'duration': 4.904}, {'end': 1744.646, 'text': 'we can keep adding information and there we go.', 'start': 1741.963, 'duration': 2.683}, {'end': 1746.507, 'text': 'so Tom Smith lives at 123 Main and he has a $120 balance.', 'start': 1744.646, 'duration': 1.861}, {'end': 1747.988, 'text': "let's go and work a little bit more with this.", 'start': 1746.507, 'duration': 1.481}, {'end': 1755.395, 'text': "We're going to also be able to come in here and access different values.", 'start': 1751.311, 'duration': 4.084}], 'summary': 'The transcript covers conditional statements and looping structures in javascript, including examples of for loops and arrays.', 'duration': 129.762, 'max_score': 1625.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1625633.jpg'}, {'end': 1882.338, 'src': 'heatmap', 'start': 1806.106, 'weight': 0.93, 'content': [{'end': 1810.328, 'text': "So you're going to see exactly what I mean here and we're going to do that with a tool called splice.", 'start': 1806.106, 'duration': 4.222}, {'end': 1817.391, 'text': "So I'm going to override index 2 and then I'm going to put 1 inside of there which means I only want to override one thing.", 'start': 1810.648, 'duration': 6.743}, {'end': 1821.933, 'text': 'So it said start at index 2 and override index 2 or one thing.', 'start': 1817.511, 'duration': 4.422}, {'end': 1824.194, 'text': "And then it'll make everything else fit inside of there.", 'start': 1822.253, 'duration': 1.941}, {'end': 1828.596, 'text': 'And then I can come in and throw a whole bunch of different data pieces inside of here.', 'start': 1824.414, 'duration': 4.182}, {'end': 1831.637, 'text': "So let's say I want to put Pittsburgh and PA inside of there.", 'start': 1828.636, 'duration': 3.001}, {'end': 1835.519, 'text': 'I could also come in here and delete the fourth index with splice.', 'start': 1831.958, 'duration': 3.561}, {'end': 1837.46, 'text': "So we'll just go splice again.", 'start': 1835.819, 'duration': 1.641}, {'end': 1839.761, 'text': "And we'll say 4 and 1.", 'start': 1837.74, 'duration': 2.021}, {'end': 1843.143, 'text': 'And once again, this is going to represent the index we want to delete.', 'start': 1839.761, 'duration': 3.382}, {'end': 1846.284, 'text': 'And the 1 here says we only want to delete one thing.', 'start': 1843.523, 'duration': 2.761}, {'end': 1847.545, 'text': "So that's how that works.", 'start': 1846.384, 'duration': 1.161}, {'end': 1852.987, 'text': 'we can also come in here and convert this array into a string, actually in two different ways.', 'start': 1847.845, 'duration': 5.142}, {'end': 1857.449, 'text': 'so we can just go array like this and then to convert it into a string.', 'start': 1852.987, 'duration': 4.462}, {'end': 1864.892, 'text': 'we would just go, tom smith, again and we could say value of, or we could use the two string method of doing this.', 'start': 1857.449, 'duration': 7.443}, {'end': 1875.196, 'text': "so this could be either two string or value of does the same thing converts an array into a string and also let's come in and convert an array into a string using a separator.", 'start': 1864.892, 'duration': 10.304}, {'end': 1882.338, 'text': "so let's go array again and here what we're going to do is we'll say Tom Smith and join,", 'start': 1875.196, 'duration': 7.142}], 'summary': 'Demonstrating array manipulation with splice and conversion to string.', 'duration': 76.232, 'max_score': 1806.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1806106.jpg'}, {'end': 1948.48, 'src': 'embed', 'start': 1915.108, 'weight': 4, 'content': [{'end': 1919.789, 'text': 'Just type in sort and we can type in reverse instead and that would give us our reverse sort.', 'start': 1915.108, 'duration': 4.681}, {'end': 1926.11, 'text': 'However, this is going to be a sorting based off of alphabetical or letters instead of numbers.', 'start': 1920.069, 'duration': 6.041}, {'end': 1932.531, 'text': "So if we wanted to do a sort based off of numbers, what we would do first, I'm going to come in here and create a brand new array.", 'start': 1926.39, 'duration': 6.141}, {'end': 1934.392, 'text': "Now let's go and mess them up of course.", 'start': 1932.811, 'duration': 1.581}, {'end': 1939.675, 'text': 'So how you would number or how you would sort numbers inside a JavaScript is.', 'start': 1934.712, 'duration': 4.963}, {'end': 1948.48, 'text': "you're going to type in sort and then you're going to come in here and go function x, y and then you go return x minus y.", 'start': 1939.675, 'duration': 8.805}], 'summary': 'Demonstrates sorting in javascript using sort and reverse methods.', 'duration': 33.372, 'max_score': 1915.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1915108.jpg'}], 'start': 1093.057, 'title': 'Javascript conditions and loops', 'summary': 'Covers the use of relational and logical operators in javascript, including if-else statements, switch statements, ternary operators, and various looping structures. it also includes array manipulation techniques such as adding, accessing, overwriting, deleting, converting to string, and sorting.', 'chapters': [{'end': 1147.906, 'start': 1093.057, 'title': 'Conditionals and relational operators', 'summary': 'Covers the use of relational operators like equal to, not equal to, greater than, less than, greater than or equal to, and less than or equal to, emphasizing the importance of using three equal signs for verifying both value and type. it also introduces logical operators like and, or, and not.', 'duration': 54.849, 'highlights': ['The importance of using three equal signs for verifying both value and type is emphasized over using two equal signs.', 'Introduction of logical operators like AND, OR, and NOT is discussed for making conditions more understandable and meaningful.', 'Different relational operators like equal to, not equal to, greater than, less than, greater than or equal to, and less than or equal to are explained for comparing values and executing different amounts of code.']}, {'end': 1978.92, 'start': 1148.246, 'title': 'Javascript conditions and loops', 'summary': 'Covers javascript conditional statements, including if-else, logical operators, switch statements, ternary operators, and looping structures such as while, do-while, and for loops, as well as arrays manipulation including adding, accessing, overwriting, deleting, converting to string, sorting, and sorting for numbers.', 'duration': 830.674, 'highlights': ['The chapter covers JavaScript conditional statements, including if-else, logical operators, switch statements, ternary operators, and looping structures such as while, do-while, and for loops. It provides an overview of various JavaScript conditional statements and looping structures, showcasing the usage of if-else, logical operators, switch statements, and different types of loops like while, do-while, and for loops.', 'Arrays manipulation including adding, accessing, overwriting, deleting, converting to string, sorting, and sorting for numbers are demonstrated. The tutorial delves into array manipulation, covering adding, accessing, overwriting, deleting, converting arrays to strings, and sorting arrays, including sorting for numbers.']}], 'duration': 885.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1093057.jpg', 'highlights': ['The importance of using three equal signs for verifying both value and type is emphasized over using two equal signs.', 'Introduction of logical operators like AND, OR, and NOT is discussed for making conditions more understandable and meaningful.', 'Different relational operators like equal to, not equal to, greater than, less than, greater than or equal to, and less than or equal to are explained for comparing values and executing different amounts of code.', 'The chapter covers JavaScript conditional statements, including if-else, logical operators, switch statements, ternary operators, and looping structures such as while, do-while, and for loops.', 'Arrays manipulation including adding, accessing, overwriting, deleting, converting to string, sorting, and sorting for numbers are demonstrated.']}, {'end': 2618.46, 'segs': [{'end': 2059.822, 'src': 'embed', 'start': 1994.249, 'weight': 0, 'content': [{'end': 2001.233, 'text': "you can just go var and let's call this combined array and to combine the numbers array with the tom smith array.", 'start': 1994.249, 'duration': 6.984}, {'end': 2007.296, 'text': 'we would just go concat or concatenate, which is the same thing as joining, and then throw tom smith in there and there you go.', 'start': 2001.233, 'duration': 6.063}, {'end': 2008.356, 'text': 'now they are combined.', 'start': 2007.296, 'duration': 1.06}, {'end': 2014.299, 'text': "you could also come in, let's say, you then wanted to remove the last item from the tom smith array.", 'start': 2008.356, 'duration': 5.943}, {'end': 2018.361, 'text': "you could do so by just going pop, And that's going to remove just the last item.", 'start': 2014.299, 'duration': 4.062}, {'end': 2020.823, 'text': 'You also would be able to add items to the end.', 'start': 2018.541, 'duration': 2.282}, {'end': 2024.225, 'text': 'And to do that, you just go to Tom Smith and push.', 'start': 2021.183, 'duration': 3.042}, {'end': 2028.607, 'text': "And then let's throw some things on here like telephone number or something.", 'start': 2024.665, 'duration': 3.942}, {'end': 2032.37, 'text': 'And that would push those items on to the end of our array.', 'start': 2028.928, 'duration': 3.442}, {'end': 2037.333, 'text': 'Come in and delete just the first item by using shift.', 'start': 2032.69, 'duration': 4.643}, {'end': 2044.497, 'text': 'And you could also come in and add items to the first index or the very beginning of the array with unshift.', 'start': 2037.753, 'duration': 6.744}, {'end': 2048.155, 'text': "And then let's say we wanted to put Tom Smith in there again or whatever.", 'start': 2044.833, 'duration': 3.322}, {'end': 2051.177, 'text': "Now we'll be able to come in here and cycle through all these items.", 'start': 2048.415, 'duration': 2.762}, {'end': 2052.958, 'text': "I'm just going to use a for loop here.", 'start': 2051.297, 'duration': 1.661}, {'end': 2055.699, 'text': 'And we can go i is equal to 0.', 'start': 2053.178, 'duration': 2.521}, {'end': 2057.841, 'text': 'And while i is less than.', 'start': 2055.699, 'duration': 2.142}, {'end': 2059.822, 'text': 'And we wanted to do Tom Smith.', 'start': 2057.86, 'duration': 1.962}], 'summary': 'Using javascript array methods to combine, manipulate, and cycle through arrays.', 'duration': 65.573, 'max_score': 1994.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1994249.jpg'}, {'end': 2112.146, 'src': 'heatmap', 'start': 1979.22, 'weight': 3, 'content': [{'end': 1985.824, 'text': "And then just to show you the other way of converting the array into a string, we'll go numbers and it will go to string.", 'start': 1979.22, 'duration': 6.604}, {'end': 1989.647, 'text': 'And if we reload it, you can see that it did indeed come in there and sort those properly.', 'start': 1986.045, 'duration': 3.602}, {'end': 1994.249, 'text': "now for some reason, if you'd like to come in here and combine these two different arrays together,", 'start': 1989.907, 'duration': 4.342}, {'end': 2001.233, 'text': "you can just go var and let's call this combined array and to combine the numbers array with the tom smith array.", 'start': 1994.249, 'duration': 6.984}, {'end': 2007.296, 'text': 'we would just go concat or concatenate, which is the same thing as joining, and then throw tom smith in there and there you go.', 'start': 2001.233, 'duration': 6.063}, {'end': 2008.356, 'text': 'now they are combined.', 'start': 2007.296, 'duration': 1.06}, {'end': 2014.299, 'text': "you could also come in, let's say, you then wanted to remove the last item from the tom smith array.", 'start': 2008.356, 'duration': 5.943}, {'end': 2018.361, 'text': "you could do so by just going pop, And that's going to remove just the last item.", 'start': 2014.299, 'duration': 4.062}, {'end': 2020.823, 'text': 'You also would be able to add items to the end.', 'start': 2018.541, 'duration': 2.282}, {'end': 2024.225, 'text': 'And to do that, you just go to Tom Smith and push.', 'start': 2021.183, 'duration': 3.042}, {'end': 2028.607, 'text': "And then let's throw some things on here like telephone number or something.", 'start': 2024.665, 'duration': 3.942}, {'end': 2032.37, 'text': 'And that would push those items on to the end of our array.', 'start': 2028.928, 'duration': 3.442}, {'end': 2037.333, 'text': 'Come in and delete just the first item by using shift.', 'start': 2032.69, 'duration': 4.643}, {'end': 2044.497, 'text': 'And you could also come in and add items to the first index or the very beginning of the array with unshift.', 'start': 2037.753, 'duration': 6.744}, {'end': 2048.155, 'text': "And then let's say we wanted to put Tom Smith in there again or whatever.", 'start': 2044.833, 'duration': 3.322}, {'end': 2051.177, 'text': "Now we'll be able to come in here and cycle through all these items.", 'start': 2048.415, 'duration': 2.762}, {'end': 2052.958, 'text': "I'm just going to use a for loop here.", 'start': 2051.297, 'duration': 1.661}, {'end': 2055.699, 'text': 'And we can go i is equal to 0.', 'start': 2053.178, 'duration': 2.521}, {'end': 2057.841, 'text': 'And while i is less than.', 'start': 2055.699, 'duration': 2.142}, {'end': 2059.822, 'text': 'And we wanted to do Tom Smith.', 'start': 2057.86, 'duration': 1.962}, {'end': 2060.862, 'text': 'And then we can go link.', 'start': 2060.101, 'duration': 0.761}, {'end': 2066.9, 'text': 'like that, cycle through it as long as there are items that we can work with, we want to increment that,', 'start': 2061.498, 'duration': 5.402}, {'end': 2069.601, 'text': 'and then we can come in and print that information out.', 'start': 2066.9, 'duration': 2.701}, {'end': 2075.362, 'text': "so we'll say tom smith, and throw the value of i in there, which is incrementing, and if we reload it,", 'start': 2069.601, 'duration': 5.761}, {'end': 2077.583, 'text': 'you can see everything pops up there on our screen.', 'start': 2075.362, 'duration': 2.221}, {'end': 2078.402, 'text': 'so there you go, guys.', 'start': 2077.583, 'duration': 0.819}, {'end': 2082.324, 'text': "that's a whole bunch about how to use arrays inside of javascript.", 'start': 2078.402, 'duration': 3.922}, {'end': 2084.205, 'text': "now let's jump over and take a look at functions.", 'start': 2082.324, 'duration': 1.881}, {'end': 2092.152, 'text': 'Now, functions are going to allow you to eliminate repetitive code as well as provide for code reuse, so you can reuse code over and over again.', 'start': 2084.565, 'duration': 7.587}, {'end': 2097.137, 'text': "And to define one you just say function and I'm going to create one here that's actually kind of useful.", 'start': 2092.592, 'duration': 4.545}, {'end': 2101.942, 'text': "I'm going to define a function that's going to check if a value is inside of an array or not and I'm going to call it inArray.", 'start': 2097.157, 'duration': 4.785}, {'end': 2105.563, 'text': 'And these are the parameters that are passed into it.', 'start': 2102.482, 'duration': 3.081}, {'end': 2107.044, 'text': 'So array to check.', 'start': 2105.724, 'duration': 1.32}, {'end': 2109.405, 'text': "There's going to be an array passed into it.", 'start': 2107.444, 'duration': 1.961}, {'end': 2112.146, 'text': "And then there's going to be a value passed inside of it.", 'start': 2109.705, 'duration': 2.441}], 'summary': 'The transcript covers array manipulation and functions in javascript for code reuse.', 'duration': 33.744, 'max_score': 1979.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1979220.jpg'}, {'end': 2264.141, 'src': 'embed', 'start': 2236.729, 'weight': 10, 'content': [{'end': 2241.652, 'text': "So that should be pretty easy, right? So we'll go var2 like this, and we'll save that.", 'start': 2236.729, 'duration': 4.923}, {'end': 2243.092, 'text': 'and reload it.', 'start': 2242.052, 'duration': 1.04}, {'end': 2247.874, 'text': 'You can see nothing came back and you can see down here in the console var is not defined.', 'start': 2243.233, 'duration': 4.641}, {'end': 2254.277, 'text': 'Var too, this guy right here, is what is called a local variable which means it lives inside of this function.', 'start': 2248.095, 'duration': 6.182}, {'end': 2257.518, 'text': "It doesn't live or exist anywhere outside of that function.", 'start': 2254.417, 'duration': 3.101}, {'end': 2264.141, 'text': "So just be aware of if you define something inside of a function that doesn't necessarily mean it can be accessed outside of that function.", 'start': 2257.678, 'duration': 6.463}], 'summary': "Defining a local variable 'var2' inside a function does not allow access outside of the function.", 'duration': 27.412, 'max_score': 2236.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2236729.jpg'}, {'end': 2299.406, 'src': 'embed', 'start': 2275.909, 'weight': 7, 'content': [{'end': 2282.974, 'text': "Again, it's going to receive a value like this, and then it's going to return whatever was passed inside of it times three like this.", 'start': 2275.909, 'duration': 7.065}, {'end': 2287.777, 'text': "Now what we're going to be able to do is come in here, and create another function.", 'start': 2283.334, 'duration': 4.443}, {'end': 2289.659, 'text': "Now let's call this multiply.", 'start': 2288.118, 'duration': 1.541}, {'end': 2294.743, 'text': "And it's going to be able to perform multiple different calculations based off of the function passed inside of it.", 'start': 2289.679, 'duration': 5.064}, {'end': 2295.604, 'text': 'So there that is.', 'start': 2294.823, 'duration': 0.781}, {'end': 2297.405, 'text': "This doesn't need to be called func.", 'start': 2295.904, 'duration': 1.501}, {'end': 2298.466, 'text': 'It can be called anything.', 'start': 2297.445, 'duration': 1.021}, {'end': 2299.406, 'text': 'I just called it func.', 'start': 2298.546, 'duration': 0.86}], 'summary': 'A function will multiply the input by 3. another function will perform various calculations based on the input.', 'duration': 23.497, 'max_score': 2275.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2275909.jpg'}, {'end': 2394.424, 'src': 'heatmap', 'start': 2320.542, 'weight': 6, 'content': [{'end': 2324.845, 'text': 'And we could also come in and do the exact same thing 4 times 3.', 'start': 2320.542, 'duration': 4.303}, {'end': 2328.126, 'text': "And if we reload that, you're going to see that they perform different calculations.", 'start': 2324.845, 'duration': 3.281}, {'end': 2331.867, 'text': "So that's extremely useful to be able to pass functions around inside of there.", 'start': 2328.146, 'duration': 3.721}, {'end': 2337.708, 'text': 'Another thing we can do is we can create things called functions expressions, function expressions.', 'start': 2332.107, 'duration': 5.601}, {'end': 2340.769, 'text': "And let's just go in here and create this.", 'start': 2338.369, 'duration': 2.4}, {'end': 2344.13, 'text': "Let's call it triple is equal to function num.", 'start': 2340.809, 'duration': 3.321}, {'end': 2347.271, 'text': 'And then all this is going to do is return num.', 'start': 2344.45, 'duration': 2.821}, {'end': 2348.812, 'text': 'times 3.', 'start': 2347.771, 'duration': 1.041}, {'end': 2351.753, 'text': 'What this is simply doing is assigning the function to the variable.', 'start': 2348.812, 'duration': 2.941}, {'end': 2357.176, 'text': "What's really cool about this is you'd actually be able to take this function right here and store it inside an array.", 'start': 2351.913, 'duration': 5.263}, {'end': 2363.278, 'text': 'So you could have an array of functions that you could cycle through and perform different operations with, which is really kind of neat.', 'start': 2357.376, 'duration': 5.902}, {'end': 2366.68, 'text': "So for example, let's come down here and let's use this.", 'start': 2363.439, 'duration': 3.241}, {'end': 2368.941, 'text': "Again, let's just paste this inside of there.", 'start': 2366.92, 'duration': 2.021}, {'end': 2374.664, 'text': "And you can see that, let's just change this to 45 is equal to, multiply, and then here we'll change this to triple.", 'start': 2369.161, 'duration': 5.503}, {'end': 2376.606, 'text': 'And pass 45 inside of there.', 'start': 2374.984, 'duration': 1.622}, {'end': 2381.672, 'text': 'And much like this other calculation we performed, you can see that we can perform that calculation as well.', 'start': 2376.946, 'duration': 4.726}, {'end': 2385.396, 'text': 'Another thing we can do is we could actually return.', 'start': 2381.912, 'duration': 3.484}, {'end': 2387.318, 'text': "Let's just keep this all on the same page.", 'start': 2385.416, 'duration': 1.902}, {'end': 2392.042, 'text': 'We could actually receive a variable number of arguments into our function.', 'start': 2387.639, 'duration': 4.403}, {'end': 2394.424, 'text': 'So we have no idea how many arguments are getting passed in.', 'start': 2392.063, 'duration': 2.361}], 'summary': 'Functions and function expressions can be used to perform different calculations and store in an array for cycling through, allowing for flexible operations.', 'duration': 73.882, 'max_score': 2320.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2320542.jpg'}, {'end': 2403.151, 'src': 'embed', 'start': 2376.946, 'weight': 8, 'content': [{'end': 2381.672, 'text': 'And much like this other calculation we performed, you can see that we can perform that calculation as well.', 'start': 2376.946, 'duration': 4.726}, {'end': 2385.396, 'text': 'Another thing we can do is we could actually return.', 'start': 2381.912, 'duration': 3.484}, {'end': 2387.318, 'text': "Let's just keep this all on the same page.", 'start': 2385.416, 'duration': 1.902}, {'end': 2392.042, 'text': 'We could actually receive a variable number of arguments into our function.', 'start': 2387.639, 'duration': 4.403}, {'end': 2394.424, 'text': 'So we have no idea how many arguments are getting passed in.', 'start': 2392.063, 'duration': 2.361}, {'end': 2396.266, 'text': "And we'll be able to still work with them.", 'start': 2394.464, 'duration': 1.802}, {'end': 2399.128, 'text': "We don't put any parameters inside of there in this situation.", 'start': 2396.366, 'duration': 2.762}, {'end': 2400.869, 'text': 'Create a variable called sum.', 'start': 2399.408, 'duration': 1.461}, {'end': 2403.151, 'text': 'Give it a value of 0 to start off.', 'start': 2401.25, 'duration': 1.901}], 'summary': 'Function can handle variable number of arguments and perform calculations.', 'duration': 26.205, 'max_score': 2376.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2376946.jpg'}, {'end': 2494.132, 'src': 'embed', 'start': 2454.645, 'weight': 9, 'content': [{'end': 2460.629, 'text': "You'd also be able to come in here and return a variable number of arguments by using an array.", 'start': 2454.645, 'duration': 5.984}, {'end': 2462.851, 'text': "So let's create another function.", 'start': 2460.89, 'duration': 1.961}, {'end': 2464.672, 'text': "Let's call this times two.", 'start': 2462.951, 'duration': 1.721}, {'end': 2466.574, 'text': 'So times two like this.', 'start': 2464.993, 'duration': 1.581}, {'end': 2471.257, 'text': "And let's just have an array gets passed inside of times two.", 'start': 2467.455, 'duration': 3.802}, {'end': 2473.279, 'text': 'Create a new empty array.', 'start': 2471.578, 'duration': 1.701}, {'end': 2474.86, 'text': 'is equal to,', 'start': 2473.839, 'duration': 1.021}, {'end': 2494.132, 'text': "and there's an empty array for us to work with and then we're going to create another for loop and we're going to go i let's send the array so the total number of array items inside of here and we're going to cycle through all of them and now we can go new array and push on to the end of my array all of those different values on there times two,", 'start': 2474.86, 'duration': 19.272}], 'summary': 'Creating a function to return a variable number of arguments using an array and multiplying each value by 2.', 'duration': 39.487, 'max_score': 2454.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2454645.jpg'}, {'end': 2585.863, 'src': 'embed', 'start': 2558.212, 'weight': 5, 'content': [{'end': 2561.833, 'text': "And that's going to allow us to be able to perform factorial calculations.", 'start': 2558.212, 'duration': 3.621}, {'end': 2569.576, 'text': 'So we could say something like factorial of 4 and then call factorial and pass in the value of 4 for this.', 'start': 2561.933, 'duration': 7.643}, {'end': 2571.997, 'text': "I'm going to show you exactly how this is working here in one moment.", 'start': 2569.656, 'duration': 2.341}, {'end': 2575.959, 'text': 'And if we reload it, you can see the factorial of 4 is equal to 24.', 'start': 2572.297, 'duration': 3.662}, {'end': 2579.2, 'text': 'And you can see right here exactly how that is going to operate.', 'start': 2575.959, 'duration': 3.241}, {'end': 2585.863, 'text': "So the very first time it goes through the factorial function, right like this, it's going to have a value of 4.", 'start': 2579.56, 'duration': 6.303}], 'summary': 'Demonstration of factorial calculation with example of 4 resulting in 24.', 'duration': 27.651, 'max_score': 2558.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2558212.jpg'}], 'start': 1979.22, 'title': 'Javascript array manipulation and functions overview', 'summary': 'Introduces array manipulation in javascript, covering operations like converting arrays to strings, combining arrays, adding and removing items, and cycling through array items using for loop. it also covers the use of functions in javascript, including creating reusable code to check if a value is inside an array, defining local variables, passing functions as parameters, using function expressions, handling a variable number of arguments, and recursive functions to calculate factorial. practical examples are demonstrated with quantifiable outcomes.', 'chapters': [{'end': 2078.402, 'start': 1979.22, 'title': 'Javascript array manipulation', 'summary': 'Introduces array manipulation in javascript, covering operations like converting arrays to strings, combining arrays, adding and removing items, and cycling through array items using for loop.', 'duration': 99.182, 'highlights': ['The chapter covers converting arrays to strings, combining arrays, adding and removing items, and cycling through array items using for loop.', 'Demonstrates how to combine arrays using the concat method, and add items to the end of an array using push, with examples provided.', 'Explains removing items from an array using pop and shift methods, and adding items to the beginning of an array using unshift, with practical demonstrations.', 'Illustrates cycling through array items using a for loop and printing the information, providing a comprehensive understanding of array manipulation in JavaScript.']}, {'end': 2618.46, 'start': 2078.402, 'title': 'Javascript functions overview', 'summary': 'Covers the use of functions in javascript, including creating reusable code to check if a value is inside an array, defining local variables, passing functions as parameters, using function expressions, handling a variable number of arguments, and recursive functions to calculate factorial. it also demonstrates practical examples with quantifiable outcomes.', 'duration': 540.058, 'highlights': ["Creating a function to check if a value is inside an array The function 'inArray' is defined to check if a value is in an array, which is demonstrated by calling the function with a random array and checking for specific values like 4 and 6, resulting in 'true' and 'false' respectively.", "Defining local variables within a function The concept of local variables is explained with an example, showcasing that variables defined within a function cannot be accessed outside of it, illustrated by the attempt to print the 'var2' variable outside the function.", "Passing functions as parameters Demonstrating the ability to pass functions as parameters to another function, exemplified by a 'multiply' function that performs calculations based on the function passed inside it, resulting in different calculations for '3 times 15' and '4 times 3'.", "Creating function expressions and storing functions in an array The use of function expressions is explained, where a function is assigned to a variable, followed by the concept of storing functions in an array for performing various operations, exemplified by using the 'triple' function stored in an array to perform a calculation.", "Handling a variable number of arguments A function 'getSum' is created to handle a variable number of arguments using the 'arguments' object, demonstrated by performing calculations without knowing the exact number of arguments passed into the function.", "Returning a variable number of arguments using an array The creation of a function 'times two' that receives an array and returns a new array with each value multiplied by 2 is showcased, followed by printing the doubled array to the screen for validation.", 'Implementing recursive functions to calculate factorial The concept of recursive functions is demonstrated by calculating the factorial of a number, where the function calls itself until a specific condition is met, resulting in the calculation of factorial 4 to be equal to 24.']}], 'duration': 639.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs1979220.jpg', 'highlights': ['Illustrates cycling through array items using a for loop and printing the information, providing a comprehensive understanding of array manipulation in JavaScript.', 'Demonstrates how to combine arrays using the concat method, and add items to the end of an array using push, with examples provided.', 'Explains removing items from an array using pop and shift methods, and adding items to the beginning of an array using unshift, with practical demonstrations.', 'Introduces array manipulation in JavaScript, covering operations like converting arrays to strings, combining arrays, adding and removing items, and cycling through array items using for loop.', "Creating a function to check if a value is inside an array The function 'inArray' is defined to check if a value is in an array, which is demonstrated by calling the function with a random array and checking for specific values like 4 and 6, resulting in 'true' and 'false' respectively.", 'Implementing recursive functions to calculate factorial The concept of recursive functions is demonstrated by calculating the factorial of a number, where the function calls itself until a specific condition is met, resulting in the calculation of factorial 4 to be equal to 24.', "Creating function expressions and storing functions in an array The use of function expressions is explained, where a function is assigned to a variable, followed by the concept of storing functions in an array for performing various operations, exemplified by using the 'triple' function stored in an array to perform a calculation.", "Passing functions as parameters Demonstrating the ability to pass functions as parameters to another function, exemplified by a 'multiply' function that performs calculations based on the function passed inside it, resulting in different calculations for '3 times 15' and '4 times 3'.", "Handling a variable number of arguments A function 'getSum' is created to handle a variable number of arguments using the 'arguments' object, demonstrated by performing calculations without knowing the exact number of arguments passed into the function.", "Returning a variable number of arguments using an array The creation of a function 'times two' that receives an array and returns a new array with each value multiplied by 2 is showcased, followed by printing the doubled array to the screen for validation.", "Defining local variables within a function The concept of local variables is explained with an example, showcasing that variables defined within a function cannot be accessed outside of it, illustrated by the attempt to print the 'var2' variable outside the function."]}, {'end': 3652.558, 'segs': [{'end': 2741.694, 'src': 'heatmap', 'start': 2622.062, 'weight': 0.892, 'content': [{'end': 2627.565, 'text': 'That 6 is going to jump up here, which is going to be multiplied times the original number passed in called 4.', 'start': 2622.062, 'duration': 5.503}, {'end': 2629.166, 'text': "And that's going to give us our final value.", 'start': 2627.565, 'duration': 1.601}, {'end': 2633.57, 'text': 'So there is a whole bunch of ways to work with functions inside of JavaScript.', 'start': 2629.406, 'duration': 4.164}, {'end': 2635.252, 'text': "Now I'm going to talk about event handling.", 'start': 2633.651, 'duration': 1.601}, {'end': 2639.637, 'text': "Okay, so I'm going to cover a lot about event handling because that's very, very important.", 'start': 2635.412, 'duration': 4.225}, {'end': 2649.948, 'text': "So we're going to create a function here and I'm just going to call this open alert and I'm going to do some inline JavaScript and then we'll call some functions and do all kinds of other different things.", 'start': 2639.737, 'duration': 10.211}, {'end': 2658.617, 'text': "and this alert is going to get a message and it's going to open up that message in an alert and if you want to get access to all of the different events,", 'start': 2650.348, 'duration': 8.269}, {'end': 2663.562, 'text': "you could find, here is a link to that and I'll, of course, have that in the description,", 'start': 2658.617, 'duration': 4.945}, {'end': 2668.327, 'text': "so you'll be able to jump over there and look at all the different events, but I'm going to show you a ton of them in this tutorial.", 'start': 2663.562, 'duration': 4.765}, {'end': 2677.27, 'text': "So let's say that we wanted to come in here and we'll create a link and this link is going to call some JavaScript code to execute.", 'start': 2668.627, 'duration': 8.643}, {'end': 2687.334, 'text': "What you're going to want to do is first off go JavaScript and colon void and zero like this and then we're going to say on click.", 'start': 2677.45, 'duration': 9.884}, {'end': 2693.943, 'text': 'So whenever they click on this link, we want to call our alert function and have it execute.', 'start': 2688.433, 'duration': 5.51}, {'end': 2698.35, 'text': 'So this is a way of calling outside JavaScript for it to execute.', 'start': 2694.163, 'duration': 4.187}, {'end': 2700.935, 'text': "And I'll show you some inline Java as well.", 'start': 2698.711, 'duration': 2.224}, {'end': 2704.286, 'text': "So let's just say, say hello like this.", 'start': 2701.283, 'duration': 3.003}, {'end': 2706.648, 'text': "And then we'll come in and close that off.", 'start': 2704.706, 'duration': 1.942}, {'end': 2710.192, 'text': 'And of course, we want this outside of our script tag.', 'start': 2707.069, 'duration': 3.123}, {'end': 2711.393, 'text': "So let's throw it down here.", 'start': 2710.372, 'duration': 1.021}, {'end': 2713.255, 'text': 'And you can see say hello is right here.', 'start': 2711.413, 'duration': 1.842}, {'end': 2715.937, 'text': 'If we click on it, an alert pops up that says hello.', 'start': 2713.335, 'duration': 2.602}, {'end': 2718.44, 'text': "Okay, so that's one way to execute code.", 'start': 2716.178, 'duration': 2.262}, {'end': 2719.621, 'text': 'from inside here.', 'start': 2718.74, 'duration': 0.881}, {'end': 2727.745, 'text': "and you can also see here that if we do not have this guy inside here and we reload it and click on hello, what it's gonna do is,", 'start': 2719.621, 'duration': 8.124}, {'end': 2732.889, 'text': "if you were farther down inside the page and you clicked on that, it's gonna reload the page.", 'start': 2727.745, 'duration': 5.144}, {'end': 2738.232, 'text': 'so one way to keep it from reloading the page is to put JavaScript void inside there.', 'start': 2732.889, 'duration': 5.343}, {'end': 2741.694, 'text': "that keeps everything nice and it won't have the page jumping all over the place.", 'start': 2738.232, 'duration': 3.462}], 'summary': 'Javascript tutorial covers functions, event handling, and inline javascript execution.', 'duration': 119.632, 'max_score': 2622.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2622062.jpg'}, {'end': 2663.562, 'src': 'embed', 'start': 2635.412, 'weight': 2, 'content': [{'end': 2639.637, 'text': "Okay, so I'm going to cover a lot about event handling because that's very, very important.", 'start': 2635.412, 'duration': 4.225}, {'end': 2649.948, 'text': "So we're going to create a function here and I'm just going to call this open alert and I'm going to do some inline JavaScript and then we'll call some functions and do all kinds of other different things.", 'start': 2639.737, 'duration': 10.211}, {'end': 2658.617, 'text': "and this alert is going to get a message and it's going to open up that message in an alert and if you want to get access to all of the different events,", 'start': 2650.348, 'duration': 8.269}, {'end': 2663.562, 'text': "you could find, here is a link to that and I'll, of course, have that in the description,", 'start': 2658.617, 'duration': 4.945}], 'summary': "Covering event handling, creating 'open alert' function for message alerts, providing access to various events.", 'duration': 28.15, 'max_score': 2635.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2635412.jpg'}, {'end': 2821.836, 'src': 'embed', 'start': 2791.243, 'weight': 0, 'content': [{'end': 2798.765, 'text': 'we can perform different operations on mouse over and that just means that they put the mouse over top of this link and we want to do something.', 'start': 2791.243, 'duration': 7.522}, {'end': 2803.887, 'text': "well, one of the things we want to do is, let's say we want to change the style of this link.", 'start': 2798.765, 'duration': 5.122}, {'end': 2805.808, 'text': 'we can change the style right like this.', 'start': 2803.887, 'duration': 1.921}, {'end': 2811.089, 'text': "we can change it to red, for example, whenever they put the mouse over it, it's going to change it to red.", 'start': 2805.808, 'duration': 5.281}, {'end': 2821.836, 'text': 'we could also have an event trigger whenever the mouse moves off of my link and to do that you call on mouse out and whenever they take the mouse off of there,', 'start': 2811.089, 'duration': 10.747}], 'summary': 'Perform operations on mouseover, change link style to red', 'duration': 30.593, 'max_score': 2791.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2791243.jpg'}, {'end': 2979.202, 'src': 'heatmap', 'start': 2911.848, 'weight': 0.741, 'content': [{'end': 2918.673, 'text': 'And if I want to get the value that was entered, I can go document dot get element by ID.', 'start': 2911.848, 'duration': 6.825}, {'end': 2923.617, 'text': 'And then I just tell it whatever the ID of the element that I want to pull the text from is.', 'start': 2919.253, 'duration': 4.364}, {'end': 2924.737, 'text': "And that's random input.", 'start': 2923.677, 'duration': 1.06}, {'end': 2929.621, 'text': 'And then if I want to actually get the value that is inside of there, I just say value.', 'start': 2925.018, 'duration': 4.603}, {'end': 2930.518, 'text': 'I like that.', 'start': 2929.935, 'duration': 0.583}, {'end': 2933.831, 'text': 'Then before I close off those double quotes, I could go alert.', 'start': 2930.819, 'duration': 3.012}, {'end': 2936.797, 'text': 'And I could do something like user typed.', 'start': 2934.696, 'duration': 2.101}, {'end': 2941.28, 'text': 'And then if I wanted to output what they typed, I could go data entered.', 'start': 2937.117, 'duration': 4.163}, {'end': 2943.501, 'text': "And let's spell data entered right.", 'start': 2941.7, 'duration': 1.801}, {'end': 2947.923, 'text': 'And then we could close that off and put a semicolon inside of there and reload it.', 'start': 2943.861, 'duration': 4.062}, {'end': 2950.405, 'text': 'And you can see right here, there is the input.', 'start': 2948.364, 'duration': 2.041}, {'end': 2952.906, 'text': 'And I could say, hello, whatever you.', 'start': 2950.625, 'duration': 2.281}, {'end': 2953.867, 'text': 'There it is.', 'start': 2952.926, 'duration': 0.941}, {'end': 2955.688, 'text': "And it's been changed.", 'start': 2954.527, 'duration': 1.161}, {'end': 2958.529, 'text': 'And the on change event triggers whenever I leave.', 'start': 2956.028, 'duration': 2.501}, {'end': 2961.111, 'text': 'And you can see right there, it says user typed hello you.', 'start': 2958.69, 'duration': 2.421}, {'end': 2966.494, 'text': "It's another way to get information and events and how to work with these different HTML elements.", 'start': 2961.291, 'duration': 5.203}, {'end': 2972.678, 'text': 'You could also mess around with some ways of finding out what keys they clicked on the keyboard.', 'start': 2966.514, 'duration': 6.164}, {'end': 2979.202, 'text': "So let's create a form here and the action and have it just go nowhere because we're just playing around here.", 'start': 2972.778, 'duration': 6.424}], 'summary': 'Demonstration of using document.getelementbyid to retrieve and display user input, including handling user events and keyboard interaction.', 'duration': 67.354, 'max_score': 2911.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2911848.jpg'}, {'end': 3069.677, 'src': 'embed', 'start': 3040.761, 'weight': 1, 'content': [{'end': 3043.042, 'text': "There's an image file we'll be able to trigger some events on.", 'start': 3040.761, 'duration': 2.281}, {'end': 3045.323, 'text': "Let's go and get some button events.", 'start': 3043.222, 'duration': 2.101}, {'end': 3048.985, 'text': "I'm going to show you all the JavaScript for these all at one time.", 'start': 3045.743, 'duration': 3.242}, {'end': 3051.066, 'text': 'So call this logo button.', 'start': 3049.045, 'duration': 2.021}, {'end': 3053.767, 'text': "And then we'll go and create another input box.", 'start': 3051.366, 'duration': 2.401}, {'end': 3055.908, 'text': "We're going to call this mouse import.", 'start': 3054.247, 'duration': 1.661}, {'end': 3059.991, 'text': "Yeah, I'm going to show you some ways of pulling some mouse events off here as well.", 'start': 3055.928, 'duration': 4.063}, {'end': 3061.832, 'text': 'Type is equal to text.', 'start': 3060.151, 'duration': 1.681}, {'end': 3066.074, 'text': "And let's have the size of this be equal to 30.", 'start': 3062.272, 'duration': 3.802}, {'end': 3069.677, 'text': "And I'm also going to show you the mouse X and Y positions.", 'start': 3066.074, 'duration': 3.603}], 'summary': 'Javascript for triggering events on image file and handling mouse events with input box and positions.', 'duration': 28.916, 'max_score': 3040.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs3040761.jpg'}, {'end': 3149.274, 'src': 'heatmap', 'start': 3087.791, 'weight': 0.803, 'content': [{'end': 3096.551, 'text': "It's always a good idea to keep your your script code underneath of the HTML and we'll just create this and let's make this stuff actually work.", 'start': 3087.791, 'duration': 8.76}, {'end': 3098.453, 'text': "so I'm going to create a function here.", 'start': 3096.551, 'duration': 1.902}, {'end': 3105.119, 'text': "first it's called get character and it's going to catch an event that we're going to be able to do some things with.", 'start': 3098.453, 'duration': 6.666}, {'end': 3110.844, 'text': "we're going to assign some different events to trigger this get character function right here.", 'start': 3105.119, 'duration': 5.725}, {'end': 3115.087, 'text': 'What we want to do here first is we want to call event which,', 'start': 3111.004, 'duration': 4.083}, {'end': 3121.912, 'text': "like this and this is going to return the key or the mouse button that was clicked and that's what event which returns.", 'start': 3115.087, 'duration': 6.825}, {'end': 3129.317, 'text': 'so we want to verify that if this function is called, that that is not equal to null, which means it has no value, and if it does,', 'start': 3121.912, 'duration': 7.405}, {'end': 3136.702, 'text': "we're going to return string, and then we're going to call from character code and get the key code that they clicked on,", 'start': 3129.317, 'duration': 7.385}, {'end': 3139.064, 'text': 'and this is going to be here for Internet Explorer.', 'start': 3136.702, 'duration': 2.362}, {'end': 3149.274, 'text': 'else, if event.which is not equal to zero and event character code is not equal to zero.', 'start': 3139.604, 'duration': 9.67}], 'summary': 'Create a function to get character and trigger events, returning key or mouse button clicked.', 'duration': 61.483, 'max_score': 3087.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs3087791.jpg'}, {'end': 3324.82, 'src': 'heatmap', 'start': 3205.225, 'weight': 0.727, 'content': [{'end': 3212.088, 'text': "so we're looking at the character input input element and we're saying that if the key is pressed,", 'start': 3205.225, 'duration': 6.863}, {'end': 3220.491, 'text': "we want to do something and the thing we want to do is we want to call this function right here and it's going to get passed event information.", 'start': 3212.088, 'duration': 8.403}, {'end': 3226.814, 'text': "we're going to create a new variable character and we're going to pass into our get character function.", 'start': 3220.491, 'duration': 6.323}, {'end': 3230.304, 'text': 'we just created right here event or window event.', 'start': 3226.814, 'duration': 3.49}, {'end': 3233.539, 'text': 'Again, this is for older versions of Internet Explorer.', 'start': 3230.638, 'duration': 2.901}, {'end': 3234.379, 'text': "We're trying to work here.", 'start': 3233.579, 'duration': 0.8}, {'end': 3238.46, 'text': "And we're going to say, if not a character, we want to return false.", 'start': 3234.639, 'duration': 3.821}, {'end': 3241.381, 'text': 'And that means a special key was clicked once again.', 'start': 3238.86, 'duration': 2.521}, {'end': 3248.343, 'text': 'Otherwise, what we want to do, if they clicked on something that does work, we want to go and get element by ID again.', 'start': 3241.721, 'duration': 6.622}, {'end': 3253.544, 'text': 'And this time we want to come up here, to the key data, this paragraph right here,', 'start': 3248.563, 'duration': 4.981}, {'end': 3257.405, 'text': 'and input or output some information about the character that they clicked on.', 'start': 3253.544, 'duration': 3.861}, {'end': 3259.946, 'text': 'So just pay reference to key data.', 'start': 3257.725, 'duration': 2.221}, {'end': 3266.163, 'text': 'like that, and what we want to do in this situation is a paragraph, so we want to put some information inside of there.', 'start': 3260.287, 'duration': 5.876}, {'end': 3268.124, 'text': 'so we have to use inner HTML.', 'start': 3266.163, 'duration': 1.961}, {'end': 3270.704, 'text': "if it's a tag, we wouldn't use inner HTML.", 'start': 3268.124, 'duration': 2.58}, {'end': 3273.305, 'text': "otherwise, if it's an input element or something like that,", 'start': 3270.704, 'duration': 2.601}, {'end': 3282.307, 'text': "we would use value and we'll just say character and then keep this simple was clicked and then, after we get through this, we can say return true,", 'start': 3273.305, 'duration': 9.002}, {'end': 3283.427, 'text': 'and if we rewind this,', 'start': 3282.307, 'duration': 1.12}, {'end': 3292.029, 'text': "there's a whole bunch of different information right here and this is the input box that we just put the on key press event on side of there and you can see F was clicked,", 'start': 3283.427, 'duration': 8.602}, {'end': 3294.037, 'text': 'G was clicked, J was clicked.', 'start': 3292.029, 'duration': 2.008}, {'end': 3296.298, 'text': 'We can go and see if we can find something.', 'start': 3294.297, 'duration': 2.001}, {'end': 3297.959, 'text': "I don't know.", 'start': 3297.579, 'duration': 0.38}, {'end': 3301.06, 'text': "There's something here on the keyboard that it's not going to recognize.", 'start': 3298.179, 'duration': 2.881}, {'end': 3303.121, 'text': "It didn't do anything that time.", 'start': 3301.961, 'duration': 1.16}, {'end': 3304.962, 'text': "Okay, so that's how that works.", 'start': 3303.141, 'duration': 1.821}, {'end': 3308.86, 'text': "Now let's go and play around with some other different events that we can work with here.", 'start': 3305.356, 'duration': 3.504}, {'end': 3313.726, 'text': "Let's say we want to change text whenever the input is going to gain focus.", 'start': 3309.101, 'duration': 4.625}, {'end': 3319.513, 'text': 'So once again, this guy right here, when it gains focus, when it means I clicked inside of there, I want to type something inside of there.', 'start': 3314.007, 'duration': 5.506}, {'end': 3320.515, 'text': 'I want to do something.', 'start': 3319.513, 'duration': 1.002}, {'end': 3321.316, 'text': 'No problem.', 'start': 3320.535, 'duration': 0.781}, {'end': 3324.82, 'text': 'We can just go to document, get element by ID once again.', 'start': 3321.356, 'duration': 3.464}], 'summary': 'Creating a function to handle key press event and display character input data on a paragraph.', 'duration': 119.595, 'max_score': 3205.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs3205225.jpg'}], 'start': 2618.72, 'title': 'Javascript event handling', 'summary': 'Covers javascript functions, event handling techniques such as on click, on mouse over, on mouse out, on double click, on mouse down, and on mouse up, working with html events like input, change, submit, reset, image, and mouse events, and handling events and triggers in javascript, including different browser scenarios and changing content based on user actions.', 'chapters': [{'end': 2890.164, 'start': 2618.72, 'title': 'Javascript functions & event handling', 'summary': 'Covers javascript functions and event handling, including examples of function execution and various event handling techniques such as on click, on mouse over, on mouse out, on double click, on mouse down, and on mouse up, with examples and outcomes.', 'duration': 271.444, 'highlights': ['Examples of function execution and inline JavaScript The tutorial demonstrates examples of function execution and inline JavaScript, including calling the open alert function to display a message in an alert and using JavaScript void to prevent page reload on function execution.', 'Various event handling techniques The chapter explores various event handling techniques, such as on click, on mouse over, on mouse out, on double click, on mouse down, and on mouse up, with practical examples and outcomes.', 'Demonstration of changing styles and text on event triggers The tutorial showcases changing styles and text on event triggers, including changing the style and color on mouse over and mouse out, altering text on double click, mouse down, and mouse up events, with practical demonstrations for each.']}, {'end': 3098.453, 'start': 2890.404, 'title': 'Working with html events', 'summary': 'Discusses working with html events, including examples of input, change, submit, reset, image, and mouse events, demonstrating how to trigger and handle these events using javascript.', 'duration': 208.049, 'highlights': ['The chapter demonstrates how to work with various HTML events such as input, change, submit, reset, image, and mouse events, providing practical examples and JavaScript code for event handling.', 'It explains how to trigger events on different HTML elements and handle user inputs, such as tracking key presses, mouse movements, and form submissions.', 'The transcript provides detailed examples and code snippets for handling events like input, change, submit, reset, image, and mouse events, showcasing practical applications and functionality.', 'It shows how to access and manipulate input element values, trigger alerts based on user inputs, and capture and display keyboard and mouse events in real-time.', 'The chapter also covers the importance of keeping script code separate and underneath the HTML, emphasizing best practices for organizing and implementing JavaScript functionality.']}, {'end': 3652.558, 'start': 3098.453, 'title': 'Handling events and triggers in javascript', 'summary': 'Discusses handling events and triggers in javascript, including handling different browser scenarios, assigning events to trigger functions, and changing content based on user actions.', 'duration': 554.105, 'highlights': ['The chapter covers handling events and triggers in JavaScript, including scenarios for different browsers, assigning events to trigger functions, and updating content based on user actions.', 'The code includes handling different browser scenarios and assigning events to trigger functions.', 'Changing content based on user actions, such as gaining focus, selecting text, and clicking on elements, is demonstrated in the chapter.', 'The chapter discusses handling events and triggers in JavaScript, including scenarios for different browsers, assigning events to trigger functions, and updating content based on user actions.']}], 'duration': 1033.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs2618720.jpg', 'highlights': ['Demonstration of changing styles and text on event triggers, including changing the style and color on mouse over and mouse out, altering text on double click, mouse down, and mouse up events, with practical demonstrations for each.', 'The chapter demonstrates how to work with various HTML events such as input, change, submit, reset, image, and mouse events, providing practical examples and JavaScript code for event handling.', 'The chapter covers handling events and triggers in JavaScript, including scenarios for different browsers, assigning events to trigger functions, and updating content based on user actions.']}, {'end': 4144.55, 'segs': [{'end': 3783.197, 'src': 'embed', 'start': 3757.089, 'weight': 1, 'content': [{'end': 3760.99, 'text': "And this button's whole purpose is to clear all of those input elements.", 'start': 3757.089, 'duration': 3.901}, {'end': 3764.731, 'text': 'So make sure you give it the same exact name, clear inputs.', 'start': 3761.07, 'duration': 3.661}, {'end': 3765.932, 'text': 'Close that off.', 'start': 3765.172, 'duration': 0.76}, {'end': 3768.153, 'text': "And we'll just call this clear inputs.", 'start': 3766.252, 'duration': 1.901}, {'end': 3769.653, 'text': 'Close off the button tag.', 'start': 3768.473, 'duration': 1.18}, {'end': 3772.434, 'text': 'And now that we have that, save it and reload it.', 'start': 3769.913, 'duration': 2.521}, {'end': 3775.975, 'text': 'And you can see here all this different information is popping up here.', 'start': 3772.934, 'duration': 3.041}, {'end': 3776.955, 'text': 'Throw some more in there.', 'start': 3776.035, 'duration': 0.92}, {'end': 3779.656, 'text': 'And if I click on clear inputs, it clears all the inputs.', 'start': 3777.035, 'duration': 2.621}, {'end': 3783.197, 'text': "Okay, so there's a whole bunch about event handling.", 'start': 3779.676, 'duration': 3.521}], 'summary': 'Clear inputs button function effectively clears all input elements for event handling.', 'duration': 26.108, 'max_score': 3757.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs3757089.jpg'}, {'end': 3975.587, 'src': 'embed', 'start': 3950.39, 'weight': 0, 'content': [{'end': 3958.275, 'text': "Okay, and by talking about manipulating the DOM, what I mean is I'm going to take these divs and all of these other different elements, as you see,", 'start': 3950.39, 'duration': 7.885}, {'end': 3958.635, 'text': 'right here.', 'start': 3958.275, 'duration': 0.36}, {'end': 3964.718, 'text': "I went and just copied and pasted them in there and I'm going to show you how to target those in new and interesting ways and manipulate them,", 'start': 3958.635, 'duration': 6.083}, {'end': 3965.779, 'text': 'and so forth and so on.', 'start': 3964.718, 'duration': 1.061}, {'end': 3972.364, 'text': 'As you can see, I just have a div, I have an image, I have a whole bunch of paragraphs, and I have a whole bunch of buttons here.', 'start': 3966.039, 'duration': 6.325}, {'end': 3975.587, 'text': "And I'm going to go in and target those different things and make things happen.", 'start': 3972.424, 'duration': 3.163}], 'summary': 'Demonstrating dom manipulation targeting various elements for manipulation.', 'duration': 25.197, 'max_score': 3950.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs3950390.jpg'}, {'end': 4050.074, 'src': 'embed', 'start': 4022.5, 'weight': 2, 'content': [{'end': 4027.923, 'text': "I'm using a file on my system, so that's the reason why you don't see host right here, but that's the way that would work.", 'start': 4022.5, 'duration': 5.423}, {'end': 4033.527, 'text': "Now let's go in and let's take a look at how we can change a site on a button click.", 'start': 4028.183, 'duration': 5.344}, {'end': 4041.053, 'text': "We could, of course, have a change of site using multiple different other actions or events, but I'm going to use a button click right now.", 'start': 4033.727, 'duration': 7.326}, {'end': 4045.776, 'text': "So I'm going to point at the button called Go to Google, and I'm going to say On Click.", 'start': 4041.333, 'duration': 4.443}, {'end': 4050.074, 'text': "As you can guess, pretty much everything is using those same events that I've already covered.", 'start': 4046.269, 'duration': 3.805}], 'summary': 'Demonstrating how to change a site on button click using events.', 'duration': 27.574, 'max_score': 4022.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs4022500.jpg'}], 'start': 3652.558, 'title': 'Javascript dom and event handling', 'summary': 'Covers javascript dom manipulation, event handling, and styling, with practical examples and techniques for web development. it includes manipulating dom elements, handling events for input elements, and dynamically styling elements using javascript.', 'chapters': [{'end': 3732.727, 'start': 3652.558, 'title': 'Javascript dom manipulation', 'summary': 'Demonstrates how to manipulate dom elements using javascript, including changing the position of the mouse and clearing input elements, showcasing practical examples and techniques for web development.', 'duration': 80.169, 'highlights': ['The chapter covers manipulating DOM elements, such as changing the position of the mouse and clearing input elements, providing practical examples and techniques for web development.', 'The code demonstrates changing the X and Y positions of the mouse in real-time as it moves, showcasing the dynamic behavior of DOM manipulation.', 'Another technique showcased is clearing all input elements using JavaScript, providing insights into practical scenarios for web development.']}, {'end': 3938.904, 'start': 3733.027, 'title': 'Event handling and element styling in javascript', 'summary': 'Covers event handling for input elements, demonstrated by creating a button to clear all inputs, and element styling using javascript to dynamically change the background color, background image, border style, border width, and border color of a div.', 'duration': 205.877, 'highlights': ['Creating a button to clear all input elements Demonstrates event handling by creating a button to clear all input elements, providing a practical example of handling user input.', 'Dynamically changing background color using JavaScript Illustrates element styling by dynamically changing the background color of a div using JavaScript, showcasing the ability to modify visual aspects of elements.', 'Dynamically changing background image using JavaScript Shows the dynamic alteration of background images for a div using JavaScript, highlighting the capability to modify visual elements based on user interaction.', 'Modifying border style, width, and color dynamically Demonstrates the dynamic modification of border style, width, and color for a div using JavaScript, showcasing the versatility to change visual aspects of elements based on user actions.']}, {'end': 4144.55, 'start': 3939.244, 'title': 'Dom manipulation techniques', 'summary': 'Covers manipulating the dom to target elements, change site on button click, and navigate through browser history, demonstrating techniques like getting current url, changing site on button click, and navigating through browser history.', 'duration': 205.306, 'highlights': ['Changing site on button click Demonstrates how to change the site on a button click by using the window.location.href property and a button event, allowing users to navigate to a different website, e.g., Google, upon clicking the designated button.', "Getting current URL Explains the process of retrieving the current web page's URL using the window.location.href property, providing users with the ability to obtain the current URL of the webpage they are on.", 'Navigating through browser history Illustrates how to navigate through the browser history using the history.forward() and history.back() methods, enabling users to move forward and backward through the browser history, providing a seamless browsing experience.']}], 'duration': 491.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs3652558.jpg', 'highlights': ['The chapter covers manipulating DOM elements, such as changing the position of the mouse and clearing input elements, providing practical examples and techniques for web development.', 'Creating a button to clear all input elements Demonstrates event handling by creating a button to clear all input elements, providing a practical example of handling user input.', 'Changing site on button click Demonstrates how to change the site on a button click by using the window.location.href property and a button event, allowing users to navigate to a different website, e.g., Google, upon clicking the designated button.']}, {'end': 4671.518, 'segs': [{'end': 4192.821, 'src': 'embed', 'start': 4164.946, 'weight': 0, 'content': [{'end': 4168.91, 'text': 'throw true inside of there and if we come in here and rewind this, you can already.', 'start': 4164.946, 'duration': 3.964}, {'end': 4170.871, 'text': 'We have gone over how to go to Google.', 'start': 4169.17, 'duration': 1.701}, {'end': 4177.314, 'text': "we can go forward a page, we can go back a page and then you can jump on reload and it's going to reload the page.", 'start': 4170.871, 'duration': 6.443}, {'end': 4180.175, 'text': "So there's a whole bunch of different things we can do with the browser.", 'start': 4177.514, 'duration': 2.661}, {'end': 4180.915, 'text': "It's kind of cool.", 'start': 4180.234, 'duration': 0.681}, {'end': 4182.696, 'text': 'Go and do a couple more things here.', 'start': 4181.154, 'duration': 1.542}, {'end': 4187.337, 'text': "Now what I'm going to focus in on is actually grabbing elements and styling them.", 'start': 4182.916, 'duration': 4.421}, {'end': 4192.821, 'text': "So let's say that I wanted to get all of the paragraph elements that I have on my page.", 'start': 4187.537, 'duration': 5.284}], 'summary': 'Demonstrates browser navigation and element manipulation for web development.', 'duration': 27.875, 'max_score': 4164.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs4164946.jpg'}, {'end': 4252.58, 'src': 'embed', 'start': 4223.457, 'weight': 1, 'content': [{'end': 4224.858, 'text': 'You can see where the paragraphs are.', 'start': 4223.457, 'duration': 1.401}, {'end': 4227.079, 'text': "So there's a paragraph here, and there's a paragraph there.", 'start': 4224.878, 'duration': 2.201}, {'end': 4228.722, 'text': "And there's another paragraph right there.", 'start': 4227.441, 'duration': 1.281}, {'end': 4234.647, 'text': 'So you can see how those are styled and how we can target them and grab them and throw them in arrays and do all kinds of other things.', 'start': 4228.902, 'duration': 5.745}, {'end': 4238.711, 'text': "Now let's say we want to target the HTML of a document.", 'start': 4234.928, 'duration': 3.783}, {'end': 4240.172, 'text': "So we'll go document.", 'start': 4238.791, 'duration': 1.381}, {'end': 4242.614, 'text': "And here I'm going to use child nodes.", 'start': 4240.853, 'duration': 1.761}, {'end': 4246.458, 'text': "So I'm going to grab the second child node on our page.", 'start': 4243.015, 'duration': 3.443}, {'end': 4249.699, 'text': 'And change the background color for this as well.', 'start': 4247.098, 'duration': 2.601}, {'end': 4250.639, 'text': 'And reload it.', 'start': 4249.999, 'duration': 0.64}, {'end': 4252.58, 'text': 'And you can see everything colored itself.', 'start': 4250.759, 'duration': 1.821}], 'summary': 'Demonstrating targeting and styling html elements using child nodes and arrays.', 'duration': 29.123, 'max_score': 4223.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs4223457.jpg'}], 'start': 4144.55, 'title': 'Browser page reloading and styling html elements with javascript', 'summary': 'Covers techniques for reloading a web page using javascript and styling html elements, including navigation functionalities, targeting paragraph and html elements, handling text nodes, and changing element attributes.', 'chapters': [{'end': 4182.696, 'start': 4144.55, 'title': 'Browser page reloading', 'summary': 'Demonstrates how to reload a web page using javascript, also illustrating navigation functionalities such as going to google, moving forward and backward, and reloading the page.', 'duration': 38.146, 'highlights': ['The chapter covers how to reload a web page using JavaScript, including navigation functionalities like going to Google, moving forward and backward, and reloading the page.', 'It demonstrates how to change the page location to reload the browser, providing a practical example of window.location.reload().', 'The tutorial showcases various browser navigation functionalities like going to Google, moving forward and backward, and reloading the page.']}, {'end': 4671.518, 'start': 4182.916, 'title': 'Styling html elements with javascript', 'summary': 'Demonstrates how to grab and style html elements using javascript, including targeting paragraph and html elements, handling text nodes, and changing element attributes.', 'duration': 488.602, 'highlights': ['The chapter explains how to grab and style HTML elements using JavaScript, including targeting paragraph and HTML elements, handling text nodes, and changing element attributes.', 'The transcript provides examples of grabbing and styling HTML elements, such as paragraphs and HTML tags, using JavaScript.', 'It demonstrates how to target and style specific elements within HTML, such as changing the background color of paragraphs and child nodes.', 'The chapter also highlights the importance of handling text nodes and avoiding errors when targeting and styling elements using JavaScript.', "The transcript emphasizes the ability to change element attributes, such as checking and setting attributes like 'alt', and retrieving all attributes for an element."]}], 'duration': 526.968, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs4144550.jpg', 'highlights': ['The chapter covers how to reload a web page using JavaScript, including navigation functionalities like going to Google, moving forward and backward, and reloading the page.', 'The chapter explains how to grab and style HTML elements using JavaScript, including targeting paragraph and HTML elements, handling text nodes, and changing element attributes.']}, {'end': 5827.615, 'segs': [{'end': 4813.177, 'src': 'embed', 'start': 4775.257, 'weight': 1, 'content': [{'end': 4778.82, 'text': 'And child nodes, put it in there in the very first position.', 'start': 4775.257, 'duration': 3.563}, {'end': 4782.723, 'text': 'And if we rewind that, you can see it pops right inside of there.', 'start': 4779.44, 'duration': 3.283}, {'end': 4786.325, 'text': "So that's how we can put in different child elements or create different elements.", 'start': 4782.743, 'duration': 3.582}, {'end': 4790.048, 'text': 'And a whole bunch of information in regards to how we can manipulate the DOM.', 'start': 4786.706, 'duration': 3.342}, {'end': 4792.87, 'text': "Now I'm going to take a look at object-oriented JavaScript.", 'start': 4790.148, 'duration': 2.722}, {'end': 4801.888, 'text': "Now the idea behind object-oriented programming is we're trying to model the attributes and the capabilities of real-world objects directly inside of our code.", 'start': 4793.462, 'duration': 8.426}, {'end': 4806.892, 'text': "So let's say we want to create one here, and it's going to be called Customer1.", 'start': 4802.169, 'duration': 4.723}, {'end': 4810.955, 'text': "Well, what we're going to do first is define the attributes for this customer.", 'start': 4807.152, 'duration': 3.803}, {'end': 4813.177, 'text': "And so let's say John Smith.", 'start': 4811.496, 'duration': 1.681}], 'summary': 'Demonstration of manipulating dom and creating object-oriented javascript with example of creating a customer named john smith.', 'duration': 37.92, 'max_score': 4775.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs4775257.jpg'}, {'end': 5118.824, 'src': 'embed', 'start': 5087.835, 'weight': 3, 'content': [{'end': 5091.416, 'text': "Well, how we're going to be able to do that is with what is called an object constructor.", 'start': 5087.835, 'duration': 3.581}, {'end': 5095.058, 'text': 'And how you create one, you want to give your object a name.', 'start': 5091.777, 'duration': 3.281}, {'end': 5096.919, 'text': "And it's normally going to be uppercase letters.", 'start': 5095.098, 'duration': 1.821}, {'end': 5103.613, 'text': "And you're just going to define everything that's going to be passed inside of this object whenever it's created.", 'start': 5097.409, 'duration': 6.204}, {'end': 5104.534, 'text': 'So there you go.', 'start': 5103.834, 'duration': 0.7}, {'end': 5109.317, 'text': "There's all the different things that we're going to need to create our custom customer object.", 'start': 5104.754, 'duration': 4.563}, {'end': 5113.04, 'text': "Then we're just going to go this name, which refers to this object's name.", 'start': 5109.598, 'duration': 3.442}, {'end': 5118.824, 'text': "And then we'll do exactly the same thing for all of the other different attributes or elements inside of here.", 'start': 5113.22, 'duration': 5.604}], 'summary': 'Creating an object constructor for custom customer object with defined attributes.', 'duration': 30.989, 'max_score': 5087.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs5087835.jpg'}, {'end': 5331.302, 'src': 'embed', 'start': 5297.429, 'weight': 0, 'content': [{'end': 5305.152, 'text': 'you just do that pretty simple, And if I reload it, you can see Sally Smith lives at 234 Main and all of that information prints out on our screen.', 'start': 5297.429, 'duration': 7.723}, {'end': 5310.597, 'text': 'So that is a whole bunch of information on how to deal with objects inside of JavaScript.', 'start': 5305.392, 'duration': 5.205}, {'end': 5312.599, 'text': "Now let's take a look at form validation.", 'start': 5310.697, 'duration': 1.902}, {'end': 5322.196, 'text': "what I'm going to do is I'm going to throw a whole bunch of inputs inside of here and I'm going to validate whether they are good information or not good information.", 'start': 5313.271, 'duration': 8.925}, {'end': 5324.738, 'text': "so I'm going to create a div here first off.", 'start': 5322.196, 'duration': 2.542}, {'end': 5331.302, 'text': "then inside of this div I'm going to say something like enter your name and then I'm going to go in here and create an input box.", 'start': 5324.738, 'duration': 6.564}], 'summary': 'Javascript object manipulation and form validation demonstrated.', 'duration': 33.873, 'max_score': 5297.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs5297429.jpg'}], 'start': 4671.518, 'title': 'Object-oriented javascript and form validation', 'summary': 'Covers dom manipulation, object-oriented javascript, and form validation. it includes creating, setting attributes, and appending elements in dom, creating attributes and functions for objects, implementing shared prototype properties and methods for customized objects, and form validation techniques such as creating input boxes, validating user input, and utilizing try-catch blocks. overall, the chapter provides comprehensive insights into javascript manipulation and validation.', 'chapters': [{'end': 5053.348, 'start': 4671.518, 'title': 'Dom manipulation and object-oriented javascript', 'summary': 'Covers dom manipulation, including creating, setting attributes, and appending elements, along with object-oriented javascript, demonstrating creating attributes and functions for objects and manipulating object properties and methods.', 'duration': 381.83, 'highlights': ['Demonstrating creating, setting attributes, and appending elements in DOM manipulation The speaker demonstrates creating a paragraph element, setting attributes like id, and appending the new element to an existing div, showcasing the ease of DOM manipulation.', 'Explaining object-oriented JavaScript and creating attributes and functions for objects The chapter explains the concept of object-oriented programming and demonstrates creating attributes like name, street, city, and functions like paying down balance and adding to balance for an object.', 'Manipulating object properties and methods The speaker shows how to get, change, add, and delete object properties, cycle through properties using for-in loop, check property existence, and interact with object using a function, providing a comprehensive overview of object manipulation.']}, {'end': 5297.429, 'start': 5053.348, 'title': 'Object constructor and customized objects', 'summary': 'Explains object constructors, creating customized objects, and implementing shared prototype properties and methods for customer objects, demonstrating how to override a method.', 'duration': 244.081, 'highlights': ['The chapter explains object constructors and creating customized objects, demonstrating how to create multiple objects with different attributes and methods. It describes creating object constructors with uppercase letters to define attributes and methods, allowing the creation of multiple objects with distinct characteristics.', "It demonstrates adding shared prototype properties for customer objects, like 'is credit available', which is shared among all customer objects unless changed individually. The chapter illustrates adding shared prototype properties like 'is credit available' for customer objects, showing how this shared value is applied to all customer objects unless modified individually.", "The chapter showcases the creation of a shared function as a prototype method for customer objects and how to override the 'to string' method for an object. It demonstrates creating a shared function as a prototype method for customer objects and overriding the 'to string' method for an object, providing insights into the capability to implement shared methods and override default object methods."]}, {'end': 5827.615, 'start': 5297.429, 'title': 'Javascript object and form validation', 'summary': 'Covers handling objects in javascript and demonstrates form validation techniques, including creating input boxes, validating user input, and implementing exception handling. the tutorial emphasizes creating functions for form validation and utilizing try-catch blocks to manage errors.', 'duration': 530.186, 'highlights': ['Demonstrating form validation techniques, including creating input boxes, validating user input, and implementing exception handling The chapter covers form validation techniques, such as creating input boxes, validating user input, and implementing exception handling using try-catch blocks to manage errors.', 'Creating functions for form validation The tutorial emphasizes creating functions for form validation, such as checking if a field is empty and using regular expressions to verify the correctness of input.', 'Utilizing try-catch blocks to manage errors The tutorial demonstrates the use of try-catch blocks to handle potential errors and prevent program crashes, showcasing how to catch and manage errors when accessing array elements outside the defined range.']}], 'duration': 1156.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fju9ii8YsGs/pics/fju9ii8YsGs4671518.jpg', 'highlights': ['Covers dom manipulation, object-oriented javascript, and form validation.', 'Demonstrating creating, setting attributes, and appending elements in DOM manipulation.', 'Explaining object-oriented JavaScript and creating attributes and functions for objects.', 'The chapter explains object constructors and creating customized objects.', 'Demonstrating form validation techniques, including creating input boxes, validating user input, and implementing exception handling.']}], 'highlights': ['The tutorial covers fundamental JavaScript concepts equivalent to a 300-page book, including code import, user interaction, html manipulation, variables, math functions, string manipulation, conditions, loops, array manipulation, functions, event handling, dom manipulation, page reloading, styling, and form validation.', 'Instructions on how to import JavaScript code and interact with users are provided, demonstrating how to import JavaScript code directly into the HTML file and interact with users through prompts and alerts.', 'Practical examples of manipulating HTML elements are given, such as updating paragraph content based on user input.', 'The chapter provides an overview of JavaScript variables, including rules for naming and case sensitivity, and demonstrates math functions such as addition, subtraction, multiplication, division, modulus, and precision limitations.', "Illustrates rounding techniques for numerical values using the 'toFixed' method to round off numerical values to a specific number of decimal places, providing an example of calculating monthly payment for a customer's balance.", 'Covers working with variables, math functions, and manipulating strings in JavaScript, showcasing built-in math properties, constants, and methods, and illustrating generating random values and converting strings into numbers.', 'Covers string manipulation techniques with practical examples and explanations, demonstrating the usage of the slice method to extract a specific portion of the string and replacing part of a string using the replace method.', 'Covers logical operators like AND, OR, and NOT for making conditions more understandable and meaningful, and explains different relational operators for comparing values and executing different amounts of code.', 'Covers JavaScript conditional statements, including if-else, logical operators, switch statements, ternary operators, and looping structures such as while, do-while, and for loops, and demonstrates arrays manipulation.', 'Illustrates cycling through array items using a for loop and printing the information, combining arrays using the concat method, adding and removing items from an array, and creating functions to check if a value is inside an array and to calculate factorial.', 'Explains the concept of recursive functions, creating function expressions, storing functions in an array, passing functions as parameters, handling a variable number of arguments, and returning a variable number of arguments using an array.', 'Demonstrates changing styles and text on event triggers, including changing the style and color on mouse over and mouse out, altering text on double click, mouse down, and mouse up events, and working with various HTML events such as input, change, submit, reset, image, and mouse events.', 'Covers manipulating DOM elements, such as changing the position of the mouse and clearing input elements, creating a button to clear all input elements, and changing the site on button click using event handling.', 'Covers how to reload a web page using JavaScript, including navigation functionalities like going to Google, moving forward and backward, and reloading the page, and explains how to grab and style HTML elements using JavaScript, including targeting paragraph and HTML elements, handling text nodes, and changing element attributes.', 'Covers dom manipulation, object-oriented JavaScript, and form validation, demonstrating creating, setting attributes, and appending elements in DOM manipulation, explaining object-oriented JavaScript, creating attributes and functions for objects, and demonstrating form validation techniques, including creating input boxes, validating user input, and implementing exception handling.']}