JavaScript Crash Course For Beginners

Hey guys, welcome to my updated JavaScript

crash

course

for

beginners

. About three years ago I made a video on the basics of JavaScript and this is the updated version that includes more modern syntax and a better overall structure. Now I have a lot of JavaScript.

course

s and tutorials on my channel, but this is definitely the first one you should check out if you're looking to learn JavaScript. Okay, this is going to get you started with the basic syntax and all the fundamentals, and I'll go over what we're going to cover in this

crash

course in a minute, so first I want to quickly talk about what JavaScript actually is and I want to mention that if you're new to this , some of what I'm about to say may sound very confusing, but the truth is you don't really need to understand all of this right now to start learning how to write JavaScript, so I just want to explain what is possible with the language, what it is, so yes This sounds like gibberish, don't worry.

We'll learn this stuff later and we're not going to spend a lot of time on slides anyway, so

javascript

is a high-level interpreted language and what high-level means is that there's a lot of abstraction, which means you don't have to deal with with things like memory management on your machine, things like you would with a low level language like C or C++ and interpreted simply means that the program runs directly without having to run it through a compiler, for example when you type Let's say Java, which is not related to JavaScript, by the way, sometimes

beginners

confuse the two, but Java is a completely different language.

Java is actually a compiled language, which means that when you write your code you have to run it through something called a compiler in order for it to run on your

javascript

machine, however, it is a scripting language and is interpreted correctly. JavaScript also complies with the ECMO scripting specification, in fact you could say that javascript is an Ekman script, however there are also other implementations of equus scripts such as J script action scripts there are also others , but they are not very popular javascript is definitely the most popular part of the javascript specification it is also multi-paradigm, meaning that you can write your code in many different ways or with many different paradigms, for example. 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, it's okay, javascript is also the language of the browser or the client with which your web browser displays the HTML markup.

CSS styling, hopefully you know at least the basics of these, but if you want interactive aspects on your page, like form validation alerts, things like javascript is used for those things, okay, then it's the language of the interface, i.e. the browser, but you can also run JavaScript on the server for more powerful things, like interacting with databases and things like that, and that's done using a JavaScript runtime called nodejs, which is way beyond of the scope of this tutorial; However, I have a ton of Nodejs videos on my channel, including a crash course, so if you want to check it out later, you can do it right, so why learn JavaScript?

What are some reasons for choosing JavaScript as a language over some of the others? As I mentioned, it is the language of the browser, so if you want to do client-side programming, i.e. code that runs on your client machine, you will need to know JavaScript, so languages ​​like Python, PHP, c-sharp, Java, these are all great languages, but they are all on the server side. They run on the server, they don't run directly in the browser like JavaScript does. They're very powerful, but they can't do things like slideshows and little widgets in the browser and things like that unless they run some kind of library. that actually generates JavaScript for the browser, you can also create very interactive interfaces with JavaScript frameworks like react angular view Jas and these are all these frameworks that are in high demand and again you can create server side and full stack applications using nodejs .

I can even build mobile apps with technologies like react native and native script and even desktop apps with a framework like electron so these are the reasons why javascript is my favorite language because it is absolutely everywhere it is also very fast , powerful and quite easy to learn. This is what we're going to go over in this crash course and remember it's a crash course so it won't be too deep, it won't be too long, it's enough to get you started with all the fundamental syntax, so cover things like data types. variables arrays objects conditional loops functions some object oriented programming and even things like Dom selection and events so I'll show you how we can do things like grab HTML elements like buttons and add click events change things in Dom which is the object model of document, things like that, we'll even do some basic form validation, so this is a crash course where you'll need to learn more after this.

I have a 21 hour course on Udemy called Modern JavaScript from the beginning. I'll put that promotional link in the description and then of course I have hundreds of free videos on YouTube. These are some you might want to check out and I'll put links to these in the description as well, for example, I have a four part course on Dom using JavaScript with the document object model object-oriented programming using class videos on Fetch API so I can make HTTP requests to the backend APIs and then they have a whole basic JavaScript playlist full of little projects where we build just little apps in the browser and then I also have a bunch of crash courses about frameworks like react and angular and view, so there will definitely be more things to see after this video, so that's For the slides, let's go ahead and start learning JavaScript.

Alright guys, we'll get started and I'll do it a little quicker than usual, just because there's a lot to cover in terms of 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 any text editor you want. I'm also using an extension called live server that will allow the browser to refresh when you save the page, so for example if I just remove this, remove it and save it, you'll see it automatically reload. I don't have to click the reload button, which is handy and will speed things up a bit, so let's go.

Go ahead and add some JavaScript to this very basic HTML file. You can see I only have the header and then in the body I have a header with h1, so you want to place your JavaScript at the bottom right above the final body tag, okay? I always want to put this 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 are two ways to do it: You can put the JavaScript directly on the page by putting it inside tags script 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'll do, but I'll show you very quickly that we can fix that. on the page here, so I'll make an alert which is a function that's actually part of the window object and it just adds a popup with whatever you put in here, so I'll put a hello world string and if I save the page, it will will automatically load and I get a little popup that says Hello world, so I'm going to go ahead and get rid of this because I want to include my JavaScript from these main J files, so I'm just going to add a source attribute here and say: I want to load Main jas , okay, and if I go to Main J/s, it's now completely empty, 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 go ahead and put that alert back in, I say hello world and I save and you can see it runs fine now as far as alerting, you don't really want to use that for debugging or generating values ​​or anything really because it blocks execution.

From the rest of your script, it's very inefficient, so what you want to use is the console. All browsers have what are called developer tools and you have a JavaScript console where you can output results and you can also run JavaScript in the console, so in Chrome you want to go to your menu, more tools, and then developer tools. I know you can't see this, but there's a selection of developer tools and there's a bunch of tabs here where you want to choose the console, okay? If you're on a different browser, I'm not sure what the exact menu option or keyboard shortcuts are, but in Chrome you can also open it with the I command option on a Mac, you can toggle it that way or f12 on Windows to so we can run JavaScript from here.

