0:01 [Music] 0:07 Hey, what's going on guys? Welcome to my 0:09 updated JavaScript crash course for 0:11 beginners. So, I did a video about 3 0:13 years ago on JavaScript fundamentals, 0:16 and this is the updated version, which 0:17 includes a more modern syntax and just 0:20 better overall structure. Now, I have a 0:22 lot of JavaScript courses and tutorials 0:24 on my channel, but this is definitely 0:26 the first one to watch if you're looking 0:28 to learn JavaScript. Okay? So, this will 0:30 get you started with the basic syntax 0:32 and all the fundamentals. And I'm going 0:35 to go over what we'll cover in this 0:36 crash course in a minute. So, I first 0:38 just quickly want to talk about what 0:40 JavaScript actually is. And I want to 0:42 mention that if you're brand new to 0:44 this, some some of what I'm about to say 0:46 might sound very confusing, but the 0:48 truth is you don't really need to 0:49 understand all this right now. uh in 0:51 order to to start learning how to write 0:53 JavaScript. So, I just want to explain 0:56 what what's possible with the language, 0:58 what it is. Um so, if this sounds like 1:00 gibberish, don't worry about it. You'll 1:01 come to learn this stuff later on, and 1:03 we're not going to spend too much time 1:05 in the slides anyway. So, JavaScript is 1:08 a high-level interpreted language. And 1:10 what high level means is there's a lot 1:12 of abstraction. uh meaning that you 1:14 don't have to deal with things like 1:15 memory management on your machine, stuff 1:18 like that, like you would with a 1:19 low-level language such as C or C++. Um 1:23 and interpreted just means that the 1:25 program is is executed directly without 1:27 having to run through a compiler. So for 1:30 instance, when you write let's say Java, 1:32 which is not related to JavaScript by 1:34 the way, sometimes beginners get the two 1:36 confused, but Java is a completely 1:38 different language. Java is actually a 1:41 compiled language, which means when you 1:43 write your code, you actually have to 1:44 run it through something called the 1:46 compiler in order for it to run on your 1:48 machine. JavaScript, however, is a 1:50 scripting language and it's interpreted. 1:52 Okay, JavaScript also conforms to the 1:55 ECMAScript specification. In fact, you 1:58 could say JavaScript is ECMAScript. 2:00 However, there are some other 2:01 implementations of ECMAScript as well, 2:03 such as um JScript, Action Script, uh 2:06 there's some others as well, but they're 2:08 not very popular. JavaScript is 2:09 definitely um the most popular part of 2:12 the specification. Um JavaScript is also 2:15 multiparadigm which means that you can 2:18 write your code in many different ways 2:19 or many different paradigms. For 2:21 instance, you can write object-oriented 2:23 code or functional code. Um there are 2:26 languages where you have to write it in 2:28 a certain way but JavaScript is not one 2:30 of those languages. Okay. JavaScript is 2:33 also the language of the browser or the 2:35 client. Your web browser displays HTML 2:38 markup with CSS styling. Hopefully, you 2:40 know at least the basics of those. Um, 2:43 but if you want interactive aspects on 2:45 your page, like let's say form 2:46 validation, uh, alerts, things like 2:49 that, JavaScript is used for that stuff. 2:51 Okay? So, it's the language of the front 2:53 end, meaning the browser. But you can 2:55 also run JavaScript on the server, uh, 2:58 for more powerful things like 2:59 interacting with databases and stuff 3:01 like that. And that's done by using a 3:04 JavaScript runtime called NodeJS uh 3:07 which is way beyond the scope of this 3:08 tutorial. However, I do have a ton of 3:10 Node.js 3:12 um videos on my channel, including a 3:14 crash course. So, if you want to check 3:16 that out later on, you can do that. All 3:19 right. So, why learn JavaScript? What 3:22 what are some of the reasons to to pick 3:24 JavaScript as a language over some of 3:26 the other ones? So, as I mentioned, it 3:28 is the language of the browser. So if 3:30 you want to do clientside programming, 3:33 meaning code that runs on your client 3:34 machine, um you'll need to know 3:36 JavaScript. So languages like Python, 3:39 PHP, C, Java, these are all great 3:42 languages, but they're all server side, 3:44 okay? They run on the server. They don't 3:46 run right in the browser like JavaScript 3:48 does. um they're very powerful, but they 3:51 they can't do things like um you know 3:54 slideshows and little widgets in the 3:56 browser and stuff like that unless they 3:58 run some kind of library that actually 4:00 generates JavaScript for the browser. 4:03 Okay. You can also build very 4:04 interactive interfaces with JavaScript 4:07 frameworks such as React, Angular, 4:09 Vue.js and these are all these 4:11 frameworks are all highly in demand. Um 4:14 and again you can build server side and 4:16 full stack applications using Node.js. 4:18 JS. Um, you can even build mobile apps 4:20 with technologies like React Native and 4:22 NativeScript and even desktop apps with 4:26 a framework like Electron. So, these are 4:28 reasons why JavaScript is my favorite 4:30 language because it's just it's 4:32 absolutely everywhere. Um, it's also 4:34 very fast, powerful, and it's fairly 4:36 easy to learn. So, this is what we're 4:38 going to go over in this crash course. 4:40 And remember, it is a crash course, so 4:42 it's not going to be too in-depth. It's 4:44 not going to be too long. uh it's enough 4:46 to get you started with all the 4:47 fundamental syntax. So we'll cover 4:49 things like data types, variables, 4:51 arrays, um objects, loops, conditionals, 4:54 functions, some object-oriented 4:56 programming, and even stuff like DOM 4:59 selection and events. So I'll show you 5:00 how we can do things like grab on to 5:03 HTML elements like buttons and add click 5:06 events, um change things up in the DOM, 5:08 which is the document object model, 5:10 things like that. We'll even do some 5:12 basic form validation. So, as this is a 5:15 crash course there, you will need to do 5:17 some further learning after this. I do 5:19 have a 21-hour course on Udemy called 5:21 Modern JavaScript from the beginning. 5:23 I'll put that uh promo link in the 5:25 description. And then, of course, I have 5:26 hundreds of free videos on YouTube. Um, 5:29 these are some of the ones that you 5:30 might want to look at, and I'll put 5:32 links to these in the description as 5:33 well. So, for instance, I have a 5:35 four-part course on the DOM, using 5:37 JavaScript with the document object 5:39 model. um object-oriented programming 5:41 using classes, videos on the fetch API 5:44 so you can make HTTP requests to um 5:47 backend APIs and then I have a whole 5:50 vanilla JavaScript playlist full of 5:52 small projects where we build u just 5:54 little applications in the browser and 5:56 then I also have a bunch of crash 5:58 courses on frameworks like React and 6:00 Angular and Vue. So definitely more 6:02 stuff to to check out after this video. 6:05 All right, so that's it for the slides. 6:07 Let's go ahead and jump in and let's 6:08 start to learn JavaScript. All right, 6:10 guys. So, we're going to get started and 6:12 I'm going to go a little faster than 6:13 usual just because there's so much to 6:15 cover um in terms of of just the 6:18 fundamentals of JavaScript. So, I have 6:20 my text editor open. I'm using Visual 6:23 Studio Code, which is what I would 6:24 suggest. However, you can use whatever 6:26 text editor you want. Um I'm also using 6:28 a an extension called Live Server that 6:32 will allow the browser to refresh when I 6:34 save the page. So, for instance, if I 6:36 just take this E off and I save, you'll 6:38 see that it'll auto reload. I don't have 6:40 to click the reload button. So, that's 6:43 helpful and we'll speed things up a 6:45 little bit. Um, so let's go ahead and 6:47 add some JavaScript to this very basic 6:49 HTML file. You can see I just have the 6:51 head and then in the body I have a 6:53 header with an H1. So, you want to put 6:55 your JavaScript at the bottom, right 6:58 above the ending body tag. Okay, you you 7:01 almost always want to put this the 7:02 JavaScript at the bottom because you 7:04 want your HTML and your CSS to load 7:06 first. So, let's go ahead and put a 7:09 script tag here. And there's two ways to 7:11 do it. You can put the JavaScript right 7:13 on the page by putting it within script 7:15 tags, or you can do it a second way, 7:18 which is the recommended way, and that 7:20 would be to put it in a separate 7:22 JavaScript file. So, that's what we're 7:24 going to do. But, I'll just show you 7:25 real quick that we can put it right on 7:27 the page here. So, I'm going to do an 7:29 alert, which is a function that is uh 7:33 actually part of the window object, and 7:36 it just adds a popup with whatever you 7:38 put in here. So, I'm putting a string of 7:40 hello world. And if I save, the page 7:42 will automatically load, and I get a 7:44 little popup that says hello world. All 7:46 right. So, I'm going to go ahead and get 7:48 rid of this because I want to include my 7:51 JavaScript from the this main.js file. 7:54 So, I'm just going to add a source 7:56 attribute here. and say I want to load 7:59 main.js. 8:00 Okay. And if I go to main.js, it's 8:02 completely empty. Now, since I'm in the 8:04 JavaScript file, there's no need to put 8:06 script tags or anything like that. We 8:08 just type our JavaScript. So, if I just 8:11 go ahead and put that alert back, 8:14 we'll say hello world and save. And you 8:17 can see that that runs. All right. Now, 8:19 as far as alert, you don't really want 8:21 to use that for debugging or or or 8:24 outputting values or anything really um 8:26 because it it blocks the rest of your 8:28 your script from running. It's just very 8:30 inefficient. So, what you want to use is 8:32 the console. Okay, every browser has 8:35 what are called developer tools and you 8:38 have a JavaScript console where you can 8:40 output and you can also actually run 8:42 JavaScript in the console. So, in 8:44 Chrome, you want to go to your menu, 8:46 more tools, and then developer tools. I 8:49 know you guys can't see this, but 8:50 there's a selection for developer tools, 8:52 and there's a bunch of tabs here. You 8:54 want to choose the console. Okay, if 8:57 you're on a different browser, I'm not 8:58 sure the exact menu option or keyboard 9:01 shortcuts. Um, but on Chrome, you can 9:03 also open it with command option I on a 9:07 Mac. You can toggle it that way or F12 9:09 on Windows. So, we can actually execute 9:12 JavaScript from here. I can say like 9:14 alert one and you can see that that 9:16 runs. We can clear the console with 9:18 clear and then some parenthesis. 9:21 And then we can also uh output to the 9:24 console from our script by doing 9:26 console.log. 9:28 Save that. And you'll see that it loads 9:29 hello world. So we're going to be 9:31 dealing mostly in the console uh in this 9:34 course because this is about learning 9:36 the the basic syntax. So we're not 9:39 really dealing too much with the DOM 9:41 with the with the user interface until 9:43 the end when we get to things like 9:44 events. um element selecting elements 9:47 and stuff like that. All right. Now, 9:50 there's other methods attached to this 9:52 console object as well because log is a 9:55 method. Okay. So, it's a method that 9:56 runs off the console object. If we 9:59 search the MDN documentation for 10:02 console, MDN is the um uh Mozilla 10:06 developer network and it's the best 10:08 documentation for JavaScript. So, if we 10:10 go down to methods, you'll see that 10:12 console has a bunch of stuff on it. So 10:15 um we can do like console error, console 10:17 warn if we want to put warnings. Um we 10:20 can add we can have tables in the 10:22 console, we can run assertions. So it's 10:25 great for debugging. All right. So just 10:27 to give you an example, if I do console. 10:33 And just say this is an error and save. 10:37 You'll see that now it's red and it also 10:40 uh gives us a gives us the the line 10:42 number and gives us a link to show us 10:45 where the error is. Okay. And it shows 10:47 us this little red X. Um so we can do 10:50 that. Let's go back to the console. We 10:52 can also do a warning. So we can do 10:55 console.warn. 10:59 Say this is a warning. Run that. And now 11:02 we get now it's just yellow. All right. 11:05 So there's there's some other ones as 11:06 well if you want to check the 11:07 documentation out, but I'm not going to 11:09 spend too much time on this where for 11:10 the most part we're just using console 11:12 log. All right, so let's clear that up 11:15 and let's talk about variables and how 11:17 to set them in JavaScript. There's 11:19 basically three ways to do it. We have 11:21 var, let, and const. Okay, now var has 11:25 been used since the beginning of 11:26 JavaScript. However, you don't really 11:28 want to use it anymore um now that we 11:30 have let and const because var is 11:33 globally scoped. So if we have let's say 11:36 a conditional like an if statement and 11:38 we set a variable um and then outside of 11:41 that block outside of that if statement 11:43 there's another variable with that same 11:45 name that can be a conflict and it can 11:47 cause problems. So for the most part you 11:50 don't want to use var anymore. Okay. let 11:52 and const were added with ES6 or or ES 11:56 2015 and ES stands for ECMAScript. So 11:59 that was a huge update to JavaScript 12:01 that gave us a lot of new functionality 12:03 a lot of which I'm going to show you in 12:05 this crash course. Now the difference 12:07 between let and const is with let you 12:09 can reassign values. So I'll give you an 12:12 example. If I say let age equals 30 and 12:16 we'll just go and console log. And I 12:18 have a shortcut in my VS Code settings. 12:20 So I can just do CL for console log. So 12:22 if you're wondering why that works for 12:24 me. Um and then I'm just going to 12:26 console log the age. And you can see we 12:28 get 30. Now since I used let I can take 12:31 that age and I can set it to something 12:33 else. Okay. So now it's set to 31. Now 12:37 if I use const here and save I'm going 12:39 to get an error. It says type error 12:41 assignment to constant variable. Const 12:44 is short for constant, which means it 12:46 can't be changed. It can't be directly 12:48 reassigned. All right, so this begs the 12:52 question, when do we use let and when do 12:54 we use const? Now, this is different for 12:57 everybody. Some people will just use 12:59 let. Uh what I do and and what I find a 13:02 lot of other people do is always use 13:04 const unless you know you're going to 13:06 reassign the value. Uh, I think this 13:08 makes your code more robust, more 13:11 secure, um, less prone to errors. Just 13:14 use const unless you know you're going 13:16 to reassign it. So, an example of of 13:18 something I would reassign would be like 13:20 a score in a game. So, I would do 13:22 something like let score. Uh, maybe just 13:25 initialize it and then something happens 13:28 and then we want to change the score 13:30 directly. So, score may equal 10. And 13:34 then I'll go down here and we'll console 13:37 log score and we get 10. Now we can't do 13:40 this with const. Okay, even if we don't 13:44 reassign it, I can't even initialize it 13:47 with const. You see, we get this error 13:48 missing initializer. Um because you have 13:51 to add a value if you use const. Okay, 13:55 but for the most part, you're not going 13:57 to directly reassign your values like 13:59 this. Um, and when you're dealing with 14:01 arrays and objects and stuff like that, 14:04 you can change the values within the 14:06 array or object. You just can't reassign 14:08 the entire thing. And I'll show you uh 14:10 more of what I'm what I mean later on. 14:13 All right. So, now that we know how to 14:16 assign a variables with let and const, 14:18 let's talk about data types. Okay. What 14:21 types of data can we assign to these 14:23 variables? Um now we have prim primitive 14:25 data types which means that the data is 14:28 directly assigned to memory okay it's 14:31 not a a resource uh so we have strings 14:35 we have numbers 14:38 uh boolean 14:41 null undefined 14:44 and symbol okay now symbol was added in 14:49 uh in ES6 and we're not going to go over 14:51 symbols it's just it's beyond the scope 14:53 of this tutorial utoal. It's not 14:54 something that's that common. So, we're 14:57 not going to go over the over symbols. 14:59 Um, but let's create some variables that 15:02 uh that are the some of these data 15:04 types. So, let's create a name 15:07 and I'll just set that to John. So, 15:09 that's a string. Strings can can have uh 15:12 double or single quotes. I prefer to use 15:14 single quotes. Also, when it comes to 15:16 semicolons, they're not mandatory. We're 15:19 not going to get an error if I save 15:20 that. There's there's nothing wrong with 15:22 that. However, I use semicolons and and 15:24 for most of the time, I think most 15:27 developers uh use them in JavaScript. 15:30 So, that's a string. Let's create a 15:32 number. We'll do age. 15:35 Okay. So, a number is just a number and 15:37 with no quotes around it. Uh let's do a 15:40 boolean. So, we'll do like um is cool 15:45 and set that to either true or false. 15:48 That's going to be a boolean. No quotes. 15:50 You put a quote quotes around it. It's 15:52 going to be a string. Um, let's do null. 15:55 So, we'll do const. Actually, I wanted 15:58 one thing I wanted to do is a decimal. 16:00 So, rating 16:02 equals 4.5. Now, even though this is a 16:06 decimal, it's it it's not a there's no 16:09 float or decimal data type in 16:11 JavaScript. It's just a number. Okay? 16:13 And I'm going to show you how we can 16:15 actually test the types of these in a 16:17 minute. Um, so let's do null. We'll do x 16:20 equals null. And what null means is is 16:22 basically empty. It's it's a variable 16:24 but there's nothing in it. Okay. So we 16:27 have null. We also have undefined which 16:29 we can explicitly define. So we can 16:33 explicitly define undefined or we can 16:36 just initialize something but we have to 16:38 use let. So if I just say let Z like 16:40 that with no value that's going to be 16:42 undefined as well. Now, if we want to 16:45 test the type, we can console log and we 16:47 can do type of and just put in the name 16:51 of the variable. So, let's try name. 16:53 And now down here, you'll see that 16:55 that's a string. Okay. If we try age, we 16:58 get number. If we try rating, we get 17:02 number because remember there's no 17:04 there's no technical floats or decimals 17:06 or anything like that. Um, is cool. We 17:09 get boolean 17:11 X. This is kind of a gotcha. So, we get 17:14 object and you're probably expecting 17:16 null. Now, this is actually an error and 17:19 it's a little hard to explain. So, I'm 17:21 just going to pull this up real quick 17:24 and just search for um JS 17:27 null is object. 17:32 All right. So, actually wait a minute. 17:34 Let's do type of I know it comes up in 17:37 Google. There we go. So in the first 17:40 implementation of JavaScript, values 17:42 were represented as a type tag and a 17:44 value with the type tag for objects 17:47 being zero and null was represented as 17:50 the null pointer. As a result, null had 17:53 zero as a type tag. Hence the bogus type 17:56 of return value. So as you can see here 17:58 that that return value from the type of 18:01 we just did is bogus meaning it's it's 18:03 not true. It's not really an object. 18:05 It's null. Okay. So kind of a hard to 18:08 explain definition but it just think of 18:11 this as just wrong. Uh next is 18:14 undefined. So let's do Y. Okay that's 18:17 undefined. Z should also be undefined. 18:20 So those are the the the main primitive 18:22 data types. Okay. Now of course we have 18:24 uh arrays and object literal and stuff 18:26 like that but those are objects. Those 18:28 aren't uh primitive data types. 18:31 So let's um let's look at strings. Okay, 18:36 so I want to talk a little bit about 18:37 strings. Um, and actually I want to keep 18:41 two variables here, name and age. And 18:45 let's look at concatenation. 18:50 So let's say I want I want to either 18:52 console log or create a variable uh with 18:55 a string that has variables inside of 18:58 it. So something like my name is and 19:01 then the name variable and I am and then 19:04 the age variable. If I just run that, it 19:06 just spits out the text. So, there's a 19:09 few ways to do this. Concatenating, the 19:11 way I'm going to show you is kind of the 19:12 older method. I'm going to show you a 19:14 better way in a second. Uh, but what we 19:16 could do is where we want the variable, 19:18 we could end the string and then use the 19:20 plus sign to concatenate on the 19:22 variable. Same on the other side. Use 19:24 the plus sign and concatenate the rest 19:27 of the string. Same thing where we want 19:29 the age variable, we'll stop the string, 19:31 concatenate, and since we're at the end, 19:33 we just get rid of that. and save. And 19:35 now we get my name is John and I am 30. 19:38 So this is kind of the old way of doing 19:39 it. It's a it's a real pain in the ass 19:41 if this is a real long string with a lot 19:43 of variables. So what we have now with 19:46 with ES6 or ES 2015 are template 19:51 strings, 19:52 okay, or template literal. So we could 19:55 do console log and we want to use 19:58 instead of quotes back ticks, okay? 20:01 Okay. So if we use back ticks this makes 20:02 it a template string and we can simply 20:04 do my name is and wherever we want to 20:07 use a variable we just use this syntax. 20:09 So money sign and then curly braces and 20:12 just put in the the name of the 20:14 variable. So my name is and I am 20:18 and then the age variable. Save it. We 20:21 get the same thing. All right. And we 20:22 could assign this to a variable if we 20:24 want. We could say like const um hello 20:28 equals 20:30 get rid of this parentheses and then we 20:33 could console log hello. 20:36 All right, so we can do that. Um next 20:38 thing I want to show you is a couple 20:41 string properties and methods. Let's get 20:44 rid of this as well. So I'm going to 20:46 just create a string. Let's call it s. 20:48 And we'll just do hello world. 20:52 All right. Now if we let's say we want 20:55 to get the length the number of 20:56 characters in the string we could use 20:58 the length property. So a console log s 21:02 length. Okay a property does doesn't 21:05 doesn't have um parenthesis. If it has 21:08 parenthesis it's a method. So let's just 21:11 console log s.length and we get 11. If 21:14 we add an exclamation we get 12. Okay so 21:17 that gets the length. Uh we can also set 21:20 it to actually I'll just go like this. 21:23 If we want to change the case, we could 21:25 do a method called to uppercase. Since 21:28 it's a method, it needs um parenthesis. 21:30 A method is basically a function that is 21:33 associated with an object. Okay, so we 21:36 get hello world. Uh we can also do two 21:39 lowercase. 21:41 Uh let's see, we also have substring. So 21:43 if we want to pull a a substring out of 21:46 the string. So let's do substring 21:50 and this takes in basically two indexes 21:53 where you want to start and end. So 21:55 we'll start at zero and let's end at 21:57 five. So if we look at this string the 22:00 first is 0 1 2 3 4 and then the space is 22:04 five. So it'll actually stop before 22:06 five. So it should this should give us 22:08 hello. So let's save. And we can see we 22:11 get hello. And you can tack on other 22:13 methods as well. Like we could do dot to 22:17 uppercase 22:18 and save and it ran substring got hello 22:22 and then made it all uppercase. So you 22:24 can um you know chain these on to each 22:27 other. Uh let's see another thing we can 22:29 do is split a string into an array. So 22:32 we have a method called split and then 22:36 as a parameter this takes in whatever 22:38 you want to split by. If you want to 22:40 split by letter, you would just put 22:42 empty um uh quotes without a space. If I 22:46 go ahead and save that, I know we 22:48 haven't gone over arrays yet, but you'll 22:50 see we get an array with 12 values, and 22:52 we have the letters or each character in 22:55 each value. Okay, including the space. 22:58 Now, this isn't very handy, but a lot of 23:01 times what we'll do is let's say we have 23:03 like a form where we're adding a blog 23:06 post and we're adding tags. you might 23:08 have like you know technology 23:12 uh computers 23:15 maybe I don't know it 23:19 uh code something like that and let's 23:21 say you want to take that string and 23:23 create an array from it now as a 23:26 separator in this case we would use 23:28 comma space because in between each word 23:30 is a comma space so I'll put that in 23:32 here like that and then I'll save and 23:34 now you can see we have an array with 23:36 four values and we have each word in 23:40 each array value here. All right, so 23:42 that's pretty handy because then you can 23:44 insert that into a database and you can 23:46 search to it and stuff like that. So 23:48 that's it is it does come in handy. All 23:51 right, so let's see. Let's move on to 23:54 arrays. Okay, so arrays 23:58 uh let's say arrays and I didn't go over 24:01 comments. Obviously comments are um 24:04 double forward slash. So arrays or if 24:07 you want multi-line comments, you can do 24:09 this. Let's say um 24:14 multi-line oops multi-line 24:18 comment. 24:20 And we would end it with asterisk 24:22 forward slash. 24:24 All right. So arrays are basically 24:27 variables that hold uh multiple values. 24:32 Okay. So, there's a couple ways to 24:35 create arrays. However, one of them 24:37 isn't used that much. I'm going to show 24:38 you that way first, and that's using the 24:40 array constructor. So, let's create a 24:43 variable called numbers and set that to 24:47 new array. Okay, so when you see this 24:50 new keyword and then something after it, 24:51 this is a constructor. Okay, so we're 24:53 constructing an array and we can pass in 24:56 actually, let's just put in some 24:57 numbers. 25:00 All right. And then we'll go down here 25:02 and console log numbers and save. And we 25:05 get an array with five values one 25:08 through five. All right. So that's using 25:10 the constructor. But for the most part, 25:13 I'm going to get rid of that and create 25:14 a new one. 25:16 Let's do fruits. For the most part, 25:18 you're just going to set brackets. And 25:20 then you can create your array. So, 25:22 let's do like apples, 25:27 oranges, 25:29 peers, or pears. 25:32 And then we'll go ahead and console log 25:35 fruits. Save. And there we go. Now, in 25:38 JavaScript, you can have multiple data 25:41 types within the same array. So, I could 25:43 put a number in here. I could put a 25:45 boolean. Whatever I want, and that's 25:48 fine. In a lot of languages, you have to 25:50 have the same data types in your array. 25:53 In fact, there's there's quite a few 25:54 languages where you actually have to set 25:56 the the number as well. So, we would 25:59 have to set this to be three values. Uh, 26:01 which can be kind of a pain. So, 26:03 JavaScript gives you a lot of freedom. 26:05 Um, and another thing I didn't didn't 26:07 mention is JavaScript is not statically 26:09 typed. So, we don't have to like let's 26:11 say we're creating a string, we don't 26:13 have to do like colon string or anything 26:15 like that. Now there is something called 26:18 Typescript which is a superset of 26:20 JavaScript. So it's basically JavaScript 26:23 with some added features and static 26:25 typing is one of those. So if you want 26:27 to do this uh I would suggest taking a 26:29 look at TypeScript. 26:31 All right. So we have our fruits. Now 26:33 what if we want to add on to this or I'm 26:36 sorry, what if we want to access just 26:38 one of these? Okay, like oranges. So, 26:41 I'm going to just do um 26:44 let's say console log fruits and we'll 26:46 open up some brackets and let's put a 26:48 one in here. So, if we check that out, 26:51 we get oranges. Now, even though oranges 26:54 is the second one, the reason that we 26:55 get it from one is because arrays are 26:57 zerobased. Okay, so it's 0 1 2. Okay, 27:02 remember that arrays are always 27:03 zerobased uh in every language. So if we 27:07 wanted to add on to the end, 27:11 we could do uh fruits. 27:14 So we know we have 012. So we could do 27:17 fruits 3 equals and then grapes. And 27:21 then we'll console log fruits 27:24 and save. And you can see grapes got 27:26 added. Now notice we used const. Okay, 27:29 like I said before, you can add values 27:31 to the array. Um you can manipulate it. 27:34 You can use methods on it using const. 27:37 The only thing you can't do is take the 27:39 array and reassign it like this. Then we 27:41 get an error. Okay. So that's why you 27:44 can pretty much use const, you know, 27:46 with arrays and because you're there's 27:48 not going to be many times where you're 27:49 going to directly reassign it. You're 27:51 just going to manipulate it. Okay. So, 27:54 if you want to add to the end like we 27:57 just did, um, doing it this way isn't 28:00 really the best way to do it because you 28:01 might not know exactly how many values 28:04 are in the array. So, in that case, you 28:06 can use the push method. So, we can say 28:08 fruits.push 28:12 and push a value onto the end. So, let's 28:14 do uh, I don't know, mangoes 28:18 and save. And now you can see mangoes 28:20 has been added to the end. Okay. Okay, 28:22 no matter how many are in the array. Um, 28:25 if we wanted to add on to the beginning, 28:27 we could use unshift. So, we could say 28:30 fruits.shift 28:33 and let's say we wanted to add 28:36 strawberries 28:38 and save. And now you'll see that 28:39 strawberries is on is at the beginning. 28:42 All right. And there's a lot of 28:44 different array methods. Um, another one 28:46 is pop. If you want to take the last one 28:48 off, you could do fruits. 28:51 pop. And you can see mangoes is there, 28:54 but once I save, mangoes is gone. It 28:56 just pops the last one off. Um, another 28:59 thing, if you want to check to see if 29:00 something is an array, you can do 29:04 um I'm sorry, you want to do array 29:08 is array and then pass in let's pass in 29:11 fruits and save. And you can see it 29:13 gives us true. All right. If I were to 29:16 put let's say a string in here and save, 29:19 we get false. So if you ever want to 29:21 check to see if something is an array, 29:23 you could put this in a conditional and 29:25 get a true or false value. 29:27 All right. Now, if you want to get the 29:29 index of a certain value, you can use 29:32 index of. So we could say fruits dot 29:36 index of and let's say we want the index 29:39 of oranges 29:42 saves. And we get two. So we have if we 29:45 look at that, you can see that two is 29:47 the index of the oranges value. 29:50 All right. So, I think that that's going 29:52 to be it for arrays. Like I said, 29:53 there's a bunch of other methods. So, 29:55 it's not it's something that you 29:56 definitely want to look into. Um my 29:58 Udemy JavaScript course, we go over a 30:00 lot more. We learn how to like 30:02 concatenate arrays and stuff like that. 30:04 But these are just some pretty common uh 30:07 methods. So, now we're going to talk 30:09 about object literal. Okay, so object 30:12 literals are um basically just key value 30:16 pairs. So let's do something simple like 30:18 a person. 30:20 So a person has uh let's do first name. 30:26 So we'll say John. It's a string. Do 30:29 last name 30:31 do. And we can do uh other types like we 30:35 can do age 30:37 30. We could even put an array. We could 30:40 do something like hobbies 30:42 and set that to an array. We'll say 30:45 music, 30:48 movies, and 30:51 sports. And then we can also do embedded 30:53 objects. So we can put an object within 30:55 an object like address 30:58 and say um street 31:05 50 main street. Let's do city 31:10 Boston and state 31:14 All right. Now, let's say we want to 31:17 first of all, we'll just console log the 31:19 whole thing. So, person and it will show 31:21 us in the console. If you were to alert 31:24 this, show you what happens. You're just 31:27 going to get this object object. Okay. 31:29 So, alert is not a good way to uh to do 31:31 this kind of stuff. So, this will show 31:33 us the values. Okay. Now, if we want to 31:36 access a single value, we use the dot 31:38 syntax. We can do person dot 31:41 first name. 31:43 All right. And you can you can log more 31:45 than one thing. If I use a comma, we 31:48 could do person dot last name and save. 31:51 And it'll give us both. Okay. So you can 31:53 separate different logs with commas. 31:56 Now let's say we want to get the this 32:00 value right here, movies. So uh I mean 32:03 obviously if you've worked with 32:04 JavaScript before you know how to do 32:05 this but if you're brand new take what 32:07 we've already learned uh as to how to 32:10 select values from arrays and from 32:12 objects and see if you can get movies to 32:14 print out in the console. If you need to 32:16 pause it go ahead and do that. So what 32:18 you would do is just say person and we 32:21 want hobbies. So hobbies and we know 32:24 that movies is in the one index of that 32:27 array. So we'll do one and save and we 32:30 get movies. Okay. Uh if we wanted to get 32:33 let's say just the city and that's in 32:35 this address object, we would do 32:37 person.add address dot city and we get 32:43 Boston. All right. So that's how we can 32:45 do that. Uh let's see. We can also use 32:48 dstructuring. So if we wanted to create 32:51 variables, 32:52 uh, you know, want these as actual 32:55 variables, we could do const and then 32:58 open up some curly braces and we can 33:00 actually pull stuff out like first name, 33:03 last name, and then say equals person. 33:07 So think of this not as assigning 33:09 something, but pulling these out of this 33:12 person object. And if I do console log 33:16 first name, you'll see we get John. So 33:18 we can pull different things out. Now if 33:21 it's an embedded object like an address, 33:24 uh what we could do is let's put a comma 33:27 here and we could do uh address 33:33 and then go like this city. 33:38 Okay. So if we go ahead and log city, we 33:42 get Boston. Now dstructuring is is kind 33:45 of advanced. Uh it's again it's part of 33:47 ES6. It's a new feature. Well, 33:50 relatively new. Um, but yeah, we can do 33:53 that. So, let's see what else did I want 33:56 to do. Oh, we can also add properties. 33:58 So, I could say like person. 34:00 Equals 34:02 uh John atgmail. 34:05 And if I console log person, you'll see 34:08 that now an email has been added. Okay. 34:11 So, you can directly add properties as 34:13 well. 34:15 Now, a lot of the times you're going to 34:16 be dealing with arrays of objects. 34:20 So, let's go ahead and create an array 34:22 of to-dos. So, we'll say con to-dos 34:25 arrays use brackets. And then we want 34:28 each value in the array to be an object. 34:30 We'll give it, excuse me, we'll give it 34:32 an ID. 34:34 Uh, we'll do text. So, just the text of 34:37 the to-do. We'll say take out trash. 34:42 Um, and then we'll do an is completed, 34:45 and that will be a boolean. So, we'll 34:47 say false. Actually, let's do true. 34:50 I'm going to show you something in a 34:51 little bit. All right. Now, I'm just 34:53 going to take this and copy it down 34:55 twice. 34:57 Oops. And let's change the IDs. So we'll 35:00 do two three and we'll change this to 35:04 let's say meeting 35:06 with boss 35:09 and 35:11 dentist appointment. Okay. And I'm going 35:13 to change this one to false. All right. 35:16 So we have an array of to-dos. If I were 35:18 to console log to-dos and save, you'll 35:21 see we have an array with three values 35:23 which are all objects. 35:25 All right. Now, if we wanted to 35:29 grab, let's say, this text, meeting with 35:31 boss. If you, again, if you're brand new 35:34 to this, um, what I want you to do is 35:36 try to print this out in the console. 35:38 Okay? So, you you know how to select 35:40 from an array. You know how to select 35:41 from an object. So, just print out this 35:43 meeting with boss. All right? So, what 35:45 you would do is take to-dos and we know 35:47 that it's the second value in the array. 35:50 So, that's the one index. And then we 35:52 just want the text property. Okay. Okay, 35:55 so we get meeting with boss. 35:57 Now I want to talk a little bit about 36:00 JSON. JSON is a data format and it's 36:03 used a lot within um you know full stack 36:06 development and using APIs when you're 36:09 sending data to a server. You usually 36:11 send it in JSON format and receive it in 36:14 JSON format. Um so what and it's very 36:17 similar to um to object literal. Okay. 36:21 So, I'm going to grab this whole array, 36:23 just this brackets, these brackets, and 36:25 I'm actually going to 36:28 I don't remember the exact URL. I'm just 36:30 going to say JSON um converter. 36:34 And it's this one right here. So, this 36:36 is uh free formatterater.com/json 36:40 formatterater. And I'm just going to 36:41 paste in our array and say format JSON. 36:44 And you can see that the syntax of JSON 36:46 is very very similar. Um, the only 36:48 difference really is that we have double 36:51 quotes around all the keys and we have 36:53 double quotes around the strings. Okay, 36:56 so no single quotes in JSON. That will 36:58 give us an error. All right, so let's 37:01 say that we want to um convert this into 37:04 JSON within our script. So maybe we want 37:07 to get it ready to send to a server or 37:09 something like that. So, we would do um 37:12 let's actually create a variable and 37:14 we'll call it to-do 37:16 JSON. 37:18 And there's a method we can use called 37:19 JSON. Stringify 37:22 and we could just pass in to-dos. Okay. 37:25 And then we'll just console log the 37:27 to-do JSON value. And you can see that 37:31 we get a JSON string. Okay. So, this is 37:34 how we would send data to a server. 37:37 All right. So, we'll be working more 37:39 with um more with this in a little bit. 37:42 I want to go over loops. I'm going to 37:44 keep the to-dos array because I'm going 37:45 to show you how to loop over that. But 37:47 first of all, let's just look at some 37:49 simple for loops or a simple for loop. 37:52 Uh for loops are they exist in many 37:54 different languages. So, if you have 37:56 experience with a different language, 37:57 you might you might already know how to 37:59 do this. Uh but basically, we just say 38:01 for and we pass in three parameters. The 38:04 first is going to be the assignment of 38:06 the uh the iterator or the variable. So 38:09 I'm going to say I equals zero. And then 38:12 we use semicolons to separate these. Um 38:16 next is going to be the condition that 38:18 needs to be met. So we'll say I is less 38:21 than 10. And then lastly is just the 38:23 increment. So I ++ we'll just add one to 38:27 this I variable. So, what's going to 38:30 happen is whatever we put in here is 38:31 going to run until this is true. All 38:35 right. So, I'm going to go ahead and uh 38:38 just do a console log of I and save. So, 38:43 what happened is it ran it started at 38:45 zero. It went did an iteration. It got 38:48 to one because of the increment went 38:51 through again got to two. And once it 38:53 gets to nine, this condition um is no 38:56 longer true. Okay? because we're saying 38:58 I has to be less than 10. If we wanted 39:01 10 included, we could do less than or 39:03 equal to 10 because then that's still 39:06 true when it's 10 and it stops there. 39:09 All right. Now, we could do whatever we 39:10 want in here. We could put a template 39:12 string in here and just say uh 39:15 for loop number and we could go ahead 39:19 and put the i variable. Save. And now we 39:22 get for loop number and then each each 39:25 uh iteration number. All right. So 39:28 that's a for loop. We also have while 39:30 loops which are pretty old school as 39:33 well. Um the difference with a lot while 39:35 loops is we set the variable outside of 39:37 the loop. So we'll say let i equals z 39:43 and we'll say while. And while just 39:46 takes in the condition. So, I'll put the 39:48 same condition as long as I is less than 39:51 10. And let's do a console log. Um, 39:56 actually, I'll just copy this one. And 39:58 we'll change it to 40:01 while loop. 40:03 Get rid of that. Now, you want to make 40:04 sure that you increment the i. If you 40:07 don't, this will be a never-ending loop 40:09 because this condition will never be 40:10 met. Okay? So, it'll just keep looping 40:13 and looping. So you want to make sure 40:14 you do an i ++ which will increment it 40:17 by one. So I'll save that. And now we 40:19 get while loop zero to while loop 9. 40:24 Okay, because we did less than 10. So 40:26 that's a a while loop and a for loop. So 40:28 pretty pretty simple. Um, next thing I 40:31 want to do is show you how to loop 40:32 through arrays. Now we could use a for 40:34 loop. Actually, let me just grab this 40:36 for loop. 40:39 So we could use a for loop. We could 40:40 just change the the uh condition to as 40:44 long as I is less than to-dos.length 40:48 because length will give us the number 40:50 of items in the array. Uh I showed you 40:53 that we could use length on a string, 40:54 but we can also use it on an array. So 40:57 in this case, it'll be three, right? So 41:00 it's going to loop through as many um 41:02 to-dos as there are. And then let's say 41:05 we wanted to log out the to-do text. We 41:08 could do 41:11 um to do and then the index would be the 41:13 the i value. Okay, so the the um 41:16 iteration and then we could do text and 41:20 save. 41:22 I'm sorry, it should be to-dos. Okay, we 41:25 want to actually use the name of this 41:27 variable. Now, this isn't really the 41:30 best way to to loop through an array. Um 41:33 we have other methods such as a for of 41:36 loop. So to show you that we can do 41:39 four. It's structured kind of similar 41:41 but much um uh much more readable. So we 41:45 could say simply let to-do 41:49 from I'm sorry not from of to-dos. All 41:53 right. Now this is the name of the 41:56 array. Okay. So it's this variable. This 41:59 could be anything. I'm calling it to-do 42:01 because that makes sense. I could call 42:02 it t or anything else. And then if we 42:05 console log to-do, that gives us each 42:08 one. Okay, if I want just the text, I 42:10 could do to-do.ext and we don't have, 42:13 you know, the ugly looking uh index like 42:16 that. We just simply do to-do.ext. If we 42:19 want the ID, can loop through and get 42:21 the ids. So that's one way to do it. 42:24 Now, we also have what are called high 42:26 order array methods, which is the way 42:28 that I would suggest to um to do any 42:31 kind of iteration with arrays. And I'm 42:33 going to show you a couple of them. I'm 42:34 going to show you for each, which just 42:36 loops through them. Um, map, which will 42:40 uh allow us to create a new array from 42:43 an array. And then filter, which will 42:45 allow us to create a new array based on 42:47 a condition. So let's start with for 42:49 each. So we just take to-dos, whatever 42:52 the array is, and let's do dot for each. 42:57 Now these high order array methods, they 42:59 take in as a parameter a function. Okay, 43:02 so we pass in a function like that and 43:05 then this callback function takes in um 43:08 it can take multiple parameters but the 43:10 first one is going to be the variable 43:11 that you want to use as each item or in 43:15 this case each to-do. So let's do a 43:17 console log of to-do.ext 43:21 and save. And you can see we get we're 43:23 looping through and we're getting the 43:24 text for each to-do. All right. And 43:27 these look much better with arrow 43:28 functions which I'll get to in a little 43:30 bit. Um, but yeah, so that's a for each. 43:33 Um, now a map. Let's get rid of this. 43:37 Actually, I'm just going to change this 43:39 to map because these are all formatted 43:42 the same way. Okay, they take in a 43:44 function. You pass in um whatever 43:47 variable you want to use here. Now, with 43:50 map, it returns an array. So, I'm 43:52 actually going to assign, let's say, 43:54 to-do text because what I want to do, no 43:58 pun intended, is loop through and then 44:01 return an array of just the text right 44:04 here, just the text values. So, I could 44:08 just simply do return and then 44:11 to-do.ext. 44:14 Okay, so this is going to return a whole 44:15 new array of just the text. So, if I 44:17 console log to-do text and save, you can 44:21 see now we have just a regular array, no 44:24 object or anything. We just took the 44:25 to-do text and return that for each one. 44:28 Okay, so that's map. Um, we also have 44:32 filter. So, let's get rid of that. Just 44:36 change this to filter. 44:39 Now, let's say we only want to return 44:41 the to-dos that are that are completed 44:44 that have this is completed true. So, we 44:46 could return 44:49 uh let's do 44:51 let's see what do I want to do here. 44:53 Let's return the to-do 44:57 id. Okay, where the id is equal to not 45:03 id let's do uh is completed. 45:06 So is completed is equal to true. 45:10 And then let's go down. Let's actually 45:12 change this to to-do completed. Makes 45:17 more sense. And then we'll console log 45:20 to-do completed and save. And you can 45:22 see now we have an array of two values 45:25 and both of them are they're both the 45:28 ones that are completed. Now we can 45:30 actually chain on other um uh array 45:34 methods. So let's say we want to also 45:37 map and just get the text like we did 45:40 before. So I'll tack on to this. Let's 45:43 get rid of the semicolon and do map. 45:46 Pass in a function 45:48 to-do. 45:51 And let's just return to-do.ext. 45:56 So we'll go ahead and save. And now you 45:57 can see we have just an array of the 45:59 text, but it's only the ones that are 46:01 completed. Okay. So this these are very 46:04 very powerful. this this is functional 46:06 programming. It's very powerful. You can 46:08 really manipulate data uh pretty much 46:10 however you want, okay? And you can do 46:12 some pretty crazy stuff. So, it's 46:14 definitely something to look into. I do 46:16 have a video dedicated to a couple of 46:18 these high order array methods if you 46:20 want to check that out. Um but yeah, so 46:23 let's move on here. Um I don't think we 46:27 need this anymore. So, I'm going to get 46:29 rid of that and I want to move on to 46:31 conditionals. 46:33 Okay. So, let's start off with just 46:34 basic uh uh simple if statement. So, 46:38 we'll create a variable called x. 46:41 And I'll set it to 10. And we'll just 46:44 say if and I just want to test to see if 46:47 x is equal to 10. Now, I'm going to do 46:50 um I'm going to start off with a double 46:52 equal and then also show you what uh 46:55 triple equal means as well. All right. 46:57 So, we'll do if x= 10, then let's just 47:01 console log. Obviously, we could do 47:03 anything we want, but I'm just going to 47:04 say x is 10. And I'll save and we get x 47:08 is 10. Now, as far as the equal sign go, 47:11 if we use double double equal, 47:14 this will not match the data types. It's 47:17 just the value. So, if I change this to 47:19 a string and save, this is still true. 47:22 Okay, this is still equal to this in 47:25 terms of the double equal. Now, if I add 47:28 an extra a third equal sign and I save, 47:30 you'll see that we don't get x is 10 47:33 because what it does is it also matches 47:35 the data types. This is a string. This 47:38 is a number. So, this is not going to be 47:40 true. So, if I get rid of these quotes 47:42 and put this to a number, then it's 47:44 true. Now, different developers will 47:48 will treat this differently. Myself, I 47:50 like to always use triple equals because 47:53 I for the most part always want to match 47:55 the types. Um, sometimes developers will 47:59 pick and choose when to use double and 48:01 triple. I just always use triple. Um, so 48:04 let's uh let's do an else. 48:07 A lot of stuff in in just generally in 48:10 programming is preference. Um, so let's 48:13 do else. And let's do a console log. And 48:16 obviously if this isn't true then x is 48:18 not 10. Okay. So I'm going to go up here 48:22 and change this to 20 and save. and we 48:24 get x is not 10. So that's a very simple 48:27 if else. We can also add an else if if 48:30 we want to do an extra condition and we 48:33 can have as many else if as we want. So 48:35 we would do else if 48:39 and let's just move this up here 48:43 and let's say we want to test if x is 48:45 greater than 10. 48:48 So in here we'll just do a console log 48:50 and we'll say x is greater than 10 and 48:56 then else. 48:58 So if it's not 10 and it's not greater 49:00 than 10 that means it's less than 10. So 49:02 x is less than 10. Save. So x is greater 49:08 than 10. If we make it 10 we get x is 49:11 10. And if we set it to let's say four 49:13 we get x is less than 10. So very simple 49:17 uh else if now we can also do multiple 49:20 conditions. Um so if let's say we wanted 49:23 to 49:25 have another variable called y. I know 49:27 this isn't very practical but it's just 49:29 I just want something simple so you can 49:31 get the hang of the syntax. 49:33 So we'll set that to 10. And let's say 49:37 um if x 49:41 if x is 49:45 uh let's see say if x is greater than 49:50 five. 49:52 Now I want to check to see if if one of 49:55 these are true. So I'm going to use or 49:57 and or is represented with double pipe 49:59 characters. So if x is greater than five 50:02 or y is uh greater than 10 50:08 and save. Uh actually you know what 50:11 we'll do is just get rid of this stuff 50:13 here 50:15 and we'll just say 50:18 x is more than five and or 50:23 y is 50:26 more than 10. And if I save, we don't 50:29 get either because x is not greater than 50:33 five and y is not greater than 10. 50:36 However, if I just change one of these 50:37 to be true, if I make y 111, this will 50:41 run because one of these is true. It has 50:43 to be or. So one or the other. Now if we 50:46 use and which is represented with double 50:48 amperam and I save it doesn't work 50:51 because now they both have to be true. 50:53 Okay. Okay. So now if I change four to 50:56 six which is greater than five now it 50:58 works. Okay. So you can use and and or 51:01 in here as well which is much better 51:02 than nesting if if statements because 51:05 you could do something like you know if 51:08 um x is greater than five 51:12 and then put another if 51:15 and then if y is greater than 10. You 51:19 could do something like that but this is 51:20 much cleaner. So that's a simple 51:23 conditional. Now we do have something 51:25 called a turnary operator um which is 51:28 basically like a shorthand if statement 51:31 and it's used a lot to assign variables 51:33 based on a condition. So an example 51:37 would be um let's do 51:41 const 51:43 say x 51:45 equals 10 and let's say we want to 51:48 create a variable called color and I 51:51 want I want it based on if x is greater 51:55 than 10. So I'll put the condition here. 51:58 So if x is greater than 10 then okay so 52:01 this question mark is actually the 52:03 turnary operator and it represents um 52:07 then so if this is true then let's set 52:12 the ver the color variable to red else 52:15 which is represented with a um colon 52:18 then let's set it to blue 52:22 okay so if I save that actually we 52:23 should probably console log that out so 52:26 let's console log log color and we get 52:28 blue cuz x is not greater than 10 it's 52:33 equal to 10. So if I set it greater than 52:35 10 and save now we get red. So it's kind 52:38 of a weird example but this is the 52:40 format of using a turnary operator. You 52:42 have the condition if if it's true if 52:46 it's not true. 52:48 All right. So now I want to talk about 52:50 switches which is another way to um to 52:53 evaluate a condition. So let's set 52:58 actually we'll just leave this. We'll 52:59 evaluate the color. So right now it's 53:02 red, right? So let's do a switch 53:07 and we're going to evaluate what 53:08 whatever the color is. And the way that 53:11 we do this is we set cases. So let's 53:14 give it a case of if the color is red 53:17 and then we put a colon here and then 53:19 whatever it is we want to do. So I'm 53:21 just going to do a console log and say 53:23 uh color is red and then you want to 53:28 just break. Okay, so you want to put a 53:30 break. Then we'll put another case. 53:33 Let's say if the color is blue, 53:37 then we'll do a console log and we'll 53:39 just say 53:40 color is blue. 53:45 And then we want a default case as well. 53:48 So if it's not if it doesn't match any 53:50 of the above. So then we'll console log 53:53 and we'll say uh color is not red or 53:58 blue. 54:01 All right. So if I save that we get 54:03 color is red. Now if I change this to 54:07 nine that should turn it to blue. I'll 54:09 save. We get color is blue. All right. 54:12 If I were to change this to something 54:14 else, this color to let's just say green 54:17 and save, we get color is not red or 54:20 blue. Okay, so that's a switch. 54:23 So now we're going to move on to 54:25 functions. Okay, so I'm going to create 54:27 a function with the function keyword and 54:30 let's do um let's just do 54:36 add nums. So it'll just be an addition, 54:38 a function that adds two numbers. So 54:42 uh inside the parentheses we can put 54:45 parameters. Okay. So I'm going to put 54:47 let's say num one and num two. And then 54:51 let's do a console log num one plus num 54:56 two because we can do any kind of basic 54:58 math. Now if I save this nothing happens 55:02 because we haven't called the function. 55:04 So we have to go down here and say add 55:06 nums and pass in our parameters. So 55:09 let's do five and four and save and we 55:12 get nine. Okay, so we're passing in five 55:15 as num one, four is num two. Now what 55:18 happens if we do just add nums? We get 55:21 nan or nan. And what this means is not a 55:24 number. Okay, so it should be a number 55:26 but it's not. Um now with with functions 55:30 we can set default values for our 55:32 parameters. So for instance, num one, 55:35 let's set it to one. We'll just set them 55:38 both to one. 55:40 Okay. So, if I save this now, we get 55:42 two. I didn't pass anything in, but it's 55:45 going to use these default values. Okay. 55:48 And if I pass something in like five and 55:50 five, that's obviously going to 55:52 overwrite the default values, and we get 55:54 10. Now, for the most part, you're not 55:56 going to console log in a function. 55:58 You're usually going to return something 56:00 from it. So, in this case, we would 56:02 return 56:03 this addition problem. So, we want to 56:05 get rid of that. Now, if I save, 56:08 nothing's going to print in the console 56:10 because we we haven't logged anything. 56:12 If we want to log it, we would just wrap 56:14 this whole thing in a console log like 56:18 that. 56:20 Okay. Now, 56:23 as far as arrow functions go, um they're 56:26 very handy and they clean things up 56:28 quite a bit. uh they were introduced in 56:31 in ES6 also known as ES 2015. So if we 56:35 wanted to turn this into an arrow 56:37 function, what we would do is instead of 56:40 using the keyword function, we would 56:43 name it as a variable and then we would 56:46 put uh an equal sign here and then after 56:49 the parenthes after the parameters, we 56:51 would put what's called a fat arrow. You 56:53 don't want to do a hyphen like that. You 56:55 want to use the equal sign. All right, 56:57 so we could do that. And if I save, we 57:00 get the same thing. We get 10. Okay, we 57:02 just call add nums. Now, what's nice 57:05 about this is if it's just one 57:08 expression, actually, I want to put this 57:10 back to a console log because I want to 57:12 show you 57:15 um if we did a console log here 57:18 and just get rid of that 57:23 and save. Now, since we only have one 57:26 expression, meaning we don't have like, 57:28 you know, variables being assigned or 57:30 any other lines, anything else 57:32 happening, we don't even need these um 57:35 these uh curly braces. We can just do 57:37 this all on one line like that. And if I 57:39 save, that still works. All right. Now, 57:42 if you want to return something, this is 57:44 even better. You you don't even need to 57:46 use the return keyword. So we could just 57:49 simply get take away the console log 57:51 like that and put it down here 58:00 and save and we get 10. Okay, so no need 58:03 to do return. In fact, if you do this, 58:05 it won't even work. You can't you can 58:07 put your parentheses back 58:10 like that and that will work, but you 58:13 can just get rid of the parenthesis and 58:15 the return and just slim it down a lot. 58:18 Um, now if you if you only have one 58:21 parameter, we have two here, but if you 58:23 only had one, you don't even need um the 58:25 parenthesis. So, we could do like num 58:28 one and then let's just say we wanted to 58:30 return um num one + five. 58:35 All right. So, and then we'll just pass 58:36 in one value here and save. And we get 58:39 10. Okay. So, you can see this really 58:41 cuts things down. And it's great to use 58:43 with like for each. So, if you did like 58:46 to-dos 58:48 for each or any of the array methods, 58:50 you could pass in to-do use an arrow and 58:54 you could do like console.log 58:56 each to-do. So, something like that. So, 59:00 they're really nice. Um, another thing 59:02 they have what's called a lexical this. 59:04 So, when you use the this keyword, which 59:06 we haven't talked about, um the scoping 59:08 is a little different. I'm not going to 59:10 get into that though because it's just 59:11 it's beyond this this course and this 59:14 we've already taken up a lot of time. Um 59:16 but just know that it has an extra 59:18 advantage when it comes to using the 59:20 this keyword in in certain situations. 59:23 All right. So, now I want to move on to 59:26 object-oriented programming. Now, we've 59:29 already looked at object literals. 59:31 However, we can construct objects um 59:34 using what's called a constructor 59:36 function. Now, there's two ways to do 59:38 this. We can use constructor functions 59:40 with prototypes, and we can also use ES6 59:43 classes, which I'm going to go over 59:45 after this. So, let's say we want a 59:47 person object. So, we're going to say 59:50 function person with a capital P. When 59:52 you create a constructor function, it 59:54 should have it should start with a 59:55 capital. And as far as parameters, you 59:59 want to pass in the properties you want 60:00 to be able to set. So let's do first 60:02 name, last name, and let's do date of 60:06 birth. 60:07 Now, when we pass these in, we want to 60:10 set them to uh properties of the of the 60:14 object. So we do that with this. So we 60:17 say this first name equals the first 60:21 name that's passed in. Let's say this 60:24 dot last name equals the last name 60:27 that's passed in. And then this d o 60:31 equals the do ob that's passed in. And 60:34 then down here we can what's called 60:36 instantiate 60:38 an object. Okay. So we're going to 60:40 instantiate an object with the 60:45 constructor function. 60:49 I'm probably not spelling stuff right, 60:50 but it doesn't matter. Um, so to 60:52 instantiate an object, we can create a 60:54 variable. I'll just call it person one. 60:57 And we'll set it to new person. Okay, 61:01 remember we did new array earlier. That 61:03 was a built-in constructor. Um, and 61:05 there's a bunch of them. I'll show you 61:06 some other ones as well, but we created 61:08 a a a custom person constructor. And 61:11 this is going to take in a first name, 61:16 uh, a last name, 61:18 and uh, what? Date of birth. So we'll 61:20 just do like four three 1980. 61:25 All right. So that we actually just 61:27 created a person object. So we can 61:29 console log person one 61:33 and save. And you'll notice that we have 61:36 a person object which looks just like 61:38 the object literal. However, it's it's 61:40 prefixed with the actual name of the 61:43 object which is person. 61:45 Okay. Now we can create as many people 61:48 or persons as we want. All right, we 61:50 could do person two. Just pass in 61:52 different values like Mary 61:55 Smith. 61:58 Change this up. 62:00 Okay. And if I console log person two 62:03 and let's say we wanted to get the first 62:05 name, just do first name and we get 62:07 Mary. All right. Now, let's um let's 62:13 take a little uh side route for a second 62:15 here and talk about dates because right 62:17 now I passed in the the date of birth as 62:20 a string. However, we can turn this into 62:22 a date object by using the date 62:24 constructor. So, where we set it up 62:26 here, we passed it in as a string and 62:28 I'm going to set this to new date and 62:32 then surround that string. All right. So 62:35 now if I go down here and I print out 62:38 the person's date of birth, so do ob you 62:42 can see we get an actual date object. So 62:45 Friday, March 6, 1970. And if we put in 62:48 a time, we could actually put in, you 62:50 know, hours, minutes, seconds, that 62:52 would show up as well. Um, so when you 62:54 have a date object, there's a bunch of 62:56 methods you can call on it. So for 62:58 instance, we can do dot and in VS Code, 63:00 they'll actually show up here. So for 63:02 instance, we can do get full year, put 63:04 on some parenthesis, and we get 1970. So 63:08 we can really do different things with 63:10 dates and and format them in different 63:12 ways. Now I'm going to go ahead and um 63:17 let's just we'll just get rid of this 63:19 for now. And I want to show you that we 63:22 can actually add methods, which are 63:24 basically just functions to um to this 63:28 person object. Okay. So, I'm going to 63:30 say this dot and let's do get 63:34 birth year and I'm going to set it to a 63:37 function 63:39 and I'm going to return from this 63:41 function this do because I can access 63:45 the the objects um properties using this 63:49 and then let's use get full um yeah get 63:52 full year. 63:55 All right. So now down here I can say 63:58 person do person one and we can call 64:02 this method get birth year. 64:05 So if I say actually we need to log it 64:07 though 64:12 oops save and we get 1980. Okay so you 64:15 can create functions like this. Let's do 64:17 one to get the full name. So we'll do 64:19 this.get get 64:22 full name equals function 64:27 and let's just return. We'll use a 64:30 template literal here and 64:33 we'll do uh this dot first name space 64:39 another variable this dot 64:42 last name. All right, we'll go down here 64:44 and we'll say let's just copy this down 64:47 and let's run the method get full name 64:51 and save and we get John Doe. All right, 64:54 and you could put absolutely any 64:55 functionality you want in here and you 64:57 can integrate the different properties 64:59 for each object. All right, now I want 65:03 to talk a little bit about prototypes 65:06 because this isn't the best way to do 65:08 it. If I were to console log 65:12 person one 65:14 and save 65:17 um and let's take a look down here. So 65:21 we have our our properties first name, 65:23 last name, date of birth. However, we 65:25 also have the functions right in the 65:27 object. Now notice this right here. this 65:30 proto this this is a way that we can see 65:33 um prototypes which are uh is is another 65:35 object but we can attach methods and 65:39 properties to this to the prototype. Um 65:41 and you can see we have a constructor in 65:43 here. Now what I would like to do is not 65:47 have the functions with every object 65:49 instance because we might not need to 65:51 use these. Um so we want to put these in 65:54 the prototype. So the way that we can do 65:56 that is go under the function and use 66:00 person dot 66:02 prototype dot and then name it. So we'll 66:05 say get birth year equals function. 66:11 And I just want this line here. I just 66:13 want to return the the birth year the 66:16 full year of the date of birth. And then 66:18 I can completely get rid of this. Okay. 66:20 We can do the same with get full name. 66:23 We can say person dot 66:25 prototype. So, we're going to add onto 66:27 the prototype a method of get full name, 66:32 which is a function. 66:34 Oops. 66:38 And we want to grab this, put that right 66:42 in there, and then get rid of that. All 66:44 right. So, I'm now able to call these 66:48 methods. So I can do a console log and 66:52 say person2.get 66:56 full name just like I did before and it 66:58 works Mary Smith. And if we look at the 67:00 console log of the of a person notice 67:03 that you don't see the function here 67:05 just right in the object but if we look 67:07 in the prototype there we have get full 67:10 name and get birth year along with the 67:12 constructor. All right. So that is 67:16 basically object-oriented programming in 67:18 ES5. So preclasses 67:21 with ES6 67:23 also called ES 2015. I I call it ES6 but 67:27 um it it doesn't really matter what you 67:29 call it. So with ES6 classes uh were 67:33 added to JavaScript. Now it's important 67:36 to know that with classes it does the 67:39 same exact thing under the hood. It does 67:41 this exactly. it adds the the methods to 67:43 the prototype. So everything will look 67:45 the same. However, it's what's known as 67:47 syntactic sugar. Okay, which means that 67:49 it's just a a prettier way to write it, 67:52 but it does the same thing under the 67:54 hood. All right, so I'm going to leave 67:56 this stuff here and I'm going to replace 67:58 this with a class with methods. Okay, 68:01 actually I'm going to do it right under 68:02 it because I'm just going to copy some 68:04 stuff from it. So to create a class, 68:07 just say class. 68:10 Uh what we would do is say class and 68:13 then call it we'll call it person 68:17 and just like we created a constructor 68:19 function up here we just add in a 68:22 function here or method I should say a 68:25 method is a function inside of a class 68:28 um called constructor and this is going 68:30 to take in the same stuff that this does 68:33 the properties and we're going to assign 68:35 the properties just like we did here. 68:38 Okay. 68:40 And then 68:42 any method that we want to add to this 68:44 class such as get birth year or get full 68:47 name instead of using this.prototype 68:50 syntax we can simply put it in here. So 68:52 we can say get birth year 68:56 and I'll grab the functionality here. 69:03 Okay. And then let's say we want also 69:05 want get full name. 69:09 And we'll go ahead and grab this 69:12 and pass that in there. 69:16 Okay. Now, this is doing the same thing 69:19 this is. It's just a prettier way. It's 69:21 just it's using classes which are 69:23 included in a lot of other programming 69:25 languages. So it it it allows people 69:28 that are coming from other backgrounds 69:29 to to be familiar with this rather than 69:32 dealing with prototypes. So I'm going to 69:34 now just completely get rid of that. And 69:37 all the instantiation and stuff like 69:39 that, it all works the same. I'm going 69:41 to save this. We get the same result. So 69:44 we called uh person to get full name. We 69:47 instantiated uh Mary right here. And 69:50 then if we look at person, we have the 69:53 same properties. And if we look in the 69:54 prototype, we see we we have get birth 69:56 year and get full name. Okay, so adding 69:59 these methods to the class added them to 70:01 the prototype just like they did before. 70:04 So that's why it's called syntactic 70:06 sugar. You're you're doing the same 70:08 thing. You're just doing it in a 70:09 different way that's a little prettier 70:11 and a little easier to write and read. 70:13 All right. So I mean, you don't have to 70:15 use classes, but I mean I prefer them 70:17 just because they're easier to write. I 70:19 think it I think they're more organized. 70:21 Um, so that that's pretty much the 70:24 basics of um object-oriented 70:26 programming. So let's get rid of this. 70:30 And now let's move on to the DOM. 70:34 So as far as um let's save that, clear 70:38 that up. As far as what I want to work 70:40 with, I have some predefined HTML and 70:43 CSS that I want to add. And what I'm 70:46 going to do is put a link in the 70:47 description for you to copy it if you 70:49 want to follow along. So, let me just 70:51 grab this real quick. 70:56 Okay. So, I I'll go over it in a second. 70:59 At least the HTML. The CSS isn't really 71:01 important. 71:03 So, I'm going to create a file called 71:06 style.css 71:08 and just paste that in and save. 71:13 And just reload. It should get rid of 71:15 that error. Um, DOM.js. Oh, that's 71:19 wrong. It should be main. 71:22 Okay. So, I want to keep my console 71:25 open, but I'm going to move it down a 71:26 little. So, we just have a simple form 71:28 here. And if we look at the HTML, we we 71:30 still have our header. We have a section 71:32 with the class of container that's 71:34 pushing everything into the middle. We 71:36 have a form that has a background. Um, 71:39 we have this H1. We have an empty div of 71:42 message, and I'm going to deal with that 71:44 later. And then we have two labels and 71:47 inputs, one for name, one for email. We 71:50 have an input submit button. And then we 71:53 have a ul with the ID of users that's 71:56 empty. And we also have this this 71:58 commented out um uh unordered list of 72:01 items. And the reason I have this here 72:03 is just to show you how we can 72:05 manipulate stuff in the DOM. Okay. So 72:07 the DOM is the document object model. 72:09 It's basically the the like a tree 72:11 structure of your your whole uh 72:14 document. So, your HTML tags and stuff 72:16 like that. Um, I do have a four-part 72:19 uh crash course on YouTube called 72:22 JavaScript DOM crash course. So, if you 72:24 want to learn more about what we're what 72:26 we're going to talk about, check that 72:28 course out. Um, it's four videos that 72:30 are like 30 or 40 minutes long. So, 72:32 there's there's there's a lot of um 72:34 there's a lot in it. Uh, we're just 72:36 going to cover the basics here. So, 72:38 let's jump into main.js. 72:41 And I want to talk about um selection. 72:44 Okay, so selecting things from the DOM. 72:47 We can actually take elements, HTML 72:50 elements, and put them into variables 72:52 and stuff like that and work with them. 72:55 Um so as far as selectors go, we have 72:58 single 73:00 element selectors and we have 73:04 multiple element selectors. 73:07 So, as far as single element selectors, 73:09 we have um document. Okay, so these are 73:13 going to be on the document object. 73:15 Actually, before I we do this, let me 73:17 just show you something real quick. 73:20 So, in the browser, 73:24 uh let's do a console log. In the 73:25 browser, we have the what's called the 73:27 window object. So, I'm just going to 73:30 console log window. And the window 73:32 object is the the the parent object of 73:36 the browser. Okay. And you can see it 73:38 actually has the alert function. Um now 73:41 when we did alert we just did did it 73:43 like this. If I say alert one that runs. 73:47 However, this is actually part of the 73:49 window object. So I can say 73:51 window.alert. And that also works. Since 73:54 window is the the very top level, we 73:57 don't actually have to do window dot for 73:59 anything that is in window. 74:01 All right. And you'll see that there's 74:03 other stuff um like for instance, 74:06 let's see, what do I want to show you 74:08 here? Local storage. So that's a way to 74:10 store stuff in your browser. Um that's 74:13 part of the the window object. Um you 74:16 can get like the inner height. There's 74:18 properties like inner height, inner 74:20 width. The fetch API is in the window 74:22 object which is 74:25 where is it? Uh right here. So the whole 74:28 fetch API to make HTTP requests, the 74:32 document is what I want to show you 74:33 though. This is the this is what makes 74:36 up the the DOM, the document object 74:38 model. All right. And you can see 74:40 there's all types of properties and 74:42 methods and stuff like that. So document 74:46 is is what we want to use to select 74:49 things from the document. So I'm going 74:51 to say document dot and one selector 74:54 that is that is used to grab single 74:57 elements is get element by ID which has 75:00 been around for quite a while. And we 75:03 can pass in an ID. If we look at our 75:05 HTML I'm going to close up the CSS. If 75:08 we look at our HTML 75:10 um we have a form that has an ID of my 75:13 form. So let's say we want to grab that. 75:15 We can just pass in my form because 75:18 that's the ID. And what I'll do is just 75:20 console log this. 75:25 Okay. Now, if I save that, you'll see 75:26 that it'll actually log that element 75:29 down in the console. 75:31 All right. And we can even assign this 75:33 to a variable. So, we can say const form 75:36 equals take this last parenthesy off. 75:40 So, we can assign Whoops. We can assign 75:42 that to a variable and we can console 75:44 log form and save. We get the same 75:47 thing. All right. All right. So, we have 75:48 document.getelement 75:50 by ID. 75:52 Uh, let's see. I just want to put back 75:55 the console log. Another one is query 75:59 selector, which is is much newer than 76:02 get element by ID. Now, for a long time, 76:07 uh, for a long time, people use jQuery, 76:10 which is a JavaScript library that made 76:12 it easy to select other things than ids. 76:15 So things like classes, um tags 76:18 themselves, uh pretty much anything. And 76:21 query selector works just like jQuery uh 76:24 for the most part in terms of of 76:26 selecting single elements. So we could 76:28 select anything. If we look here, um if 76:31 we want to grab let's say the container, 76:34 it's a class, right? So we'll say 76:38 dot uh container 76:42 and save. And you can see that it's 76:44 going to log that. We can actually use a 76:46 tag. So if we do like H1 and save, it'll 76:50 give us H1. Now, like I said, it's a 76:52 single element selector. So even if if 76:54 there's more than one H1, it's only 76:57 going to select the first one. Okay. 76:59 Now, there's multip multiple element 77:02 selectors if you want to select more 77:03 than one thing. So for instance, down 77:07 here, I'm going to uncomment 77:09 this unordered list of items. So item 77:12 one, item two, item three. So I want to 77:15 select all of these item, all of these 77:18 list items. Okay. So I'm going to do uh 77:22 let's do console log document dot and 77:25 I'm going to use query 77:27 selector all. 77:30 So query selector all is meant to select 77:32 more than one. So let's pass in dot item 77:36 and we'll save. And what this gives us, 77:39 let me comment these two out. 77:41 What this gives us is something called a 77:43 node list which is very similar to an 77:46 array. In fact, we can run array methods 77:48 on it. We can do like for eaches and 77:51 stuff like that. Um and you'll see each 77:53 one has different um methods and 77:56 properties that we can use on it. Now 77:59 there's other ones as well. However, I 78:01 would I would recommend to always use 78:03 query selector all. These other ones are 78:05 older. Um, for instance, we have get 78:10 elements by class name, which of course 78:13 can only be classes. 78:15 So, we could just pass in item, not dot 78:18 item, because it's going to be a class 78:20 no matter what. Query selector all, you 78:22 could put an ID, a class, a tag, 78:24 anything. This is just going to be item. 78:27 Um, so I'm going to save that. 78:30 Um, 78:33 oh, I forgot document. 78:38 So, what this gives us is something 78:40 similar. It's not a node list. It's an 78:42 HTML collection. Okay. Now, the 78:44 difference with this is an HTML 78:46 collection. You actually can't use array 78:49 methods on. You have to uh manually 78:52 convert it to an array if you want to 78:54 run array methods on it. Okay. Uh but 78:57 again, I wouldn't use this. I would 78:58 stick to query selector. all. Now, in 79:01 addition to get by class name, we also 79:03 have get by tag name and we can just put 79:06 in tags like let's do li 79:09 and we'll comment that out. We'll save 79:12 and again we get an HTML collection. 79:15 Okay, so you generally want to use um 79:17 query selector and query selector all 79:20 sometimes I'll use get element by ID but 79:22 generally I don't use these. All right, 79:25 so that is how we can select things from 79:27 the DOM. Um actually let me show you how 79:30 we can loop through if we if we take the 79:32 items. 79:34 Let's actually grab 79:37 that 79:40 and we'll say const items 79:43 set it to that. So we're going to get 79:46 get the items and we can do items for 79:49 each 79:50 and we'll pass in an arrow function for 79:53 each one. We'll call it item and let's 79:55 console.log log the item and save. And 80:00 you'll see that we're just looping 80:01 through and grabbing each of the list 80:03 items. 80:05 All right. So now I want to look at 80:07 manipulating the DOM or changing things 80:10 in the DOM. And when I say DOM, I just 80:12 mean the the user interface here. So 80:15 let's grab 80:17 uh let's grab the 80:20 UL right here with the class of items. 80:23 Okay. So it's a single element that I 80:25 want to select. So I'm going to use 80:26 query selector. So I'll say const ul 80:29 equals query. Oops. 80:33 I don't know why I keep forgetting 80:34 document. 80:36 Been using react too long. So I want 80:39 query selector 80:43 because a lot of this stuff I mean once 80:45 you learn a JavaScript framework you 80:47 probably use that for this kind of stuff 80:48 because it's a lot easier than doing it 80:50 with vanilla JavaScript. Um, so query 80:53 selector, but you still should learn 80:55 this stuff. 80:57 So let's say items. So we're grabbing 80:59 the the UL with the class of items and 81:03 we can call methods on it such as 81:05 remove. Okay, so if I do ul remove and I 81:08 save this, notice that the the UL is now 81:10 gone. The whole thing is gone. Okay, so 81:13 this is just one method. There's a lot 81:15 of different methods you can use. Let's 81:17 say we want to 81:19 um let's get rid of that or comment it 81:21 out. Let's say we want to get rid of the 81:23 want to remove the last item here. So I 81:27 could do ul dot and I could use the last 81:31 right here. It even pops up the last 81:33 element child property and I could say 81:37 dot remove call remove method on that 81:41 and now item three is gone. Okay, we can 81:44 also edit content. So let's do ul dot. 81:49 This time we'll do first element child. 81:52 Okay. So we're grabbing the first li. 81:54 Actually we don't want to do that. And 81:56 I'm going to use the text content 82:00 property here. And I'm going to set it 82:01 to hello. And save. And notice that the 82:05 first list item here now says hello. So 82:08 what I've done is I've taken the ul 82:10 which I grabbed from the DOM. I've 82:13 chosen the first child element which is 82:15 the first li and and I change the text 82:18 content to hello. 82:21 So we can change anything we want from 82:23 JavaScript. Um now let's say we want to 82:26 grab the second one. So we could do ul 82:31 and we could do children 82:34 which is I believe a node list. So we 82:36 can select by index. So I want the 82:39 second one. So that's going to be index 82:41 one. And in addition to text content, we 82:44 also have inner text that we can use. 82:47 And we'll set that to Brad. And I'll 82:50 save. And you can see now that is set to 82:52 Brad. 82:54 So let's let's grab the last one. So 82:57 again, I'm going to use last element 82:59 child. And let's say I want to put some 83:01 HTML in here. We have inner HTML. 83:05 And I'll set that to let's put in an H4 83:09 and say hello 83:12 and save. And now you can see it's an 83:14 H4. Actually, let's do an H1. 83:18 There we go. So, if you want to add HTML 83:21 dynamically, you can do it with inner 83:23 HTML. 83:25 Okay. So, uh let's see. Let's let's deal 83:30 with let's change some style. So, we 83:33 have a button here. If we look at our 83:35 HTML, it has a class of btn. So I'll put 83:39 that in a variable. Say conbtn equals 83:42 document 83:44 query selector 83:46 and we want the class of btn. Okay. And 83:50 then I can take that btn and do dotstyle 83:54 and I can change any CSS property I 83:57 want. Let's say I want to change the 83:58 background. 84:00 So I want to change the background to 84:02 red. 84:04 So, I'll save. Uh, whoops. Why did that 84:07 change? This should be 84:10 style. I don't know why that happened. 84:12 So, style.background equals red. And 84:15 there we go. We can change the style. 84:17 Now, you might be saying, why would I do 84:19 this? We have CSS, but you can have 84:22 events and functions and you can make 84:24 this dynamic. So, you can have like 84:26 click on one thing and have the color of 84:28 something else change or have the the 84:31 size change or or anything at all. So 84:33 you can really manipulate things in your 84:35 user interface in real time. Um, so and 84:38 I'm going to show you about events in a 84:41 second. Actually, we'll take a look at 84:42 events now. So I'm going to just get rid 84:45 of this 84:47 and let's take that. Actually, I want 84:49 that button 84:53 uh element. So I'm just going to grab 84:54 that and let's do button dot. Now, if we 84:58 want to create an event listener, we do 85:00 add event listener. And this takes in 85:03 two things. The event we want, which in 85:05 this case, I'm going to I want to click. 85:08 Okay, I'm just going to save this to 85:09 bring all that stuff back. Um, so the 85:12 first is going to be the event. The 85:13 second is going to be a function 85:16 um that you want to run when this event 85:19 happens. So, when the button is clicked, 85:21 I'm actually going to use an arrow 85:22 function. You can just, you know, put in 85:24 a regular function, but I'm going to use 85:26 an arrow function. And and when you use 85:28 an event, it takes in an event 85:31 parameter. So, I'm going to just use E 85:33 here. So, we'll do an arrow, open some 85:36 curly braces. And if I do a console log 85:41 and say click 85:43 and save, and then I'll open up my 85:46 console here. Click. Notice that it 85:49 flashes really fast and it just it goes 85:51 away. The reason for that is this is a 85:53 submit button and when you submit a form 85:56 it actually submits to the file. So if 85:59 you have either a click on a submit 86:02 button or you have a form submit you 86:04 have to stop the prevent um I mean you 86:06 have to prevent the default behavior. So 86:09 the way that you do that is you take 86:10 that event parameter and you call 86:12 prevent default. Okay you call that 86:15 method and that will stop it. So now if 86:17 I click 86:19 now we just get click. it doesn't flash 86:21 and go away because the form is no 86:23 longer actually submitting. 86:25 All right, so let's actually take a look 86:27 at the event object. 86:30 So we'll click shows us the event object 86:33 which has a bunch of stuff on it. Um 86:35 even gives you like the position of the 86:37 mouse and stuff like that. Um but if we 86:40 look at target, 86:43 so right here target this this will give 86:46 us the actual element. So if I do E dot 86:51 target 86:52 and I click it again, it'll actually 86:54 give me the element that the event is 86:56 on, which is the button. Okay. And we 86:59 can get things like the class. So I 87:01 could say, give me the class name. 87:04 Oops. Class name. Save. And then I'll go 87:08 ahead and click. And we get btn. All 87:10 right. You can also get the ID if there 87:13 is one. There isn't an ID on it, so 87:15 we're not going to get anything. But you 87:16 can get all the different attributes of 87:19 the event you click. 87:21 All right. Now, let's do something kind 87:24 of cool. So, let's say when we click, we 87:28 want to change some stuff up. So, I'm 87:30 going to do document dot 87:33 uh query selector. 87:36 And let's grab the form so it has an ID 87:39 of my form. And let's change the 87:42 background. So, we'll do dot style dot 87:46 background 87:49 and let's set that to um 87:54 set it to CCC, which is a a slightly 87:56 darker gray. So, if I save this and I go 87:59 and I click on this button, 88:02 uh wait a minute, 88:04 my form. I don't know why this keeps 88:07 changing to that 88:09 problem. must be an extension I have or 88:11 something. So, let's click that. And you 88:13 can see it changed the background color. 88:16 Um, we could we could even add a class. 88:19 So, in my style CSS, 88:23 I have a class called bg dark, which is 88:26 just a back a dark background and a um a 88:29 white text. So, let's add this class to 88:32 the body when we click this button. So 88:36 I'm going to grab the body with document 88:39 dot 88:40 query selector. And remember we can put 88:44 anything we want in here. We can put the 88:46 body tag. And to add a class we can 88:49 doclass list.add. 88:52 We can also remove with class list. And 88:56 I'm going to add the class of bg dark. 88:59 Okay. So now if I click on this, it did 89:03 first it changed the form background and 89:05 then it changed the body background to 89:07 dark and the text to white. All right. 89:10 So I mean this is this is useless but it 89:12 shows you what you can do in terms of of 89:15 making your your user interface um 89:18 interactive. 89:20 Okay. We can also change text if we 89:22 want. Uh let's do like I'm just going to 89:25 save this to clear it up. Let's do 89:29 ul dot 89:32 uh actually we don't have ul defined 89:34 anymore so we'll just have to do query 89:37 selector 89:39 and let's do uh dot items 89:44 and we'll do last element child 89:49 and let's add html we'll do inner 89:53 html equals 89:56 H1 89:59 hello. So now once I click this, if you 90:02 watch the last item here, it turns into 90:05 hello. Okay, along with all the style 90:07 changes. And we have other mouse events 90:11 as well. So if we want to do like on a 90:13 hover, you can do mouse over. 90:16 So if I save and I just hover over the 90:18 button, it changes. If we do mouse out 90:22 and I'll hover over and then when I 90:24 exit, that's when that event fires. 90:26 Okay, so there's different events. I 90:28 mean, you can look up in the in the MDN 90:30 documentation all the different events. 90:32 There's also um input events as well um 90:36 that you might want to look at, but 90:37 we're we're running out of time here. 90:39 So, I want to actually make this a 90:41 functional little tiny little 90:43 application where we can add a user, 90:46 grab the values, and then output the 90:48 users down here. So, I'm going to 90:50 comment out those items again, 90:55 and we're going to create a little a 90:56 little form script here. All right. So, 90:59 I want to grab a bunch of stuff from the 91:02 DOM and put them into variables. So, 91:04 let's say const my form. 91:08 Set that to document dot 91:11 query selector 91:14 ID my dash form. 91:18 Just going to copy this down a couple 91:20 times. 91:22 Also want to grab the the name field. So 91:25 this input has an ID of name. So I'm 91:27 going to call this name input. Uh we 91:32 also want the email 91:34 input which has an ID of email. 91:39 And then we also want that remember that 91:41 message class which is just an empty 91:43 div. I'm going to grab that as well. 91:46 And I'll call this msg. 91:50 And then I also want I'm going to create 91:52 a variable called user list. And I want 91:54 to select the id of users which is also 91:57 an empty div. So if we look here we have 91:59 this I'm sorry it's not a div, it's a ul 92:02 because what I want to do is add a user 92:04 and add it as a list item to this ul. 92:07 Okay. And we have our message right here 92:09 for for any errors or anything. All 92:12 right. So we're grabbing this stuff from 92:13 the DOM. Now we want to listen for a 92:16 submit event on the form. So let's do my 92:18 form dot addventlister. 92:22 And the event we want to listen on 92:23 listen for is a submit. Okay, since it's 92:26 on a form element, we can use submit. 92:28 And we don't actually have to put the 92:30 function in here. We can call we can 92:32 name it. So we'll do like onsubmit. 92:36 Oops. So onsubmit. And then down here 92:38 we'll create a function called onsubmit. 92:43 takes in an event parameter. Since it's 92:45 a submit, we want to prevent the 92:47 default. 92:51 Okay. And just to test this out, let's 92:53 do a console log. And let's grab the 92:57 name input. 92:59 Now, if I just do that, I just want to 93:01 show you something real quick. If I put 93:04 something in the name input, like Kevin 93:06 Smith, and I submit, it gives me the 93:08 actual element. Now, I want the value. 93:10 So if you have an input uh set to a 93:14 variable like this, you can do dot 93:16 value. And now if I put in Kevin Smith 93:19 and I submit, I get I actually get Kevin 93:21 Smith. All right. So I want to 93:26 do a little form validation. I don't 93:28 want this to submit unless the both 93:31 fields are filled out. All right. So 93:34 let's do a console log. Um actually, no, 93:38 let's let's not do that. Let's do an if 93:40 statement 93:43 and let's check for name input. 93:48 So name input dot value. So if that is 93:53 equal to an empty string or 93:56 email input dot value is equal to an 94:01 empty string then we want to give the 94:06 user a message that says they have to um 94:09 you know add the add the fields. Now, we 94:11 could do a standard alert like this and 94:14 we could say please enter fields 94:19 and we'll do an else 94:22 and just do a console log and for now 94:24 we'll just log success. 94:27 Okay, so we'll save that and if I try to 94:30 submit we get please enter fields. If I 94:33 do enter the fields submit, we get 94:35 success. Now I don't like using the 94:38 standard alert. I don't I think it's 94:39 ugly looking. Um, and again, it it stops 94:42 your code and it's just it's not 94:43 something you really want to use uh 94:45 these days. So, I want to put a message 94:48 in here. So, we have this message 94:52 variable that is assigned to that 94:54 message class in the DOM. So, I'm going 94:57 to take that message and I'm going to uh 95:01 I'm going to do an inner 95:04 HTML and I'm going to set that to please 95:09 enter all fields. 95:12 Okay. So now if I do that, we get please 95:15 enter all fields. Now I have a style of 95:18 error, a class of error in my 95:20 stylesheet. So I want to add that to it. 95:23 So, right before I put the HTML, I'm 95:26 going to do msg dot um class list 95:32 add and I want to add the error class. 95:36 So now if I do it again, you'll see that 95:39 we get that styling. Okay, now I'm going 95:41 to take it a step further and I want 95:43 this to disappear after 3 seconds. In 95:46 JavaScript, we have a a function called 95:48 set timeout 95:50 which takes in a function. So we could 95:52 either type do a regular function or I'm 95:54 going to do an arrow function 95:57 and no parameters. So just put an arrow 96:00 like that and then I'm going to say msg 96:03 which is our class and use dot remove 96:08 which will completely remove it from the 96:10 DOM. Now set timeout takes in a second 96:12 parameter of the time in milliseconds in 96:15 which it should you know it should this 96:17 should fire off. So I'm going to do 3,00 96:20 which is 3 seconds. So now if I go ahead 96:22 and submit, we get our error message. 96:24 After 3 seconds, it goes away. 96:28 All right. So that comes in handy. So 96:31 that's all set. Now, if we enter the 96:34 name and email, then what do we want to 96:35 do? We want to create basically add it 96:39 as a list item into 96:42 um this ul right here. So the way that 96:45 we can do that is first create an 96:48 element. So I'm going to do const li 96:52 and I'm going to use document and 96:54 there's a method called create element 96:56 because we can just create elements out 96:58 of nowhere and insert them into the DOM. 97:00 So I'm going to create a list item. 97:04 All right. And then I want to add a text 97:07 node with the input values. So I'm going 97:11 to take that list item and I'm going to 97:13 use append 97:15 child. Okay. Basically, I want to add 97:17 something inside of it. And what I want 97:19 to add is a text node. So, document 97:23 create text node. 97:26 And in here, I could put anything. I'm 97:28 going to use a template literal here, a 97:29 template string. And I'm going to put 97:31 the uh name input value. And then let's 97:38 do a colon. And then let's put the 97:40 Whoops. Change that. 97:44 Okay. Okay. And then let's put the 97:45 email. 97:48 So we'll say email input 97:52 value. 97:53 All right. So we have our text node. Now 97:56 this isn't going to do anything yet 97:57 because we need to actually append the 97:59 li to the ul. So we have the user list 98:03 variable that's set to the ul up here 98:06 which is right here set to that ID of 98:08 users. And I'm going to call append 98:11 child once again, which just adds 98:13 something into it. And I'm going to add 98:15 in the li. Okay. And then the last thing 98:18 I want to do is clear the fields. And we 98:23 can do that by taking the name 98:27 uh name input dot value and setting it 98:30 to nothing. And we'll take the email 98:33 input 98:35 dovalue, set it to nothing. And that 98:38 should work. So, let's go over here and 98:40 let's add we'll say Kevin Smith, Kevin 98:42 atgmail and submit. There we go. Let's 98:46 add another one. We'll say Brad 98:47 Traversy, Brad at Gmail. And now we can 98:50 add users. I just have these these demo 98:53 users from other applications. 98:56 All right. So, that's an example of how 98:58 we can manipulate the DOM and we can 99:00 have an interactive application. Now, 99:03 this is all just in the UI. If I reload, 99:05 those users are going to go away. Okay, 99:07 they're not getting saved anywhere. Um, 99:09 so if you want to have an application 99:11 where you save data, you're going to 99:13 have to, well, there's a few things you 99:15 could do. You're probably going to have 99:17 some kind of backend that interacts with 99:19 a database. So something like NodeJS or 99:22 PHP or Python or something like that 99:25 that's connects connects to a database. 99:27 And then what you would do is send 99:29 requests from your front end using 99:31 something like the fetch API, okay, or 99:34 Ajax. And I do have an Ajax crash 99:37 course. I have a fetch API crash course. 99:40 Um, so if you want to look more into 99:41 that, you can. Um, and then we also have 99:45 something called local storage where you 99:46 can actually store data in the user's 99:49 browser. Okay? So it would be uh 99:52 relevant to to that user. It it would 99:54 only be stored on their browser. So 99:56 that's something else you could look 99:58 into. Um, but you know, this this crash 100:00 course is getting quite long. So, um, 100:03 we're going to go ahead and stop here 100:05 because we've gone over all the 100:06 fundamentals, the basic syntax of 100:08 JavaScript. So, uh, like I said before, 100:11 I have literally hundreds of videos on 100:14 my YouTube channel. Take check out the 100:15 vanilla JavaScript playlist. Um, check 100:18 out the Udemy course. I'm going to put a 100:19 link for just $9.99 in the description. 100:22 Um, we build all types of projects. So, 100:24 that's it, guys. Hopefully, you liked 100:26 it. If you did, please leave a like and 100:28 I will see you in the next video.
