Hey what's going on guys welcome to my updated JavaScript crash course for beginners so I did a video about three years ago on JavaScript fundamentals and this is the updated version which includes a more modern syntax and just better overall structure now I have a lot of JavaScript courses and tutorials on my channel but this is definitely the first one to watch if you're looking to learn JavaScript OK, so this will get you started with the basic syntax and all the fundamentals. And I'm going to go over what we'll cover in this crash course in a minute. So I first just quickly want to talk about what JavaScript actually is. And I want to mention that if you're brand new to this, some some of what I'm about to say might sound very confusing.
But the truth is, you don't really need to understand all this right now in order to start learning how to write JavaScript. So I just want to explain what what's possible with the language, what it is. So if this sounds like gibberish, don't worry about it. You'll come to learn this stuff later on, and we're not going to spend too much time in the slides anyway.
So JavaScript is a high level interpreted language. And what high level means is there's a lot of abstraction, meaning that you don't have to deal with things like memory management on your machine, stuff like that, like you would with a low level language such as C or C++. And interpreted just means that the program is is executed directly without having to run through a compiler. So for instance, when you write, let's say Java, which is not related to JavaScript, by the way, sometimes beginners get the two confused, but Java is a completely different language.
Java is actually a compiled language, which means when you write your code, you actually have to run it through something called a compiler in order for it to run on your machine. JavaScript, however, is a scripting language and it's interpreted. Okay, JavaScript also conforms to the ECMAScript. specification. In fact, you could say JavaScript is ECMAScript.
However, there are some other implementations of ECMAScript as well, such as JScript, ActionScript. There's some others as well, but they're not very popular. JavaScript is definitely the most popular part of the specification.
JavaScript is also multi-paradigm, which means that you can write your code in many different ways or many different paradigms. For instance, you can write object-oriented code or functional code. There are languages where you have to write it in a certain way, but JavaScript is not one of those languages. JavaScript is also the language of the browser or the client. Your web browser displays HTML markup with CSS styling.
Hopefully you know at least the basics of those. But if you want interactive aspects on your page, like let's say form validation, alerts, things like that, JavaScript is used for that stuff. So it's the language of the front end, meaning the browser. But you can also run JavaScript on the server for more powerful things like interacting with databases and stuff like that. And that's done by using a JavaScript runtime called Node.js, which is way beyond the scope of this tutorial.
However, I do have a ton of Node.js videos on my channel, including a crash course. So if you want to check that out later on, you can do that. All right, so why learn JavaScript?
What are some of the reasons to pick? JavaScript as a language over some of the other ones. So as I mentioned, it is the language of the browser. So if you want to do client side programming, meaning code that runs on your client machine, you'll need to know JavaScript.
So languages like Python, PHP, C sharp, Java, these are all great languages, but they're all server side, okay, they run on the server, they don't run right in the browser, like JavaScript does. They're very powerful, but they they can't do things like, you know, slideshows and little widgets in the browser and stuff like that unless they run some kind of library that actually generates JavaScript for the browser okay you can also build very interactive interfaces with JavaScript frameworks such as react angular Vue.js and these are all these frameworks are all highly in demand and again you can build server-side and full stack applications using node.js You can even build mobile apps with technologies like React Native and NativeScript, and even desktop apps with a framework like Electron. So these are reasons why JavaScript is my favorite language, because it's absolutely everywhere.
It's also very fast, powerful, and it's fairly easy to learn. So this is what we're going to go over in this crash course. And remember, it is a crash course, so it's not going to be too in-depth.
It's not going to be too long. It's enough to get you started with all the fundamental syntax. So we'll cover things like data types, variables, arrays, objects, loops, conditionals, functions, some object-oriented programming, and even stuff like DOM selection and events.
I'll show you how we can do things like grab onto HTML elements like buttons and add click events, change things up in the DOM, which is the document object model, things like that. We'll even do some basic form validation. So as this is a crash course, you will need to do some further learning after this.
I do have a 21-hour course on Udemy called Modern JavaScript from the Beginning. I'll put that promo link in the description. And then, of course, I have hundreds of free videos on YouTube.
These are some of the ones that you might want to look at and I'll put links to these in the description as well. So for instance I have a four part course on the DOM using JavaScript with the document object model, object oriented programming using classes, videos on the fetch API so you can make HTTP requests to back end APIs, and then I have a whole vanilla JavaScript playlist full of small projects where we build just little applications in the browser. And then I also have a bunch of crash courses on frameworks like react and angular and view.
So definitely more stuff to check out after this video. All right. So that's it for the slides. Let's go ahead and jump in and let's start to learn JavaScript.
All right, guys, so we're going to get started and I'm going to go a little faster than usual just because there's so much to cover in terms of just the fundamentals of JavaScript. So I have my text editor open. I'm using Visual Studio Code, which is what I would suggest. However, you can use whatever text editor you want. I'm also using an extension called Live Server that will allow the browser to refresh when I save the page.
So for instance, if I just take this E off and I save, you'll see that it'll auto-reload. I don't have to click the reload button. So that's helpful and will speed things up a little bit. So, let's go ahead and add some JavaScript to this very basic HTML file. You can see I just have the head and then in the body I have a header with an H1.
So, you want to put your JavaScript at the bottom right above the ending body tag. You almost always want to put the JavaScript at the bottom because you want your HTML and your CSS to load first. So, let's go ahead and put a script tag here. And there's two ways to do it.
You can put the JavaScript right on the page. by putting it within script tags or you can do it a second way which is the recommended way and that would be to put it in a separate javascript file so that's what we're going to do but i'll just show you real quick that we can put it right on the page here so i'm going to do an alert which is a function that is actually part of the window object and it just adds a pop-up with whatever you put in here so i'm putting a string of hello world and if i save the page will automatically load and i get a little pop up that says hello world. Alright so I'm going to go ahead and get rid of this because I want to include my JavaScript from the this main JS file. So I'm just going to add a source attribute here and say I want to load main dot JS. OK.
And if I go to main JS it's completely empty. Now since I'm in the JavaScript file there's no need to put script tags or anything like that we just type our JavaScript. So if I just go ahead and put that alert back. Say hello world and save and you can see that that runs.
All right. Now, as far as alert, you don't really want to use that for debugging or outputting values or anything really because it blocks the rest of your script from running. It's just very inefficient. So what you want to use is the console. Okay.
Every browser has what are called developer tools and you have a JavaScript console where you can output and you can also actually run JavaScript in the console. So, in Chrome, you want to go to your menu, more tools, and then developer tools. I know you guys can't see this, but there's a selection for developer tools.
And there's a bunch of tabs here. You want to choose the console. If you're on a different browser, I'm not sure the exact menu option or keyboard shortcuts, but on Chrome, you can also open it with command option I on a Mac. You can toggle it that way or F12 on Windows. So we can actually execute JavaScript from here.
I can say like alert one, and you can see that that runs. We can clear the console with clear and then some parentheses. And then we can also output to the console from our script by doing console.log.
Save that, and you'll see that it loads Hello World. So we're going to be dealing mostly in the console in this course because This is about learning the basic syntax. So we're not really dealing too much with the DOM, with the user interface, until the end when we get to things like events, selecting elements, and stuff like that. All right, now there's other methods attached to this console object as well, because log is a method, okay? So it's a method that runs off the console object.
If we search the m... MDN documentation for console. MDN is the Mozilla developer network and it's the best documentation for JavaScript.
So if we go down to methods, you'll see that console has a bunch of stuff on it. So we can do like console error, console warn if we want to put warnings. We can add, we can have tables in the console, we can run assertions. So it's great for debugging.
All right. So just to give you an example, if I do. Console.error and just say this is an error and save. You'll see that now it's red and it also gives us the line number and gives us a link to show us where the error is.
Okay, and it shows us this little red X. So we can do that. Let's go back to the console. We can also do a warning. So we can do console.warn.
Say this is a warning. Run that, and now it's just yellow. All right, so there's some other ones as well if you want to check the documentation out, but I'm not going to spend too much time on this. For the most part, we're just using console log. All right, so let's clear that up, and let's talk about variables and how to set them.
In JavaScript, there's basically three ways to do it. We have var, let, and const. Okay, now var has been used since the beginning of JavaScript.
However, you don't really want to use it anymore now that we have Latin const because VAR is globally scoped. So if we have, let's say, a conditional like an if statement and we set a variable and then outside of that block, outside of that if statement, there's another variable with that same name that can be a conflict and it can cause problems. So for the most part, you don't want to use VAR anymore.
OK, let in cons were added. with ES6 or ES2015, and ES stands for ECMAScript. So that was a huge update to JavaScript that gave us a lot of new functionality, a lot of which I'm gonna show you in this crash course.
Now, the difference between let and const is with let, you can reassign values. So I'll give you an example. If I say let age equals 30, and we'll just go ahead and console log, and I have a shortcut. In my VS code settings so I can just do CL for console log.
So if you're wondering why that works for me And then I'm just gonna console log the age and you can see we get 30 now since I use let I can take that Age and I can set it to something else. Okay, so now it's set to 31 now if I use const here and save I'm gonna get an error. It says type error assignment to constant variable const is short for constant, which means it can't be changed it can't be directly reassigned all right so this begs the question when do we use let when do we use const now this is different for everybody some people will just use let what i do and what i find a lot of other people do is always use const unless you know you're going to reassign the value i think this makes your code more robust more secure less prone to errors Just use const unless you know you're going to reassign it.
So an example of something I would reassign would be like a score in a game. So I would do something like let score, maybe just initialize it, and then something happens, and then we want to change the score directly. So score may equal 10, and then I'll go down here and console.log score, and we get 10. Now, we can't do this with const, okay? Even if...
we don't reassign it, I can't even initialize it with const. You see we get this error missing initializer because you have to add a value if you use const. But for the most part, you're not going to directly reassign your values like this. And when you're dealing with arrays and objects and stuff like that, you can change the values within the array or object.
You just can't reassign the entire thing. And I'll show you more of what I mean later on. All right, so now that we know how to assign a variables with Latin const, let's talk about data types. What types of data can we assign to these variables? Now we have primitive data types, which means that the data is directly assigned to memory.
It's not a resource. So we have strings, we have numbers, Boolean, null, undefined. and symbol.
Okay, now symbol was added in ES6, and we're not going to go over symbols. It's just beyond the scope of this tutorial. It's not something that's that common, so we're not going to go over symbols. But let's... Create some variables that that are the some of these data types.
So let's create a name and I'll just set that to John. So that's a string strings can can have double or single quotes. I prefer to use single quotes. Also, when it comes to semicolons, they're not mandatory. We're not going to get an error if I save that.
There's nothing wrong with that. However, I use semicolons in for most of the time. I think most developers use them in JavaScript.
So that's a string. Let's create a number. We'll do age.
Okay, so a number is just a number and with no quotes around it. Let's do a Boolean. So we'll do like is cool and set that to either true or false.
That's going to be a Boolean. No quotes. You put a quote quotes around it's going to be a string.
Let's do null. So we'll do const. Actually, I wanted one thing I wanted to do is a decimal. So rating equals four point five.
Now, even though this is a decimal, it's it it's not there's no float or decimal data type in JavaScript. It's just a number. OK, I'm going to show you how we can actually test the types of these in a minute. So let's do now do X equals null.
And what null means is basically empty. It's it's a variable, but there's nothing in it. OK. So, if no, we also have undefined, which we can explicitly define. So, we can explicitly define undefined, or we can just initialize something, but we have to use let.
So, if I just say let z like that with no value, that's going to be undefined as well. Now, if we want to test the type, we can console log, and we can do type of, and just put in the name of the variable. So, let's try name. And now, down here, you'll see that that's a string.
Okay, if we try age, we get number. If we try rating, we get number because remember, there's no, there's no technical floats or decimals or anything like that is cool. We get Boolean x, this is kind of a gotcha. So we get object and you're probably expecting no.
Now this is actually an error. And it's a little hard to explain. So I'm just going to pull this up real quick.
And just search for JS null is object. All right. So actually, wait a minute. Let's do type of I know it comes up in Google. There we go.
So in the first implementation of JavaScript values were represented as a type tag and a value with the type tab for objects being zero and null was represented as the null pointer. As a result, null had zero as a type tag, hence the bogus type of return value. As you can see here, that return value from the type of we just did is bogus, meaning it's not true.
It's not really an object. It's null. Kind of a hard-to-explain definition, but just think of this as just wrong. Next is undefined. Let's do y.
That's undefined. And z should also be undefined. So those are the main primitive data types.
Now, of course, we have arrays and object literals and stuff like that. But those are objects. Those aren't primitive data types. So let's look at strings. So I want to talk a little bit about strings.
And actually, I want to keep two variables here, name and age. And let's look at concatenation. So, let's say I want to either console log or create a variable with a string that has variables inside of it.
So something like my name is and then the name variable and I am and then the age variable. If I just run that it just spits out the text. So there's a few ways to do this. Concatenating the way I'm going to show you is kind of the older method.
I'm going to show you a better way in a second. But what we could do is where we want the variable we could end the string. And then use the plus sign to concatenate on the variable. Same on the other side. Use the plus sign and concatenate the rest of the string.
Same thing where we want the age variable. We'll stop the string, concatenate, and since we're at the end, we just get rid of that. And save. And now we get my name is John and I am 30. So this is kind of the old way of doing it. It's a real pain in the ass if this is a real long string with a lot of variables.
So what we have now with... ES6 or ES2015 are template strings, or template literals. So we could do console log, and we want to use, instead of quotes, back ticks. Okay, so if we use back ticks this makes it a template string and we can simply do my name is and wherever we want To use a variable we just use the syntax so money sign and then curly braces and just put in the name of the variable So my name is and I am and then the age variable save it we get the same thing All right, and we could assign this to a variable if we want I could say like const Hello equals Get rid of this parentheses and then we could console log hello.
All right. So we can do that. Next thing I want to show you is a couple string properties and methods. Let's get rid of this as well.
So I'm going to just create a string. Let's call it S and we'll just do hello world. All right. Now, if we let's say we want to get the length, the number of characters in the string, we could use the length. property.
So a console log s dot length. Okay. A property doesn't, doesn't, doesn't have parentheses.
If it has parentheses, it's a method. So let's just console log s dot length. And we get 11. If we add an exclamation, we get 12. Okay.
So that gets the length. We can also set it to actually just go like this. If we want to change the case, we could do a method called to uppercase.
Since it's a method, it needs parentheses. A method is basically a function that is associated with an object. Okay, so we get hello world.
We can also do two lowercase. Let's see, we also have substring. So if we want to pull a substring out of the string.
So let's do substring. And this takes in basically two indexes where you want to start and end. So we'll start at zero.
And let's end at 5. So if we look at this string, the first is 0, 1, 2, 3, 4, and then the space is 5. So it'll actually stop before 5. So this should give us hello. So let's save, and we can see we get hello. And you can tack on other methods as well.
Like we could do.toUppercase and save, and it ran substring, got hello, and then made it all uppercase. So you can... you know chain these on to each other let's see another thing we can do is split a string into an array so we have a method called split and then as a parameter this takes in whatever you want to split by if you want to split by letter you would just put empty quotes without a space but go ahead and save that i know we haven't gone over arrays yet but you'll see we get an array with 12 values And we have the letters or each character in each value, including the space.
Now, this isn't very handy, but a lot of times what we'll do is, let's say we have a form where we're adding a blog post and we're adding tags. You might have technology, computers, maybe IT, code, something like that. And let's say you want to take that string and create an array from it. Now, as a separator, in this case, we would use comma space because in between each word is a comma space. So I'll put that in here like that.
And then I'll save. And now you can see we have an array with four values. And we have each word in each array value here.
All right. So that's pretty handy because then you can insert that into a database and you can search to it and stuff like that. So it does come in handy.
All right, so let's see, let's move on to arrays. Okay, so arrays, let's say arrays. And I didn't go over comments.
Obviously, comments are double forward slash. So arrays, or if you want multi-line comments, you can do this. Let's say multi-line, oops, multi-line comment.
And we would end it with asterisk forward slash. All right. So arrays are basically variables that hold multiple values. OK, so there's a couple of ways to create.
However, one of them isn't used that much. I'm going to show you that way first and that's using the array constructor. So let's create a variable called numbers and set that to new array.
So when you see this new keyword and then something after it, this is a constructor. So we're constructing an array and we can pass in. Actually, let's just put in some numbers.
And then we'll go down here and console log numbers and save and we get an array with five values, one through five. All right. So that's using the constructor. But for the most part, I'm going to get rid of that and create a new one. Let's do fruits.
For the most part, you're just going to set brackets and then you can create your array. So let's do like apples, oranges. Piers pairs and then we'll go ahead and console log fruits save and there we go. Now in JavaScript you can have multiple data types within the same array.
So I could put a number. I could put a Boolean, whatever I want, and that's fine. In a lot of languages, you have to have the same data types in your array.
In fact, there's quite a few languages where you actually have to set the number as well. So we would have to set the number. to set this to be three values which can be kind of a pain. So JavaScript gives you a lot of freedom.
And another thing I didn't didn't mention is JavaScript is not statically typed so we don't have to like let's say we're creating a string we don't have to do like colon string or anything like that. Now there is something called TypeScript which is a super set of JavaScript. So it's basically JavaScript with some added features and static typing is one of those.
So if you want to do this I was. suggest taking a look at TypeScript. All right, so we have our fruits.
Now what if we want to add on to this? Or I'm sorry, what if we want to access just one of these, like oranges? So I'm going to just do, let's say console log fruits and we'll open up some brackets and let's put a one in here. So if we check that out, we get oranges.
Now even though oranges is the second one, the reason that we get it from one is because arrays are zero based. OK, so it's zero one two. OK, remember that arrays are always zero based in every language.
So if we wanted to add on to the end, we could do fruits. So we know we have zero one two, so we could do fruits three equals and then grapes and then we'll console log fruits and save and you can see grapes got added. Now notice we used const.
Okay, like I said before, you can add values to the array, you can manipulate it, you can use methods on it using const. The only thing you can't do is take the array and reassign it like this. Then we get an error. So that's why you can pretty much use const with arrays because there's not going to be many times where you're going to directly reassign it.
You're just going to manipulate it. So if you want to add to the end like we just did... Doing it this way isn't really the best way to do it because you might not know exactly how many values are in the array.
So in that case you can use the push method. So we can say fruits dot push and push a value onto the end. So let's do I don't know mangoes and save and now you can see mangoes has been added to the end. No matter how many are in the array.
If we wanted to add on to the beginning we could use use on shift so we could say fruits dot on shift and let's say we wanted to add strawberries and save and now you see that strawberries is on is at the beginning. All right. And there's a lot of different array methods.
Another one is pop. You want to take the last one off. You could do fruits dot. pop and you can see mangoes is there but once I save mangoes is gone it just pops the last one off another thing if you want to check to see if something is an array you can do I'm sorry you want to do array dot is array and then pass in let's pass in fruits and save and you can see it gives us true all right if I were to put let's say a string in here and save we get false so if you ever want to check to see if something is an array, you could put this in the conditional and get a true or false value. All right.
Now, if you want to get the index of a certain value, you can use index of so we could say fruits dot index of and let's say we want the index of oranges saves and we get two. So we have we look at that. You can see that two is the index of the oranges value. All right. So I think that that's going to be it for arrays.
Like I said, there's a bunch of other methods. So it's something that you definitely want to look into. My Udemy JavaScript course, we go over that.
over a lot more. We learn how to like concatenate arrays and stuff like that. But these are just some pretty common methods.
So now we're going to talk about object literals. OK, so object literals are basically just key value pairs. So let's do something simple like a person. So a person has let's do first name.
So we'll say John, it's a string, do last name, Doe. And we can do other types, like we can do age, 30. We could even put an array. We could do something like hobbies and set that to an array.
We'll say music. Movies and Sports. And then we can also do embedded objects.
So we can put an object within an object like address and say street. 50 Main Street. Let's do city Boston and state.
All right, now let's say we want to, well, first of all, we'll just console log the whole thing. So person, and it will show us in the console. If you were to alert this, I'll show you what happens.
You're just going to get this object object, okay? So alert. is not a good way to do this kind of stuff. So this will show us the values. Now if we want to access a single value, we use the dot syntax.
We can do person dot first name. And you can You can log more than one thing. If I use a comma, we could do person.lastname and save, and it will give us both.
So you can separate different logs with commas. Now, let's say we want to get this value right here, movies. So, I mean, obviously, if you've worked with JavaScript before, you know how to do this. But if you're brand new, take what we've already learned as to how to select values from arrays and from objects and see if you can get movies to. print out in the console.
If you need to pause it, go ahead and do that. So what you would do is just say person and we want hobbies, so.hobbies and we know that movies is in the one index of that array so we'll do 1 and save and we get movies. If we wanted to get let's say just the city and that's in this address object, we would do person.address.city and we get Boston.
All right. So that's how we can do that. Let's see. We can also use destructuring. So if we wanted to create variables, you know, want these as actual variables, we could do const and then open up some curly braces and we can actually pull stuff out like first name, last name and then say equals person.
So think of this not as assigning something, but pulling these out of this person object. If I do console log first name, you'll see we get John. So we can pull different things out.
Now, if it's an embedded object like an address, what we could do is, let's put a comma here, and we could do address and then go like this, city. Okay, so if we go ahead and log city, we get Boston. Now destructuring is kind of advanced. Again, it's part of ES6. It's a new feature, relatively new.
But yeah, we can do that. that so see what else I want to do we can also add properties so I could say like person dot email equals John gmail and if I console log person You'll see that now an email has been added. OK, so you can directly add properties as well. Now a lot of the times you're going to be dealing with arrays of objects. So let's go ahead and create an array of to do's.
So we'll say cons to do's arrays use brackets and then we want each value in the array to be an object. We'll give it excuse me. We'll give it an ID.
We'll do text. So just the text of the to do's. We'll say take out trash and then we'll do an is completed and that will be a Boolean.
So we'll say false. Actually, it's true. I'm going to show you something a little bit. All right. Now I'm just going to take this and copy it down twice and let's change the IDs.
We'll do two three and we'll change this to let's say meeting with boss and dentist appointment. OK. I'm going to change this one to false.
All right. So we have an array of to do's. If I were to console log to do's and save you'll see we have an array with three values which are all objects.
All right. Now if we wanted to. grab let's say this text meeting with boss if you're again if you're brand new to this um what i want you to do is try to print this out in the console okay so you know you know how to select from an array you know how to select from an object so just print out this meeting with boss all right so what you would do is take to do's and we know that it's the second value in the array so that's the one index And then we just want the text property. Okay, so we get meeting with boss.
Now, I want to talk a little bit about JSON. JSON is a data format, and it's used a lot within, you know, full stack. development and using APIs when you're sending data to a server, you usually send it in JSON format and receive it in JSON format.
And it's very similar to object literals. So I'm going to grab this whole array, just these brackets, and I'm actually going to, I don't remember the exact URL, I'm just going to say JSON converter. And it's this one right here. So this is freeformatter.com slash JSON formatter. And I'm just going to paste in our array and say format JSON.
And you can see that the syntax of JSON is very, very similar. The only difference really is that we have double quotes. around all the keys and we have double quotes around the strings.
So no single quotes in JSON that will give us an error. So let's say that we want to convert this into JSON within our script. So maybe we want to get it ready to send to a server or something like that.
So we would do, let's actually create a variable and we'll call it to do JSON. And there's a method we can use called JSON.strips. stringify and we could just pass in to do's okay and then we'll just console log the to do JSON value and you can see that we get a JSON string okay so this is how we would send data to a server alright so we'll be working more with more with this in a little bit I want to go over loops I'm going to keep the to do's array because I'm going to show you how to loop over that but first of all let's just look at some simple for loops or a simple simple for loop for loops are they exist in many different languages so if you have experience with a different language you might you might already know how to do this but basically we just say for and we pass in three parameters the first is going to be the assignment of the the iterator or the variable so I'm going to say I equals zero and then we use semicolons to separate these next is going to be the condition that needs to be met so we'll say I is less than zero and then we pass in the second parameter and we pass in the third less than 10. And then lastly is just the increment. So I plus plus, we'll just add one to this I variable.
So what's going to happen is whatever we put in here is going to run until this is true. All right. So I'm going to go ahead and just do a console log of I and save.
So what happened is it ran, it started at zero. It did an iteration. It got to one because of the increment.
Went through again, got to 2, and once it gets to 9, this condition is no longer true, okay? Because we're saying i has to be less than 10. If we wanted 10 included, we could do less than or equal to 10, because then that's still true when it's 10, and it stops there. All right? Now, we could do whatever we want in here.
We could put a template string in here and just say for loop number, and we could go ahead and put the i variable. save and now we get for loop number and then each each iteration number all right so that's a for loop we also have while loops which are pretty old-school as well the difference with a lot while loops is we set the variable outside of the loop so we'll say let I equals zero and it will say while and while just takes in the condition so I'll put the same condition as long as is less than 10 and let's do a console log actually I'll just copy this one and we'll change it to While loop, get rid of that. Now you want to make sure that you increment the I.
If you don't, this will be a never-ending loop because this condition will never be met. So it'll just keep looping and looping. So you want to make sure you do an I++, which will increment it by 1. So I'll save that, and now we get while loop 0 to while loop 9, because we did less than 10. So that's a while loop and a for loop. So pretty simple.
Next thing I want to do is show you how to loop through arrays. Now we could use a for loop. Actually, let me just grab this for loop.
So we could use a for loop. We could just change the condition to as long as i is less than to dos dot length because length will give us the number of items in the array. I showed you that we could use length on a string, but we can also use it on an array.
So in this case, it will be 3. right? So it's going to loop through as many to do's as there are. And then let's say we wanted to log out the to do text we could do to do and then the index would be the the I value. OK, so the the iteration and then we could do dot text and save.
I'm sorry, it should be to do's. OK, we want to actually use the name of this variable. Now, this isn't really the best way to loop through an array.
We have other methods such as a for of loop. So to show you that, you can do for. It's structured kind of similar but much more readable.
So we could say simply let to do from, I'm sorry, not from, of to dos. All right, now this is the name of the array. OK, so it's this variable.
This could be anything I'm calling it to do because that makes sense. I could call it T or anything else. And then if we console log to do that gives us each one.
OK, if I want just the text, I could do to do dot text and we don't have, you know, the ugly looking index like that. We just simply do to do dot text. If we want the ID can loop through and get the IDs.
So that's one way to do it. Now, we also have what are called high order array methods, which is the way that I would suggest to do any kind of iteration with arrays. I'm going to show you a couple of them. I'm going to show you foreach, which just loops through them, map, which will allow us to create a new array from an array, and then filter, which will allow us to create a new array based on a condition. Let's start with foreach.
We just take to dos, whatever the array is. And let's do dot for each. Now these high order array methods, they take in as a parameter a function.
So we pass in a function like that. And then this callback function takes in, it can take multiple parameters, but the first one is going to be the variable that you want to use as each item, or in this case each to-do. So let's do a console log of to-do dot text and save. And you can see we get we're looping through and we're getting the text for each to do.
All right. And these look much better with arrow functions, which I'll get to in a little bit. But yeah, so that's a for each. Now, a map. Let's get rid of this.
Actually, I'm just going to change this to map because these are all formatted the same way. OK, they take in a function, you pass in whatever variable you want to use here. Now.
With map it returns an array so I'm actually going to assign, let's say, to do text because what I want to do, no pun intended, is loop through and then return an array of just the text right here, just the text values. So I could just simply do return and then to do dot text. Okay, so this is going to return a whole new array of just the text.
So if I console log. To do text and save. You can see now we have just a regular array, no object or anything.
We just took the to do text and return that for each one. OK, so that's map. We also have filter. So let's get rid of that. Just change this to filter.
Now, let's say we only want to return the to do's that are that are completed that have this is completed true. So we could return. Let's do, let's see what I want to do here. Let's return the to-do dot ID, okay, where the ID is. Equal to not ID.
Let's do is completed so is completed is equal to true and Then let's go down. Let's actually change this to To do completed makes more sense and then we'll console log to do complete and save and you can see now we have an array of two values and both of them are they're both the ones that are completed now we can actually chain on other array methods so let's say we want want to also map and just get the text like we did before. So I'll tack on to this. Let's get rid of the semicolon and do dot map, pass in a function to do, and let's just return to do dot text. So we'll go ahead and save.
And now you can see we have just an array of the text, but it's only the ones that are completed. Okay. So this, these are very, very powerful.
This, this is functional. programming. It's very powerful. You can really manipulate data pretty much however you want.
Okay. And you can do some pretty crazy stuff. So it's definitely something to look into. I do have a video dedicated to a couple of these high order array methods if you want to check that out.
But yeah, so let's move on here. I don't think we need this anymore. So I'm going to get rid of that. And I want to move on to conditionals. Okay.
So let's start off with just basic. simple if statement so we'll create a variable called X and I'll set it to 10 and we'll just say if I just want to test to see if X is equal to 10 now I'm gonna do I'm gonna start off with a double equal and then also show you what triple equal means as well alright so we'll do if X equals 10 then let's just console log obviously we could do anything we want but I'm just gonna say X is 10 and I'll save and we get X is 10. Now as far as the equal sign go, if we use double, double equal, this will not match the data types. It's just the value. So if I change this to a string and save, this is still true.
Okay. This is still equal to this in terms of the double equal. Now if I add an extra, a third equal sign and I save, you'll see that we don't get X is 10 because what it does is it also matches. the data types.
This is a string. This is a number. So this is not going to be true. So if I get rid of these quotes and put this to a number, then it's true. Now, different developers will treat this differently.
Myself, I like to always use triple equals because I, for the most part, always want to match the types. Sometimes developers will pick and choose when to use double and triple. I just always use triple.
So let's do an And else a lot of stuff in just generally in programming is preference. So let's do else and let's do a console log. And obviously if this isn't true then X is not 10. So I'm going to go up here and change this.
to 20 and save and we get X is not 10 so that's a very simple if else we can also add an else if if we want to do an extra condition and we can have as many else if as we want so we would do else if Let's just move this up here and let's say we want to test if X is greater than 10 So in here, we'll just do a console log and we'll say X is greater than 10 and then else So if it's not 10 and it's not greater than 10 that means it's less than 10. So X is less than 10 Save so X is greater than 10 if we make it 10 10, we get x is 10, and if we set it to, let's say, 4, we get x is less than 10. So very simple else if. Now we can also do multiple conditions. So let's say we wanted to have another variable called y.
I know this isn't very practical, but I just want something simple so you can get the hang of the syntax. So we'll set that to 10. And let's say, If x is greater than 5. Now I want to check to see if one of these are true. So I'm going to use or.
And or is represented with double pipe characters. So, if x is greater than 5 or y is greater than 10 and save. Actually, what we'll do is just get rid of this stuff here and we'll just say x is more than 5 and or y is.
More than 10. And if I save, we don't get either because x is not greater than 5 and y is not greater than 10. However, if I just change one of these to be true, if I make y 11, this will run. because one of these is true. It has to be or, so one or the other. Now if we use and, which is represented with double ampersand and I save, it doesn't work because now they both have to be true. Okay, so now if I change four to six, which is greater than five, now it works.
You can use AND and OR in here as well, which is much better than nesting IF statements. You could do something like, if X is greater than five, and then put another IF, and then if Y is greater than 10, you could do something like that, but this is much cleaner. That's a simple conditional. Now, we do have something called the ternary option. operator, which is basically like a shorthand if statement.
And it's used a lot to assign variables based on a condition. So an example would be, let's do const say x equals 10. And let's say we want to create a variable called color. And I want it based on if x is greater than 10. So I'll put the condition here, so if x is greater than 10, then, so this question mark is actually the ternary operator and it represents then.
So if this is true, then let's set the color variable to red, else, which is represented with a colon, then let's set it to blue. So if I save that, actually we should probably console log that out. So, it's console.log color and we get blue because x is not greater than 10, it's equal to 10. So, if I set it greater than 10 and save, now we get red.
So, it's kind of a weird example, but this is the format of using a ternary operator. You have the condition, if it's true, if it's not true. Alright, so now I want to talk about switches, which is another way to evaluate a condition.
So, let's go ahead and do that. So let's set actually we'll just leave this. We'll evaluate the color. So right now it's red. Right.
So let's do a switch. And we're going to evaluate whatever the color is. And the way that we do this is we set cases.
So let's give it a case of if the color is red. And then we put a colon here. And then whatever it is we want to do.
I'm just going to do a console log and say color is red. And then you want to just break. So you want to put a break.
Then we'll put another case. Let's say if the color is blue. Then we'll do a console log and we'll just say color is blue.
And then we want a default case as well. So if it doesn't match any of the above. So then we'll console log and we'll say color is not red or blue.
All right, so if I save that, we get color is red. Now if I change this to nine, that should turn it to blue, I'll save we get color is blue. All right, if I were to change this to something else, this color to let's just say green, and save we get color is not red or blue. Okay, so that's a switch. So now we're going to move on to functions.
So I'm going to create a function with the function keyword and let's do let's just do do nums so just be an addition a function that adds two numbers so inside the parentheses we can put parameters okay so I'm gonna put let's say num1 and num2 and then let's do a console log num1 plus num2 because we can do any kind of basic math now if I Save this. Nothing happens because we haven't called the function. So we have to go down here and say add nums and pass in our parameters. So let's do five and four and save and we get nine.
OK, so we're passing in five is number one, four is number two. Now what happens if we do just add nums? We get any N or NAN. What this means is not a number. OK, so it should be a number, but it's not now.
With functions, we can set default values for our parameters. So for instance, num1, let's set it to 1. We'll just set them both to 1. So if I save this, now we get 2. I didn't pass anything in, but it's going to use these default values. And if I pass something in, like 5 and 5, that's obviously going to overwrite the default values and we get 10. Now, for the most part, you're not going to console log in a function.
You're usually going to return something from it. So in this case, we would return this addition problem. So we want to get rid of that.
Now, if I save, nothing's going to print in the console because we haven't logged anything. If we want to log it, we would just wrap this whole thing in a console log like that. Okay.
Now. As far as arrow functions go, they're very handy and they clean things up quite a bit. They were introduced in ES6, also known as ES2015.
So if we wanted to turn this into an arrow function, what we would do is instead of using the keyword function, we would name it as a variable and then we would put an equal sign here. And then after the parameters, we would put what's called a fat arrow. You don't want to do a hyphen like that. You want to use the equal sign. All right, so we could do that.
And if I save, we get the same thing. We get 10. Okay, we just call add nums. Now, what's nice about this is if it's just one expression, actually, I want to put this back to a console log because I want to show you. If we did a console log here, And just get rid of that and save now, since we only have one expression, meaning we don't have like, you know, variables being assigned or any other lines, anything else happening.
We don't even need these these curly braces. We can just do this all in one line like that. And if I save that still works.
All right. Now, if you want to return something, this is even better. You don't even need to use the return keyword.
So we could just simply take away the console log like that and put it down here and save and we get 10. So no need to do return. In fact, if you do this, it won't even work. You can put your parentheses back like that and that will work, but you can just get rid of the parentheses and the return and just slim it down a lot.
Now, if you only have one parameter, we have two here, but if you only had one, you don't even need the parentheses. We could do num1 and then let's just say we wanted to return num1 plus 5. Then we'll just pass in one value here and save and we get 10. You can see this really cuts things down and it's great to use with like for each. If you did like to do's dot. For each or any of the array methods you could pass in to do use an arrow and you could do like console dot log each to do so something like that.
So they're really nice. Another thing they have what's called a lexical this. So when you use the this keyword, which we haven't talked about, the scoping is a little different. I'm not going to get into that, though, because it's just it's beyond this this course.
And we've already taken up a lot of time. But just know that it has an extra advantage when it comes to using the this keyword in certain situations Alright, so now I want to move on to object oriented programming now. We've already looked at object literals However, we can construct objects Using what's called a constructor function now?
There's two ways to do this we can use constructor functions with prototypes and we can also use es6 classes Which I'm going to go over after this. So let's say we want a person object. So we're going to say function person with a capital P.
When you create a constructor function, it should start with a capital. And as far as parameters, you want to pass in the property. These you want to be able to set. So let's do first name, last name, and let's do date of birth.
Now when we pass these in, we want to set them to properties of the object. We do that with this. We say this.firstname equals the first name that's passed in.
Let's say this.lastname equals the last name that's passed in, and then this.do. So B equals the DOB that's passed in. And then down here we can what's called instantiate an object.
OK, so we're going to instantiate an object with the constructor function. I'm probably not spelling stuff right, but it doesn't matter. So to instantiate an object, we can create a variable.
I'll just call it person1, and we'll set it to new person. Okay, remember we did new array earlier? That was a built-in constructor, and there's a bunch of them.
I'll show you some other ones as well, but we created a custom person constructor, and this is going to take in a first name, a last name, and... And what date of birth, so we'll just do like 4-3-1980. So we actually just created a person object, so we can console.log.
And save and you'll notice that we have a person object with which looks just like the object literal However, it's it's prefixed with the actual name of the object which is person Okay. Now we can create as many people or persons as we want. We could do person to just pass in different values like Mary Smith Change this up And if I console log person two and let's say we wanted to get the first name, just do first name and we get Mary.
All right. Now let's let's take a little side route for a second. here and talk about dates because right now I passed in the date of birth as a string.
However, we can turn this into a date object by using the date constructor. So where we set it up here, we pass it in as a string and I'm going to set this to new. date, and then surround that string. All right, so now if I go down here and I print out the person's date of birth, so DOB, you can see we get an actual date object.
So Friday, March 6, 1970. And if we put in a time, we could actually put in, you know, hours, minutes, seconds, that would show up as well. So when you have a date object, there's a bunch of methods you can call on it. So for instance, we can do dot, and in VS Code, they'll...
they'll actually show up here. So for instance, we can do get full year, put on some parentheses, and we get 1970. So we can really do different things with dates and format them in different ways. Now, I'm going to go ahead and let's just, we'll just get rid of this for now.
And I want to show you that we can actually add methods, which are basically just functions to this person object. Okay, so I'm going to. to say this dot and let's do get birth year and I'm going to set it to a function and I'm going to return from this function this dot DOB because I can access the object's properties using this and then let's use get full year.
All right, so now down here I can say person to person one, and we can call this method getBirthYear. So if I say, actually we need to log it though. Oops. Save and we get 1980. Okay, so you can create functions like this.
Let's do one to get the full name. So we'll do this dot get full name equals function. And let's just return. We'll use a template literal here and we'll do this dot first name space. Another variable this dot last name.
All right. We'll go down here and we'll say just copy this down and let's run the method. Get full name and save and we get John Doe. All right.
So you can do absolutely any functionality you want in here. and you can integrate the different properties for each object. All right, now I want to talk a little bit about prototypes because this isn't the best way to do it. If I were to console log person one and save. And let's take a look down here.
So we have our properties, first name, last name, date of birth. However, we also have the functions right in the object. Now notice this right here, this proto.
This is a way that we can see prototypes, which is another object, but we can attach methods and properties to the prototype. And you can see we have a constructor in here. Now what I would like to do is not have the function. with every object instance, because we might not need to use these.
So we want to put these in the prototype. So the way that we can do that is go under the function and use person.prototype. And then name it, so we'll say getBirthYear equals function. And I just want this line here. I just want to return the birth year, the full year of the date of birth.
And then I can do that. I can completely get rid of this. We can do the same with get full name. We can say person.prototype.
So we're going to add on to the prototype a method of get full name, which is a function. And we want to grab this, put that right in there, and then get rid of that. All right, so I'm now able to call these methods.
So I can do a console log and say person. Person2.get full name, just like I did before, and it works, Mary Smith. And if we look at the console log of a person, notice that you don't see the function here just right in the object, but if we look in the...
the prototype, there we have get full name and get birth year, along with the constructor. All right, so that is basically object-oriented programming in ES5, so pre-classes. With ES6, also called ES2015, I call it ES6, but it doesn't really matter what you call it. So with ES6, classes were added to JavaScript.
Now, it's important to know that with classes, it does the same exact thing under the hood. It does this exactly. It adds the methods to the prototype. So everything will look the same. However, it's what's known as syntactic sugar.
Okay, which means that it's just a prettier way to write it, but it does the same thing under the hood. All right, so I'm going to leave this stuff here and I'm going to replace this with a class with methods. Okay, actually I'm going to do it right under it because I'm just going to copy some stuff from it.
So to create a class, just say class. What we would do is say class and then call it we'll call it person. And just like we created a constructor function up here, we just add in a function here or a method, I should say.
A method is a function inside of a class called constructor. And this is going to take in this. same stuff that this does the properties and we're gonna assign the properties just like we did here okay and then any method that we want to add to this class such as get birth year or get full name instead of using this dot prototype syntax we can simply put it in here so we can say get birth year and I'll grab the functionality here OK, and then let's say we want also want get full name and we'll go ahead and grab this and pass that in there.
OK, now this is doing the same thing. This is just a prettier way. It's just it's using classes which are included in a lot of other programming languages. So it it allows people that are coming from other backgrounds to to be familiar. with this rather than dealing with prototypes.
So I'm going to now just completely get rid of that and all the instantiation and stuff like that. It all works the same. I'm going to save this. We get the same result. So we called a person to get full name.
We instantiated Mary right here. And then if we look at person, we have the same properties. And if we look in the prototype, we see we have get birth year and get full name. Okay. So adding these methods to the class added them to the prototype just like they did before so that's why it's called syntactic sugar you're doing the same thing you're just doing it in a different way that's a little prettier and a little easier to write and read all right so i mean you don't have to use classes but i mean i prefer them just because they're easier to write i think i think they're more organized so that that's pretty much the basics of object-oriented programming So, let's get rid of this and now let's move on to the DOM.
So as far as what I want to work with, I have some predefined HTML and CSS that I want to add and what I'm going to do is put a link in the description for you to copy it if you want to follow along. So let me just grab this real quick. Okay, so I'll go over in a second at least the HTML the CSS isn't really important So I'm going to create a file called style dot CSS And just paste that in and save and just reload should get rid of that error Dom J s oh that's wrong.
It should be main. Okay, so I want to keep my console open, but I'm going to move it down a little. So we just have a simple form here. And if we look at the HTML, we still have our header.
We have a section with the class of container that's pushing everything into the middle. We have a form that has a background. We have this H1. We have an empty div of message, and I'm going to deal with that later. And then we have two labels and inputs, one for name, one for email.
We have an input submit button. And then we have a UL. with the ID of users that's empty.
And we also have this commented out unordered list of items. And the reason I have this here is just to show you how we can manipulate stuff in the DOM. So the DOM is the Document Object Model.
It's basically like a tree structure of your whole document, so your HTML tags and stuff like that. I do have a four-part crash course on YouTube called JavaScript DOM Crash Course. So if you want to learn more about what we're going to talk about, check that course out. It's four videos that are like 30 or 40 minutes long.
So there's a lot in it. We're just going to cover the basics here. So let's jump into main.js.
And I want to talk about selection. So selecting things from the DOM. We can actually take elements, HTML elements. And put them into variables and stuff like that and work with them.
So as far as selectors go, we have single element selectors and we have multiple element selectors. So as far as single element selectors, we have document. Okay, so these are going to be on the document object. Before we do this, let me just show you something real quick. So, in the browser, let's do a console log.
In the browser we have what's called the window object. So, I'm just going to console log window. And the window object is the parent object of the browser.
And you can see it actually has the alert function. Now when we did alert, we just did it like this. If I say alert one, that runs. However, this is actually part of. the window object so i can say window dot alert and that also works since window is the the very top level we don't actually have to do window dot for anything that is in window all right and you'll see that there's other stuff um like for instance let's see what do i want to show you here local storage so that's a way to store stuff in your browser that's part of the the window object You can get like the inner height, there's properties like inner height, inner width.
The fetch API is in the window object which is, where is it, right here. So the whole fetch API to make HTTP requests. The document is what I want to show you though.
This is the, this is what makes up the DOM, the document object model. All right and you can see there's all types of properties and methods and stuff like that. So Document is what we want to use to select things from the document.
So I'm going to say document dot and one selector that is used to grab single elements is get element by ID. Which has been around for quite a while. And we can pass in an ID. If we look at our HTML, I'm going to close up the CSS. If we look at our HTML, we have a form that has an ID of my form.
So let's say we want to grab that. We can just pass in my-form because that's the ID. And what I'll do is just console log this.
Okay, now if I save that, you'll see that it'll actually log that element down in the console. All right. And we can even assign this to a variable so we can say const form equals. Take this last parentheses off so we can assign. Whoops.
We can assign that to a variable and we can console log form and save. We get the same thing. All right. So we have document dot get element by D. Let's see.
I just want to put back the console log. Another one is query selector, which is is. much newer than get element by ID now for a long time for a long time people use jQuery which is a JavaScript library that made it easy to select other things than ID so things like classes tags themselves pretty much anything and query selector works just like jQuery for the most part in terms of selecting single elements so we could select anything if we look here If we want to grab, let's say the container, it's a class, right? So we'll say dot container and save and you can see that it's going to log that.
We can actually use a tag. So if we do like H1 and save, it'll give us H1. Now like I said, it's a single element selector. So even if there's more than one H1, it's only going to select the first one.
Now There are multiple element selectors if you want to select more than one thing. For instance, down here I'm going to uncomment this unordered list of items. So item 1, item 2, item 3. So I want to select all of these list items.
So I'm going to do console.log document.queryselectorall. So querySelectorAll is meant to select more than one. So let's pass in.item and we'll save. And what this gives us, let me comment these two out. What this gives us is something called a node list, which is very similar to an array.
In fact, we can run array methods on it. We can do like forEaches and stuff like that. And you'll see each one has different methods and properties that we can use on it.
Now. There's other ones as well, however, I would recommend to always use querySelectorAll. These other ones are older.
For instance, we have getElementsByClassName, which of course can only be classes. So we could just pass in item, not.item, because it's going to be a class no matter what. QuerySelectorAll, you could put an id, a class, a tag, anything.
This is just going to be item. So I'm going to save that. Um... oh i forgot document so what this gives us is something similar it's not a node list it's an html collection okay now the difference with this is an html collection you actually can't use array methods on you have to manually convert it to an array if you want to run array methods on it okay but again i wouldn't use this i would stick to query selector all now in addition to get By class name, we also have get by tag name. And we can just put in tags.
Like let's do li. And we'll comment that out. We'll save. And again, we get an HTML collection.
So you generally want to use query selector and query selector all. Sometimes I'll use get element by ID. But generally, I don't use these.
All right. So that is how we can select things from the DOM. Actually, let me show you how we can loop through.
If we take the items, let's actually grab that, and we'll say const items, set it to that. So we're going to get the items, and we can do items.foreach. And we'll pass in an arrow function for each one. We'll call it item and let's console dot log the item and save.
And you'll see that we're just looping through and grabbing each of the list items. All right. So now I want to look at manipulating the DOM or changing things in the DOM. And when I say DOM I just mean the user interface here.
So let's grab the UL right here with the class of items. So it's a single element that I want to select so I'm going to use query selector. So I'll say const UL equals query.
I don't know why I keep forgetting document. I've been using React too long. So I want query selector.
Because a lot of this stuff, I mean, once you learn a JavaScript framework, you probably use that for this kind of stuff because it's a lot easier than doing it with vanilla JavaScript. So query selector, but you still should learn this stuff. So let's say... So, we're grabbing the UL with the class of items and we can call methods on it such as remove.
So, if I do UL remove and I save this, notice that the UL is now gone. The whole thing is gone. So this is just one method. There's a lot of different methods you can use.
Let's say we want to get rid of that or comment it out. Let's say we want to remove the last item here. So I could do ul. And I could use the last element child property.
And I could say.remove. Call the remove method on that. And now item 3 is gone. OK, we can also edit content.
So let's do you out. This time we'll do first element child. OK, so we're grabbing the first ally. Actually we don't want to do that. And I'm going to use the text content property here and I'm going to set it to hello and save and notice that the first list item here now says hello.
So what I've done is I've taken the UL, which I grabbed from the Dom. chosen the first child element, which is the first li, and I change the text content to hello. So we can change anything we want from JavaScript. Now let's say we want to grab the second one.
So we could do UL and we could do children. which is, I believe, a node list, so we can select by index. So I want the second one, so that's going to be index one. And in addition to text content, we also have inner text that we can use. And we'll set that to graph.
And I'll save and you can see now that is set to Brad. So let's grab the last one. So again I'm going to use last element child and let's say I want to put some HTML in here.
We have inner HTML and I'll set that to let's put in an H4 and say hello and save. And now you can see it's an H4. Actually let's do an H1.
There we go. So if you want to add HTML dynamically, you can do it with inner HTML. OK, so let's see, let's let's deal with let's change some style.
So. We have a button here. If we look at our HTML, it has a class of BTN. So I'll put that in a variable say cons BTN equals document dot query selector and we want the class of BTN.
OK, and then I can take that BTN and do dot style and I can change any CSS property I want. Let's say I want to change the background. So I want to change the background to red. So I'll save. Whoops, why did that change?
This should be style. I don't know why that happened. So style.background equals red. And there we go. We can change the style.
Now, you might be saying, why would I do this? We have CSS. But you can have events and functions, and you can make this dynamic. So you can click on one thing and have the color of something else change.
have the size change or anything at all. So you can really manipulate things in your user interface in real time. So, and I'm gonna show you about events in a second. Actually, we'll take a look at events now. So I'm gonna just get rid of this.
And let's take that, actually I want that button element, so I'm just gonna grab that and let's do. button dot now if we want to create an event listener we do add event listener and this takes in two things the event we want which in this case i'm going to i want to click okay i'm just going to save this to bring all that stuff back so the first is going to be the event the second is going to be a function that you want to run when this event happens so when the button is clicked i'm actually going to use an arrow function you can just you know put in a regular function you But I'm going to use an arrow function. And when you use an event, it takes in an event parameter. So I'm going to just use E here.
So we'll do an arrow, open some curly braces. And if I do a console log and say click and save, and then I'll open up my console here, click. Notice that it flashes really fast and it just goes away. The reason for that is this is a submit button.
And when you submit a form, it actually submits to the file. So if you have either a click on a submit button or you have a form submit, you have to prevent the default behavior. So the way that you do that is you take that event parameter and you call prevent default.
You call that method, and that will stop it. So now if I click. Now we just get click.
It doesn't flash and go away because the form is no longer actually submitting. All right, so let's actually take a look at the event object. So we'll click, shows us the event object, which has a bunch of stuff on it. Even gives you like the position of the mouse and stuff like that. But if we look at target, so right here, target, this...
This will give us the actual element. So if I do E dot target and I click it again, it'll actually give me the element that the event is on, which is the button. OK, and we can get things like the class.
So I could say give me the class name class name save and then I'll go ahead and click and we get BTN. All right. You can also get.
The ID, if there is one, there isn't an ID on it, so we're not going to get anything. But you can get all the different attributes of the event you click. All right, now let's do something kind of cool. So let's say when we click, we want to change some stuff up.
So I'm going to do document.querySelector. And let's grab the form so it has an ID. of my form and let's change the background. So we'll do style.background and let's set that to CCC which is a slightly darker gray.
So if I save this and I go and I click on this button, wait a minute, my form, I don't know why this keeps changing to that. Must be an extension I have or something. So let's click that and you can see it change the background color.
We could even add a class. So in my style CSS, I have a class called BG dark, which is just a dark background and a white text. So let's add this class to the body.
when we click this button. So I'm going to grab the body with document.queryselector and remember we can put anything we want in here. We can put the body tag and to add a class we can do.classlist.add We can also remove with classlist.remove and I'm going to add the class of bgdark.
So now if I click on this It did first to change the form background and then it changed the body background to dark and the text to white. All right. So, I mean, this is this is useless, but it shows you what you can do in terms of making your your user interface interactive.
OK, we can also change text if we want. Let's do like I'm just going to save this to clear it up. Let's do UL dot. Actually, we don't have ul defined anymore, so we'll just have to do query selector and Let's do dot items and we'll do last element child and let's add HTML we'll do inner HTML equals H1 hello, so now Once I click this, if you watch the last item here, it turns into hello. Okay.
Along with all the style changes. And we have other mouse events as well. So if we want to do like on a hover, you can do mouse over. So if I save and I just hover over the button, it changes.
If we do mouse out and I'll hover over. And then when I exit, that's when that event fires. Okay.
So there's different events. I mean, you can look up. In the MDN documentation, all the different events, there's also input events as well that you might want to look at. But we're running out of time here, so I want to actually make this a functional little tiny little application where we can add a user, grab the values, and then output the users down here. So I'm going to comment out those items again, and we're going to create a little form script here.
All right, so I want to grab a bunch of stuff from the DOM and put them into variables. So let's say const my form, set that to document dot query selector ID my dash form. Just going to copy this down a couple of times.
I also want to grab the the name field. So this input has an ID of name. So I'm going to call this. name input we also want the email input which has an ID of email and then we also want that member that message class which is just an empty div I'm gonna grab that as well and I'll call this MSG and then I also want I'm gonna create a variable called user list and I want to select the ID of users which is also an empty div. So if we look here we have this, I'm sorry it's not a div it's a ul because what I want to do is add a user and add it as a list item to this ul.
Okay and we have our message right here for any errors or anything. All right so we're grabbing this stuff from the dom. Now we want to listen for a submit event on the form so let's do my form dot add event listener. And the event we want to listen for is a submit.
Okay, since it's on a form element, we can use submit. And we don't actually have to put the function in here. We can call it, we can name it.
So we'll do like on submit. So on submit. And then down here, we'll create a function called on submit.
Takes in an event parameter. Since it's a submit, we want to prevent the default. Okay. And just to test this out, let's do a console log and let's grab the name input.
Now, if I just do that, I just want to show you something real quick. If I put something in the name input like Kevin Smith and I submit, it gives me the actual element. Now, I want the value.
So if you have an input set to a variable like this, you can do dot value. And now if I put in Kevin Smith and I submit, I actually get Kevin Smith. All right, so I want to do a little form validation. I don't want this to submit unless both fields are filled out. Alright, so let's do a console log.
Actually, no, let's not do that. Let's do an if statement. And let's check for name input.
So name input dot value. So if that is equal to an empty string or email input dot value is equal to an empty string, then... we want to give the user a message that says they have to you know add the add the fields now we could do a standard alert like this and we could say please enter field fields, and we'll do an else, and just do a console log, and for now we'll just log success. Okay, so we'll save that, and if I try to submit we get please enter fields.
If I do enter the fields, submit, we get success. Now I don't like using the standard alert. I think it's ugly looking, and again it stops your code, and it's not something you really want to use these days. So I want to put a message. message in here.
We have this message variable that is assigned to that message class in the DOM. I'm going to take that message and I'm going to do an inner HTML and I'm going to set that to please enter all fields. Now if I do that we get please enter all fields. Now I have a style. of error, a class of error in my style sheet.
So I want to add that to it. So right before I put the HTML, I'm going to do msg.classlist.add, and I want to add the error class. So now, if I do it again, you'll see that we get that styling. Okay, now I'm going to take it a step further, and I want this to disappear after three seconds. In JavaScript, we have a a function called setTimeout.
which takes in a function. So we could either do a regular function or I'm going to do an arrow function. And no parameters, so just put an arrow like that.
And then I'm going to say msg, which is our class, and use.remove, which will completely remove it from the DOM. Now setTimeout takes in a second parameter of the time in milliseconds in which this should fire off. So I'm going to do 3,000, which is 3,000. three seconds. So now if I go ahead and submit, we get our error message after three seconds, it goes away.
All right. So that comes in handy. So that's all set.
Now, if we enter the name and email, then what do we want to do? We want to create, basically add it as a list item into this UL right here. So the way that we can do that is first create an element. So I'm going to do const. I'm going to use document and there's a method called create element because we can just create elements out of nowhere and insert them into the DOM.
I'm going to create a list item and then I want to add a text node with the input values. So I'm going to take that list item and I'm going to use append child. I want to add something inside of it and what I want to add as a text node.
So document.createTextNode. And here I could put anything. I'm going to use template literal here, template string. And I'm going to put the name input.value.
And then let's do a colon and then let's put the email. So we'll say email input dot value. All right.
So we have our text node. Now this isn't going to do anything yet because we need to actually append the ally to the UL. So we have the UL.
userList variable that's set to the UL up here, which is right here set to that ID of users and I'm going to call appendChild once again, which just adds something into it and I'm going to add in the li. The last thing I want to do is clear the fields. We can do that by taking the name. name input dot value and setting it to nothing and we'll take the email input dot value set it to nothing and that should work so let's go over here and let's add we'll say Kevin Smith Kevin at Gmail and submit there we go let's add another one let's say Brad Traversey Brad at Gmail and now we can add users I just have these these demo users from other applications All right, so that's an example of how we can manipulate the DOM and we can have an interactive application. Now, this is all just in the UI.
If I reload, those users are going to go away. They're not getting saved anywhere. So if you want to have an application where you save data, you're going to have to, well, there's a few things you could do. You're probably going to have some kind of back end that interacts with a database. So something like Node.js or PHP or Python or something like that that connects.
connects to a database. And then what you would do is send requests from your front end using something like the Fetch API or Ajax. And I do have an Ajax crash course. I have a Fetch API crash course. So if you want to look more into that, you can.
And then we also have something called local storage where you can actually store data in the user's browser. So it would be relevant to that user. It would only be stored on their browser.
So that's something else you could look into. But this crash course is getting quite long, so we're gonna go ahead and stop here. Because we've gone over all the fundamentals, the basic syntax of JavaScript.
So like I said before, I have literally hundreds of videos on my YouTube channel. Check out the Vanilla JavaScript playlist. Check out the Udemy course. I'm going to put a link for just $9.99 in the description.
We build all types of projects. So that's it guys. Hopefully you liked it. If you did, please leave a like and I will see you in the next video.