JavaScript Fundamentals For Beginners

hey guys welcome to JavaScript for absolute beginners so in this mini course we're going to be looking at all the fundamentals of the JavaScript programming language now if you're already fairly good with JavaScript this course will probably won't give you too much more than you already know but feel free to use it as a refresher or to just polish up on your skills or just to watch it for fun if that's your thing all right so we're going to be covering a lot in a relatively short amount of time about an hour so we're going to look at things like variables arrays loops if-else statements events things like that form validation pretty simple stuff so forgive me if I if I kind of go over things you already know I'm going to try not to spend too long on each subject I'll just get you just understanding the fundamentals so that you can actually start typing JavaScript on your own all right so hopefully you guys enjoy it and you learn something from it so let's get started so what is JavaScript a brief definition would be a programming language that is used to make webpages interactive all right it's what's known as an interpreted language and what this means is that it doesn't have to be compiled like languages such as Java or C or visual visual basic and this makes things a lot easier for us okay we can just run our code we don't have to run it through a compiler or anything like that another really important thing to understand is that JavaScript is executed on the clients computer or in their browser and languages like PHP was just like Ruby with Ruby on Rails they run on a server somewhere else but with JavaScript that actually runs on your computer all right in again this makes things much easier because we don't need any kind of special server or anything like that we can simply create a j/s file and include it in our HTML all right it's also object based it's it's it's an object orientated gramming although you don't have to use it like that now the difference between this and another object-oriented program programming language like Java its prototype based instead of class-based alright and we'll get into that later on so I'm sure most of you know this already but javascript is not Java it has nothing to do with Java Java is much more complex and it's a high-level language that is in the same category as a language like C or C++ and those languages are typically used to build desktop applications games stuff like that javascript is a scripting language which means that it's a lightweight language that is interpreted by a web browser when the page is loaded so this is what basically what we'll be going over in this mini-course variables arrays which are just basically groups of variables loops are used to iterate through data and then do whatever you'd like I'll put it on the screen or whatever it may be conditionals we have going to have if statements if else switches comparisons and operators objects functions we'll talk about program flow data types such as strings numbers prototypes and also events events is a big one when we have interactive elements on our web page we usually have some kind of event or action associated with that element so what do you need to run JavaScript all you need is a modern web browser so Chrome Firefox Safari or Internet Explorer I would suggest chrome but everyone has their preference to create JavaScript all you need is a text editor so you can just you could use Windows notepad there's also notepad plus plus there's no pad to sublime text is what I use textmate which i think is only for Mac and then there's a ton of premium IDs that you can use if you want to spend a little bit of money things like Dreamweaver I don't even know any other ones I've never bought an ID sublime text I use for most development so HTML versus JavaScript this isn't really this doesn't really make sense to have them compare them because they're completely different and they work together alright HTML is a markup language and javascript is a programming language a markup language is just that it's used to to display web pages so to have things like paragraphs and headings and HTML uses a tag syntax and hopefully you already know at least the basics of HTML if you don't I would suggest learning that before you learn JavaScript so what can you do with JavaScript this is just a very minimal list there's obviously a lot more but you can do things like put content or text in an HTML page on the fly you can make web pages interactive and responsive you can detect user browsers and operating systems and other info you can create cookies which are is basically holding data in memory validate forms you can create animations and slideshows scrollers things like that and you can even take it up a notch and start building applications using javascript frameworks like angular react backbone j/s things like that all right and then you have no js' which is JavaScript running on the server which will we'll look at a little bit but I'm not going to really get into that that's more advanced all right so enough of this enough of these slides let's go ahead and write some code all right so before we can actually jump in and start writing JavaScript we need to choose a text editor all right now this is strictly preference I'm choosing to use sublime text but there are some other choices that you may like better all right so let's take a look at some of them all right so the first text editor that we're going to look at is sublime text and that's actually what I'll be using sublime text is very simple but it's also packed with all kinds of features its cross-platform you can use it on Windows Mac or Linux and it also has a long range of plugins that you can install and use to add additional functionality all right so that's what we'll be using there's sublime text 2 and 3 I'll be using sublime text 3 another really nice option is notepad plus plus and this gives you Windows notepad with a bunch of additional feature so one nice thing about this is the interface is very customizable all right you can make your toolbar as minimal or as rich as you would like it has a document map so you can see where you where you're at in your work at any time and also a tabbed interface so that you can work with multiple documents auto-completion and text shortening alright so if you want to grab that just go to notepad - + - + org another option is notepad - which just like notepad plus plus it's basically Windows notepad with some additional feature I can't really say too much about it because I haven't really used it but I've talked to a lot of different developers that really like it especially for HTML and JavaScript alright another one is Emacs now Emacs is a little difficult to use if you're a beginner so I wouldn't really suggest it but it is an option it's been around for a long long time I think it was it was written in like 1976 or something like that so that's another option you have if you're on a Mac textmate is basically the equivalent to notepad or notepad plus plus for Mac I've never used it I don't use a Mac but I've heard good things about it all right so like I said we'll be using sublime text if you want to grab that just click on download and you can see it's cross-platform if you're using a Mac or Windows or Linux 32 or 64-bit you should be fine I'm not going to go through the download or anything like that because I have it on my system but it's just a standard Windows installer so now we're going to talk about a really important part of not only JavaScript but pretty much every programming language and that is variables and data types let's take a look all right so before we get into variables and data types I just want to show you the document that I created that will be working in okay very simple it's just an index.html file we have all our base HTML right here we're going to link a style sheet style CSS which I have here if you want to go ahead and get that copied and then we just have a header inside of the body and a container which is where we'll put any output that we need to alright now to start writing JavaScript we can do one of two things we can either link a JavaScript file or we can put it right in the HTML inside script tags now I'm just going to show you both methods but we're going to use the script tags just for simplicity all right so let's say we want to link an external javascript file what we would do is say script and then give it a source attribute SRC and then let's say we want to call it main dot j/s and then we need a closing script tag oops alright now let's save that and then I'm going to just create a new document and we'll call that main dot j/s okay we'll open that up and just to test things we're just going to send an alert and we'll say file linked ok save it and make sure that index.html is saved reload and you can see we're getting file length all right so that's how you can link on an external javascript file but what we're going to do we're going to get rid of that and we're just going to put in script tags down at the bottom here okay and just to test this will say alert and say script tags work save it reload and we get script tags work okay get rid of that so let's talk about datatypes okay so we we have a couple different data types that we're going to be working with okay we have number we have strings or string we have an array and we have an object okay I'm not going to get into a raisin objects right now I'll be doing that in a little bit but what we'll do is talk about numbers and strings all right so let's create a variable we can do that with the keyword var and then we'll name it we'll just call it number one and let's set that to 35 okay now since it doesn't have quotes around it it's going to be looked at as a number if it had double quotes or single quotes it would be looked at as a string and just to show you that we can do something with that variable we'll just do an alert and we'll say number one okay if we reload you can see we get 35 now when you have a variable that is a number data type you can perform math operations so let's create another one we'll call it number two and let's just give it a value of 40 and then let's say alert number one plus number two and I'm sure you know what it's going to give us okay so it's going to give us 75 it added the two numbers together now let's change these from the number data type to a string by putting quotes around them all right now if we save and reload we get 3540 because since it's looked at as a string it's just doing what's called concatenating the two strings together and if we want we can concatenate stuff we can cause a concatenate text or other strings to these variables so let's say my actually will have to put this in quotes because it's a string will say my favorite number is and let's just take that one out we can concatenate just like that just like we did with the variable reload and we get my favorite number is 35 all right so that's how you can put a variable inside of a string all right and even if this was a number data type that's still going to work okay so now let's talk about the naming conventions of variables all right so there's a couple different rules that we have to follow all right so first one variables can contain letters numbers underscores and dollar signs okay so these are the only characters that you should be using in your variables now they should begin with a letter all right even though you can have any of these four types you want to start the variable with a left now they can also be started with an underscore or a dollar sign all right but we won't be doing that in this in this course okay they're also case sensitive okay so if you have let's say let's create a variable called test and set it to a string this is a test and then let's create a variable called test with a with a capital with an uppercase T at the beginning and we'll set that to this is another test okay and then what we'll do is say alert test we'll save that now if it's not if it weren't case sensitive then this would give us this because this test would overwrite this one but if we reload you can see we get this is a test okay if we change that to an uppercase T and we reload we get this is another test so you can see that they are case-sensitive unlike HTML tags which are not alright so those are the basic rules now we also have different different styles of variables all right so we have something called camelcase which I'll give you an example let's say var will say my number all right this is camelcase and what that means is it's going to start with a lowercase letter and then every word after that will be an upper K will start with an uppercase so this let's say my favorite number okay so that's camel case we also have something called partial case which is very close to camel case except the first word is also in uppercase all right and then we also have the underscore style which would be far my favorite number okay so with this you can see each word is separated by an underscore and this is often used in PHP but also in the JavaScript world now if you have experience in any other programming languages that uses variables you'll notice that JavaScript follows a lot of the same rules and conventions now notice with these I just claimed the variable I just declared it and didn't set it equal to anything that's absolutely fine too you're just initializing it without a value all right so if you initialize it with var then you can later on let's say my favorite number equals five and you don't have to use the var it's already initialized the next thing we're going to look at in javascript is arrays and arrays are used to store multiple values in a single variable so in our document we're going go down to our script tags and let's create a very simple array all right so when you declare an array it's it's it is a variable so you want to use var and then we'll name it let's call it colors all right now we're going to set this equal to and then we're going to open some brackets all right and this is what defines it as an array we could just leave it like this and it's inert Kitson initialized array okay so let's add some values to this we're going to add some strings so we need quotes we'll say red blue and green okay so now we have an array of colors that has three different values inside of it so how would we access let's say red to do that what we'll do is we'll do an alert and we'll say colors now let me just show you what happens if we do that okay so what it's going to do is it's going to just print out everything so it's giving us all of the values now what if we want to target just the second value here blue so to do that we would use just some square brackets after the variable and let's put in one okay so if we save that and reload you can see we're getting blue now you might be wondering why we put in one but we got the second value and the reason for that is arrays are zero-based okay so the first value of an array is always going to be 0 it doesn't start from 1 so we have 0 1 2 so if we go ahead and reload this we're going to get red okay if we put in 2 I'm sure you know what we're going to get we're going to get green if I put in 3 and reload we get undefined because there is no third value here so this is one way to create an array but it's not the only one all right so another thing we could do here is we could save our colors and set it equal to new array and then just open up some parentheses and then in here we could say red let's say yellow and orange alright so that also creates an array now it's it's all preference on how you want to do it I prefer the first way we did it just because it's a little easier to read but this certainly does do the same thing so let's say alert and we'll get colors too and we should get orange okay now what if we wanted to add to this array so of course we could just add in another value here but we can also add it down here so what we can do is say colors and if we look at this array here we have red yellow orange which is 0 1 2 so we can set 3 let's set 3 to green all right and then of course we could do alert let's just alert colors and we'll get red yellow orange green now you might not always know how many values you have here so this isn't really an effective way to add to an array so though the correct way it's better way to do this would be to use the push function so to do that we'll say colors dot push ok and we'll want to push in is let's say purple all right and then we'll say alert colors and let's get the fourth one which would be three okay if we reload now we get purple and this here this is known as dot syntax so we're taking an element or an object in this case which is an array and we're calling the push function with the dot case we're saying colors dot and then a function called push which we're passing in a parameter of purple all right we'll get in we'll get more into this stuff later you can also chain onto this and you could add other functions is now open to this point our array only has strings in it all right so we can also let's create an array called numbers and we can set that to just an array of numbers okay and what makes the numbers is that there's no quotes around it so it's not a string so we could do something like alert and let's say numbers 0 plus numbers too ok if we do that and reload we get 11 it's good it's giving us 5 plus 6 and not only that that could use numbers but you could also mix and match so we could also put a string in here and let's say 7 okay we could certainly do that and let's do alert numbers 2 which gives us 6 actually I want to do numbers 3 which should give us the string of 7 now a couple minutes ago I showed you the dot push function which is also called a method okay when you say methods and functions in JavaScript it's generally the same thing as well as properties and attributes alright and arrays can have these things they can have properties and they can have methods so let's look at the method of I'm sorry the property of length so what we can do here is say alert numbers dot length and if we go ahead and we reload we get 4 because the length pertains to how many values are in the array so if I add something else here let's say 155 and then we reload now we're getting 6 because there's 6 there so that's an example of a property now a method would be just a function just like push that we just used there's also one called sort alright now if it's a method or a function it has to have parentheses on the back of it so let's save that and then what we'll do is reload and it's going to sort them by value okay so you can see the one is moved to the beginning and it goes up to the string of seven which attacks on the end okay we could also use one called reverse all right and if we go ahead and reload that it's going to give us the reverse order from which it was created so 55 you can see it's at the beginning all right so that's going to do it for arrays so now we're going to take a look at loops alright so there's different types of loops and I'm going to give you an example of each one now if you have experience in other programming languages chances are you know what a loop is and the different types of loops they run across a wide range of programming languages for instance a for loop you have for loops in JavaScript you have for loops and PHP Java really high-level languages so if you know a for loop in another language then this should be very easy to understand all right so the basic types of loops we're going to go over is a for loop a while loop and a for each loop which is used for arrays all right so let's start out with a for loop and loops what they do is they iterate through something whether it's an array or a result rows from a database or whatever it may be so let me give you just a very basic example ok so we're going to say for okay so structured just like just like a function and this is going to take three different parameters the first we're going to set a variable so we're going to say var and we'll call it I we're going to set it to 0 to begin with all right and these parameters are set rated by semicolons the next is going to be the condition so what we're going to do is we're going to say as long as I is less than let's say 10 okay so that's the condition and then the last one is to increment and we want to increment by 1 so to do that we can say I plus plus that's going to increment it by 1 now inside the curly braces is what we want to happen through each iteration all right so what we're going to do is we're going to do a console.log and if you don't know what that is it's just a way to print stuff out kind of like we've been doing with alert all right so if I go into my Chrome browser and I hit f12 it's going to open up a console all right so just to give you a quick example let's say console dot log and we'll just put in a string here we'll say hello okay if I save that and then we run it you can see down here we're getting hello and I can make this bigger okay so you can put whatever you'd like say 1 2 3 and we can print that out so what we'll do is after each iteration we're going to console.log all right and what we want to output here is the eye okay the eye variable because that's going to change the reach iteration because we're adding one to it so let's go ahead and console.log I and reload and you can see that it's starting at 0 because we set the variable I to 0 and then each iteration it's going to add to 1 it's going to add 1 to that until it meets this that this right here I less than 10 all right so as long as this is true which is going to keep going now when you get to 9 it's going to stop because if it goes to 10 it's this isn't true anymore okay if you actually want to include the 10 you can say I is less than or equal to 10 and then if we run it now you can see we're getting the 10 okay and I can put whatever I want here if we say 20 it's going to loop through up to 20 ok and you could do whatever you want here we could console.log of string and attach it to it and will say say I love the number and then I alright and then you can see it's going to do it 20 times so that's a four loop next thing I'm going to show you is a while loop and I want to do pretty much the same thing so what we'll do is we're going to say while and then here we want to put our conditions so let's say as long as I is less than 10 and then here we want to do whatever we want to do through each iteration so let's do the same thing we'll just console dot log I okay and then we have to include our increment so I plus plus all right so let's run that I is not defined we have to actually define it outside of the while loop all right so we'll say var I is equal to zero all right and you can see it's doing the same exact thing as we did in the for loop so the next loop I'm going to show you is a for each loop and for each loops are they're built to work with arrays alright so before we do that let's create an array okay we'll call it numbers and we're just going to put just some random ups some knit random numbers in here okay so we have an array of numbers and then what we can do is we can say numbers numbers dot for each alright and then inside here we're going to put another function just like that and here we can put whatever we want let's say number and that's what we can use in here so console dot log number so we'll save that and reload and you can see now we're iterating through the entire array now you can also use for loops or while loops with arrays you don't have to use for each alright so for an example what we'll do is say for I or VAR I is equal to zero and then what we want to test is to say as long as I is less than the name of the arrays which is numbers and then we want to add on the length property so dot length okay so in this case the length is going to be six and then of course we need to increment all right and then down here what we can do is let's console dot log and we want to say numbers and then I okay so this is making it dynamic so let's save that reload and you can see we get the same thing and if we want to let's say I'll put this in Reverse we could just write here say numbers dot reverse reload and I can see they're going the opposite way so you can change it up you can add methods to it after you create the actual array alright so another part of JavaScript that is very similar to many other programming languages is conditionals so if statements if else switches if you know these in another programming languages language then you're not going to have any problems with it in JavaScript so first thing we'll take a look at is the if statement okay so down in our script tags what we're going to do is we're going to say if and then we want to open up some parentheses and then curly braces so in here will be the condition so let's say if I will say if one is equal to one now notice that I have two equal signs here in JavaScript in most programming language if you use one equal sign that's usually assignment you're assigning whatever this is to this variable or this this element all right so when you're comparing you want to use a double equal sign now there's times when you may actually see three equal signs and what that means it's the same thing as double equals except that these two data types have to match okay so even if we have a 1 here as a number and then we have a 1 as a string you want to use 3 equal signs to make sure that they're the same the same data type in this case they're not because 1 is a number one's a string all right so that's what it means if you see 3 of these so let's go back and we'll say if 1 is equal to 1 then let's console dot log and we'll say this is true okay and then we'll run that and you can see that this is true if I change this to 2 we know that 1 is obviously not equal to 2 so it gives us nothing all right and we can of course use variables in here so let's save our I will say var 1 is equal to 3 bar 2 is equal to 4 and then we could just compare those so we'll say if R 1 is equal to var - then we'll say this is true ok we get nothing because obviously it's not true if we wanted to test if it was not equal then we could use an exclamation and then equals ok so this is going to be true because var 1 is not equal to var - ok so let's put that back to equals and then what if it's not true but you want something to happen if it's not true all right so what we can do is we can use else ok so we'll say else console.log and we'll say this is false alright so now if we reload we're going to get this as false so another thing we can do is we can add conditions to this we don't have to just stick to one so let's say if var 1 is equal to V 2 and then we'll use and K which is going to be a double ampersand so we'll say and var 1 is equal to 3 ok so not only does this have to be true this also has to be true okay so let's actually make it true by saying we're going to set them equal to each other and then also var 1 is equal to 3 so if we save that and run it we get this is true now if I put it back if I put the 4 back and then we try it we get false because even though var 1 is still equal to 3 it's not equal to var two now what we can do here is we can say or instead of and and you can do that with a double pipe character alright so if we save that reload we get true alright because although it's not equal they're not equal to each other var 1 is equal to 3 now another thing we can do is we can use switch statements all right so let me give you an example of that we're going to save our fruit is equal to apple ok so we have a variable called fruit equal to apples so what we want to do is run a switch statement on the fruit variable alright so in here we're going to add fruit ok and then what we're going to do is we're going to create cases so let's say case and we'll say banana and we want to put a colon here and then whatever we want to happen let's say alert and we'll alert I hate bananas alright and then we have to put in a break okay at the end so that's one case and probably tab these over so in the next case let's say Apple okay so for apples we're going to say alert I love apples and then we want to break and let's say case orange little alert and let's say oops oranges are okay alright and then we want to break and then finally we're going to have a default so I'm going to put that and for default we're going to say alert I love all other fruits okay and then we just want to break all right so let's save this and we'll go ahead and run it and we're getting I love apples okay because fruit is equal to Apple so it's it's calling this right here if we set it to banana and save we get I hate bananas if we set it to orange and run it oranges are okay if we set it to let's say grapes reload I love all other fruits because grapes is not listed as one of the cases so it's calling the default all right so that's a switch statement all right so we've already talked about array so now I want to talk about objects which are kind of similar alright so let's take a look at that alright so there's a few different types of objects or a few different ways to work with them okay so the first one is going to be an object literal okay so what we can do is we can set a variable let's call it person and set it to an object which uses curly braces alright and if you know Jason Java JavaScript object notation then this should be no problem so first we'll give it a property of first name okay which will be a string and then we'll also do a last name which will also be a string and then we can use a number okay we'll say age and we'll have a number type okay so this is an object it's an object called person with a first name last name and age now let's say we want to access this person's first name okay so what we can do is let's do console dot log and we'll say person dot first name okay objects use this dot notation so let's save that and reload and you can see we get Brad okay if we want to get the age we could say person dot age and we get 34 now we're not limited to just having one straight value for a property we can also have a raise all right so let's say we want to add children and we want to set this to an array and put my children okay so we have an array now if we want to access let's say the first one then we can say person dot children zero right and we get Breanna and we can certainly loop through these just like we did in you know a few minutes ago when we use the for loop and the for each loop or while loop you can do that just like as if it was just a regular array all right so next thing we can also have embedded objects okay so let's say we want address and we can set that to a whole nother object so let's say Street we'll say five five five something street and say city Boston and State mass all right so what we can do here is let's say person dot address and if I just do that let's see what happens okay that's going to actually show us the object with the street city and state now if we want to access just the state we could just add dot state okay and we get mass now we can go even deeper and we can actually include functions here as well so let's say we want a function called full name okay so we'll set that to function and then in here let's return this dot first-name now the keyword this is used in many different programming languages and what it refers to is the current object that it's in which is person okay so we can access this first name using this dot first name alright so let's return that and then let's just concatenate oops a space and then we'll add on this dot last name just like that and then down here we'll say console.log person dot full name since it's a function we need to include the parentheses all right so let's go ahead and reload that and we get Brad Travis E alright so this is how you can encapsulate everything inside of its own object okay so that's an object litora let's move on to an object constructor okay so this is just another way to create a single object so let's create a variable called Apple and we're going to set that to new object just like that and then we can add properties to it by saying Apple dot color we'll set that to red and then we'll say Apple dot shape we'll set that to round okay so if I need a semicolon there so what we did is created an object and then we added some properties okay if we want to add let's say a function we'll say Apple dot describe set that to a function and let's do return and we'll say an apple is the color and then we'll just concatenate this dot color and say and is the shape and then we'll just concatenate again and we'll say this dot shape okay we don't need that last I can just go like that all right and now what we can do is let's console.log Apple now we can just console.log Apple and it'll show us the object okay and we can say dot color which will give us red or we can say Apple dot describe which is function and we get an Apple is the color red and is the shape round all right so that's another way to do but what isn't good about this is let's say you want a couple different fruits you want oranges bananas you'll have to do this whole thing for each fruit all right so this is a much simpler way to do this we can use a instructor pattern okay so what we'll do here is we're going to say function fruit and that's going to take in a couple parameters okay we want a name of the fruit we want a color and a shape all right and then the first thing we want to do is assign the values that are passed in as properties of fruit so we can do this using this dot name set that to name we'll say this dot color set to the color passed in and then this dot shape set to the shape that's passed in okay now before I go and create a method in here I'm going to create a new fruit so let's save our apple we want to set to new fruit all right and then we just want to pass in whatever we want here so let's say apple for the name let's say red and round okay and then let's do console dot log apple if we reload you can see that we now have an apple if we wanted to create let's say melon we could just say new fruit melon and let's change this to green okay so now if we console.log melon and let's say we want the shape we could say melon dot shape and that gives us round so we can create methods in here which are just functions so let's do this dot describe alright actually we don't want to do that we want to set it equal to function and let's do return and I'm just going to put a string in here with some of these elements up here are these properties so we'll say a and then we'll add on this dot name say is the color this dot color and is the shape this dot shape okay and then down here let's say Mellon dot describe and we reload Mellon up I can uncomment this and there we go Mellon is the color green and is the shape round so the more fruits we want to add all we have to do is this one line of code instead of having to do the whole thing that we just went through with the object constructor so hopefully that's clear to you guys now we can also have arrays of objects all right so let's say we want a variable called users and we'll set that to an array but inside here we're going to have objects okay so let's say name John Doe and age I'll say 30 all right and then we can just put a comma here and we can add more users okay so this one will say Mark Smith age 44 and then here we'll have Shelly Williams who's 20 okay so now we have an array of objects and we could do something like console.log users and let's get well actually yeah we'll get the first one so 0 and that should just give us this person right here if we reload okay and we can get the specific properties if we want we can say dot name and that will give us John Doe all right so those are objects alright so one of the most important aspects of learning javascript is events alright because javascript was created to make webpages interactive and dynamic and in order to do that you need to have some kind of event handling for clicks or Scrolls or drags whatever it may be so let's take a quick look at events so what I'm going to do here is I'm going to create an element inside my container here and actually know what let's make it a button okay so we have a simple button let's display that okay obviously it's not going to do anything if we click it what we want to do is in it we want to attach an event handler to this element so what we're going to do is say on click equals and then what we want to happen so what we're going to want is to run a function all right so let's say do click OK so on click we're going to call a function called do click so let's create that down here we're going to say function do click and let's just do an alert and we'll say you clicked ok we'll save that reload and we get you clicked ok so it's as simple as that to create an event now we can do other stuff here it doesn't have to be a custom function alright for example we can say this which pertains to the button I'm going to say this dot innerhtml which is a JavaScript core function and we're going to set it to lets see single quotes and we're going to say you clicked alright so we can get rid of that let's save it and go and reload and click it and you can see that the text of the button changed to you clicked now you probably wouldn't want to do this you don't really want to call mix your javascript in with your HTML you know as much as you can you can not do that so a better way to get that same functionality would be to let's get rid of that create it your own function called change text okay and then pass in this and then down here you could create your function change text and pass in let's say ID okay you're passing this in here as the ID and then what you want to do is say ID dot inner HTML set that to you clicked ok so go ahead and reload and you can see it does the same thing but this looks a lot neater now you don't have to just change the element you're in you can change something else for instance let's say we want to change this heading alright to do that we're going to add an ID to the heading first and we'll just call this heading and then once this is clicked we don't need to pass in this anymore because we're not working with that right so we'll get rid of that what we want to use here is a Dom function called get element by ID all right so we need to say document dot get element by ID and has the idea of heading okay and what we'll do is set this to a variable called heading and then right here we're going to say heading dot innerhtml and we'll set that to you clicked all right so if we save that reload click the button now you can see the heading has changed so let's do something a little different what I want to do is we'll have this button and we're going to hit when it clicks I wanted to show us the date okay so let's change the text to show date and let's change this here to a function called show date and we'll change this show date all right and what we want to do is let's put an element up here right above the button okay we'll put an h1 and let's give it an ID of time all right we're not going to actually put anything inside of it it's just an empty element okay and then in show date what we're going to do is grab grab this h1 okay so we're going to say document dot get element by ID okay this time we want to grab the ID of time and let's actually set that to a variable okay and then what we'll do is say time dot innerhtml and we're going to set that equal to the date function all right so let's save that and reload show date and now it gives us the date and time now on click isn't the only event we can use this there's a bunch of them or another one would be onmouseover okay so for this one let's save it reload and now if I just hover over it it runs this it runs show date okay we don't even have to click it we just hover right over it now we also have one called on Mouse out so let's let's attach that so on Mouse out we'll set to a function called clear date all right and then down here will create that function and what we'll do is we'll take this actually we'll take this whole thing and set time dot innerhtml to nothing all right so let's save that reload and you'll see that well it's it's kind of awkward because once I click it you know what let's put the date underneath so that it doesn't change positions ok so I go in and it shows it caught that's onmouseover when I leave it it goes away ok we also can do onload which usually you'll attach to the body if you have something that you want to run when the page loads a lot of times you'll attach this to the body so we'll say onload and let's say show date alright if we save that and we reload you can see that the date is now shown alright so let's move on to forms all right I want to talk about forms because JavaScript plays a really big role in form validation and other types of functionality with forms so let's take a quick look at that all right so I've created a very simple form here with three fields we have first-name lastname and we have a background color select box so what I want to do is just show you how we can link some events to some of the form fields we have and also how to do this very simple form validation so before we go into validation I just want to show you how we can link this select box to change the the body background of our of our application or website okay so what we're going to do is we have our select okay and we're just going to add to the Select tag I'm going to add on change and we're going to set that to change background okay and we want to pass in this because we want this select element so down here we'll create a function called change background alright and that's going to take in let's just put X here okay that's going to represent this so let's test it out and say console.log and we'll just say hello just to make sure the event work so let's reload and we'll just change it okay notice I didn't submit the form I'm just changing the select list okay we're getting hello let's see what happens if we console.log X okay so what that's doing is it's giving us the entire select element so we can access anything we want in here for example to get the actual value we can say X dot value okay we'll reload choose blue and you'll see down here we get blue green red okay so now we have access to the value there so what we want to do is we want to change the CSS of the body to whatever that value is all right the background of the body so first thing I'm going to do is the body tag I'm just going to add an ID to it called body okay and then down here what we'll do is create a variable called body set that to document dot get element by ID and we want the ID of body okay so now we have that that element what we want to do is say body and then we're going to call style okay dot style and then the actual CSS that we want to change is background color alright and we just want to set that equal to X dot value okay so let's go ahead and save that reload and now let's choose blue and you can see the whole body changes green red alright now let's say we just want to change the heading here we could just change this to heading and let's see does it have yeah it has an ID of heading so I can just change that heading instead of background color let's just change color okay so now if I change that to blue you can see the headings blue green and red okay so this is a perfect example of how Java Script makes things dynamic and interactive so now let's move on what we're going to do is just very simple form validation we want the first name to be a required field and we shouldn't be able to submit the form if the first name is blank and then we'll also add a rule saying it has to be at least three characters so let's just delete this we don't need that okay actually we don't need the background select list at all anymore alright and I'm just going to take the ID off of body okay so what we want to do we want to figure out what event we won use hair so when you're working with a form you probably want to use on submit so let's put that in here we're going to say on submit and we're going to set that equal to return validate form okay so let's create that down here we'll say function validate form okay and first thing we want to do is grab the first name input element so to do that we'll say first name now I should mention that when you're doing something like this it's probably a good idea to use jQuery or something like that some kind of JavaScript library it makes things a lot easier it shortens your code the reason I'm not showing you that is because this is a strictly JavaScript tutorial and I think you should learn how to do that first but after that just look into jQuery because things it's a lot easier to select different elements from the Dom okay so but just to show you how we can do it with pure JavaScript we can use document dot forms okay and what that's going to do is it's going to look at all the forms now we want to be specific this form has a name of my form so we can actually use that so we're going to open up some brackets and it'll say my form and then we want the first name so we're going to specify that okay and then we're going to say dot value okay so that's going to give us the value you could have also used document dot get element by ID on the input form but this is just another way to do it so what we want to do is we want to run a check on that first name okay so we want to say if first name is equal to null or whoops or first name is equal to nothing okay so if that's true then we're going to alert I'm going to let the user know say first name is required all right and then you want to be sure to return false which is going to stop the form from submitting all right so let's save that and we'll go ahead and reload and let's try to submit and it's giving us first name is required okay if I put something in there and submit it lets us go through and I just have it going to a file called something dot PHP alright because usually you would submit a form to to either PHP or some other kind of server server language file all right so that's that now let's say we also want to check it and make sure that there's at least three characters so what we'll do is let's copy that and we'll say if first name dot length is remember all objects have properties length is one of the properties so we'll say length is less than three we'll say first name must be at least three characters and return false okay so if we reload and we put one character in submit it's telling us it must be three characters if we put more than three submit it goes through all right so that's the very very basics of form validation with JavaScript and you should also have some kind of form validation on your server side if you're using PHP or whatever it may be because JavaScript is only done on the client all right so that's going to be it for this short well it wasn't that short I actually wanted it to be a little shorter than this but hopefully you learned something from it at least the the fundamental of not only javascript but programming in general because things like loops arrays variables these things are are global to most programming languages alright so if you liked the video please subscribe plz leave a like you can leave a dislike if you didn't like it and I will see you next time

Channel: Traversy Media

Views: 1,464,919

Rating: 4.9403868 out of 5

Keywords: javascript, javascript beginners, javascript beginner tutorial, javascript basics

Id: vEROU2XtPR8

Length: 68min 22sec (4102 seconds)

Published: Thu Mar 24 2016