I can say like alert 1 and you can see it runs, we can clear the console with clear and then some parentheses and then we can also send to the console from our script doing the console dot logging, save it and you'll see it loads HelloWorld, like this We're going to work primarily on the console in this course because it's about learning the basic syntax, so we're not going to deal too much with the Dom with the UI until the end, when we get to things like event elements, selection of elements and things like that, now there are other methods attached to this console object as well as register as a method, okay, so it is a method that is executed from the console object if we look in the MDN documentation the mdn console is the Mozilla Developer Network and it's the best documentation for JavaScript, so if we go down to the methods, you'll see that the console has a bunch of things so we can do the following: console error, console warning, if we want to put warnings, we can add them. we have tables in the console, we can run assertions, so it's great for debugging, so just to give you an example, if I - console dot error and I just say this is an error and save, you'll see that it's now in red and it also shows us it gives us what the line number looks like and it gives us a link to show us where the error is okay and it shows us this little red we can do The console dot warned, it says this is a warning, run that and now it just shows up yellow, so there are a few others too if you want to check out the documentation, but I'm not going to spend too much time on this. we're mostly just using console.log, so let's clear that up and talk about variables and how to set them in javascript.

There are 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 want to use it anymore now that we have Latin Const because var has global scope so if we have, say, a conditional like an if statement and we set a variable and then outside of that block outside of that if there is another variable with the same name that can be a conflict and can cause problems, so for the most part it doesn't anymore you'll want to use var, okay, letting Const be added with es6 or es2015 and ES means christmas. script, so it was a big update to JavaScript that gave us a lot of new features, many of which I'll show you in this crash course.

Now the difference between let and Const is that let can reassign values, so I'll do that. I give you an example if I say H equals 30 and we just go to console.log and I have a shortcut in my vs code settings to be able to CL to console.log, so if you're wondering why that works for me and then I go to the console. Record the age and you can see that now we have 30 since I used, I can take that age and I can set it to something else, okay, now it's set to 31 if I use Const here and save.

I will get an error saying type error: assignment of a constant variable. Const is short for constant, meaning it can't be changed, it can't be reassigned directly, so this begs the question: when? use let when we use Const now this is different for everyone 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 are going to reassign the value I think this makes your code be more robust, more secure, less error prone, just use const, less know you're going to reassign it, so an example of something would really 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 that the score can be equal to ten and then I'll go down here, you know, console.log score, now we get ten, now we can't do this with Const, okay, Even if notwe remapped it, I can't even initialize it with Const.

You see, I get this error that the initializer is missing because you have to add a value if you use Const. That's fine, but for the most part you're not going to directly reassign your values. so and when you're dealing with arrays and objects and things like that, you can change the values ​​inside the array or object, you just can't reassign everything and I'll show you more than I am. later, okay, now that we know how to assign variables with Letton Const, let's talk about data types. What types of data can we assign to these variables?

We now have primitive data types, which means that data is mapped directly to memory. is not a resource, so we have strings, we have boolean numbers, not undefined and symbols, okay, now the symbol has been added in es6 and we are not going to go over the symbols, it is simply beyond the scope of this tutorial, it is not something so common, so I'm not going to go over those symbols, but let's create some variables that are some of these data types, so let's create a name and I'll set it to John so it's a string.

Strings can have double or single quotes. I prefer to use single quotes also when it comes to semicolons, they are not required, we won't get an error if I save there is nothing wrong with that, however I use semicolons and most of the time I think most developers use them in JavaScript, so it's a string, let's make a number, we'll do the age, okay, so a number is just a number and without quotes, let's make a boolean value, so we'll do like and set it like true or false, that's going to be a boolean without quotes, you put a in quotes it's going to be a string, let's do it No, so Const actually wanted one thing it wanted to do is a decimal, so the score is equal to 4 .5 now even though this is a decimal it's not if there's no float or decimal data type JavaScript is just a number okay and I'll show you how we can test the types of these in a minute so let's do it now , we'll do X is equal to null and what null means is basically empty, it's a variable but there's nothing. okay, so if now we also have undefined that we can define explicitly, then 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 this without any value, that will be undefined.

Also, now if we want to test the type, we can console.log and we can do the type of and just put the name of the variable, so let's try the name and now down here you will see that it is a string, okay if we try it. age we get a number if we try to grade we get a number because remember there are no technical floats or decimals or anything like that it's cool we get boolean It's actually a bug and it's a little hard to explain, so I'm going to open this up real quick and just search for J s null is object, so wait a minute, let's do something like that.

I know it shows up on Google there. come on, so in the first javascript implementation the values ​​were represented as a type label and the value with the type label for objects which was zero and null was represented as the null pointer, as a result null had zero as the type label , hence the false type of return value, as you can see here, that return value of the type we just made is false, which means it's not true, it's not really an object, it's null, okay, it's a hard definition to explain, but think about this is just The following error is not defined, so let's see why okay, that is not defined.

Z should also be undefined, so those are the main primitive data types. Well, now, of course, we have arrays and object literals and things like that, but those are objects that are not primitive data types. let's look at strings okay 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 console.log or create a variable with a string that has variables inside it so something like my name is and then the variable name and am and then the variable age, if I just run that it just spits out the text so there are a few ways to do this by concatenating the way I'm going to show them an 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. the equals variable on the other side uses the plus sign and concatenates the rest of the string the same where we want the age variable to stop the concatenation of the string and since we are at the end we just get rid of that and save and now again My name It's John and I'm 30, so this is the old way of doing it.

It's a real pain in the ass if it's a very long string with a lot of variables, so what we have now with es6 or es2015 is our template strings are fine, our template literals, so we could do console.log and we want to use backtick instead of quotes, so if we use backtick, this turns it into a template string and we can just do my name is and wherever we want to use a variable. we just use one syntax so the money sign and then braces and we just put the name of the variable so my name is and I am and then the age variable we save it and we get the same thing and we could assign this to a variable if we want to be able to say like Const hello is equal to getting rid of this parenthesis and then we could console.log hello okay so we can do that.

The next thing I want to show you is a couple of string properties and methods, let's get this out of the way as well. so I'm just going to create a string, let's call it s and we'll do hello world, okay now. If we say we want to get the length, the number of characters in the string, we could use the length property to bring up a console. .log s dot length is fine, a property does not have parentheses, if it has parentheses, it is a method, so let's just use console.log s dot length and we get 11, if we add an exclamation, we get 12, okay, so you get the length, we can also configure it.

Actually, I'll do this if we want to change the case, we could make a method called uppercase, since it's a method that needs parentheses. A method is basically a function that is associated with an object okay so we get hello world we can also make it lower case see we also have a substring so if we want to extract a substring from the string let's make a substring and this takes basically two indexes where you want to start and end. so we'll start at zero and end at five, so if we look at this string, the first one is 0 1 2 3 4 and then the space is 5, so it's actually going to stop before 5, so it should say hi. let's save and we can see that we received hello and you can add other methods as well as we could dot uppercase and save and ran the substring received hello and then put it all in uppercase so you can know to chain them together. 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 whatever you want to split, if you want to split by letter you would just put empty quotes without a space like this which goes ahead and saves that.

