Learn to code - JavaScript Tutorial Using a Code Challenge | Full Walkthrough

hey guys are you doing my name is TJ and in this video I'm gonna be teaching you the basics of JavaScript by actually working through a JavaScript coding challenge with you but first make sure you hit that like button for me and subscribe on this channel if you haven't already alright so open up your browser and go to jsbin comm this is where we will be writing our code from when you get here make sure you click this HTML tab to remove that then click JavaScript console and click output to remove that so up here the only the only two tabs it should be highlighted blue our JavaScript and console this is where we will write our our JavaScript code and the console is where we will log the output of running that code so our coding talent for today is gonna be to write a JavaScript function that takes in a string as a parameter and returns the number of vowels in that string so the first thing I'm gonna show you in JavaScript is how to write comments a a javascript comment is just a way for us to leave notes inside of our code so comments are not executed as code and the way that you leave comments in JavaScript is to write two backslashes then write your comment so I'm gonna write leave a comment with these two two backslashes and just write our coding challenge for today and that challenge is to write a JavaScript function that accepts a string as a parameter and returns the number of vowels in that string alright so this comment is getting too long so I'm just gonna create a a second comment below it so that we can easily see the whole thing alright alright awesome you just wrote your first javascript comment so now you might be wondering what is a JavaScript function what is a string a parameter return whatever don't worry we we are going to touch on each part of that in challenge and I'm gonna show you how to actually write all of those different things but the first thing I'm gonna talk to you about our strings what is a JavaScript string a string in javascript is a series of characters rappeling quotation marks so simply put quotation marks this is a string this is a series of characters wrapping quotation marks you can do double quote single quote it doesn't matter a string is just a series of characters wrapped in quotation marks alright now that we know what a string is let's talk about variables a variable is a way to store information or data so that you can reference it later using that variable so we can store our string in a variable and then use that variable to reference our string later on the way that you define a variable in JavaScript is to type bar this var keyword and then and then write the name of your variable so let's let's call our variable my string my string and we will set it equal to this is a string let me delete this one up here and you always end JavaScript statements with a semicolon so we have not defined a variable that's called my string and the value of this variable is equal to this is a string okay now something that you may have noticed is how my variable is written with two words so I have my and string and the first letter of string is capitalized so this syntax or this way or style of writing code when it comes to naming variables is called camelcase you know kind of like a camel has humps our variable name has has homes of so anytime that you are defining a variable or a function name which we'll get to later with with two or more words you have to use the camelcase syntax in JavaScript now that we know what a string is let's talk about the console which is what we have open here so this console is it's a place that we can log information to see what is happening inside of our JavaScript code so we can use the console to actually log our string to see what information our string holds and the way the way that you log information to the console is by just typing console dot log parentheses and then inside of those parentheses you you put the information or object that you want to print or log to the console so let's see let's see what the value of our variable is so inside of those parentheses we will put my string and then just come up here and press run and boom you see that not returns this is a string right which is now telling you that this variable the value that this variable is storing is equal to what we set it to up here so we can pretty much log anything to the console we don't always have to log a variable if we want we can actually log and a string directly in our console log statement so I can do something like this console dot log parenthesis and quotations I cannot spell today hello world then you come up here and click clear and run and boom so we are printing our variable up here and right underneath it we are printing hello world we are printing an actual string versus up here we are printing our variable that references a strange now that we know what strings are we know what variables are and we've touched on a console the next thing to talk about is functions what is a JavaScript function so a function is just simply a block of code that performs a certain task so let's say that we want to define a function that console.log hello world every time that we run it right the way that you define functions in JavaScript is to write the function keyword and then the name of the function sort of like how we did with variables prints hello world parentheses then you put the curly braces and inside of the curly braces this is where that block of code that you want your function to run each and every time will be so let's say that we just want our function to print hello world to the console we would just use our console dot log parentheses hello world and let's let's delete everything here the way that you call your function is just typing the name of that function as as you haven't defined and then click and run so you come up here and you click run will not see that every time that we call print hello world this code console logs hello world to the console so again if we if we write this twice or three times right if you click clear every time the disc code runs we should expect to see console.log three times you see that so that is a JavaScript function a function is just simply a block of code that performs a certain task instead of saying hello world what if what if I want to be able to pass different values each and every time and still have our function work the same way by logging that information to the console so that's where parameters come in a parameter is a named variable or a variable that we define when we're defining our function and we can now use that variable or parameter inside of the code block of our function if we want to change our function to make sure that that we constant log whatever is passed into it each and every time what we would do is here in our definition we would actually set a variable string past it so this variable can now be used inside of our function to reference whatever is entered into these parentheses whenever our function is called so we can now take this variable and replace the text in our concert log with this variable right so now anytime that we call print hello world we have to pass something into it so this is a new and this is a new string so click clear then run and you see this string that we passed into our web function is being saved into this parameter or named variable and that variable is now being console logged out so anything that we pass in will be saved into this variable for our function to use all right so that is a parameter a parameter is just a way for your function to take in information from the outside save it into that name variable and reference that variable inside of your function now that we know about functions the console strings and variables the next thing that we're gonna talk about our arrays so you know how we define a variable called my string this variable is only stored in one thing right it's only storing our string this is a string but what if we wanted to define a variable that stores multiple multiple strings or multiple items at the same time that's where arrays come in so with an array you can store multiple items at a time and then save that array into a variable so that your variable is not holding multiple pieces of information in one object right so the way that you define an array is by using the bracket it's then putting whatever information comma-separated inside of that array just to help to make that clear you define an array by putting brackets and let's say that we want our array to be a string of cars right so I'm gonna put Honda Forge Lexus right so this is an array of strings this array contains multiple strings inside of it versus just one like our variable up here so so the thing is we can now store this array inside of a variable so that we can reference it later so I can come here and define a variable and we can call it array of cars equal right so we have not defined a variable called array of cars and we are setting the value of this variable equal to our array that has strings of car names in it so that is an array an array is is an object that can contain one or more items at a time now something very interesting about arrays is that arrays are zero index meaning that the first item inside of this array is not at position one zero index means the first position actually starts at position zero so this first item is at position zero the second one is at position one the last or the third one is that position see I got lost with that position too so arrays are zero index meaning that you start counting the position of each item in the array not at one but at zero so this is zero one two now that is important when it comes to grabbing the values inside of an array so but before that let's console.log our array console got long array of cars and that's let's delete actually let's turn this into a comment so that it doesn't run just to again show you our comments worried right so now if we come up here and we click clear we should see our array console.log so you see how that here we are defining our our variable that is storing an array and we are now console logging our array to the console so when it comes to arrays being 0 index that is very important when it comes to grabbing the information out of an array so let's say that I want to grab the first item inside the disarray right this string of Honda how would I do that and remember I said arrays our zero index so the way that you can grab the values inside of an array using their index it's by simply going to the D array or whatever variable is referencing that array and putting brackets then put in then putting the index of the item that you want to grab so I want to grab the first item inside of my array so that means the index is 0 so I'll put 0 and I console.log that I should expect to see Honda in my console so I come up here I click clear just now and when you hit run boom you see Honda right so if I change this value I change it to 1 and I click clear I should see forward right so again if I change this to 3 what do you expect to see we change this 3 right because remember we only have three items in here and you start counting at 0 so this is 0 1 2 we don't have a position 3 so let's hit run and let's see what that does undefined that means nothing exists in that position all right but we'll touch on that a bit more later all right so we have now learned about JavaScript strings functions variables arrays so a cool trick is that you can actually turn a string into an array of words so we can take our string up here you see how since this is a string we we can actually split this up into an array of each individual word in this string right but let me show you how to search for that so if you just open up a second tab and type JavaScript turn string into array and we'll see w3schools is actually a very good resource to learn different methods this is called a method they are basically functions that were already written and defined in the JavaScript language so if we click this we see that javascript has a method called split right so you see how up here they are defining a variable called STR I'm guessing stands for string and they're setting it equal to how are you doing today and they are calling STR dot split I'm just gonna copy this code exit out of here and go back to our JSP and I'm gonna enter this code here but first let me turn this into a comment so it doesn't run right and we are gonna console dot log this variable our es so our es is storing the result right the results of calling dot split on this variable so if I come up here and click clear and I run you see how Colin dot split on this string turned it into an array of each individual word in that string so we can turn a string into an array of each individual word by simply calling dot split on it and passing in quotations with the space between it alright and that's important because if we go back to our documentation here for the dot split method you see here it says if an empty string is you as the separator the string is split between each character so basically we can print or split a string into each individual letter by calling dot split and passing and empty quotation mark or as our separator so if we come here and we just delete this space here and let's just come up here and click run as you can see it now splits this string by each individual character if we don't put anything what do you think is going to do click clear run doesn't do anything because it doesn't know how you want to split the string so again just make sure that you come back and kind of read up on this definition here of how to use the split method on a string anytime that you that you are using got split you have to tell the split method how you want it to split right so here by passing in / by by passing in quotation marks with the space between it you are telling the dot split method to split this variable here anywhere that is sees a space right does that now make sense by anywhere it sees a space to split that word so let's say that we that our string said you know let's say that I put a space between H 0 and W right and I come back here and I put quotation marks now click run it's gonna actually do that I think it'll make more sense if I do this let's say hi TJ comma how are you doing today and what if I want to split my string everywhere that there's a comma so there is only a comma in one place after TJ so if I put split and I put comma between these quotation marks what do you think is gonna happen right like how many items do you think is gonna be inside of our array it should just be - right so if I come up here and I click clear and I hit run you see hi TJ and how are you doing today so basically this anytime did you use the dot split meant that you have to tell it how you want it to split the string right so I am telling it to split the string everywhere it sees a comma right here if I remove this comma and I just put the empty space I'm telling it to split the string every time if you see a space right so if I click run you see blah blah blah so just to kind of go back to the one that'd be most relevant for us right if we wanted to split it everywhere that it doesn't see a space right it's just an empty string let me click clear we just have to pass in split and pass in an empty string without any spaces between it we click run and it'll split our string and turn it into an array of each individual letter all right so now that we know how the DA split mentor works make sure that you actually come back here to w3 schools and that you finish reading this documentation to get a really good understanding of how this method works okay so so now that we know that split we know about arrays and etc let's actually clear up our code here and let's go back to our example of of doing console.log and printing our array of cars here oops this is still getting undefined let me just put index of zero click clear and run and actually let me just log our our whole array right so now the last thing that we have to talk about in JavaScript before we start to piece together the steps that we'll use to solve our problem our loops right like how do we loop through an array so let's say that I wanted to write code that console logged out each item of an array right like either one item 2 etc etc how would we do that so in JavaScript you would do that by using a loop so let's just open up a new tab and go to and remember we type our keyword we want a JavaScript we want to loop through an array so we type that and let's go back to w3schools and this a now tell us about the JavaScript for loop so this is one of the most common ways of looping through an object or looping through our array so a javascript for loop has three statements that he uses to basically figure out how to process and execute the loop right so here you see that we have one statement right I equals 0 and then we have another statement I is less than cars dotnet and cars as you can probably guess by the way that they're calling cards with the index you you can probably guess that ours is a variable that's equal to an array of cars like strings you know just the same way that we define our array of cars so and then the third statement here is I plus plus right and I plus plus is just a shorthand of adding one to the variable I so if we come down here we can read a bit more about that so as you can see the for loop has the following syntax statement 1 semicolon 2 semicolon statement 3 and then the code that you want that you want your loop to execute each and every time goes between the curly braces so this is how we will write a for loop and coming down here again this is another example for us right so the first statement they are setting a variable before the loop starts right var I equals 0 that's what they are they're right here and then statement 2 is the condition right statement 2 is the condition for executing the code block so statement 2 defines the condition for the loop to run right so for our loop to run here you shouted no I less than five they're saying I must be less than five for this loop to execute and then statement3 increases a value the way they put I plus plus so each time the code Block in the loop is executed I plus plus will run so every time that our loop executes it calls this code here I plus plus and I plus plus it's just a way of adding one to I I'll show you more about that a bit later all right so basically when you are writing a JavaScript for loop the first thing that you do is set your counter variable right this is how you are this is what you are using to track whether your loop should execute or not and they are using a variable called I and they're setting it equal to zero which makes sense because you know if you are looping through an array remember the first item in an array is at position 0 right and then they're saying that anytime I is less than 5 that is the condition when this loop can execute so every time the dis loop executes the code block here each and every time it adds one to I right so remember the first time the loop is gonna actually keep write I is equal to 0 right so it's I less than 5 it is so this code will execute and then we add 1 to I by don't I plus plus so I it's not equal to 1 it's I less than 5 it is so this code will execute again right so let's say that we get all the way to where I is equal to 6 right it's I less than 5 no it's not so this code is not gonna execute that's it the loop is done all right so let's use that example inside of our code actually just to kind of make it a bit easier to understand so let's say that we want to define a loop die actually let's just define a simple for loop so we'll do for parentheses far I or let me just make it a bit a bit more clear let's name our counter counter right so vara counter equals zero semicolon so anytime that our counter is less than five right we want to execute code and then after that you see how they were doing I plus plus we can do I plus plus but I plus plus remember I told you a shorthand so a shorthand for just saying I equals I mean counter equals counter plus one right so this is saying that take the current value of counter where it's when it first starts a zero add one to it and then reset the variable counter to be equal to the result of running this alright so that's that's essentially what counter plus plus is doing or I plus plus it's just taking that variable and adding 1 to it and then resetting that variable to be equal to the result of that so when we not have our phone we now have to put our curly braces which is where we will put the code that we want to execute so let's say that we want to console.log our counter every time right so we can just do console.log counter just to show you how the for loop works here let's comment out the console log of the of the array of cars so come here we'll click clear click run and you see how remember the very first time that our loop runs counter is equal to zero right so it's countered less than 5 yes it is so our for loop executes the code block and right now the code block all that's doing is constant log whatever counter is remember the first time the code runs counter is zero so that's why the first thing you see is zero and remember after every execution of the code block we then run this third statement right so we take counter so Connor is currently zero and we add one to it so we not update you now set counters to be equal to one and then our code comes back to this second statement and it says it's counter less than five well is 1 less than 5 it is so it executes this code block again which it printed out 1 and then it went back to this third statement and it took counter it added 1 to it so 1 plus 1 is 2 and it said that it said counter to be equal to the new value which is 2 so it's 2 less than 5 it you know so it just our for loop just keeps going through this over and over again until it gets to a position right so let's say we get to 4 right so 4 is 4 is less than 5 so 4 is less than 5 so our our for loop executes in console logs out for right then we come back up here right so if the counter is currently 4 then we add 1 to it that means Connor is now equal to 5 it's 5 less than 5 no so our code doesn't execute which is why our account or which is why the console.log only goes up to 4 right so now remember this this is very interesting or this is very useful because counter stores a number value and we can use this number value to reference our array to access those values right because remember you know we have our array of cars here and Honda is at index 0 right so let's say that I put a array of cars and I want to access the index right so remember in instead of doing 0 I can just now put counter and Connor would just keep looping through and updating that number for me automatically so if I click clear when I click run ooh please spell that wrong this is why you don't call life code live a lot of times and I could edit that out but you guys should be able to kind of see all of these different errors and we can read that right so the same reference error counter is not defined and as you can see it's looking for something called Co UN TR right so that means when I came here I actually did I actually spelled counter wrong so misspellings are going to be the cause for a lot of errors or maybe not a lot but when you are coding as a software engineer you are definitely going to run into a few issues or errors that come about just because you spell something wrong okay so this is actually a very common error until you learn how to spell a lot better than me so if I delete this and just spell counter correctly press clear then press run you see that right like it is actually looping through each item in my array remember the array only has three items in it right and the first item is 0 1 2 right so basically everything after that is actually not inside of our array and we can see what the what the counter for that is so reaches for console dot log let's let's slaughter our counter right before we log the index of the array so we click clear will not see okay whenever our counter is 0 and we're grabbing array of cars at 0 we're getting Honda you know when it's 1 right because Ford is at position 1 in our array we give forward when it's 2 is Lexus when it's 3 we don't have anything in position 3 when it's 4 we have nothing right so how can we get our for loop to only execute based on how long our array is so you see I up here we just put a random number and i just put five we can actually use the length of our array right so if we do if we do console dot log and i did let you know if I did console dot log array of cars dot length so dot length is a method that you can call on an array and then tells you how long or how many items are in that array so we should expect it to return three right so if I come up here and I click clear and I place run you see how I puts three up here here just to make that clear let me constant let me let me turn these into comments into let's turn the code in our for loop into comments and then clear it and press run we see three we have three items inside of our array so we cannot use the length of our array because our array is what we are console logging out we can use the length of our array in this condition to check if the counter is less than the number of items in our array execute so we can just take this array of cars dotnet so this is now saying if counter is less than the length of our array of cars right so right now the rail of cars has three items in it so this is like saying if the counter is less than three execute and this is important because remember we are starting our counter at zero so that means that two you know like when the counter gets to two two is still less than three so it's gonna it's gonna be able to loop through each and every item inside of our array so let me just demonstrate that by uncommenting it's cold and let's comment this console.log at the mint here so click clear and hit run you see when counter is zero it prints a Honda when it's one Ford when it's two Lexus so this is now how you can use a for loop to loop through each and every item inside of your array so again make sure that you come back to this documentation and you read through all of the different examples just just to really make sure that you understand how this for loop is working alright alright so we have learned a lot today we learn about what a string is a parameter functions are raised we just learned about ninth method we learn how to use split I don't want to overwhelm you but hopefully you can kind of see where all of this is going right because these are little bits and pieces of information that we're gonna use to actually start writing the code for our solution right so based on everything that that we just learned let's actually start to write the steps that we'll use to solve our coding challenge so let's just come up here and delete all of this and uh I'm gonna now show you how to write a multi-line comment in JavaScript right so the first type of comment that I showed you earlier was how to write single line comments so to write a single line comment in memory you just put the two backslashes then you write your comment blah blah blah but if you want to write a multi-line comment and not have to put these back slashes for each line all you have to do is put one backslash the asterisk then put the asterisk then the backslash to close it so not everything everything here is a comment and I can keep writing these are all comments okay so now I can basically just write all my comments inside of these two things so this is specifying the beginning of our comments and this at the bottom this is specifying the end of our comments all right so if I come up here and I click clear none of this is gonna show up anywhere all right I'm actually clicking clear so now that we know some some basic JavaScript let's start talking through the different steps that we would take to solve our coding challenge so our challenge is to write a JavaScript function that accepts a string as a parameter and returns the number of vowels in that string right so step one right step one that we would take us to just write a or define a JavaScript function that accepts a string as a parameter when I step one we just define the shell of our function without any code or logic yet right now step two right so we're trying to accept the string as a parameter and count and return the number of vowels in that string so one thing that we know is that we have to analyze each and every letter in whatever string is being passed in so so that we can compare and see okay is this letter a vowel or not so we learn how to do that by using the dot split method to split a string into an array of each individual letters so we can actually make that our our step two so step two would be to split the string passed in and turn it into turn and put cover turn cannot spell today guys turn it into an array of each individual letter and store it in a variable and let me just put this on a new line so it doesn't start getting too long all right so so far we have two steps right we have defined a function that takes in a string as a parameter and we also have step two where we are splitting that string and we're turning it into an array of each individual letter perfect so now I remember we are trying to count how many vowels are in that string but how with our function key count so maybe step three will be to define a variable that we can use to keep the current count and we can just set the initial variable value to be zero right so step three define a variable called count I guess and set the default or set the initial value to be equal to zero all right so now that we have a variable called count and we're setting the initial value to be equal to zero we actually have to start doing what looping through our array of letters before we can start to check if each letter is a vowel or not but actually how will our function know what a vowel is we need to tell it that right so let's just do step four define a variable that defines what a vowel is store it in an array we can make it we can just create an array of vowels that's pretty straightforward now right so that's just brackets and we have a string a I owe you alright so now we have four steps so now that we basically have everything that we need to start to kind of analyze our our our letters that thing left to do is to start looping through each letter in our array of letters right so step five would be to start looping through our array of letters all right so so when we are looping through each letter in our array of letters what do we want to do with each letter right we want to see is this letter a vowel or not right so basically step six check if the current letter in our loop is a vowel that's step six and if it is a vowel what do we want to do we want to increase our count by one right so basically as soon as we we find a vowel okay this is a vowel we want to take our account and add one to it so we go from count being equal to zero to being equal to one and then when you find another vowel we add one to that so count is down two and we just keep going and going and going on so we finished looping through each letter in our array right so step seven increase the count variable by one for every letter that's a vowel all right now after our loop is done running what do we want our function to return again we want our freshman to return the number of hours in that string so we basically just wanted to return the variable counts right so step eight we turn the count of vowels all right I think that's it right so our coding challenge here today was to write a JavaScript function that accepts a string as a parameter and returns the number of vowels in that string so step one we're defining a JavaScript function that accepts a string as a parameter and step two we are not splitting the string that's passed in we're turning it into an array of each individual letter and storing that into a into a variable so we can actually just call that variable array of letters and then step three we're defining a variable called count and I think we can do better we can call that variable number of vowels right so always try to be super descriptive with what you named your variables and your functions to make your code readable right meaning that if if a different engineer comes in looks at the code that you write they can follow along with the naming of your variables and your functions too to kind of just really understand what's going on right so like like me right now if I see a variable that's called number of vowels I'm gonna expect that this variable stores a number and this number is the number of vowels from somewhere right and then step four we're defining a variable that defines what if I'll is right so for us to write a function that counts how many vowels are in the string our function needs to know what a vowel is simply put and we do that by defining a variable that stores an array of vowels and we cannot use that array later on and after we have that step 5 we we actually start looping through our array of letters right and every time that we loop through each letter so we check if the current letter in our loop is a vowel and then on step 7 if that letter is a vowel we add one to our account right we increase the count variable by one for every letter that's a vowel and then in step eight right whenever our loop is done running we want our function to return the count of vowels that's it like that is how we are gonna solve our coding challenge and I always implore beginners to write out steps to solving the problem before you start writing code because if you if you get lost searching for solutions and etc you can always come back to these steps they're really kind of help you remember what you are trying to accomplish okay so this is it for today this is this is just part one of this video in the next video we will actually start writing the code for each and every one of these steps and based on everything that you guys learned today you can actually start to try writing the solution to this code on your own and I'll see you pretty soon for part two so stay tuned

Channel: ROOTs Technology

Views: 9,617

Keywords: learn to code, software engineer, code newbie, tech, #html, css, javascript, software developer, self taught, self taught software engineer, toluvstj, engineering interviews, portfolio projects, roots technology, developer portfolio, javascript developer, javascript tutorial, Learn to code, JavaScript Tutorial Using a Code Challenge, JavaScript Tutorial, Code Challenge, how to learn to code fast, how to learn to code, how to learn to code for beginners, rootstechnology

Id: 0ceQbyZqBos

Length: 47min 9sec (2829 seconds)

Published: Tue Jul 14 2020