I know we haven't gone over arrays yet, but you'll see that we get an array with 12 values ​​and we have the letters or each character in each value, okay, including the space, now this isn't very useful, but a lot of times what we'll do is say we have a form where we add a blog post and we add tags that it might have, like if I know technology, computers, maybe I don't know some IT code. so 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 between each word there is a comma space, so I'm going to put it here like this and then I'm going to save it and now you can see we have an array with four values ​​and we have each word in each value of the array here, so that's pretty useful because then you can insert that into a database and you can search for it and things like that's it, it's useful, like this let's see, let's move on to an increase, okay, so an increase, let's increase and I didn't check the comments, obviously the comments are double slash, so an increase or if you want, multi-line comments, you can do this with the comment of several lines from the lips and we would end it with an asterisk and a forward slash, okay, arrays are basically variables that contain multiple values, so there are a couple of ways to create arrays, however, one of them not used.

A lot 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 it to a new array. So when you see this new keyword and then something after that, this is a constructor. We're building an array and we can pass it in, in fact, let's put in some numbers and then we'll go down here and console the numbers and save them and we get an array with five values ​​from one to five, 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 stick fruits in for the most part, you're just going to put in brackets and then you can create your array, so let's do like apples, oranges, pears. and then we'll go ahead and save the fruits to console.log and there we go, now in JavaScript you can have multiple data types within the same array, so I might put a number in here.

You could put a boolean whatever you want and that's fine. in many languages, you should have the same data types in your array; In fact, there are quite a few languages ​​where you have to set the number as well, so we would have to set this to three values ​​which can be kind of a pain, so JavaScript gives you a lot of freedom and another thing I didn't mention is that JavaScript is not statically typed, so we don't need to like, let's say we're creating a string we don't have to do. like a colon string or something, now there's something called typescript, which is a superset of JavaScript, so it's basically JavaScript with some extra features and static typing is one of them, so if you want to do this, you I suggest you take a look at all the typing.

Okay, now we have our fruits, what if we want to add more to this or sorry, what if we want to access just one of these? Okay, I eat oranges, so I'm just going to do, let's say, console.log fruits and We're going to open up some square brackets and put a 1 in here, so if we check that we're going to get oranges now, although oranges is the second one, the reason we get it from one is because matrices are zero based, so it's zero one two. Okay, remember that arrays are always zero based in all languages, so if we wanted to add at the end, we could do fruit so we know we have zero one two, so we could do fruit 3 equal and then grapes and then we will console Record the fruits and save them and you can see that the grapes were added.

Now notice that we use Const. Okay, like I said before, you can add values ​​to the array, you can manipulate it, you can use methods using Kant, the only thing you can't do is take. the array and we reassign it like this, then we get an error, okay, that's why you can use Const, you know, with arrays and because there's not going to be many times where you're going to reassign it directly, you're just going to manipulate it right, like this that if you want to add at the end like we just did, I'm doing it this way, it's not really the best way to do it because you may 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, period, push and push a value to the end, so let's do I don't know mangoes and save and now you can see that the mangoes have been added to the end, okay, it doesn't matter how many. are in the array, if we wanted to add at the beginning, we could use without changes, let's say, fruit points in the change and let's say we want to add strawberries and save, and now you will see that the strawberries are in it at the beginning, okay and there are there are many different array methods another one is pop if you want to remove the last one you can do fruit dot pop and you can see there are handles but once i save the handles they disappear just take out the last one another thing if i want to check if something is a matrix you can make.

Sorry, you want to do a dot array is an array and then pass, let's pass fruits and save, and you can see it gives us true, okay if I put it. let's say a string here and save we get false so if you ever want to check if something is an array you can put this in a conditional and get a true or false value right now if you want to get the index of a certain value you can use the index of then we could say fruit point index and let's say we want to save the index of oranges and we get two, so if we look at that, you can see that two is the index of the value of oranges.

Alright, I think that'll be it for a raise, like I said there are plenty of other methods so it's not something you definitely want to look into in my JavaScript coursefrom you to me, we went over a lot more and learned how. I like concatenating arrays and stuff like that, but these are just some pretty common methods, so now let's talk about object literals. Well, object literals are basically key-value pairs, so let's make something simple like a person for a person to have. let's do the first name, so we'll say John, it's a string for the last name, so we can do other types, like we can do 30 years, we could even put in an array, we could do something like hobbies and set it to an array. let's say movies musicals and sports and then we can also do embedded objects so we can put an object inside an object like a dress and say street 50 main streets let's do City Boston and state, now let's say we want first of all Just console.log all the matter so person and it will show us in the console if it were to alert, it will show you what happens, you will just get this object, the object is fine, so alerting is not a good way to do this. type of thing, so this will show us the values, okay, now if we want to access a single value, we use the dot syntax, we can do person, dot, name, okay, and you can log more than one thing if I merge one eat. you could put in the person's last name and save it and it will give us both the thumbs up, so you can separate different records with commas.

Now let's say we want to get this value right here, movies, so obviously if you've worked with JavaScript before you know. how to do this, but if you're new, take what we've already learned about selecting values ​​from arrays and objects and see if you can print movies to the console if you need to pause them. go ahead and do it like thiswhat I would do is just say person and we want hobbies so dot hobbies and we know that movies are in an index of that array so we'll do one and save it and get the movies if we wanted to get let's just say the city ​​and that's in this address object, we would do person dot address dot city can we get Boston okay?

This is how we can do it. Let's see, we can also use destructuring, so if we wanted to create variables, you know, we want them as real variables. We could do const and then open up some braces and we can actually take out things like first name, last name and then say equals to person, so think of this not as assigning something, but as taking them out of this person object and if I do that, comfort . record the name you see we get John so we can extract different things now if it's an embedded object like an address what we could do is put a comma here and we could do the address and then say this city okay so if We went ahead and searched the city.

We get Boston. Now the destructuring is somewhat advanced. Again, it's part of es6. It's a new or relatively new feature, but yes, we can do it, so let's see what else I wanted to do. We can also add properties. so you could say like person dot email equals John and Gmail and if you console.log person you will see that now an email has been added so now you can also add properties directly many times We will be dealing with arrays of objects so let's go ahead and create a to-do array, so we'll say Kant's to-do arrays use square brackets and then we want each value in the array to be an object, we'll say sorry.

We're going to give you an ID, we're going to send you a text, so just the text of what to do says take out the trash and then we're going to do it and it's going to complete and that's going to be a boolean value, so we're going to say false, it's actually TRUE. I'm going to show you something a little bit now. I'm going to take this and copy it twice and we'll change the IDs, so we'll do two, three and change this for, say, a meeting with the boss and a dentist appointment. okay and I'm going to change this to false, so we have a two quota matrix.

If I had to console. record two quotas and save, you will see that we have an array with three values ​​that are now all objects. If we wanted to take, let's say this text meeting with the boss, if you're new to this, what I want you to do is try to print this to the console, okay, so you know how to select from an array. you know how to select from an object, so just print out this meeting with the boss, so what you would do is take two quotas and we know that's the second value in the array, so that's the index and then we just want the text. property is fine, so now we have a meeting with the boss.

I want to talk a little bit about Jason. Jason is a data format and it's used a lot in end-to-end development and API usage is when you send data to a server that normally sends it in JSON format and receives it in JSON format, so it's very similar to object literals, it's okay, so I'm going to take this whole array as brackets, these brackets and I'm actually going to I don't remember the exact URL I'm just going to say Jason converter and it's this one right here, so this is the free format or communication bar Jason formatter and just I'll paste in our array and say format Jason and you can see that Jason's syntax 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 there are no single quotes in Jason that will give us an error, so let's say we want to convert this to Jason. inside our script so maybe we want to have it ready to send to a server or something so we'll create a variable and call it to do Jason and there's a method we can use called Jason dot stringify and we could just pass in to do this right and then we'll just console. log the value of jason to do and you can see that we get a string from jason, this is how we would send data to a server, so I'll be working more with this in a moment.

I want to go over the loops. I'm going to keep the -duze array because I'm going to show you how to loop over that, but first of all, let's look at some simple for loops or a simple for loop exist in many different languages, so if you have experience with a different language, You may already know how to do this, but basically we just say for and pass in three parameters, the first one is to be the assignment of the iterator or the variable, so I'm going to say that I is equal to 0 and then we use semicolons to separate them.

Next is going to be the condition that needs to be met so we're going to say I is less than 10 and then lastly it's just the increment so plus plus I'm going to add one to this variable I so what's going to happen is that everything What we put here will run until this is true, so I'll go ahead and just do a console log of I and save, then what happened is it ran, started at 0, did one iteration, got to 1 because of the increment which happened again, it reached 2 and once it reached 9, this condition is no longer true. because we're saying I have to be less than 10 if we want to include 10, we could do less than or equal to 10 because then that's still true when it's 10 and it stops there, now we can do whatever we want here.

We could put a template string in here and just say the for loop number and we could go ahead and save the variable I and now we get the for loop number and then each iteration number so that's a for loop we also have loops while that are It's also pretty old school, the difference with a lot of while loops is that we set the variable outside of the loop so we'll say I equals zero and it will say while and while just takes the condition so I'll put the same . condition as long as I is less than 10 and let's do a console.log.

In fact, I'm just going to copy this one and we'll change it to a while loop to get rid of that. Now you have to make sure to increment I if right? This will be an endless loop because this condition will never be met. Okay, so it's going to keep repeating and repeating, so you want to make sure you do an I plus plus which will increment it by 1, so I'm going to do that. save that and now we get while loop 0 2 while loop 9 okay because we did less than 10 so it's a while loop and a for loop so the next thing I want to do is pretty simple is show you how to loop through arrays Now that we can. use a for loop actually, let me take this for loop so we can use a for loop that we can change the condition as long as it is less than 2 points in length because the length will give us the number of elements in the array.

We showed you that we can use lengths in a string, but we can also use them in an array, so in this case it will be 3, so it will loop through as many quotas as there are and then let's say we wanted to log out. the to-do text we could do and then the index would be the value I okay so iteration and then we could do text with dots and save and I'm sorry it should be like this quotas okay we really want to use the name of this variable now this is not really the best way to loop through an array, we have other methods like a for loop to show you that you can do it with its similar but much more readable structured structure so we can say just let it be done from sorry, not from do okay now this is the name of the array okay so it's this variable this could be anything I'm calling it for because it makes sense I could call it T or anything else and then if we do console.log to do that, it gives us each of them, okay, if I want just the text, I could do to make dotted text and we don't have the ugly index like that, we just do it.

To do dot txt, if we want the ID, we can loop through it 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 I would suggest to do any type of iteration. with arrays and I'll show you a couple of them. I'm going to show you each one, which is just looping through the 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, so let's start with each one, so we just take - duze whatever the array is and make a dot for each one now these high order array methods take as a parameter a function okay so we pass a function like that and then this callback function can take multiple parameters , but the first one will be the variable that you want to use as each element or in this case each to do it, let's do a console log to do dotted text. and save and you can see we're moving along nicely and we're getting the text so each one works fine and they look a lot better with the arrow functions which I'll get to in a moment, but yeah, that's for each now a map, let's get rid of this, actually, I'm just going to change this to map because they're all formatted the same, okay, they take a function, you pass whatever variable you want to use here now with map it returns an array, so I'm actually going to assign Let's say make text because what I want to do, no pun intended, is loop through and then return an array of just the text here, just the text values, so I can just do a return and then do a dot. text is fine, so this will return a whole new array of just text, so if I use console.log to do text and save, you can see that now we have just a normal array, no object or anything, we just take the text to do and we came back. that for each one okay so that's the map we also have filter so let's get rid of that just change this to filter now let's say we just want to return the two dew that are complete and that have this complete as true so we can go back. we're going to return the ID of the point to do, okay, where ID is equal to not ID, whatever we do is completed, so completed is equal to true, true and then let's go down, let's change this to do completed, it has make more sense and then we'll do it. console.log to complete and save and you can see that now we have an array of two values ​​and both are the ones that are complete.

Now we can chain together other array methods, so let's say we also want map and we'll just get the text like we did before, so I'm going to continue with this, let's remove the semicolon and pass the point map into a do function and go back to make text with dots, so go ahead and save and now You can see that we only have one array of text, but it's just the ones that are complete. Well, these are very, very powerful. This is functional programming. Is very powerful. You can really manipulate the data however you want.

It's okay and you can make some. Pretty crazy stuff, so it's definitely something to look into. I have a video dedicated to a couple of these high order matrix methods if you want to check it out, but yeah, 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 the conditionals, okay, so let's start with simple, basic if statements, so we'll create a variable called X and set it to 10 and just say if I just want to test to see if X is equal to 10.

Now I'll do that. I'll start with a double equal and then I should also show you what triple equal means. Okay, so we'll do if x is equal to 10 then let's just use console.logobviously we can do whatever we want but I'll just say that X is 10 and I'll save it and we get that that if I change this to a string and save it, this is still true, okay, this is still equal to this in terms of double equals now if I add an additional third equals sign and save. You'll see that we don't get X is 10 because what that does is it also matches the data types.

This is a chain. This is a number. Therefore, this will not be true. If I get rid of these quotes and put this. to a number then it's true, now different developers will treat this differently. I like to always use triple equals because for the most part I always want to match types, sometimes developers will choose when to use double in triple. I always used triple so let's do more a lot of things and generally in programming it's the preference so let's do something else and do a console log and obviously if this is not true then X is not ten it's okay, so I'm going to go up. here and we change this to 20 and we save and we get that up here and let's say we want to test if than 10, so X is less than 10.

Save, so X is greater than 10. If we set it to 10, we get so it's very simple, otherwise now we can also do multiple conditions, so let's say we want to have another variable called Y, you know, this is not very practical, but I just want something simple so you can get used to it. the syntax, so we'll set it to 10 and say if , so if X is greater than five or Y is greater than ten and save, actually what we're going to do is get rid of these things here and we'll just say that and or Y is more than ten and if I save no I don't get it either because X is not greater than five and Y is not greater than ten; however, if I just change one of these to be true, if I make Y eleven, this will run because one of these is true, it has to be more or less one or the other now, if we use the endpoint that is represented with a double sign and I save it, it doesn't work because now they both have to be true, so now if I change from four to six, which is greater than five, now it works fine. you can use and and or and here too, which is much better than nesting if statements because you could do something like know if X is greater than 5 and then put in another F and then if Y is greater than 10, you could do something. like this, but this is much cleaner, so it's a simple conditional.

Now we have something called a ternary operator, which is basically like a shorthand if statement and is used a lot to assign variables based on a condition, so an example would be let's make it const, let's say. x is equal to 10 and let's say we want to create a variable called color and I want to base it on whether x is greater than 10 so I'm going to put the condition here so if x is greater than 10 then okay so this question mark is actually the ternary operator and represents it, so if this is true, then let's set the color variable to red, otherwise it is represented by a colon, then set it to blue, okay, so if I save that, We should probably log out of the console. so it's the console.log color and we get blue because the format of using ternary operator you of the condition if true if not true, then now I want to talk about switches, which is another way to evaluate a condition, so let's set, we'll actually leave it, this will evaluate the color, so right now it's red so let's make a change and we'll evaluate what the color is and the way we do that is by setting cases so let's give it a case of if the color is red and then we put a colon here and then Whatever we want to do, I'll just do a console log and say the color is red and then you want to just break, okay, so we want to do a break and 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 the color is blue and then we also want a default case, so if it doesn't, if it doesn't match any of the above, then we'll go to console.log and I'll say the color it's not red or blue, so if I saved that we're going to get the color red now, if I change this to nine, it should turn it into blue.

I'll say we're going to get the color blue, if I were to change this to something else of this color: Let's say green and save, we get the color is not red or blue, okay, that's a switch, so now we're going to move on to the functions, okay , so I will create a function with the function keyword. and let's do it, let's add numbers, so let's be a sum, a function that adds two numbers, so inside the parentheses we can put the parameters, so I'm going to put, let's say, num1 and num2 and then let's do a console.log num1 plus. num2 because now we can do any kind of basic calculation, if I save this, nothing happens because we haven't called the function, so we have to go down here and say add numbers and pass in our parameters, so let's do five and four and save and we get nine, okay, so we pass five is num1, four is num2, now what happens if we just add numbers? we get na n ORN and what this means is not a number okay so it should be a number but now it's not with with functions we can set default values ​​for our parameters so for example num1 let's set it to one just we'll set both to one, so if I save this now we'll get to I didn't pass anything, but it will be used.

These default values ​​are fine and if I pass something like five and five, that will obviously overwrite the default values ​​and now we get ten for the most part, you won't access console.log in the function that you would normally return. some of that, so in this case we would return this add issue, so we want to get rid of that now, if I save nothing it will print to the console because we haven't logged anything, if we want to log it, we'll just package this. all in a console log like that ok as far as arrow functions go they are very useful and clean things up quite a bit they were introduced in an es6 aka es2015 so if we wanted to make this a function arrow, what we would do What we would do is instead of using the function keyword, we would name it as a variable and then we would put an equal sign here and then after the parentheses we would put what's called a thick arrow, you don't want do a - like this I want to use the equal sign, so we could do that and if I save we get the same thing, we get 10.

Okay, we just call add numbers. The nice thing about this is that if it's actually just an expression, I want to put this back into a console log because I want to show you if we made a console log here and just get rid of that and save it now since we only have one expression, which means we don't have variables assigned as you know or any other lines. We don't even need these keys, we can do all this in one line like this and if I save that it still works fine 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 unregister the console like that and put it here and save it and we'll get ten, so no need to go back, in fact, if you do this, it won't even work, you can't, you can't.

Put the parentheses back like this and that will work, but you can get rid of the parentheses and the return and make it a lot smaller now if you want, if you only have one parameter, we have two here, but if you only had one, you don't even need the parentheses, so we could do like num1 and then let's say we wanted to return num1 plus five, and then we'll just pass a value here and save and get ten, okay, so you can Look, this really narrows things down and it's great to use with like four each. , so if you wanted to do a dot for each or any of the array methods, you could pass it to use an arrow and you could do like the console dot log each one. do something like that, they're really nice, another thing is that they have what's called this lexicon, so when you use the this keyword, which we haven't talked about, the scope is a little bit different.

I'm not going to go into that. However, since it is beyond this course, we have already taken a lot of time, but know that you have an added advantage when it comes to using the this keyword in certain situations. Okay, now I want to move on to object-oriented programming now we have seen object literals however we can construct objects using what is called a constructor function now there are two ways to do this we can use constructor functions with prototypes and we can also use es6 classes which I'm going to review after this, let's say we want a person object, so we'll say function person with a capital P when you create a constructor function, it should have, it should start with a capital letter and as for what parameters you want to pass. the properties that you want to be able to set, so let's do the first name, last name and date of birth now, when we pass them in, we want to set them to the objects properties, so we do that with this, so we say this the first name of the point is equal to the first name that is passed, let's say this last name of the point is equal to the last name that is passed and then this point does B is equal to the date of birth that is passed and then down here we can what is called create an instance of an object, okay?

Let's create an instance of an object with the constructor function. I'm probably not spelling things right, but it doesn't matter, he does it too. By creating an instance of an object, we can create a variable. I'll just call her person one and we'll set her up as new. person, okay, remember we made a new array before that was a built-in constructor. I mean, there are a lot of them. I'll show you some others too, but we created a custom person builder and this will include a first and last name. name and what date of birth so we'll do like 4-3 1980 okay so we actually just created a person object so we can console.log person 1 and save and you'll notice we have a person object with which looks like the literal object, however, is prefixed by the actual name of the object, which is person.

Now we can create as many people as we want. We could make person to just pass in different values, like Mary Smith, change this. okay, and if ID console.log person 2 and let's say we wanted to get the name, just type the name and let's get married right now, let's take a little side route for a second here and let's talk about dates because right now the last date of birth is a string, however, we can convert this to a date object using the date constructor, so where we set it here we pass it as a string and I'll set it to a new date and then I'll surround it. string, okay, now if I go down here and print the person's date of birth so you can see we get an actual date object, so Friday, March 6, 1970 and if we enter a time, we could actually enter, you know, hours. minutes seconds that would also appear, so when you have a data object there are a bunch of methods that you can call, for example, we can dot and in the vs code, they will actually appear here, so for example, we can get full year , we put in some parentheses and 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 we'll just get rid of this for now and I want to show you that we can actually add methods that are basically just functions to this person object, okay, so I'll say this point and let's get the year of birth and I'll set it as a function and I will return from this. I work this point because I can access the properties of the objects using this and then let's use get full, yes, get full year, so now down here I can say person to person one and we can call this method get year of birth, like this that if I sit down we actually need to register it via save and we get nineteen eighty okay so you can create functions like this let's do one to get the full name so we'll do this point to get the full name is equal to the function and let's just go back, we'll use a template literal here and do this dot name space another variable this dot last name well we'll go down here and say let's just copy this and run the method get full name and save andwe get John Okay, you could put absolutely any functionality here and you can integrate the different properties for each object.

Now I want to talk a little bit about prototyping because this is not the best way to do it if you 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 directly on the object now notice this right here this proto this is a way we can see prototypes that are is another object , but we can attach methods and properties to the prototype and you can see that we have a constructor here. Now what I would like to do is not have the functions with each object instance because we may not need to use them. so we want to put them in the prototype so the way we can do that is go to the function and use person dot prototype dot and then name it so we'll say get Berthier equals function and I just want this line here I just want to return the year of birth, the full year of the date of birth and then I can get rid of this completely, okay, we can do the same thing with get the full name, we can say person, period, prototype, so let's add it to the prototype . a method to get the full name, which is a looping function and we want to take this, put it there and then get rid of it, so now I can call these methods so I can do a console log and say person. to get the full name like I did before and it works Mary Smith and if we look at the console log for a person, we notice that you don't see the function here right on the object, but if we look in the prototype there we have get the full name and born here along with the constructor, so it's basically object-oriented programming in es5, so the previous classes with es6 b are 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 is important to know that with classes it does exactly the same thing under the hood, it does exactly this, it adds the methods to the prototype so that everything looks the same, however, it is what is known as syntactic sugar. Okay, which means it's a prettier way of writing it, but it does the same thing under the hood. Okay, so I'm going to leave this here and replace it with a class with methods. Okay, actually I'll do it. it's right below because I'm just going to copy some things 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, just add a function here or a method.

I should say that a method is a function inside a class called a constructor and this is going to take the same thing as this does the properties and we're going to assign the properties just like we did here, okay? and then any method that we want to add to this class, like get Berthier or get full name, instead of using this dot prototype syntax, we can just put it here so we can say get birth here and I'll grab the functionality here. okay and then let's say we don't want to get the full name either and we'll go ahead and take this and pass it in there, okay now this is doing the same thing, it's just a prettier way, it just uses classes that are included in many other languages scheduling, so it allows people to come. from other sources to be familiar with this instead of dealing with prototypes, so now I'm going to completely get rid of that and all the instances and things like that, everything works the same.

I'm going to save this, we get the same thing. As a result, we call the person to get the full name, we create an instance of Mary here and then if we look at the person, we have the same properties and if we look in the prototype, we should get Berthier and get the full name, okay , so we add these methods to the The class added them to the prototype just like they did before, which is why it is called syntactic sugar. You're doing the same thing, you're just doing it in a different way, which is a little prettier and a little easier to write and read.

I mean you don't have to use classes, but I mean I prefer them simply because they are easier to write. I think they're more organized, so they're pretty much the basics of object-oriented programming, so let's get rid of this and now move on to the Dom to save that and clarify that as far as what I want to work on, I have HTML and Predefined CSS that I want to add and what I'm going to do is put a link. in the description so you can copy it if you want to follow along so let me take this real quick 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 it in and save it and just reload it to get rid of that Dom j/s error oh that's wrong it should be main so I want to keep my console open but I'm going to move it down a little bit so here we just have a simple form and if we look at the HTML we still have our header, we have a section with the container class that pushes everything to the middle, we have a form that has a background, we have this h1. an empty message div and I'll deal with that later and then we have two labels and inputs, one for the name, one for the email, we have a submit input button and then we have a ul with the users idea that is empty and I also have this commented list of unordered elements and the reason I have this here is just to show you how we can manipulate things in the Dom, okay, so the Dom is the object model of the document, it's basically a structure of tree of your entire document. so, your HTML tags and things like that.

I have a four-part crash course on YouTube called the Dom JavaScript Crash Course. If you want to learn more about what we are, what we're going to talk about, check out that course, it's for videos that are like 30 or 40 minutes, so there's a lot in this, we're just going to cover the basics here, so let's move on to management and I want to talk about selecting, okay, selecting things from the Dom that we can. actually taking HTML element elements and putting them in variables and stuff like that and working with them as far as selectors go, we have single element selectors and we have multi element selectors, as far as single element selectors go, we have the right document so these are going to be in the document object before we do this let me 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 .

I just go to the console.log window and the window object is the main browser object, okay and you can see that it actually has the alert function. Now when we alert, we did it like this, so I say alert one that runs, however this is actually part of the window object. so I can say window point alert and that also works since the window is the highest level, we don't actually have to make a window point for anything that is in the window, and you will see that there are other things like e.g. , Look, I show you local storage here, so it's a way to store things in your browser that are part of the window object that you can get like the interior height, there are properties like the interior height and/or with the fetch API it's in the window object right here. so the whole fetch API for making HTTP requests, the document is what I want to show you, although this is what makes up the dom object model, the document, and you can see there are all kinds of properties and methods and things like that. so document is what we want to use to select things from the document, so I'll say document dot and a selector that is used to grab individual 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 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 take that, we can simply pass my - form because that's the ID and what I'll do is I'll just console.log this, okay, now if I save it you'll see that it will actually log that element to the console and we can even assign this to a variable. so we can say that the constant form is equal to removing this last parenthesis so we can sign, we can assign that to a variable and we can console.log form and save, we get the same thing, so we have the document dot get element by ID.

Look, I just want to put console.log back. Another is the query selector, which is much newer than get element by ID. For a long time, people have been using jQuery, which is a JavaScript library that makes it easy to select from others. things that ID, so things like classes are tagged pretty much anything and the query selector works like jQuery for the most part in terms of selecting individual elements, so we could select anything if we look here if we want to take, Let's say the container is a class. Okay, so we're going to say dot container and save and you can see it's going to register that we can actually use a label so if we do like h1 and save it's going to give us H1 now like I said it's a single element selector so even if there's more than one h1, it will only select the skin one, okay, now there are multiple multi item selectors if you want to select more than one thing, so for example 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 I - all of these list items are okay, so I'm going to do the console.log document point and I'm going to use the query selector so that the query selector is intended to select more than one, so let's pass the point element and we'll save it.

What this gives us, let me comment on these two. What this gives us is something called a node list, which is very similar to an array; In fact, we can execute array methods. In it we can do the same for each one and things like that. I mean, you'll see that each one has different methods and properties that we can use. Now there are others too. However, I would always recommend using the query selector on all. these others are older, for example we get elements by class name which of course can only be classes, so we could just pass an element, not a dot element, because it will be a class no matter what query selector , all you can put is an ID. sort a tag, anything, this is just going to be one element, so I'm going to save that document that I forgot, so what this gives us is something similar, it's not an old list, it's an HTML collection.

Okay, now the difference with this is an HTML collection. I can't actually use array methods, you have to manually convert it to an array if you want to run array methods on it, that's fine, but again, I wouldn't use this. I would stick with the query selector now in addition to getting by class name. We also have the tag name and we can just put tags like let's do Li and we'll comment it out, save it and again get an HTML collection, so you'll usually want to use the query selector and the query selector sometimes. I'll use get element by ID, but I usually don't use them, that's how we can select things from the Dom.

In fact, let me show you how we can loop through them if we take the elements, let's take that and we'll say the constant elements set it like this, so we'll get the elements and we can make element points for each one and we'll pass an arrow function for each one, call it element and record the console point. element and save it and you'll see that we're just looping through and grabbing each of the elements in the list, so now I want to look at how to manipulate the Dom or change things in the Dom and when I say Dom I just mean the user interface here, like this let's take the UL right here with the element class, okay, it's a single element that I want to select, so I'm going to use the query selector, so I'll say Const ul equals query.

Don't know. Why do I keep forgetting the document has been using react for too long so I want a query selector because a lot of these things I mean once you learn a JavaScript framework you'll probably use it for these kinds of things because it's much easier than doing it with basic JavaScript. query selector, but you still have to learn these things, so let's say elements, so we take the UL with the elements class and we can call methods like remove, okay, so if I do ul remove and save this notice, the the UL is gone, everything is gone, okay, so this is just one method, there are many different methods you can use, let's say we want to get rid of it or comment it out, let's say we want to get rid of the desire. to remove the last element here so you can do ul dot and you could use last right here, even the last element's child property comes up and you could say dot remove, call the remove method on that and now element three is gone, okay?

Let's also edit the content, so let's do ul dot, this time we will do the first child element, okay, sowe will take the first li. We actually don't want to do that and I'm going to use the text content property here. I'm going to set it to hello and save and notice that the first item in the list here now says hello, so what I did was I took the UL that I took from the Dom. I chose the first child element, which is the first li. and I changed the text content to hello so we can change whatever we want from JavaScript.

Now let's say we want to take the second one so we can do ul and we could do children, which is, I think, a list of nodes so we can select by index. so I want the second one so it will be index one and in addition to the text content we also have inerts that we can use and we will set it to Brad and I will save it and now you can see it is set to Brad. so let's take the last one, so again I'm going to use the last child element and let's say I want to put some HTML here, we have inner HTML and I'm going to set it up so we put an h4 and say hello and save. and now you can see that it's actually an h4 that's doing h1 there we go, so if you want to add HTML dynamically you can do it with internal HTML, ok, let's see, let's deal with, let's change some styling so that we have a button here if you look at our HTML it has a BTN class so I'm going to put it in a variable let's say Const B TN is equal to the document dot query selector and we want the BTN class to be okay and then I can take that BTN and do a 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 whoa!

Why this change? This should be style. I don't know why that happened, so the dot background style is the same. red and there we go, you 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 something else's color change or resize or anything so you can actually manipulate things in your UI in real time , so I'll show you the events in a second, in fact, we'll take a look at the events now, so I'm going to get rid of this and let's take that.

I actually want that button element, so I'm going to take it and let's do the button point now. If we want to create an event listener, we add an event listener and this includes two things, the event that we want, which in this case I'm going to do. I want to click. I'm just going to save this to retrieve all of that, so the first one is going to be the event, the second one 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 put in a normal function, but I'll use an arrow function and when you use an event. it takes an event parameter so I'm just going to use a here so we're going to make an arrow open some curly braces and if I do a console.log and say click and save and then I'm going to open up my console here click notice it flashes really fast and it just disappears. The reason is that this is a submit button and when you submit a form it actually submits it to the file, so if you click a submit button or have a form. send, you have to stop prevention, I mean, you have to prevent the default behavior, so the way you do it is you take that event parameter and call prevent default, okay, you call that method and that will stop it, so now if I click now. we just click it doesn't flash and disappear because the form is no longer submitted correctly so let's take a look at the event object so holding down the click shows us the event object which has a bunch of stuff in it.

I even give you the mouse position and things like that, but if we look at the target right here, this will give us the actual element, so if I make a point target and they click on it again, it will actually give me the element that the event is found which is the button okay 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'll get BTN you can also get the id if there's a, there's no id on it, so I'm not going to get anything, but you can get all the different attributes of the event that you click on right now, let's do something interesting, so let's say when we click we want to change some things, so I'm going to do the document dot query selector and let's take the form so it has an id of my form and let's change the background to make a dot style dot background and let's set it to CCC, which is a slightly gray darker, so if I save this and go when I click this button, wait a minute, my form, I don't know why this keeps changing, that problem must be an extension that I have or something, so let's click on that and you can see that it changed the background color, we could even add a class, so in my CSS style I have a class called BG dark which is just a dark background on some 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 the document dot query. selector and remember we can put whatever we want here, we can put the body tag and to add a class we can do dot class list dot add, we can also remove with class list dot remove and I'm going to add the BG dark class Okay, now If I click on this, we can change the background of the form and then changed the background of the body to darken the text to white.

Okay, I mean this is useless, but it shows you what you can do in terms of creating. your UI is interactive, okay, we can also change the text if we want, let's do like I'm going to save this to clarify, let's do ul dot, we actually don't have ul defined anymore, so we'll have to do that. let's make the query selector and make dot elements and make the last child element and add HTML we will make inner HTML equal to h1 hello so now once I click on this if you look at the last element here it becomes hello, it's fine along with the whole style. changes and we also have most of the events so if we want to do the same thing on hover, you can hover, so if I save and I just mouse over the button, it changes if we remove the mouse and I'll hover the mouse over and then when I exit is when that event fires, okay, so there are different events.

I mean, you can search the mdn documentation for all the different events. There are also drop-in events you might want to check out, but we're running out of time. here, so I want to make this a nice little functional app where we can add a user, take the values ​​and then generate the users here, so I'll comment out those elements again and we'll create a little bit. form script here, okay, so I want to take a bunch of stuff from the Dom and put it into variables, so let's say Const my form so that the document dot query selector identifies my form.

I'm going to copy this a couple of times. we want to grab the name field so that this entry has a name idea, so I'm going to call this entry name. We also want the email input which has an email idea and then we also want it to remember that message class which is just an empty div. I'm going to take that as well and call this message and then I also want to create a variable called userlist and I want to select the users ID, which is also an empty div. So if we look here, we have this.

Sorry, it's not a divot for 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 here for any errors or everything is fine, so we are taking these things 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 listen is a submit, okay since it's activated a form element that we can use submit and we don't actually have to put the function here, we can call it, we can name it, so we'll do like submit, then submit and then down here we'll create a function called on submit takes an event parameter since it's a submit we want to avoid the default value okay and just to test this let's do a console log and take 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 submit it, it gives me the actual item. Now I want the value, so if you have an input set up for a variable like this, you can do a dot value and now if I put in Kevin Smith. and I submit it, I actually understand Kevin Smith, so I want to do a little form validation. I don't want this to be sent unless both fields are complete, so let's do a console log, actually no, let's not do that.

So let's do an if statement and check the name input, so the name entry point value is equal to an empty string or the email entry point value is equal to an empty string, then we want to give the user a message saying it has so you know, add the fields now, we could do a standard alert like this, we could say, enter the fields and we'll do something else and we'll just do a console log and for now we'll just log success , okay, so save it and if I try to send it, we'll enter the fields.

If I enter the fields, we will submit, we will get success now. I don't like using the standard alert. I know, I think it looks ugly and again it stops your code and it's just not something you really want to use these days, so I want to put a message here so we have this message variable that is assigned to that message class and the Dom, so I'll take that message and do it. I'm going to make an internal HTML. I'll set it to enter all fields. Now, if I do that, we will enter all the fields.

Now I have an error style, an error class in my style sheet, so I want to add that. just before I put in the HTML, I'm going to do msg dot classlist dot add and I want to add the error class, so now if I do that again, you'll see that we get that style. Okay, now I'm going to go one step further and I want this to disappear after three seconds in JavaScript. We have a function called set time or that takes a function, so we can write do a normal function or I will do a narrow function with no parameters. so just put an arrow like that and then I'll say msg, which is our class, and I'll use dot remove, which will completely remove it from the Dom.

Now the set timeout takes the second parameter of the time in milliseconds which you should know . It should fire, so I'm going to do three thousand, which is three seconds, so now if I go ahead and submit it, we get our error message after three seconds and it goes away, that's helpful, so you're all set. If we enter the name and email, then what do we want to do? Basically, adding it as a list item in this ul right here, so the way we can do that is first create an item, so I'm going to do that.

Const Li and I are going to use document and there is a method called create element because we can just create elements from nothing and insert them into the Dom, so I'm going to create a list element and then I want to add a text node with the values ​​of input, so I'll take that list item and use append child. Well basically I want to add something inside of it and what I want to add is a text node for the document to create text. node and here I could put anything. I'm going to use a template literal a or a template string and I'm going to put the name, the entry point value and then we're going to do a colon and then we're going to put the oops! change that, okay and then let's put the email in, so I'll say the email entry point value, so we have our text node.

Now this isn't going to do anything yet because we need to add the LI to the UL so we have the users list variable that is set to UL up here, which is up here set for that users idea, and I'm going to call appendchild one more time, which just adds something and I'll add the Li okay and then the The last thing I want to do is clear the fields and we can do that by taking the name entry point value and setting it to nothing and we'll take the mail entry point value email and setting it to nothing and that should work, so let's review. here and let's add, let's say Kevin Smith Kevin in gmail and send it there, let's add another, let's say Brad Travis, see Brad in Gmail and now we can add users.

I just have these demo users from other applications, okay, so that's an example of how we can manipulate the DOM and we can have an interactive application. Now all this is just in the user interface. If I reload those users will be gone, they won't be saved anywhere, so if you want to have an app where you save data you'll have to do that, there are a few things you could do, you'll probably have some kind of backend that interacts with a database. data, so something like nodejs or PHP or Python or something like that connects to a database and then what you do is you send requestsfrom your interface using something like search API, okay or Ajax and I have a crash course in Ajax.

I have a crash course of looking up APIs so if you want to go deeper 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 just be stored in their browser , so that's something else you could look into, but you know, this is this. The crash course is getting pretty long so we're going to 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 for the basics. .

JavaScript Playlist. Check out the udemy course. I'll put a link for only $9.99 in the description. We create all kinds of projects, so that's it. I hope you liked it. If you did, leave a like and see you in the next video.