JavaScript Crash Course 🌐 (𝙁𝙧𝙚𝙚)

hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to help you get started with javascript so sit back relax and enjoy the show if you wouldn't mind please like comment and subscribe one like equals one prayer for the youtube algorithm i'm gonna tell you why you need to learn javascript it's one of the top three most popular programming languages worldwide and it's used in about 95 percent of all websites on the internet there's definitely high demand also new javascript developers have an average starting salary of about 67 000 in the united states according to glassdoor still interested well then let's get started now javascript is a client-side scripting language so it runs in a user's web browser there's no need to download anything for javascript but you'll need a text editor to write javascript code so pick a text editor here's a few but this is not a complete list i'm quite fond of vs code but there are others available such as sublime text atom or if you want to torture yourself you can even use notepad i recommend vs code so i'll show you where you can install that to download visual studio code just head to code.visualstudio.com i'll post this link in the description down below go to download and select the correct download for your operating system once your download finishes read the license agreement yes i actually did read it that fast i accept the agreement next you can create a desktop icon add to path make sure that's checked next then install you may also want to download node.js it's not required but it's useful it's a runtime environment that runs on the chrome v8 engine and executes javascript code outside of a web browser plus you can also use it to install third-party libraries here's where you can find it to download node.js just head to well nodejs.org and you can download it here i now have visual studio code downloaded i'm going to open it and this is just a welcome screen i'm going to create a new folder to hold all of the different html css and javascript documents that we have i'm going to name this folder javascript tutorials and then i'm going to drag and drop it to vs code so we should have a drop down menu for that folder okay then within this folder i'm going to create a new document it's going to be an html document that i'm going to name index.html because we will need a base html document to work with now to generate a basic html file within vs code just type an exclamation point and then tab and this will generate a sample html document for you now i recommend going to extensions and looking up live server this is a very good extension what this does is that every time that you save a document that you're working on it's going to update automatically so if we have a web page on my right hand side and we make any changes to it within my html or javascript file it's going to update automatically so you can find that here and i highly recommend downloading it so once you have that downloaded let's open up our index.html document so i'm going to right click and open with live server okay so i'm going to add a basic h1 tag and we'll display something so we need an opening tag and a closing tag and let's print a message let's say i enjoy pizza then i'm going to save and since i have that live server extension i don't need to refresh my page it's going to do so automatically after i save this document and you could take it a step further and go to file and set it to autosave so that anytime you make a change it's going to save and refresh your webpage automatically personally i'm going to disable autosave just because i like to explain things before i actually demonstrate any changes but you may prefer to have autosave set okay i also think i'm going to zoom in on this text too because the font size is somewhat small in vs code to change the font size go to file preferences settings you can change the font size as well as the font family i'm going to pick 20 for a font size and that's not too bad now the reason that i named this file index.html is because in layman's terms an html file named index will function as the default home page of a website and what we need to do at this point is to create a javascript file so within the same folder i'm going to create a new file also named index but this will be a javascript file so i will end the extension with dot js so we have two files named index one is html and the other is javascript what i need to do is to link this javascript file to my html file and one way in which we can do that is to add a pair of script tags to the end of the body of your html document and the reason that we place script tags at the end of the body of our document is because it's considered good practice we want all of our html and css elements to load first before our javascript just in case you run into any issues with your javascript that way you won't have like an empty website with nothing on it so you want your script tags to be at the end of the body of your document within the opening script tag we're going to add the attribute src for source and within quotes we're going to list the name of our javascript file that we're going to link index.js so let's save and then head to our index.javascript file now the first thing that i'm going to show you is how we can add an alert so type alert then a set of quotes and then a message so i can say something like i love pizza and then add a semicolon at the end so i'm going to save and we now have an alert i love pizza that's kind of a crappy alert so typically it's not considered good practice to use these alerts but i just wanted to demonstrate that we can use them now you can turn a line of code within your javascript document into a comment by preceding a line of text with double forward slashes and you can see that the color of the text now changed to green so this alert will no longer pop up this line is a comment and typically it's used as notes either for yourself or for other people looking over your code so that's one way to display output is by using an alert but typically people don't use that another way is that we can log a message to our console within a web browser and to do that you type console dot use the log method add a set of parentheses within quotes add a message i really really enjoy pizza but then make sure to add that semicolon at the end okay so to look at your console log right click anywhere within a web browser go to inspect then i'm going to move this to the bottom then go to console and this is our output i really really enjoy pizza so just to summarize we can use an alert for output but typically we don't use that just because it's annoying maybe you can annoy your friends or something we typically use the log method of console to print a message to our console section of our web browser you can also create a comment by using double forward slashes and writing a comment either for yourself or for another person looking over this code this is a comment and typically these are ignored you can write a multi-line comment you begin with a forward slash then an asterisk and anything between another asterisk and a forward slash will be a comment so for example this is a multi-line comment so just as a quick summary you can use the alert function to create an alert box on your web page that's kind of annoying but preferably you want to use the log method of console to create a message within the console section of your webpage you can write a comment by using double forward slashes or a multi-line comment with a forward slash asterisk and the comment will end wherever there's another asterisk than a forward slash well i believe that's enough for today's video in the next video we're going to cover variables now if you would like a copy of all the text from my javascript file as well as my html file i'm going to post all of this to the comment section down below and pin it to the top if you would like a copy for yourself i gotta say thanks for watching this video all the way until the end and well welcome to coding with javascript for beginners hey you yeah i'm talking to you if you learned something new then help me help you in three easy steps by smashing that like button drop a comment down below and subscribe if you'd like to become a fellow bro [Music] yo what's going on everybody it's you bro hope you're doing well and in this video we're going to discuss variables in javascript so sit back relax and enjoy the show if you find this video helpful please remember to like comment and subscribe your support will help keep this channel running a variable is a unique identifier for some value remember way back in algebra during math class and school where we had to solve for a variable and an equation such as finding the value of x and x plus some representation of a value well it's the same concept however we are not limited to only numbers we can use variables as a representation for words boolean values which are either true or false or even objects so let's begin with creating a variable to hold a number now creating a variable is done in two steps declaration and assignment first we need to declare our variable by typing var and then we need a unique identifier for our variable let's say edge and we'll store a number var edge that's the declaration step and then to assign a value to this variable we complete the assignment step by using equals which is the assignment operator and then some value let's say our edge is 21 and then to finish declaring and assigning this variable we end each statement with a semicolon it's kind of like the period in a sentence that's when your program knows to go to the next sentence go to the next line so we have a variable named age and for all intents and purposes age is the number 21 and we can use it in our program let's say that i would like to display the value contained with an edge to my console while i can use the log method of console to display that however be sure that you're not placing it within quotes that is referred to as a string literal we're literally going to print the word edge and a string is really just a series of characters but we'll cover that momentarily so to access the value contained within a variable we type the variable name without quotes so i'm going to display my age using the log method to my console and this will display the value 21 and you can change or update this value whenever you want or whenever you need to and we also have the capability to display our variable along with some text along with a string literal let's say we have a message you're age is then to display a variable along with some text a string literal we can use plus your edge is plus our edge variable and this will display to our console your edge is 21 so that's how you can display a variable along with a string of text alternatively instead of plus you can use a comma and what this will do is that this will insert a space before your variable so you can see that i have two spaces between is and my variable so i'm just going to delete the empty space i have after my string literal so that's another option too your edge is comma then your variable that you would like to insert not only can we store numbers within a variable but we can even store words or whole sentences these are referred to as strings a string is basically a series of characters one or more characters let's store somebody's name so let's create a variable named first name a good practice when naming variables is to use this format called camel case if your variable name is made up of multiple words you capitalize every word after your first word so first would be all lowercase and then name would be capital so if we had let's say last name this would be var last name or if we had something else like my cool variable you capitalize each word after the first excluding the first word so that naming convention is referred to as camel case it's not technically necessary in order for your program to work but it's considered good practice so we have this variable first name and we can assign a string so to assign a string be sure to place it within quotes kind of like what we did with our message our string literal so you can use whatever your own first name is so let's say mine is bro i'm going to assign this variable first name a value of bro now we can use this first name variable elsewhere in my program let's display it along with a message to my console let's say console.log i'll display a string literal of hello comma first name now pay attention to the capitalization because javascript is case sensitive so if i was to run this program this will display your age as 21 hello pro one other data type that we can assign to a variable is referred to as a boolean a boolean stores either true or false it's kind of like a light switch it's either on or it's off so let's say we have a variable that will store a value of true or false perhaps if somebody is online they're either online or they're offline so let's create a variable named online and we can set this to either true if somebody is online or false if somebody is offline so i'm going to set this to true and we can use this variable so let's print this to our console console.log let's say are you online then comma online your age is 21. hello bro are you online that is true so that is another data type a boolean a boolean is either true or it's false now when we create a variable we do so in two different steps declaration and assignment and we do not necessarily need to do both steps together we can declare a variable and then assign it later so let's say we have a variable named maybe what ever so i'm not going to assign this a value quite yet because i do not know what i want to place here so i'm going to display this variable to my console so let's type console.log and if you use a variable that does not have a value assigned it's going to display undefined that means we did not assign this variable a value so we declared a variable but we did not assign it a value and we can do so elsewhere in this program later on so that becomes very useful when we get to the section on user input we can declare a variable such as name and we can have a user type in their name later on in the program and assign it a value so to assign a variable a value we do not need to use this var keyword again we already declared this variable so let's say our variable whatever equals how about a last name use whatever your last name is code so whatever now equals code we did these two steps separately to create a variable declaration and assignment and in my console my variable of whatever is no longer undefined this next data type it's kind of a strange one we can assign a value of no no essentially means nothing as in this variable does not contain a value so if i assign my variable of whatever no that just means that there's no value assigned to this variable and with variables we can easily change or alter a variable's value after they've already been assigned let's say we would like to increment somebody's edge by one because it's their birthday we can easily do so by saying age equals edge plus one so now somebody's age is 22 if it's 21 initially and later on we add one to it we can even combine strings together let's say we have another variable named last name and you can use whatever your last name is i will store a string of code and we can create a new variable let's say var full name equals first name plus last name this is referred to as string concatenation so i'm going to display hello full name and this will display hello bro code so with variables you can change their values later on in the program after they've already been assigned now besides using this var keyword to declare a variable there's two additional options as well one of which is let basically when we use this let keyword we can temporarily assign a variable a limited scope so that won't really make much sense now until we get to the videos on loops and functions where we cover different scopes so basically we can temporarily assign a value to a variable within a limited scope now another option is to use this const keyword referred to as constant so it's a constant reference to a value that cannot be changed let's say we have a variable named pi and we do not want the value of pi to change because it's important for our mathematical equations so let's say pi equals the first few digits of pi 3.14159 so i cannot alter a value that is declared using const it's a constant reference to a value that cannot be changed and let me try to do so pi now equals 4 and i will log this to my console whatever pi is so you can see that we have an error assignment to constant variable so that's something that you might see as well which is const it's a constant reference that cannot be changed well i think that's enough about variables for today with variables they are a container for some sort of value and they behave as the value that they contain you can store more than just numbers you can store strings booleans all sorts of things so if you would like a copy of all this code i will post all of this to the comment section down below but yeah that is the basics of variables in javascript hey what's going on everybody it's you bro hope you're doing well and in this video we're going to cover some basic arithmetic expressions using javascript so sit back relax and enjoy the show hey what's going on everybody let's talk about arithmetic expressions they are some combination of operands which are values variables etc and operators such as addition subtraction multiplication and division but this is not a complete list and an arithmetic expression can be evaluated to a single value so here's an example let's say that we have a group of friends a variable named friends and i will set this equal to an even number of 10. so we can increment our number of friends or decrement our number of friends divide them multiply them whatever and here's how we can do so so let's say we would like to increment our friends by one so we can easily do so by saying friends equals friends plus one simple as that right then we should probably log this console.log friends so now i have 11 friends and this can be somewhat long and tedious there's actually a shortcut to do this and i'll show you that later so let's say we would like to decrement our friends because steve is being difficult so friends equals friends minus one and we should now have nine friends so multiplication we use this asterisk friends equals friends let's say times two we now have 20 friends and division division is a forward slash friends equals friends divided by two because steve broke up our group of friends so now our friends is five you can raise a variable or some other value to a power by using double asterisks so friends equals friends let's say to the power of two so we now have 100 friends 10 to the power of 2 is 100 now this next operator is somewhat strange it is referred to as a modulus it's represented by a percent sign it will give you the remainder of any division but you need a divisor and a dividend let's say with our friends variable of 10 we're all in a class together and the instructor says that we need to break into groups of three so there's going to be one person that's going to be a remainder they're going to be left out since 10 does not divide by 3 evenly well we can use the modulus operator to calculate the remainder so what i'm going to do is create a new variable let's say var maybe remaining friends equals friends then modulus three because we're all breaking into groups of three this will give you the remainder so i'm going to log remaining friends so since 10 does not divide by 3 evenly normally it's 3.33 repeating right this will give you the remainder and we're assigning it to a new variable of remaining friends so we have three groups of three and one person is remaining and that is probably steve now writing a long arithmetic expression like this and then reassigning it to the same variable is somewhat tedious so there's actually a shortcut for most of his so what we'll do if we want to increment our friends variable by one is to type the name of the variable friends plus equals one and that's a shortcut that you can use so that will increment our friends variable by one so following that pattern what if we would like to decrement friends minus equals one so now we have nine friends and let's just follow that pattern and go down the list so let's multiply our friends by two friends asterisk equals two we now have twenty friends and then we will divide by two and that would be friends forward slash equals two and now we have five friends all right but bonus round so what if we need to raise friends to the power of two using our shortcut so that would be friends double asterisks equals two friends to the power of two would be one hundred so double asterisks equals and then your exponent now unfortunately our shortcut only works if we're reassigning the same variable so we couldn't take friends modulus 3 and apply it to remaining friends using our shortcut but we could reassign the remainder to our existing variable of friends so if we took things that way we could say friends then modulus equals three so what we're doing here is just reassigning the remainder to our existing variable of friends and that would be one so those are a few different shortcuts lastly we have to talk about operator precedence our last topic of this video is operator precedence so let's say that we have a multi-part arithmetic expression such as friends equals 10 plus 2 divided by 2 so which part of this expression will result first so we can actually figure that out step by step following operator precedence we begin with anything within parentheses then exponents then multiplication and division and lastly addition and subtraction now this goes way back to i believe either elementary school or middle school so there's an acronym that we follow p e m d a s and there's a mnemonic a rhyme to remember that it was please excuse my dear aunt sally or as i like to remember it please excuse my dope ass swag and by using operator precedence we can evaluate and figure out what our friends variable is going to be after resolving this multi-part arithmetic expression so we begin with any parentheses there are none there are no exponents check any multiplication and division there is some division so we will resolve this first 2 divided by 2 is 1. then lastly addition and subtraction so 10 plus 1 equals 11 so we should have 11 friends which we do now you can force operator precedence by surrounding a part of your arithmetic expression with a set of parentheses so let's say we would like to add 2 to 10 first so we can surround this with a set of parenthesis and this part of our expression will result first 10 plus 2 is 12 divided by 2 equals 6. and that's why following operator precedence is important because if you follow the wrong order of steps with a multi-part arithmetic expression you can end up with the incorrect number but you can force operator precedence just by surrounding a part of your equation with a set of parentheses in conclusion an arithmetic expression is some combination of operands these can be values variables whatever and mathematical operators such as plus minus multiplication division modulus just name a few and they can be evaluated to a single value we've had some practice with that and there are some shortcuts available too if you're just reassigning the same variable you also have to take into account operator precedence so you follow anything with parentheses first then exponents multiplication and division then addition and subtraction if you would like a copy of the code from this video i will post this in the comments section down below but yeah those are a few basic arithmetic expressions using javascript hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to show you all how we can accept user input using javascript so sit back relax and enjoy the show hey y'all in today's video i'm going to show you all two different ways in which we can accept user input the easy way and the hard way the easy way is simply just to create a sort of alert box that will ask the user a question and then they can type in some text and submit it's convenient but not practical the other way the hard way is to create a text field and a button we can type in some text and then submit it so it's not as convenient but it's more practical so let's begin with the easy way we're going to create a sort of alert box a prompt let's say we have a variable var my name we'll ask a user to type in their name var my name equals window.prompt and prompt is a method so within parentheses and within quotes we can ask the user a question what do we want them to do what do we want them to type in what's your name okay so then once a user types in and submits some information it will be assigned to this variable of my name so let's do something with this variable let's display it within our console console.log hello my name okay let's run it so we get this annoying alert box with our prompt what's your name i'm going to type in bro then click ok and our console will display hello bro or whatever you typed in now that's the easy way to accept user input it's convenient but not practical now the hard way is that we can create a text field and a button when we type in some text into the text field we can submit it via the button so i'm going to turn these lines into comments save my document and i will head to my html document you'll need a base html body to work with if you're using vs code if you're missing this you can just type exclamation point and then tab and that will generate a sample html document for you and be sure to get these script tags in at the end so let's say we have a label a text field and a button so we will create those elements within our body so let's begin with the label so i will create a label and i'll type in enter your name and i will add a line break and let's just test this enter your name i'm going to zoom in a little bit now let's create a text field we'll need to use input type equals text for a text field and i'm going to give this text field a unique id that will come into play later id equals let's say my text and i will add a line break at the end now we do have a text field but we'll need some way to submit our name so let's create a button right after our text field so we'll need opening and closing tags for a button within the opening button tag i'm going to set type equals button and give this button a unique id id equals my button and between the button tags what we want our button to say let's say submit so i'm going to save this so we have a label a text field and a button and that is everything we'll need for our html file we'll take care of everything else within our javascript file now so just be sure that you save and head to your javascript file what we're going to type is document document is referring to our dom our document object model basically when a web page is loaded the browser creates a dom a document object model which is a representation of an html document by typing document we're making a reference to our html document so to say so type document dot get element by id we're going to get the id of our button which we set to my button so this is a method we'll add a set of parentheses and then within quotes type the name of your button the id which we set to my button so buttons have a property of on click so when we click on our button it's going to do something so we will add equals function parenthesis and then a set of curly braces we haven't talked about functions yet but we will in a future video now if i can sum up what a function does it's going to perform some task for us whenever it is called so what we'll do is take a variable let's say var my name and we are going to set this equal to document dot get element by id and this time we're going to get the id of our text field which was my text so within parentheses and quotes we will set this to my text and we need to access the value so add dot value now basically what we're doing here is that whatever we type into our text field when we click on our button we're going to get the value from our text field and assign it to this variable of my name and then we can use my name for something so let's log this to our console by using console.log we'll say hello comma my name and this should work now let's test it so enter your name i'm going to type in let's say bro code then submit hello bro code so those are two different ways to accept user input there's still more but those are two basic ways for beginners now if you would like a copy of all this code i will post this to the comments section down below but yeah those are two different ways to accept user input using javascript hey what's going on everybody it's you bro hope you're doing well and in this video we're going to discuss type conversion in javascript so sit back relax and enjoy the show all right we're back at it again in today's video we're going to discuss type conversion of numbers strings and booleans there's explicit type conversion and implicit type conversion in this video we're going to focus on explicit type conversion now type conversion is the ability to change the data type of a value to another data type here's an example of why we may need to use type conversion at times take the small program for example we have variable edge we will ask the user for their edge display the words happy birthday increment their edge by one and then display the user's new edge let's try it let's say that i'm 18 years old i will select ok happy birthday my new age is 181 years old so how did this happen exactly well when we accept user input we will take that user input and store it as a string a series of characters so my edge variable is a string when we add one we're tacking on one to the end of our string so we can actually check the type of a value or variable by using the type of operator so let's use console.log type of edge so our edge is going to be a string because when we accept user input we will store it as a string but we need to convert it to a number so that we can increment our edge by one and there is a function to do so let's say edge equals number so number is a built-in function and we can pass in a value or variable we're going to convert our string of edge to a number so now this should work as intended enter your age i'm 18. happy birthday the data type of our variable age is a number and that value is 19. so to convert a value or variable to a number we can use this explicit type conversion of number to convert that value or variable to the number data type now here's a slightly different example we're going to convert a number to a string this time we have variable myvar and i'm going to convert the number 3.14 to a string by using the built-in string function so the type of myvar is a string and it contains the string representation of 3.14 so that's how to convert a number to a string all right now this next type conversion is somewhat strange we're going to convert numbers and strings to booleans a boolean is only true or false and there are certain values that will be converted to false everything else will pretty much be true so here are the different numbers and strings that will be converted to a false boolean value so if you convert the number zero to a boolean that will come up as false same goes with an empty string no undefined n a n which stands for not a number so pretty much any other value will come up as true for example one the word false actually comes up as true and even the word pizza so pretty much everything besides those five original values will come up as true if you convert it to a boolean value all right everybody so that is type conversion we can convert numbers to strings strings to booleans booleans to numbers so on and so forth if you would like a copy of all this code i will post this to the comment section down below but yeah that is type conversion in javascript yo what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain functions in javascript so sit back relax and enjoy the show all a function is is that it's a block of code designed to perform a particular task or procedure i like to think of it like a subroutine and we invoke or call a function whenever we want our function to perform its task but we need to first define what we want our function to do and to create a function this is what we do we type function and then we need a name for this function let's create a function that will just say hello something very basic function say hello then add a set of parentheses then a set of curly braces and then a semicolon at the end anything between this set of curly braces is referred to as the body of our function and whenever we call or use this function it's going to perform any code within its set of curly braces so let's just log a message to our console console.log i'll just say the word hello now to call and use this function we just type the name of the function followed by a set of parentheses and that's it let's try it so this will display the word hello i could call this function as many times as i want so let's display the word hello two times three times four times you get the idea and you're not limited to just one line of code basically you can write like a whole program within the body of a function so let's say console.log hello then have a nice day and lastly maybe goodbye goodbye okay let's try it again since we called this function four separate times we performed any code within the body of this function a total of four times so we displayed hello have a nice day and goodbye four separate times if we only called it once we will only perform the subset of code only once now with functions they have access to any variables outside of the function let's say we have a variable my name and set the sequel to whatever your name is so our function actually has access to it because it has what is known as a global scope anything that is declared inside of a function is considered to have a local scope i'll create a separate video on global and local scopes so let's say hello my name and then i need to call this function say hello so this will display hello bro or whatever your name is so functions have access to anything that is global anything that is global is declared outside of a function basically but that might not always be the case we can always pass values or variables to a function in order for that function to use them so when you call a function you just list a value or a variable here let's say i would like to pass in my name when you send values to a function these are known as arguments not to be confused or mixed up with parameters so i will pass my name over to say hello but i need a matching set of parameters so i'm also going to list my name here as well so if this variable was not global well then that's another way in which we can access this variable and this will display hello whatever your name is too now you can also pass just a value let's say bro and that would work as well and you can send more than one value too so let's say we have an edge i'll say bro and then 21. so i need a matching parameter as well let's say my name and my age and you can name these parameters whatever you want think of it like a nickname for these values that it receives inside of the function and i will display another message console.log u r comma my edge years old hello bro you are 21 years old so arguments are the values or variables that you send to a function but with your function you need to have a matching set of parameters and the name of the parameters really doesn't matter you can change these names if you want to but you just have to make sure that they match we could say instead of my name just name and age that would work too and one feature available with functions is that we can return a value back to the spot in which we originally called a function by using this return keyword at the end of our function we can return some value variable or we can even write an expression here so let me give you a demonstration with a completely different example let's say that we would like to write a program that will convert fahrenheit to celsius so let's create a function that will take care of that for us function to celsius is a good name we're going to pass in a value as fahrenheit since we're receiving one value as an argument we need a matching parameter so let's say f short for fahrenheit then we need a set of curly braces for the body of our function and then end with a semicolon so let's say var result equals then here's the formula to convert from fahrenheit to celsius f minus 32 times five divided by nine and then we are going to return whatever our result is however you can write this using one line of code instead of storing the result within a variable named result we can just return our expression whatever value our expression evaluates to so i'm going to return the result of our expression here this is also valid okay now when we call to celsius and let's pass in maybe 100 degrees fahrenheit now when i run this this won't appear to do anything that's because our function is returning our value to the spot in which this function is called so we can do something with this value that is returned so let's store it within a variable let's say var my temp short for my temperature so when we call our function it's going to assign whatever value is returned into this variable of my temp and let's display whatever my temperature is using the log method of console console.log let's print a message to my temp in c is comma my temp comma degrees okay so 100 degrees fahrenheit converted to celsius is about 37.7 degrees now with functions you definitely can have more than one let's create a separate function a second function to convert from celsius to fahrenheit so let's declare that function function to fahrenheit there will be one parameter which we will call c then curly braces semicolon at the end and we will return here's the formula so it's going to be c times 9 divided by 5 plus 32 so let's call 2 fahrenheit and pass in 37.7 that should give us a temperature in fahrenheit pretty close to 100 so let's call 2 fahrenheit and pass in 37.7 degrees celsius my temp in f for fahrenheit is 99.86 degrees well everybody in conclusion a function is just a block of code that is designed to perform a particular procedure or task for us whenever it is called and when you call a function you can also pass values or variables to a function these are known as arguments but your function is going to need a matching number of what are called parameters and lastly you do have the option of using this return keyword at the end of a function to return a value variable or the result of an expression back to the spot in which you call a function now if you would like a copy of this code i will post all of this to the comments section down below but yeah those are how functions work in javascript hey what's going on everybody it's bro hope you're doing well and in this video i'm going to explain objects in javascript so sit back relax and enjoy the show okay welcome back all an object is is that it's a representation a container for properties and methods and we can create objects that mimic things in the real world via programming so for example we're going to be creating human objects a human is a complex thing an object has properties and methods properties are the values variables that describe what an object has like a name humans typically have a name and an edge and methods which are functions that belong to objects and they describe what an object can do for example humans have the ability to eat it's kind of like a verb what kinds of actions can humans perform so that's what a method is it's a function that belongs to an object and an object can perform that method whenever we call it now creating an object is much like creating a variable in the beginning let's say var human because we're going to create a human object but you can create all sorts of objects like cars computers whatever so let's say var human equals a set of curly braces now anything between these curly braces is owned by our human object and our human object can have properties and methods what this object has and what this object can do and be sure to add that semicolon to the end so let's begin with a name we'll create a name property now with properties they are in unique key value pairs so let's say name then colon it's easy to place equals here but we'll want to place colon then we can give our human a name property so let's say his name is rick like from rick and morty and instead of adding a semicolon to each property we're going to add a comma so for the next property let's say age age colon comma and let's add a few methods what can rick do so he can eat so to create a function within here let's say eat colon function and when we call this function let's log something to the console rick is eating food and if you need to add more functions make sure to add a comma at the end of each function so let's create a drink function next rick can eat and he can drink so drink colon function console.log rick is drinking alcohol burp and he can sleep so let's create a sleep function sleep function console.log rick has passed out okay so we should be good and on the last function you do not need a comma okay now how do we access our object so it's easy to think we can use console.log and then place our object here right so i'm going to place the name of our object human and we'll display it to our console so you can see here we get a jumbled mess what we need to do is access specific properties from this object now there's two ways to access an object's properties you can use either dot notation or bracket notation to use dot notation you type the name of the object dot then the name of the property so i would like to access human's name so human dot name that is dot notation the other notation is bracket notation you type the name of the object straight brackets then within quotes then the name of the property so this is known as bracket notation and we really won't use this until later but we'll stick with dot notation for now so you can use either one so let's access human's name so human dot name or if you want you can use bracket notation so if i log human's name this will display rick now let's try age so console.log the name of the object human dot age and rick is 65 years old now let's call one of the functions so human the name of the object dot then the name of the function we would like to call so let's have rick uses eat function now to call a function you add a set of parentheses rick is eating food let's have rick drink human dot drink rick is drinking alcohol burp and let's have rick sleep so human dot sleep rick has passed out now you can create more than one object so let's create two human objects but i'm going to rename human as human one because we're going to create human too so i'm just going to rename any instance with human with human one okay i'm going to copy everything i have for human one and then paste it so let's say human too and human 2 doesn't necessarily need the same properties and methods so let's say name is morty morty is 16 and each of these functions will still be the same but they will display a slightly different message so let's say morty is eating food morty is drinking baby water and morty is asleep okay so i'm going to copy everything i have here and then paste it and just change human one to human two okay let me save and now at this point we're accessing human two's properties and calling human two's methods so human two's name is morty he's 16. when we use the eat function morty is eating food when we call drink morty's drinking water and when human 2 sleeps it will display morty is asleep so basically that's all what an object is it's a container for properties and methods properties are the values and variables that describe what an object has like a name or an edge and methods are functions that belong to an object they describe what an object can do what kinds of actions can this object perform such as eating drinking and sleeping so those are objects if you would like a copy of all this code i will post this to the comments section down below but yeah those are how objects work in javascript hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain arrays in javascript so sit back relax and enjoy the show all an array is is that it's a special variable that can store more than one value with standard variables they are limited to storing only a single value however with arrays they can store many so let's say we are working with car names we can create an array to represent maybe like a parking lot or a garage or something so to create an array let's say var and we need a name for this array so let's save cars because we're holding car names we're going to say var cars equals now to create an array we need a set of straight brackets and we're going to place all of the different values that we would like to store within our array within this set of straight brackets so let's say we have maybe a mustang pick a total of three different cars you would like to store within your own array and separate each value with a comma so let me pick two other cars how about a corvette and then lastly what about a jaguar okay so i have my three cars now we have successfully created an array named cars now check this out what if i was to display my array via the log method of console so this is our array and it's a little difficult to read and understand this will list all of the different values that are stored within this array plus the length and some other stuff that we don't quite understand yet so if you need to access a certain element a certain value within this array you need to list the index number as well as the name of the array so each spot or space within our array is referred to as an element i like to think of it like a parking spot number and you need to list the parking spot number along with the array name so with computers they always start with zero the first parking spot the first element will have an index number of zero if i need to access this first element within an array i will type the name of the array in this example cars followed by the parking spot number as in the index number so i will follow this with a set of straight brackets and then zero because the first spot is always zero so this will display my mustang now let's just follow that pattern so logically the next element in our array would have an index of one and that would be our corvette and then the element at index of two would be you guessed it our jaguar now if you attempt to access an element that does not exist so we only have three elements within our array so the max size of our index should be two but if we attempt to access the value at index three well then this is going to be undefined so if you need to add an element to your array you can use the push method of an array so let's say cars dot push and then we will pass in a new car to add so let's say we would like to add a tesla so to add an element to an array you can use the push method so then let's log console.log cars at index of three and we should have a tesla now which we do now if you need to remove the last element of an array you can use pop cars dot pop and that will remove the last element of an array okay so use push to add an element and pop to remove the last element if at any time you need the length of an array as in how many values are stored within an array you can use the length property of arrays so you type the name of the array followed by dot lane and this will return a numeric value what i'm going to do is assign this to a new variable let's say var number of cars equals cars.lane and then i will display this console.log number of cars so remember that we added a tesla and then we removed it via the pop method so we should have a total of three our mustang our corvette and our jaguar so the length of our array cars is three with that being said to get the length of an array type the name of the array followed by dot length and length is a property so if you need to sort an array alphabetically you can use the built-in sort method type the name of the array followed by dot sort and make sure to add that set of parenthesis to the end to actually call this method so i'm going to reassign this to cars cars equals cars.sort and this will sort my array alphabetically so remember we have our mustang first then our corvette then our jaguar so let me display my array after we sorted using this log method console.log cars but now we have our corvette then our jaguar then our mustang it's all in alphabetical order so you can use the sort method to sort an array either alphabetically or numerically oh and another thing i know that somebody's going to ask how to reverse sort an array and here's how so type the name of the array dot and use the reverse method and then add that set of parentheses to actually call it so we have our corvette our jaguar then our mustang but now we have our mustang our jaguar then our corvette so to reverse sort an array use the reverse method now let's say that we need to access the last element of an array but with arrays the size can change so if we say cars at index 2 well if we add an extra car well then cars at index 2 would no longer be the last element of an array it's going to change dynamically so here's how we can reliably access the last element of an array even if we update it via the push method so just to avoid some confusion i'm going to turn these lines into comments so currently the order of our array is mustang corvette jaguar so to access the last element of an array let's say we have a variable variable last car equals we'll type our ray cars at index cars dot length minus one so then let's display our last car console.log last car and it should be our jaguar well everybody in conclusion an array is a special variable that can hold more than one value with standard variables they can only store a single value however with arrays each spot or space is known as an element to access a certain value within an array you need to list the array name followed by an index number kind of like a parking spot number that's how i think of it at least with that being said i will post all of this code to the comment section down below don't forget to give this video a thumbs up and leave a random comment i really do appreciate it and well yeah those are how arrays work in javascript hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain if statements in javascript so sit back relax and enjoy the show all an if statement is is that it's a basic form of decision making if some condition that we specify is true then we can have our program do something if not then we won't do it it's as simple as that let's say that we have a variable edge and i will set this to let's say 18. let's write an if statement to check to see if somebody is 18 or older we'll check to see if they're an adult so to write an if statement type if then we need a set of parentheses to hold a condition if this condition is true then we will perform any code found within a set of curly braces immediately following our if statement so let's say if age is greater than or equal to 18 so there's different comparison operators that you can use you can do greater than less than less than or equal to greater than or equal to there's also equals two and you need two equal signs but we'll get to that later so we would like to check to see if somebody is greater than or equal to 18 if they are we will perform a block of code found within a set of curly braces after our if statement so let's just print a message to the console so let's say console.log u r an adult so if our age variable is greater than or equal to 18 if this condition is true then we will perform this block of code we will have our if statement do something if not then we won't do it so since our age is equal to 18 this condition is true and we will display this message you are an adult but what if we were less than 18 let's say we are 12 well then we are not going to execute this if statement and you can see here that nothing happens now currently with this if statement if this condition is false then we won't do anything it is also possible that you can have your program do something else by adding an else statement so type else and then a set of curly braces if this condition is false we won't just do nothing we'll do something else so if somebody's age is greater than or equal to 18 we will log or display this message you are an adult if not then they are probably a child so let's display a message using console.log you are a child this time instead of doing nothing we're going to do something else by using this else statement now in place of doing nothing if your condition found within the if statement is false you will perform any code found within an else statement so since our age is not greater than or equal to 18 we displayed this message you are a child now it is entirely possible to check more than one condition to see if it is true before reaching an else statement you can add multiple else if statements so let's check to see if somebody's age is greater than or equal to 65 by using an else if statement and then we write a condition so after checking to see if somebody's age is greater than or equal to 18 let's check to see if their age is greater than or equal to 65 before reaching our else statement so if that is the case let's display a different message you are a senior and before we forget we should probably change the value found within our age variable so let's change this to perhaps 80. now check this out the message that displays is you are an adult but what gives isn't our age greater than or equal to 65 shouldn't it display you are a senior well the way that if statements work is that we begin by checking our first condition if this condition evaluates to be false we move down to the next condition if there is any currently our age is 80 since this if statement our first condition is true we execute this block of code and skip everything after it we skip it entirely so even though age is greater than or equal to 65 we checked this condition first and since this evaluated to be true we skipped the rest of our if statements are if else statements so a better way of writing this is that we should check to see if somebody's edge is greater than or equal to 65 first before checking to see if it's greater than or equal to 18 so let me move these statements around so let's check to see if somebody's age is greater than or equal to 65 first before checking to see if they're greater than or equal to 18. so let's change this to else if and now this should display you are a senior and with these else if conditions you can write more than one let's add another so let's say else if age is less than zero so let's display a message such as you haven't been born yet okay let's change somebody's age to negative one you haven't been born yet so with if statements if a condition is true you perform any block of code found within the immediate set of curly braces that follow if this condition evaluates to be false we just move down to the next condition if there is one if not then we perform any code found within an else block if there is an else block so our else block is kind of like a last resort if all conditions if there are any are false then we perform whatever code is found within an else statement if you have one here's another example this time we're going to create a boolean variable let's check to see if somebody is online or not kind of like an online status so with boolean values they can only be true or false there are only two options so let's say that somebody is online so let's check to see using an if statement if somebody is online now we're going to use double equals this is the comparison operator if online is equal to true now the reason that you don't use a single equals is that this is an assignment operator this condition is no different from assigning online to be true so to check to see if some variable is equal to some value you use the comparison operator which is double equals so if somebody is online let's print a message console.log let's say bro is online else let's display console.log bro is offline so currently our variable online is set to true therefore this condition is true bro is online if this was false then this will display bro is offline now there is a shortcut if you're dealing with boolean values you can just say online because this would technically evaluate to be true or false so if online is equal to true we can just check to see if online so that's kind of like a shortcut too so everybody in conclusion an if statement is really just a basic form of decision making if some condition is true then your program can do something if not then it won't do it and you can have your program do something else if your condition evaluates to be false so if you would like a copy of all this code i will post all of this to the comments section down below but yeah that is how if statements work in javascript yo what's going on everybody it's you bro hope you're doing well and in this video i'm going to discuss switch statements in javascript so sit back relax and enjoy the show all right guys and gals we're talking about switches today a switch is a statement that evaluates a value or expression and matches that value or expression to many case clauses it's more efficient than using many else if statements here's an example let's say that we're going to compare a letter grade like a letter grade that you would earn in school so we have var grid and i set the sequel to f because i earned a lot of f's in school now here's what not to do let's say we have a bunch of else if statements depending on what our grade is we'll display a custom message if our grade is equal to an a we'll display this message you did great if it's a b you did good if it's a c you did okay if it's a d you did not do that well if it's an f you failed else will print grade is not a letter grade so that means they're not using one of these symbols now even though this program would work as intended it's not that efficient to use a bunch of else if statements consecutively a few is fine but you do not want to use a lot if a pro programmer sees you do something like this they will probably call you a noob it would be much more efficient to use a switch statement instead we can evaluate a value or the result of an expression to many case clauses which is way more efficient than using a bunch of else if statements so let's write the same exact program but use instead a switch statement so let's get rid of all this but we will keep our variable grid so to create a switch we type switch uh do not spell it like that switch then a set of parenthesis then we will list our value or expression within this set of parenthesis so we would like to examine our grade and then add a set of curly braces for the body of our switch now we compare this value to a bunch of case clauses the first case let me just get the indentation right is case and then what do we want to compare our grade to i'm going to compare our grid to a then colon and then we can follow with a block of code so if our grid is equal to a what do we want to do so let's display the message you did great now be sure to end each case with a break so that we can break out of the switch statement so now we can move on to our next case and i'm just going to add a few lines here okay so case b so if our grade is b let's display a different message you did good and then be sure to break at the end okay kc case c console.log you did okay then break case d console.log you did not do that well and then add a break at the end case f console.log you failed and break okay let's try it currently my grade is f let's change it to a and try it you did great let's change it to b you did good see you did okay d you did not do that well and lastly f you failed no you can add a default at the end so how this works is that if there are no matching cases you will execute any code found underneath default so let's display a message console.log let's say grade is not a letter grade so that means that somebody is not using a b c d f let's change our letter grade to maybe the word pizza now since pizza does not match any cases we will perform whatever code is found underneath this default clause pizza is not a letter grid now the reason that we add break after each of these cases is so that we can break out of our switch let me show you what happens if we remove all of these break statements okay so let's say that our letter grade is a so basically if we do not break we're going to execute everything that comes after our matching case we do not stop until we reach the end in conclusion a switch statement evaluates a single value or the result of an expression to many case clauses if there are any matches we will execute any code found underneath that case and to exit the switch you'll want to be sure to add this break statement it's way more efficient to use a switch than a bunch of else if statements if you would like a copy of all this code i will post this to the comment section down below feel free to give this video a thumbs up and well yeah those are switch statements in javascript hey what's going on everybody it's you bro hope you're doing well and in this video we're going to discuss logical operators in javascript so sit back relax and enjoy the show okay let's do this thing logical operators they can be used to write more complex conditions there are three we're going to discuss and or as well as not but let's begin with and the and logical operator can check more than one condition if both conditions are true the entire statement or condition is true here's an example let's say we're going to write a program to check the temperature and display a custom message based on the temperature so let's say we have a variable temperature and i'll set this to 15 degrees celsius so this is how we can use the endological operator let's begin by checking to see if the temperature is greater than 30 so remember that this is in celsius so that is fairly hot so if our temperature is greater than 30 let's display a message it's hot outside else will display it's cold outside it's cold outside currently our temperature is 15 degrees celsius which isn't too bad i would say that's warm so how can we check to see if our temperature falls within a certain range well we can easily do so using the and logical operator so let's add an else if statement so we're going to write two separate conditions within our set of parentheses we're going to check to see if our temperature is greater than let's say zero and is our temperature less than or equal to 30. so if at least both of these conditions is true then this entire statement this entire condition will be true if one of these is false well then the entire thing is false so if our temperature falls within the certain range between 29 and 1 well 31 technically then we will display the message it is warm outside console.log it is warm outside okay so now our temperature is 15 degrees celsius it is warm outside our temperature is above zero and our temperature is less than or equal to 30. so if this was let's say 35 well then this first statement is going to be true if our temperature is less than zero like negative 10 well then even though this part of our condition is true this part is false and using the and logical operator both conditions must be true in order for us to execute this code so that's kind of how the and logical operator works both conditions must be true in order for this entire statement to be true so let's move on to the or logical operator next up next we have the or logical operator this will check to see if at least one of two conditions is true so let's write a program to check to see if it's light outside or dark outside based on the hour this will be in military time var hour and i will set the sequel to 20. so that is about 8 pm then and this is in military time so let's check to see if our is less than six six in the morning so it should be before sunrise then hour is less than six hour is greater than or equal to 20. so 20 is about 8 pm so if at least one of these conditions is true we will execute this block of code let's display a message console.log it's dark outside else console.log light outside okay currently our time is 20. therefore it's dark outside if our time was let's say eight eight in the morning well then it's light outside so neither of these conditions is true hour is not less than six and hour is not greater than or equal to twenty therefore since no condition is true this entire statement is false then and we execute this l statement now if hour was 5 as in 5 in the morning well it's dark outside using the or logical operator if at least one of these conditions is true then we will execute this block of code and lastly we have the not logical operator this will reverse the boolean value based on what a condition evaluates to so here's a completely different example let's say we are going to accept some user input var my name and we will ask a user to type in their name window dot prompt enter your name so what if somebody just clicks okay this will assign an empty string to the variable my name and we can check that if my name is equal to a set of quotes that is an empty string then we'll display a message console.log you did not enter your name let's test it enter your name i'm going to press ok without entering a name in you did not enter your name so how can we check to see if my name is not an empty string well one we can use the not comparison operator which is an exclamation point then equals or the not logical operator so if we take that root it would be we'll surround our condition with a set of parentheses and then precede this first set of parentheses with an exclamation point whatever this condition evaluates to we're going to reverse the boolean value if this condition evaluates to be true then by preceding this condition with the not logical operator we're going to flip it to its opposite which would be false if it's originally false we'll flip it to be true then so by using the not logical operator in this scenario we're checking to see if somebody's name is not an empty string so let's write a more appropriate message let's say console.log hello my name then we'll write an else statement else console.log you did not enter your name so let's try it enter your name i'm just going to press ok without typing in anything you did not enter your name but if i were to type in a name this time this will display my message hello whatever your name is so that is the not logical operator it will reverse the boolean value of a condition and you can use it to check things like is something not true so that's one use for it all right everybody so in conclusion logical operators are used to write more complex conditions there's and or and not and we'll check to see if both conditions are true if you have two or more or we'll check to see if at least one condition is true and the not logical operator will reverse the boolean value of that condition based on what it evaluates to so if you would like a copy of all this code i will post this to the comments section down below but yeah those are logical operators in javascript yo what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain while loops in javascript so sit back relax and enjoy the show all right people what's up we're talking about while loops today a while loop repeats some code while the loops condition remains true so do you know those tech support scams that pop up with a message that say your computer has a virus enter your credit card info or something well we're gonna make something like that for fun don't actually do that to anybody though we'll begin by declaring a variable credit num for somebody's credit card number and let's say window dot prompt and we will display a message and ask for some user input your computer has a virus enter your credit card info dot dot or else now let's take a look at how this works so we have a prompt here that says your computer has a virus enter your credit card info or else so if i was to click ok well then that will get rid of our prompt but what if we would like to continually have this prompt appear well we can easily do that using a while loop so let's type while then we need a set of parentheses for a condition and then a set of curly braces for the body of our while loop so we need some sort of condition let's say while credit num is equal to an empty string a set of quotes that means that somebody just clicked ok without entering in anything our code works from the top down once we enter this while loop we're going to check this condition if this condition is true we will execute this body of code once and then check our condition again if it is still true we repeat the process over and over again until we escape this while loop so for the body of our while loop let's ask for their credit card number again so let me copy this and paste it now we'll need some sort of indicator to let us know that we escaped the while loop so let's display a message console.log thank you your computer no longer has a virus okay so let's try it your computer has a virus enter your credit card info or else i'm just going to select ok and you can see that this prompt keeps on appearing until we enter in something so let's type just a bunch of numbers thank you your computer no longer has a virus basically what we did is that once we reach our while loop we check the condition if this condition is true we execute this body of code once and then we check our condition again if it's still true we repeat the process over and over again until this condition is no longer true so it's possible we can execute this code infinitely now there is a variation of this while loop known as a do loop or a do while loop basically with this while loop the condition needs to initially be true in order for us to enter this loop however there is a different way of writing this and that is by using the do loop so we would write something like this do curly braces then our while loop and its condition so let me copy this and let me copy all of this as well so basically with this do while loop we do not check the condition until the end of the while loop we will always execute this block of code at least once and then we check our condition to see if it's true so if we take things this way well then we're writing the same program using less lines of code and it behaves the exact same way as it did before so in conclusion a while loop repeats some code while the loop's condition remains true you can use the standard while loop that will check the condition before entering the body or you can use the variation of the do loop or the do while loop where we execute the body first and then check the condition so if you would like a copy of this code i will post this to the comments section down below and if you do actually use this to try and scam people well then bro says you're an and well yeah that's how the while loop works in javascript hey what's going on everybody it's you bro hope you're doing well and in today's video we're going to discuss for loops in javascript so sit back relax and enjoy the show okay welcome back we are back at it again and we're talking about for loops today a for loop repeats some code a limited amount of times it's like a while loop but it doesn't last infinitely so there are three optional statements that we can place within a for loop we can declare an index this works as a sort of counter to keep track of how many times that we've repeated this for loop a condition this condition is necessary we need to know when to stop this for loop and then a step how much do we want to increment or decrement our index by let's say that we would like to create a program to count up to 10 for some reason here's how we can do so type 4 a set of parenthesis and then a set of curly braces for the body of our for loop and now within the parentheses of our for loop we have three optional statements so the first is that we can declare an index that will keep track of how many times that we've repeated this for loop so let's say let and you'll want to be sure to use let and not var to create your index let index but some people shorten this to just i short for index let i equal 0 then a semicolon that's our first statement next comes our condition we would like to continue this for loop as long as i is less than 10. and lastly our step how much do we want to increment our index by after each iteration of this for loop you can increment or decrement so let's increase i by one there are two different ways in which we can do this we can say i plus plus or i plus equals one you can really do it either way but commonly you see people use i plus plus kind of like a shortcut so this for loop is going to repeat a total of 10 times and let's just display whatever i is console.log i so this will count the numbers 0 through 9 technically but it's going to repeat 10 times after running this program we executed this for loop ten times the index began at zero and stopped once this condition was no longer true once i was equal to or greater than ten so if you would like to count from one to ten we could say that i our index equals one and we will continue this for loop as long as i is less than or equal to ten so that's how you can count from one to ten using a for loop now you can change the step let's say that we would like to count by two we would write something like this for our step i plus equals two and now we're counting up by twos beginning at one or we can do three or four you get the idea now you're probably wondering how can we count down let's say that we're counting down the seconds to a new year let's begin at 10 and count down to zero and display a message such as happy new year here's how you can do so four then we need our index let i equal ten semicolon what's our condition i is greater than zero semicolon then our step i minus minus two decrement and we will display whatever i is after each iteration and then once we exit our for loop let's display the message happy new year happy new year let's try it now we iterated this for loop a total of 10 times we set our initial index to be 10 after each iteration of this for loop we decremented our index by one using i minus minus then once our condition is no longer true then we exit this for loop we began at 10 count it down to one and then exited the for loop to display our final message of happy new year so that's how to count down using a for loop now with these statements two of these you can omit you can use an index that already exists so let's declare our index outside of our for loop let's say let i equal 10 and you technically don't need this statement but you do need that semicolon so this would work and you also don't need the step within your for loop within the parenthesis you can also place that within the body so let's get rid of that be sure to keep the semicolon though then at the end of our code we'll decrement i by one so that would work as well you technically don't need to declare an index and a step when you create a for loop but you'll probably need them someplace at least so in conclusion a for loop will repeat a set of code a limited amount of times it's different from a while loop because a while loop could execute infinitely if its condition remains true a for loop will only execute a limited amount of times so if you would like a copy of all this code i will post this to the comment section down below but yeah those are four loops in javascript all right people a four in loop a four in loop is a loop that will loop i can't say that with the straight face it's a loop that will loop through the elements of an array or the properties of an object we'll compare and contrast the differences between the two so i have an array of letters h-e-l-p i need to iterate and display the elements of an array if i were to use a traditional for loop that would look something like this so for then we need our index let i equal zero i will continue this for loop as long as i is less than letters dot length and i will increment i by one so within this for loop i will display letters at index i so this does work but there's a lot of overhead another way of writing this is that we could use a for in loop so that would look something like this so for this part's the same except we don't need all of this overhead we would write let i or some index in our array letters then during each iteration i will display console.log letters at index i and this for in loop would do the exact same thing without having to write all of this code so the benefits is that there's less syntax to write however it's less flexible than a traditional for loop with a traditional for loop we can increment we can decrement we can even skip iterations with a four in loop we will iterate once for each element within a collection an array or even the properties of an object so this time let's create an object because we can loop through the properties of an object so of course we're going to use a car for this example let car we need a make of course i'm going to pick a chevy then model corvette a year 20 22 and a color blue okay so let's use our for in loop to iterate over the properties of our object so that would be four then let maybe property in car then during each iteration console dot log car at index of property so yeah there you go well in conclusion a fort in loop is a loop that will loop through the elements in an array or the properties of an object there's less syntax to write but it's less flexible than a traditional for loop so if you would like a copy of this code i will post this to the comment section down below give this video a thumbs up a random comment down below and well yeah those are for in loops and javascript hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to give you all an example of a nested loop in javascript so sit back relax and enjoy the show all right nested loops a nested loop is really just a loop inside of another loop we're going to create a program using nested loops to print a 2d matrix of symbols to a webpage so we'll need some user input so let's say var symbol equals window dot prompt and we will ask the user for a symbol to use enter a symbol to use so our rectangle our 2d rectangle is going to be made of whatever symbol that we type in let's ask for a number of rows var rows enter number of rows and then columns var columns enter number of columns now let's work on the outer loop that is in charge of the rows for parentheses curly braces we'll need to declare an index let i equal zero we will continue this for loop as long as i is less than the number of our rows and we will increment our index by one after each iteration so that is the outer loop let's work on the inner loop and honestly i could just copy this and then paste it but we'll need to change our index so a common convention with a nested loop is that people will name the index j because j comes after i i guess so let j equal zero j is less than columns and j plus plus okay so let's test this we're just going to print something to our console to begin with just to be sure that it works so let's display our symbol and let's test it enter a symbol to use how about the at sign okay number of rows let's say three number of columns how about four so this is what it looks like within the console not what we expected it's just saying that we printed the at sign 12 times but the purpose of this program is to print a rectangle to our web page so we know that these for loops work at least which is what we wanted so let's change this program around so that will print something to the webpage a grid a matrix of whatever symbol that we choose so let's head to our index.html file and pretend this wasn't here so within the body of your html file but before your script elements we can add an h1 header tag which will function as some basic text so let's create an h1 header tag and i will give this header tag a unique id let's say my rectangle but the name doesn't matter too much and then end it okay so then let's save and then head to our javascript file now to add some text to our web page we can refer to the dom document and we will add this line of code into the inner for loop document dot get element by id and the id that we're going to get is the id of our h1 header tag my rectangle in this case dot inner html plus equals our symbol okay now let's take a look at it so far there's one more thing that we need to do but let's try it enter a symbol to use let's say dollar sign three rows four columns okay so we're getting somewhere but we have just one long row of our symbol three rows times four columns means that we should have 12 of our symbol but we need to add a line break after each row so here's how we can do so after we exit our inner for loop we can print a line break so let's copy everything that we have here within the inner for loop and within the outer for loop but after the inner for loop let's add plus equals a line break so within quotes and within angle brackets let's add br for a line break and try it again okay enter a symbol to use dollar sign three rows four columns boom there we go we have a total of four columns one two three four and three rows so basically with this inner for loop we need to complete all of the iterations of this inner for loop before we can escape and then we can complete one iteration of our outer for loop so that's kind of how a nested loop works it's a loop inside of another loop but when you'll run into these it's kind of situational so if you would like a copy of all this code i will post all of this to the comments section down below and well yeah that's an example of a nested loop in javascript yo what's going on everybody it's you bro hope you're doing well and in this video i'm going to show you all a few different useful math related methods and constants plus at the end of this video we're going to write a program to find the hypotenuse of a right triangle so sit back relax and enjoy the show alright people i hope you like math because i sure as hell don't so math is an object that provides basic mathematics functionality and constants so here's a few math related methods and constants that you might be interested in so let's say we have a variable var my num and i'm just going to display this console.log my num okay so the first thing that we can do is that we can round a number let's say my num is equal to math.round and then we can round some number let's say 3.5 so 3.5 rounded would be 4. so that is how to round a number now we can always round a number down by using the floor method of math mynum equals math.floor this will always round a number down so if this was 3.9 rounded down this would be 3. now to always round a number up we can use the seal method of math mynum equals math seal and let's round 3.1 to the nearest whole number upwards and that would be four so seal short for ceiling will always round a number up to the nearest whole number we can raise a number to a certain power using math.pow short for power we need a base and an exponent so three for the base two for the exponent that will result in nine three to the power of two is nine what about three to the power of three well that would be twenty seven so that is the pow method we can raise a base to a certain power now let's find the square root of a number math dot s-q-r-t let's find the square root of 64. that should be it so that is the square root method here's another one you can find the absolute value of a number by using math dot abs and let's find the absolute value of negative one which is one now two extremely useful methods are both min and max using men we can find the minimum value from a bunch of different values so let's say we have one five two four and three so the minimum value from all of these different numbers would be one if we were to use the min method so what about max so the maximum value from all of these different values would be in this case five so those are two extremely helpful methods min and max using our math object there are some built-in constants too for example pi math dot pi and that would be 3.14 something something something something so that's one constant another is euler's number so that is e and that is 2.7 something something something something so if you ever need these numbers for any reason well they're available to you so just type math dot then whatever you need okay so i think that's enough for now let's create a program to find the hypotenuse of a right triangle because i said so i'm going to place the formula that we'll need for this program somewhere over here in this top right corner of my screen so the first thing that we'll need are three separate variables let's say var a var b and var c for each side of this right triangle and we'll accept some user input so let's say var a equals window dot prompt and we will ask the user to enter side a and let's do the same thing for b and we'll be calculating whatever c is enter side b okay then let's find whatever c is using our equation here we'll need to square both sides a and b and luckily we can use the pow function for that so let's take math dot pow a to the power of two plus math dot pow b to the power of two now we're going to surround both of these statements here with a set of parentheses and then we are going to find the square root using the square root method math dot square root and this will all be equal to c so that will calculate c for us and then let's display whatever c is console.log side c equals variable c okay let's try it so enter side a three side b four side c equals five so that is the end if you would like a copy of all this code i will post this to the comment section down below but yeah those are a few useful math related functions and constants in javascript hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to show you all how we can generate random numbers in javascript so sit back relax and enjoy the show all right everybody we're back at it again so just as a disclaimer these are pseudo random numbers and not true random numbers do not use this for anything security related but if you're making a game or something using javascript well then this would work perfect so let's say we have a variable var brand num and we would like to generate a random number and i will just display whatever this number is so console.log brand num now to generate a random number we can use the random method of math rand num equals random now this is going to generate a pseudo random number between zero and one and that has some uses now that's cool and all that we can generate a random number between zero and one but what if we would like to generate a random number between one and six like we're rolling a six sided dice there's a couple more steps what i'll do is just copy what we have here and we are going to multiply math.random times six so now we'll get a random number between zero and six but we still have this ugly decimal portion if we need a whole integer we can surround this statement with the math.floor method so let's say math.floor and surround math.random times six now we should have a random number between zero and five so if we need one through six all we need to do is add one so let me copy this paste it and then add one so this will generate a random number between zero through five and since we're adding one to this statement we'll generate a random number between one and six as if we're rolling a dice so let's try it so we have five four three one i'm just looking for six there it is okay so that's how to generate a random number between one and six and depending on what you multiply math.random by you can increase the range if we need a random number between 1 and 100 we would say math.random times 100 and we will get a random number between 1 and 100 so we can also create a function to generate a random number for us so that's always an option so let's say we would like to create a function to do this for us function let's call this get random num and there will be two parameters min and max for our range min max we will return math dot floor math dot random times max minus min because we need a range and then add plus one and then add plus min so this is now a reusable function and let's try it so rand num equals get random num and we need to send a range a min and a max if i need a random number between one and six as if we're rolling a dice i will pass in 1 4 min and 6 for max and we should have a random number between 1 and 6. and you can reuse this function too let's say we need three dice rolls so we'll just call this function three separate times for three random dice well alright everybody that is the random method of math it will generate a pseudo random number between zero and one but you can expand that and generate a larger range of numbers so if you would like a copy of this code i will post this to the comment section down below but yeah that is the random method of math and javascript yo what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain date objects in javascript so sit back relax and enjoy the show all right we're talking about date objects today a date object represents a moment in time since epic also pronounced as epoch so this is a reference point where your web browser thinks time began and we use it as a reference point and we determine how many milliseconds has passed since this point so to find our epic this is what we can do let's say date equals new date and then add a set of parentheses what we're doing is constructing a date object then pass in zero as an argument so this will find our epic and this should be a date that we can read so let's use console.log our date so my epic is wednesday december 31st 1969 at about 6 p.m so we can use this as a reference point to find our current date and time by passing in a numeric value in milliseconds what we're doing is creating a date object so many milliseconds since our epic so by passing in zero this will return our epic if i was to pass in let's say 1 million milliseconds well then we're going to have a new date this date really didn't change much it's just 6 p.m 16 minutes and 40 seconds let's try 1 billion that would be january 12 1970 how about one trillion september 8th 2001 and what comes after trillion quadrillion uh that is the year 33 658 so you kind of get the idea by passing in a numeric value these are the amount of milliseconds since our epic date and for me that's wednesday december 31st 1969 now to get the current date and time we would pass in no arguments so date equals new date then do not pass in any arguments so the current date and time is march 26 2021 about 2 p.m so if you need the current date and time pass in no arguments here's another way that we can construct a unique date object date equals new date and then we can pass in up to seven arguments beginning with the year the month the day hour minutes seconds the milliseconds be sure to at least add year and month because if you just pass in a year well then your day constructor is going to think that this is milliseconds so we have our year of 2022 what about a month so this is a range between zero and 11 so january would be zero february is one march is two then april is three in that order so let's say april that would be three then a day of the month what about maybe four so april fourth then we need hours let's say six pm so that's in military time zero through 23 so 18 is 6 pm then minutes maybe just 1 seconds 2 milliseconds 3 so our new date should display monday april 4th 2022 just after 6 p.m so that's one way in which you can construct a unique date object you can pass in up to seven arguments beginning with the year the month the day the hour minutes seconds and milliseconds if you really need it another option is that we can pass in a string representation of a date and or time let's say date equals new date and i will this time pass in a string maybe april 20th 2022 and for the time let's say 4 p.m so that would be 1600 4 minutes maybe 20 seconds perhaps 0-1 then if you really need milliseconds you can just add that too so our new date is wednesday april 20th 2022 about 4 p.m so you have a couple different ways of creating a date object you can pass in milliseconds since epic if you need the current time you pass in no arguments you can pass in up to seven arguments beginning with the year month day then hour so and so or a string representation of a date and or time so you have a couple different ways of creating a date object so with date objects there's some built-in get methods so that we can get a certain value from a date object so here i have variables year month day of the week day of the month hours minutes seconds and milliseconds so i'm going to use a get method of my date object to get each of these values that we need for each variable so i need to get the current year from my date object so i'm going to type date dot get full year and this is a method then i'll display this just to demonstrate console.log year so my year variable has a value of 2022 so that is the year from my date so this time let's get the month date dot get month then display it my month is three so remember that january is zero then february is one march is two april is three then all right next we have day of the week date dot get day this will return a value between zero and six sunday is zero and saturday is six so it is currently i think that is wednesday i believe all right then day of the month so day of the month is date dot get date so let's log day of the month so that is april 20th then hours date dot get hours i'll just speed run through these because they're kind of self-explanatory at this point then date dot get minutes four minutes then seconds is date dot get seconds and lastly milliseconds date dot get milliseconds and then i will just display these so we have day of the month hours minutes seconds then milliseconds and there are all the values from each of these variables so if you need a value from a date object you can use the associated get method of a date object so if you need the year use the get full year method if you need the hour date dot get hours not only are there various get methods to get certain values from a date object but we can use set methods as well to update and change some of these values let's change the year so to do that we would type the name of our date object dot set full year then pass in the new year as an argument so what about 2023 then let's change the month date dot set month pass in a value between 0 and 11 so maybe december that would be 11 then a day date dot set date what about christmas day that would be the 25th then hours is date dot set hours i'll pass in zero so it's midnight then minutes date dot set minutes i'll pass in zero again because i'm lazy then seconds date dot set seconds then milliseconds date dot set milliseconds and then i will display our date console.log date so my date will be updated and it is christmas 2023 midnight so in conclusion everybody a date object is a representation of a moment in time since epic our reference point if you would like a copy of all this code i will post this to the comment section down below but yeah those are date objects in javascript hey what's going on everybody it's you bro hope you're doing well and in this video we're going to discuss some useful string properties and methods in javascript so sit back relax and enjoy the show all right everybody in this video we're going to discuss some useful properties and methods related to strings honestly there's only one property we're going to discuss and the rest are just methods so let's say we have a variable my name and we will store a string store your full name whatever it is so the first property is length we can return the length of a string how many characters is it long so type the name your string my name dot and here's a bunch of different properties and methods they have access to so we are looking for the length property so the length of my string is that it is eight characters long and that has some uses but that'll come into play later so that is the length property next we can find the character at a given index within our string let's say console.log type the name of your string myname.char at and we need to list an index if we need the first character in a string char at zero the first character always has an index of 0 and in my case this would return the letter b the next index would be r and the second index would be o so that is the char at method we can return a given character at a certain index depending on what we pass in now next we have the index of method console dot log type your string my name dot index of and we can find the index of a given character if i would like to find any spaces i can just pass in a space so the index of any spaces within my string has an index of three zero one two three and that will come into play later so if i need to find let's say an o that would be at index two in my case this will only find the first index of whatever character that you pass in now on the other hand we can find the last index of we can find the last index of a character if i am looking for any o's well then since i have two instances of os within the string i will get the last index of said character so in my case we have an o at the last index of five zero one two three four five that is the last index of method now next we can trim any white space before and after a string so let me display the string console.log my name and i have all of this extra white space so if i was to use the trim method we can get rid of all that so that will get rid of any white space before and after your string the two uppercase method will make your string all uppercase so my name to uppercase and my name is all in uppercase alternatively we have lower kiss and my string will all be lower case then we're going to use string slicing i would like to slice the first name and last name from my string of name so to do that let's say we have a variable var first name equals my name dot slice and i need a beginning and ending index so let's say zero comma three so it's going to be different for you depending on what string you're using so in my case i need the first three letters i will slice characters 0 through 3 and then that will be stored within first name then i'll display it console.log first name let's take a look not too bad now placing just a number here is probably not practical considering that people are probably going to have different names so let's take a different approach let's copy what we have but we're going to change three to something else in place of three let's find the index of space zero comma my name dot index of so this will adjust dynamically so what if somebody has a different size name well this would work as well too now how can we use a similar process to find the last name so let's just practice by using some numbered arguments so i would like this to begin at index four and we don't necessarily need a second index it'll just be assumed that you would like to continue this string slice until the end so let's change first name to last name console.log last name okay so that will get my last name from my name string however we should probably use my name dot index of or better yet last index of because some people can have more than two names within their full name let's say that my full name is bro the code so i'm going to change this around a little bit so let's say var last name then the beginning index will be my name last index of space so that for this example we are looking for the last space and we will say that anything after will be my last name so var last name equals my name dot slice my name last index of space so this will get my last name however we have a little bit of a situation this space is inclusive with my slice so my slice will begin wherever there is a space to remedy that i can just add plus one to the index and that will get rid of that space character next on my list is string concatenation there is actually a dedicated method to string concatenation so let's say we have two additional variables my street and my city we're going to combine them together var my street equals and then make up a street like one two three fake street and var my city equals nowhere x y i'll make up a zip code too one two three four five okay so we're going to use string concatenation to combine both of these strings together let's say we have var my address and we will combine both of these strings so take my street dot com cat let's add a space comma then whatever string we would like to add my city and let's display my address console.log my address and my address is one two three fake street nowhere xy one two three four five so that is string concatenation you can use plus as well but this is a dedicated method too all right and lastly we can replace characters within a string we need a phone number this time var my phone equals 123-456-7890 so we will use the replace method to replace characters within the string let's say we would like to get rid of these dashes because they're annoying so to do that let's say my phone my phone dot my phone dot replace to replace a single character or replace all then we need two characters i'm going to replace all dashes with an empty string and we will display my phone console.log my phone so the replace all method will replace all characters that you set with a different character or an empty string if you need to get rid of them so that is the replace all method well everybody in conclusion strings have a bunch of different useful properties and methods there's still a lot more out there i've just covered a few of the more useful ones so if you would like a copy of all this code i will post this to the comment section down below and well yeah those are some useful string properties and methods in javascript hey everyone it's you bro hope you're doing well in this video i'm going to demonstrate method chaining in javascript so sit back relax and enjoy the show well method chaining method chaining is the act of calling one method after another in one continuous line of code here's an example of us using method chaining and capitalization we'll capitalize a username i'll show you two examples we'll capitalize a username without method chaining and then with method training and we can take a look at the differences between the two so first we'll need a username let user equals some username make it all lowercase though and i will display console.log my username okay so the first step to capitalize this string we'll need a few different methods so if we are not going to use method chaining we might have to write something like this we'll need a container for the first letter in the string let first letter equal user dot char then a char at index zero so we will store the first letter which is b within this variable first letter and in my case that would be b now we need to make this letter capital we'll need another line of code to take care of that first letter equals first letter dot to uppercase so this b is now uppercase and now we need to create a slice of our original username starting from index 1 and everything after it so user equals let's add our first letter as well letter plus user dot slice at index 1 and then we will display our username so my name is now capitalized now let's do the same thing but use method training this will take less lines of code it's going to be one continuous line of code so let me turn these lines into comments and we'll mostly follow the same steps as before we are going to assign user equals now we need the character at index zero user dot char at zero now with method training we will follow this method call with dot to uppercase and we need to add that slice starting at index one and everything after it plus user dot slice at index one so this portion right here is method chaining we are calling one method after another in one continuous line of code we start at the left and work our way to the right so this will work the same as it did before however it's done in less steps and there's no need to declare a variable to hold a temporary value so that's an example of method training it's the act of calling one method after another and one continuous line of code so if you would like a copy of this code i will post this to the comment section down below and well yeah that's method chaining in javascript yo what's going on everybody it's bro hope you're doing well and in today's video we're going to discuss the break and continue statements in javascript so sit back relax and enjoy the show all right ladies and gentlemen we are back at it again in today's video we're going to discuss the break and continue statements let's say that we have a for loop to count the numbers 1 through 20 but i do not want to count the number 13 because 13 is considered an unlucky number so we can either use break or continue let's begin with break break is used to exit out of a loop entirely if we reach the statement let's add an if statement if i is equal to 13 then we will break so let's try this program again now we will only count the numbers 1 through 12. once our number i our index reaches 13 we will break and break will exit out of a loop entirely even if we have iterations left over we will exit out of the for loop so that is the break statement alternatively we have the continue statement and it works a little bit different so let me turn all of this into one giant comment and i will paste what we have currently but change break to continue now continue we'll skip over the current iteration of a loop but we will continue its iterations so if we take this approach of using continue we count the numbers 1 through 20 but we skipped 13. we will skip over the current iteration but continue with the rest of our iterations within our loop so that's the main difference between break and continue break will exit out of a loop entirely and continue we'll skip over the current iteration so that is the break and continue statements this was a shorter video but it is an important subject if you would like a copy of all this code i will post this to the comment section down below but yeah that's the break and continue statements in javascript hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain the differences between let and var in javascript so sit back relax and enjoy the show all right everybody we're going to discuss the differences between let and var these are two different ways in which we can declare a variable let was introduced as of ecmascript 2015 also known as es6 basically speaking this is a javascript standard meant to ensure the interoperability of web pages across different web browsers i stole that quote from wikipedia when we declare a variable that variable will have a certain scope a scope is where a variable is accessible if we declare a variable using let that variable will have a block scope if we use var that variable will instead have a function scope and these two scopes behave differently let's say that we have a for loop i will declare my index i using the let keyword let i equal one and we will just count up to three we'll continue this for loop as long as i is less than or equal to three then increment our index by one within this for loop i'll just display whatever our index i is so if we use this let keyword we're going to declare our variable i with a block scope this variable is not going to be accessible outside of this block of code so let's try it i'm going to display whatever i is outside of this for loop outside of this block so console.log i and we should have an uncaught reference error i is not defined that's because we used this let keyword we're declaring i with a block scope it's not going to be recognized outside of this block of code however if we use var well then the scope is going to be different this variable i now has a function scope it's going to be available throughout the entire program unless we're inside of a function hence the name function scope now if you were to take a look within my console we have the numbers 1 through 4 this time that's because i still contains a value even outside of this for loop since we declared i using var and not let so since we used var this variable i has a function scope it's available throughout the entire program unless we're inside of a function but we'll cover that momentarily and that's one of the reasons that we tend to use let instead of var within a for loop because when we exit this for loop we do not want i to still contain a value in case we need to reuse it now var does have a limit it's limited to a function if it is within one if not then it's available throughout the entire program it has a global scope so let's say that our for loop is within a function let's create a function named do something and it's going to execute our for loop so let's place our for loop within this function and i'm just going to call this function do something okay so we have the numbers one through three we declared i using var but i is not recognized it's not accessible outside of this function so if your variable is declared using var it's going to have a function scope it's going to be available throughout the entire program unless it's within a function now one of the major reasons that we should consider transitioning from using var to let is because a variable declared with var can override something behind the scenes for example when we load our web browser there is a window object behind the scenes and we can access it by going to console then type window then enter so this window object has a bunch of built-in properties and methods and if we declare a variable using var that shares the same property name or function we may accidentally override one of these important functions or properties for example let's say that we have a variable name that's a simple enough variable well there's also a name property within our window object so let's say that i'm not aware of what this window object is or what it does so i'm just going to type var name and type in my name let's save head back to our window object hit enter and find that name property oh would you look at that we have accidentally overridden this name property of our window object with the name variable from our javascript program when we did not intend to do so this time let's declare a name using let instead of art and see what happens so you may need to close out of your web browser so that it refreshes i'm just going to save and then open with live server and then go back to my console so go to console type window then enter find name and you can see that this time we did not override this property of name that's because we used let instead of var well those are the main differences between let and var let has a block scope and var has a function scope in future videos i'm going to begin declaring variables using let in place of r now that we understand the differences between the two so if you would like a copy of this code i will post this to the comment section down below but yeah those are the main differences between let and var in javascript yo what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain the for each method of arrays in javascript so sit back relax and enjoy the show all right we are on the for each method today the for each method is a built-in method of arrays the for each method will perform a function of our choosing for each element in our array hence the name for each let's say that we have an online store and we need to calculate the total after somebody adds a bunch of items to their shopping cart so let's say we have a variable named total and i will assign a value of 0 and we'll create an array named cart like shopping cart this will just be an array of different prices of items let's say we have one item that is five dollars another that is six dollars seven dollars eight dollars and nine dollars what i would like to do is to create a function to add all of these different prices together to display a total that the user needs to pay so we need to create a function to take care of that for us function let's call this checkout like the user is checking out and there will be one parameter of element all we'll do is take our total plus equals our element so using the for each method this function is going to execute a total of five times once for each element in our array so now what we need to do is to utilize this for each method and we can do so maybe here so type the name of your array minus cart dot and use the for each method within our for each method we're going to pass in the name of a function that we would like to execute and call this is known as a callback function you can see that right here callback fn for function so when we use our callback function we actually do not need to provide an element an index or the name of our array those are included for us so let's use console.log to display the total so let's add a string such as your total is dollar sign plus total and let's try it your total is 35 so i'm pretty sure that's 35 11 18 26 35 so when you pass in a function as an argument to the for each method of an array the value index and array are already provided for you so you do not need to pass them in as arguments but you do have to list them as parameters if you plan on using them currently we're only utilizing our element also known as our value you can rename them too if you need to so let's say we need our index as well as our array we can just list them as parameters then but we do not need to pass them in as arguments since this is a callback function that we're passing as an argument so if you need your index or array for anything you can just write that within your function body so that is the for each method it performs a function for each element in an array if you would like a copy of this code as always i'll post this in the comments section down below but yeah that is the for each method of arrays in javascript hey what's going on everybody it's bro hope you're doing well in this video i'm going to discuss the map method of arrays in javascript so sit back relax and enjoy the show all right the map method the map method is a built-in method of arrays it will perform a function for each element in an array then store the returned values in a new array here's an example of why this would be useful let's use our imagination and say that we have an online store there's a bunch of different prices within an array and the name of this array is store usda short for us dollars what i would like to do is to convert all of these different prices to maybe euros and we can use the built-in math method of an array to help us with that but first we need to define a function to convert dollars to euros here's how let's define a function called two euros and we'll need at least one parameter of value now the current conversion rate from dollars to euros is 0.85 so we could say something like value equals value times 0.85 or we could use the shortcut and say value times equals 0.85 now the important part is that we need to return our value and each value will be stored within a new array now let's create a new array let store e you are short for euros equals the name of our array dot map now with the map method we're going to pass in a callback callback function so the callback is going to be two euros and then we can display our array in euros store eur let's try it so here's all of the different elements in our array of store eur and the nice thing about using the math method of an array is that our original array will still be retained so we have prices in both us dollars and euros so let's display our store in us dollars as well as euros so console.log store usd then console.log store eur so we have prices in both us dollars and euros so that's basically the math method of an array it will perform a function for each element in an array then store the returned values in a new array so if you need to do something like a price conversion this would work perfect for you so that is the built-in map method of an array if you would like a copy of all this code i will post this to the comment section down below but yeah that is the map method in javascript yo what's going on everybody it's you bro hope you're doing well in today's video we're going to discuss the filter method of arrays in javascript so sit back relax and enjoy the show so the filter method the filter method is a built-in method of arrays it will return the elements of an array that meet a condition specified in a function let's say that we have an array of student ages maybe this is some sort of college course you'll typically see a wide range of different student ages so we have an array named students one student is 16 another 17 18 19 and 20. so our mission is to create a new array of students that are 18 or older so we'll need a function to check a certain condition so let's define a function named check edge and we'll need one parameter of value okay so here's our condition if our value is greater than or equal to 18 then we will return our value actually i think i'm going to rename this parameter as h just so that it's more easily understood okay so we need to use the filter method of our array and the callback is going to be a check edge so we will perform the check edge method using each element in our array so let's create a new array let adult students equals the name of our original array of students dot and we will use the filter method and by using the filter method we will pass in a function callback so we need to list via name of our function check edge and we do not need to pass in any parameters so the value index and array of our original array will be provided so if you need a value index or an array these are already provided in that order and you can rename them too we're going to rename value as edge so this will filter all students in our original array that are 18 or older and place them within a new array called adult students and then let's use console.log and display all of our adult students so we have an array of three elements one student is 18 19 and 20. now the reason that you don't want to use map in this place of filter is that we'll have some empty holes within our array so we have undefined undefined 18 1920 so for this situation using filter would be better well okay then everybody that is the filter method of arrays it will return to the elements of an array that meet a condition specified in a function our condition is that we were checking to see if a student's age was greater than or equal to 18. if so return their age and place it within a new array named adult students if you would like a copy of this code i will post this to the comments section down below but yeah that is the filter method of arrays in javascript hey what's going on everybody it's bro hope you're doing well and in this video i'm going to explain the reduced method of arrays in javascript so sit back relax and enjoy the show well then everybody i should probably explain the reduced method of arrays the reduce method is a built-in method of arrays that will reduce our array to a single value here's an example let's pretend that we're playing a game of scrabble i have an array of letters and i need to combine all of these different letters together to form a single word a single value i can easily do so using the reduced method of arrays so we'll need to create a function to actually combine them all together so let's define that function function combine letters is a good name we'll fill in the parameters momentarily so this is going to return a single value we can store that within a variable let's say a word let word equal then type in ray letters dot reduce we'll be passing in our function name as an argument this is referred to as a callback so if we pass in a callback into the reduce function of an array there's going to be four arguments that are provided for us an accumulator a value index and an array so we're not necessarily going to use all of these all we'll need is accumulator and value and you can rename these two so let's rename accumulator as total it's a running total and value as what about next letter okay so what we'll do in this function is return our current total plus next letter by using this reduce method the returned value is actually going to be input for the next iteration of combined letters so our output will be input for the next iteration until there's only a single value remaining so if i was to use console.log to display my word we should be left with a single value of help all right so that is the reduce method so it's kind of tricky to understand the concept behind this basically the output is going to be input for the next time that we use this function until there's only one value that remains two so there's also reduce right as well so we basically work in reverse order so this would now be pla so that's another method that you can use too so in conclusion everybody the reduce method is a built-in method of arrays that will reduce an array to a single value if you would like a copy of all this code i will post this to the comment section down below but yeah that is the reduced method of arrays in javascript hey what's going on everybody it's bro hope you're doing well in this video i'm going to explain callbacks in javascript so sit back relax and enjoy the show all right callbacks a callback is a function passed as an argument to another function in javascript we can pass functions as arguments as if they were values this allows a function to invoke another function depending on which function is passed in so here's an example of why a callback would be useful let's say that we have a variable named message i need to assign this variable a string and then display it to either my console window or my dom my website let's create two separate functions to take care of that for us depending on which choice we make so let's use a function named display console there will be one parameter that we will name output and we will use console.log our output then let's create a separate function to display our output to our dumb display dom and we'll need this line of code document dot get element by id pass in the name of an id let's say myh1 dot inner html equals output then we just need to create this tag so head to your html file this will be an h1 header tag with an id of my h1 and then close it okay so let's create another function to set our message function set message we'll have one parameter of text message equals text and then return our message so we have a couple options here if we need to set our message and then display it to either my console or my dom the first is nested function calls which aren't ideal but they technically work so if i need to set a message i would call the set message function and then pass in some text a string so maybe let's say hi bom okay then if i need to display this message i can invoke one of these functions display console or display dom so maybe display console so i can pass this in as an argument to display console because this will return a value that we can pass in as an argument so this technically works but this isn't ideal because it's not very flexible so if i need to display this message to my dom i would have to go into my code and change this from display console to display dom another option would be to instead of returning our message we could invoke one of these functions inside of our set message function so i could say display console pass in my message and then i would just invoke set message to begin this process so this would work as well however we have no way of preventing display console from invoking so that will occur no matter what at the end of set message now the best option would be to use a callback we will pass in a function name as an argument to another function so we're going to write something like this so let's get rid of what we have currently here and we are going to set message pass in our message hi mom and then the name of a function that we would like to call as an argument so let's say i would like to display this message to display console i will pass in the function name as an argument be sure to not add the set of parentheses afterwards because that will invoke the function so we just need to pass in the function name okay and then with our function of set message we need to set up a parameter to match this argument so let's add an additional parameter we will call this call back get rid of return message and we will call our callback by adding that set of parentheses to invoke this function so remember with this parameter it's kind of like we're giving this argument a nickname which we will name callback and we're going to invoke it by adding this set of parentheses but we need to pass in our message because we need some output okay so this should work hi mom if you instead need to display to your dom we just pass this function name in as an argument in place of display console so it's kind of like we're pivoting so we pass in the function name that we would like to call so we can switch between display dom or we can pivot and use the display console function that we declared so that's a callback it's a function passed as an argument to another function and this allows a function to invoke another function so if you would like a copy of all this code i will post this to the comment section down below but yeah that is a callback in javascript hey what's going on everybody it's you bro hope you're doing well in this video we're going to discuss function expressions in javascript so sit back relax and enjoy the show all right everybody function expressions a function can also be defined using an expression a function expression can be stored in a variable and the variable can be used as a function by invoking it by adding a set of parentheses after the variable name that will invoke or call our function stored within a variable so function expressions have a few uses some of these we haven't talked about yet we can use them for closures iife which is an acronym for immediately invoked function expressions basically functions that can be run as soon as it's defined and we can also pass them as arguments to other functions so here's an example of a basic function declaration that we're used to we'll compare and contrast the differences between the two so a standard function declaration which is what we're used to we may say something like say hello then we will call this function and we can define it before or after function say hello then we will console.log the word hello so here we are we have the word hello so that is a basic function at declaration so let's cover function expressions which have different syntax so here we have a function expression and it might look a little something like this so let's create a variable called greeting let greeting equal and we can store a function within this variable by writing a function expression so let greeting equal function parentheses curly braces and then our function within the set of curly braces so we will say console.log the word hello so we now have an entire function within a variable so variables can store more than just values so to call the function within this variable we type the name of our variable followed by a set of parentheses then to call this function stored within my variable of greeting i would just add a set of parentheses after the variable name so this will display to my console the word hello so a function expression has different syntax from a function declaration and different uses a function expression is useful as closures which we still need to talk about in future videos they can be used in iife immediately invoked function expressions functions that run as soon as it's defined as well as being passed as arguments to other functions so these two we'll still need to talk about but i can definitely show you an example of passing a function expression as an argument to other functions so let's define a function function output so we will have one parameter of a function and we will execute whatever our function is so by using a function expression we can store a function within a variable and then we can pass this variable as an argument to another function so i'm going to invoke the output function and then pass in my variable greeting as an argument to this function and then this function can do whatever it wants with this function stored within this variable so let me get rid of these lines of code just so that it's less distracting so with this variable of greeting that stores our function we're passing it as an argument to our output function we're giving this variable a temporary nickname of func or whatever you want and then by adding a set of parentheses after our parameter of funk we will invoke whatever function is stored within this variable of greeting so this has some uses too because a function can do whatever it wants with another function that it receives as an argument so this time let's keep our output function the same except we're going to change the function that is stored within our variable of greeting instead of displaying a message to our console let's display a message to our website so we can write something like this so let me copy what we have here then we're going to change the text of an h1 header tag so add this line h1 id equals my h1 and then close it so we are going to target this element by id so within our function we'll write document dot get element by id list the id within parentheses my h1 dot inner html equals the word hello so there's nothing else that we have to change within our code just the function expression we're storing within this variable so our output function is going to be the same but we're just changing the function that we're passing into our output function so this will display the word hello instead to my website now let's rewrite the same program instead of using function expressions let's use function declarations so let's turn this line into a comment let greeting equal our word of hello then this time we need two functions function output to our console or function output to our dom or website this will be output website so let's call our output console function first and then we will pass in our greeting as an argument so i'll rename this parameter as just x so within this function console.log whatever our parameter is of x then if we need to display output to our website we would need this portion of code right here where we document.getelementbyid change the inner html to whatever our parameter is of x so then if we need to display output to our console we would need to call this function output console if we need to display output to our website we would need to go in change this code from output console to output website and then call this function instead so technically function declarations or function expressions would work for this sort of program concept but i tend to like to use function expressions because we do not need to keep on declaring function names and then clutter up the namespace that we're working with so that's kind of the idea behind a function expression it has some uses over function declarations we can use them as closures and immediately invoked function expressions these two we still need to talk about so this video will serve as a prerequisite for those topics but in this video i gave an example of how we can pass a function expression as an argument to a separate function so if you would like a copy of this code i will post this to the comment section down below but yeah those are function expressions in javascript hey yeah it's you bro hope you're doing well in this video i'm going to explain nested functions in javascript so sit back relax and enjoy the show all right nested functions these are functions inside of other functions outer functions have access to inner functions in this example i have an outer function named login and within the scope of my login function there is another defined inner function named display username as well as a local variable named username so why is this useful so inner functions are hidden from outside of the scope they cannot be accessed from outside of this set of curly braces of the outer function so if i need to call this function this inner function of display username i need to do so within my outer function because that's within the scope of my outer function so i could say something like display user name and whenever i log in i will automatically call the display username function however i need to first call my outer function let's pretend that we're logging in so this is like a subroutine of the login function we will display username and do anything else that we need to so to call the display username function i first need to access the login function so eventually i'll be able to display my username so let's add a second function a second inner function how about display inbox like how many messages i have so display user inbox then console.log you have and we'll create a variable named user inbox so assign some amount of messages that you have maybe zero or something greater so you have user inbox new messages so this is a separate inner function named display user inbox so when we log in we can automatically call these two inner functions within the scope of my outer function of login so when i log in i have access to display username and display user inbox however with inner functions these are hidden from outside of the scope if i attempt to directly access these functions display username and display user inbox from outside of the scope we cannot normally do so uncaught reference error display username is not defined so basically that's a nested function it's just a function inside of another function outer functions have access to inner functions inner functions are hidden from outside of the scope and then we'll talk about closures in a separate video so those are nested functions if you would like a copy of this code i will post this to the comment section down below and if you can give this video a like drop a random comment down below and subscribe if you'd like to become a fellow bro hey what's going on everybody it's bro hope you're doing well in this video i'm going to explain anonymous functions in javascript so sit back relax and enjoy the show hey guys and gals we're talking about anonymous functions these are functions without a name hence the word anonymous so they're often not accessible after its initial creation this has some benefits they don't clutter the global namespace we do not need to give our functions names they're usable once and they can be passed as arguments so with normal declared functions these are saved for later use and we give them a name so with anonymous functions these tend to be functions that we only really plan on using once and that's it they're often not accessible after their initial creation so here's an example one use of an anonymous function is to place them within an immediately invoked function expression iife this is a javascript function that runs as soon as it's defined and we place them within a grouping operator a set of parentheses so if you would like to follow along within my html document i have an h1 header tag with a unique id of my h1 so what i'll do is that i will create an immediately invoked function expression to change the text of my h1 header tag as soon as our program loads as soon as our interpreter reaches this line so i'm going to create an anonymous function within my grouping operator a set of parentheses and we can list a function function parenthesis curly braces and place the body of our code within our function within the set of curly braces so let's take our document dot get element by id list our id of my h1 and i will change the inner html to equal some text like hey so at first this doesn't do anything but by adding a set of parentheses at the end of our immediately invoked function expression we will immediately call this function as soon as our interpreter reaches this line and you can see that the text of my h1 header tag changed to display the word hey this is useful because we don't need to give this function a name and it's usable only once we cannot keep on calling this function normally because we did not give this function a name it's an anonymous function another benefit is that we can pass anonymous functions as arguments to other functions now a very fun function to use is the set timeout function this accepts a function as well as a delay in milliseconds as arguments after so many milliseconds this function will execute it will be invoked let's begin by assigning a function expression to a variable then passing that in as an argument because that would also work and then we can shorten it to simply an anonymous function so let's create a variable named maybe task we'll perform some task after some delay let task equal a function expression so our function is let's change the text of our h1 header tag so document get element by id my h1 enter html let's change this to sup with a question mark okay so this is our function expression that we assign to a variable of task then when we set time out we will pass in our function which is stored within our variable task as well as a delay so after 1000 milliseconds one second we will execute this function to change the text of our h1 header tag so after one second the text will change to sup now we can shorten this even further by passing in instead an anonymous function let's copy this line of code we can get rid of this variable declaration replace task with an anonymous function so paste what you have there currently and let me just organize this a little bit just so that it's easier to read okay so here's our anonymous function that we're passing as an argument to our set timeout method this would work as well so hey sup so that's an anonymous function it's a function without a name they are often not accessible after their initial creation some benefits include that they don't clutter the global namespace we do not need to keep on coming up with names for functions if we don't plan on using them more than once they're usable once and they can be passed as arguments so those are anonymous functions if you would like a copy of this code i will post this to the comment section down below and well yeah those are anonymous functions in javascript hey what's going on everybody it's you bro hope you're doing well in this video i'm going to explain closures in javascript so sit back relax and enjoy the show all right closures a closure is a function with preserved data it gives you access to an outer function scope from an inner function this has two benefits states of variables in the outer scope are saved they're retained and variables in the outer scope are considered private they cannot be accessed outside of the outer function let's pretend that we're playing a game we'll have a global variable named points and i will set the sql to zero as well as a function stored within a variable named score let score equal an anonymous function and what we'll do is return points plus equals one so each time that we call our score function we will increment our points by one so to call score we would type the name of this variable it contains a function then to invoke it or activate it we just add a set of parentheses afterwards then to display it we just need to use console.log so console.log then invoke the score function and this will return points plus equals 1. then if i ever need to increment my points i just invoke the function stored within score if i was to invoke the function stored within score three times my points would be at three then however there's one problem with this since points is a global variable somebody writing malicious code can actually change this so let's say that somebody's cheating and they will give themselves 100 points so points plus equals 100 well now the user has 103 points because they cheated they wrote some malicious code so one way in which we can prevent this is to place our points variable within the function so that it's a local variable and no longer a global variable so this is effectively private you can't access this variable from outside of this function if i attempt to increment points by 100 well then we'll run into a reference error points is not defined so you cannot access points when it's a local variable from outside of that function in which it's contained but now we have another problem the value stored within points is not being saved every time that we invoke the function stored within score we're effectively resetting our points back to zero then incrementing it so our output is one one one before it was one two three so one way in which we can save the data stored within a function is to create a closure it's a function with preserved data and here's how we can create that using what we have currently so we will create an inner function we will return an anonymous function and within this inner function what do we want to do so let's take our points and increment it so points plus equals 1 then we will return our points and then at the end we will invoke this function by adding a set of parentheses to the outer function so we have now created a closure so not only is the value saved within our points variable but we cannot access our points variable from outside of our function it's effectively considered private and that adds a layer security to our program so a key thing to remember things on the inside normally have access to things on the outside anything between this set of curly braces within our outer function is considered the lexical scope our inner function has access to this variable or anything else between this set of curly braces that is considered the lexical scope and we can save and preserve our points variable and not give anything outside of this function access to that variable so that's kind of the point behind a closure it's a function with preserved data it gives you access to an outer function scope from an inner function the benefits is that the state of variables in the outer scope are saved and variables in the outer scope are also considered private you cannot normally access them from outside the function so that's a primer on closures if you would like a copy of this code i will post this to the comments section down below but yeah those are closures and javascript hey what's going on everybody it's bro hope you're doing well in this video i'm going to give you all an example of a closure with arguments in javascript so sit back relax and enjoy the show all right people here's another example of a closure this time we will accept arguments into our closure within my html file i have an h1 header tag that says the word hello now what we'll do is create a closure to change both the font size as well as the font family of the body of our document so let's begin with the font size so what we'll do is create a closure function make size these closures are going to function as well function factories so we can reuse this function and pass in a varying amount of arguments so normally in the last video the state of a variable will be retained so if we declared a variable like size let size equal maybe 10 well then the state of this variable is going to be saved but what if we need to pass in an argument so this time we will set up a parameter of size we're going to do something a little bit different so we will return a function this will be the inner function and within the inner function we will take our document dot body dot style dot font size and set this equal to the size that we receive as an argument plus pixels okay now to set up this closure as a function factory we can accept an argument and we can save the state of each argument that we pass in so we'll create a variable that will store our closure that has varying sizes so here's an example let's create a variable named size 20 and we will assign this the name of our outer function make size and then pass in a size like 20. then let's do that again let's size 30 make size 30 and one more for good measure let's size 40 make size 40. so we have three different variables each of them have a different version of this function each with a different size passed in as an argument so to invoke one of these functions each of these stored within a variable we would invoke that variable so let's change the font size of the style of our body to size 20 so we would type size 20 then add a set of parentheses to invoke the function stored within so this will change the font of the body of my document to 20. then let's do this with size 30. so the font size increased slightly and then size 40. there we go so one of the features of a closure is that we can save the state of a variable that is declared or we can pass in an argument and the value stored within that argument is saved which is what we did here so this time let's change the font of our text so let's copy what we have with our make size function and we will change this to make font and pass in a font as an argument and we need to change this from font size to font family font family equals font then we will store different versions of make font within variables so let's say let and we'll need to come up with a unique font name but i'm not sure yet let font equals make font the name of this outer function and then we can pass in a font name what about ink free that's a good font so let font ink free and then let's invoke this font ink free add a set of parentheses and this will change the font of our text let's create a few more fonts let font console us equal make font and then pass in a font name let's pass in consoles and then invoke it by adding a set of parentheses after the variable name and that will change our font to this font and what about for your new you can use whatever fonts that you want courier new font courier new then invoke it boom all right well everyone that is another example of closures this time we created a closure that accepts arguments a main benefit of a closure is that a closure will retain any data or variables stored within so one we could have created a size variable and assign this value or we can accept an argument and save the value stored within that argument if you would like a copy of this code i will post this to the comment section down below and well yeah that's an example of a closure with arguments in javascript hey what's going on everybody it's bro hope you're doing well in this video i'm going to discuss the arrow function in javascript so sit back relax and enjoy the show all right the arrow function that would be this little guy right here it's an arrow so this is a shortcut for a function expression we'll create two similar functions one will be a function expression and the other will be an arrow function they will do the same thing but they'll have different syntax and will compare and contrast the differences between the two so let's say we have a variable let hello and i will assign this a value later so if we were going to write a function expression we could say something like hello equals function and then we can return maybe hello world something lame like that okay so then if i need to invoke this function within this variable i could say console.log then hello then add a set of parentheses to invoke it and this will display hello world now if we were to write the same bit of code using the arrow function it would look something like this so hello equals parentheses arrow function then hello world whatever we're returning and this would do the same thing so let's console.log hello and this will display hello world okay that was level one let's turn it up to level two what if we need to pass an arguments to our functions let's create a variable named x let x equal the word what about you okay so when we invoke this function let's pass in x then we'll need a matching set of parameters so let's add x to our function expression then return x plus the word world okay now if this was an arrow function we pass in our arguments here x and then our parameters would be within the set of parentheses and actually if you have only one parameter you don't technically need the set of parentheses but if you have no parameters or more than one parameter you do need that set of parentheses so let's display x plus the word world yo world are you all ready for level three i think we're ready for level three let's create a second variable let y equal whatever your name is okay so if we have multiple arguments to pass in we would separate each with a comma when we invoke our function and we need a matching set of parameters so with our arrow function we would need that set of parentheses x comma y hello then pass in x and y so let's return x plus our variable y and we'll do so here as well i'll probably add a space just to separate these words okay so this is the result yo bro okay level four what if our function takes up more than one line that's pretty easy in a function expression so let's instead change this around console dot log x then console.log y so if our arrow function needs more than one line of code directly next to it we can wrap all of this within a set of curly braces much like what we have with our function expression so i'll delete this and then hit enter copy what we have then invoke hello pass in x and y and here's the result yo bro yo bro so yeah one place in which the arrow function really shines is the use of higher order functions such as map filter and reduce instead of passing in a callback to a function we can instead pass in an arrow function what do we want these higher order functions to do so let's recreate some of these programs and instead use the arrow function here's some of the code from the video on the map function someplace within this playlist so let's pretend that we have an online store and i have an array of prices in us dollars i need to convert all of these prices to euros with this current conversion rate so we can use the map function of our array to do so and we pass in a callback as an argument so let's rewrite this program but instead use the arrow function first we need our arguments if there are any we have our value value arrow then all we need is this bit of code right here and we no longer need this entire function and this would work just the same as it did before so that is the use of the arrow function when used in conjunction with the map function all right filter function is next what we did during that video topic is that we had a fictional college class with a bunch of ages of students that varied between 16 and 20. we were going to create a function that will check to see if a student was 18 or older so we used the filter function of our array of students and then created a new array named adult students so this would create a new array with three students one is 18 19 and 20. let's recreate the same program and use the arrow function so let's get rid of our callback of check edge we need to pass in any arguments if there are any we do have an edge age arrow then age greater than or equal to 18. and we no longer need this function of check edge all we need are these four lines of code and this would work the same and last but not least we have the reduce function what we did in that video was that we had an array of characters we were going to reduce these characters into a single word and then store it into well a variable named word so if we were to write this program using instead of the arrow function we can get rid of this function completely but we still need these arguments so this time we have two arguments we have total and next letter then arrow function total plus next letter then we can get rid of this function and this will display the word help well everybody that is the arrow function it's a shortcut for a function expression i will post all of the code from this video in the comment section down below there's quite a bit here and well yeah that's the arrow function in javascript yo what's going on everybody it's bro hope you're doing well in this video i'm going to explain numeric sorting in javascript so sit back relax and enjoy the show oh yeah numeric sorting so i have an array of numbers something simple three four one two five arrays have a built-in sort method and after displaying my array of numbers these elements will appear to be an ascending order from lowest value to greatest value however these elements were sorted by their ascii character order and not necessarily by their numeric value if i was to change one of these values let's say 4 is now 14. well 14 should really be at the end of my array because it's the greatest value rather than my elements being sorted numerically they're being sorted more or less alphabetically so 1 would be the lowest value that's why we have 1 then 14 then 2 3 and 5. so if we take a closer examination of the sort method we can pass in a parameter of how we want to sort this array we can sort it numerically or if we don't pass in a function by default these will be sorted in ascii character order so here's how we can sort these elements numerically we can pass in a function a function expression or zero function i'll show you both let's begin with a function expression so type numbers.sort and then we will pass in a function expression as an argument so function then we need some parameters x comma y curly braces return x minus y so these elements will be sorted in ascending order from lowest value to greatest value if you returned y minus x these will be in descending order from greatest value to lowest value so that is numeric sorting using a function expression or we could use the arrow function which we learned about in the last video so we would write numbers dot sort list our parameters x comma y then arrow x minus y this would be in ascending order or y minus x for descending order so that's pretty much numeric sorting so if you do not pass in a function as an argument to the sort method of an array these will be sorted by default in ascii character order if you need to sort these numerically you can pass in a function expression or an arrow function so if you would like a copy of this code i will post this to the comment section down below and well yeah that's numeric sorting in javascript yo what's going on everybody it's bro hope you're doing well in this video i'm going to discuss classes in javascript so sit back relax and enjoy the show all right we're talking about classes today a class functions as a sort of blueprint for creating objects within our class we define what properties and or methods that all objects created from this class should have properties are the unique characteristics of an object like values and variables methods are functions that belong to objects what kinds of actions can our objects perform now to create a class all we type is class then the name of the type of objects we would like to create as you all know i like cars let's create some car objects class car with a capital c then curly braces anything between this set of curly braces is within the class we can define properties and or methods that all car objects should have now we're not going to cover properties in this video we'll need the help of what is called a constructor and i think it's best if we save that for another video but let's define some methods these are basically functions that belong to an object so what kinds of functions should cars have what about drive and brake so we do not need that function keyword so type the name of the function well the name of the method drive then parentheses curly braces so when we invoke this method let's display something console.log you drive the car let's create a second method break break parentheses curly braces let's display something console.log you step on the brakes now when we create a car object each car will be able to drive and brake this is how we can create a car object using our car class at the beginning it's much like creating a variable let then we need a name for this object let's say car let car equal new car the name of the class parentheses then semicolon so we now have a car object named well car with the lowercase c so if i was to type car dot we have access to two methods drive and break so if i need my car to use the drive method i would type the name of the object car dot drive then add a set of parenthesis to invoke it and this will display you drive the car let's have our car use the brake method car dot break then a set of parenthesis to invoke it and this will display you step on the brakes now the nice thing about classes is that we can keep on reusing this class to make more car objects let's create a second car it's the same process as before but let's name car as car two and the original car is car one so we now have two cars car 1 and car 2 and they both have their own sets of methods so let's have car 1 use the drive method and car 2 use the brake method currently both of these methods are identical so they won't display anything different when we cover the this keyword we can create some custom output for each car so with car 1 and car 2 maybe if this was a game you could say like player 1 equals a new car and player 2 equals a new car and each of these cars has their own set of drive and brake methods depending on what the player wants to do so player 1 would be in charge of this car object and player 2 would be in charge of the other car object so that's another way to look at it as well now if you need more cars you just keep on calling the car constructor new car then parentheses if i need like four cars well i could just keep on calling this car constructor to create new objects from this car class but be sure to give them all a unique nim so we now have car 1 car 2 car 3 and car 4 and each car has their own set of drive and brake methods but we still need to cover properties next that will be in the next video topic and we'll discuss constructors well everybody that is a class it's a sort of blueprint for creating objects we can define what properties and or methods that all objects created from this class should have if you would like a copy of this code i will post this to the comments section down below but yeah those are classes in javascript hey what's going on everybody it's bro hope you're doing well in this video i'm going to explain constructors in javascript so sit back relax and enjoy the show okay i guess we're talking about constructors now a constructor is a special method for assigning properties it's automatically called when creating an object that's why when we create an object we say equals new than the name of the class then parentheses so we can pass in some unique values into the constructor and assign them to each object so that not all objects will be the same they can have their own unique characteristics so let's create some custom cars but we'll need a car constructor so within our class type constructor parentheses curly braces and within our constructor we can set up some parameters let's say that when we create a car object we'll want a make model year and color of a car so when we create a car object we can pass these values in as arguments for our first car let's say that we have a ford mustang so the make will be forward separate each value with a comma ford mustang for the year maybe 2022 and the color what about red now let's assign some unique values to car two what about a chevy corvette chevy corvette then we need a year 2021 is good and a color what about blue so now when we construct a car object we can pass in some unique values and send them as arguments to our car constructor we can set up and assign some properties to each car so to assign these values that we receive as arguments to each car's properties we would type within the constructor this dot make equals make this dot model equals model this dot year equals year and lastly this dot color equals color and honestly that's it so let's display some of the properties of car one to begin i will use console.log then to access a property of your car object type the car object in this case it is car one we have two methods break and drive and we also have four properties color make model and year so first let's display the make of this car and this should display ford let's try the model next car one dot model and this is a ford mustang let's do the same thing with year and color so car one dot year car one dot color so ford mustang 2022 and the color is red now cartoon is going to have its own unique properties let's copy all of these lines of code and change car 1 to car 2. so car 2 will also have a make model year and color and they're going to be different from car 1 because we passed in different values as arguments so car 2 is a chevy corvette the year is 20 21 and the color is blue so that's one of the benefits of a constructor it's a special method that we can use to assign unique properties to an object it's automatically called behind the scenes when creating an object however we can explicitly use the constructor to assign some unique values passed as arguments to the car constructor so yeah those are constructors in the next video we'll discuss the this keyword if you would like a copy of all this code i will post this to the comment section down below but yeah those are constructors in javascript yo what's going on everybody it's you bro hope you're doing well in this video i'm going to explain the this keyword in javascript so sit back relax and enjoy the show all right the this keyword this is a reference to the object that we're currently working with and honestly that's it we're currently using it within our constructor this dot make the stop model this dot year and this dot color so just a heads up if you're new here we have a class named car we have a constructor as well as two methods a drive and brake method we constructed two cars car one and car two car 1 is a ford mustang and car 2 is a chevy corvette so i'm going to create an additional method just to return whatever this is so let's create a method what is this and what we're going to do is return this okay so with a console.log statement let's call car1 dot what is this and take a look to see what happens so this will print a reference to car one so you can see that this is a ford mustang the year is 2022 and the color is red and there are two functions within here well as well as a constructor break and drive and i guess what is this as well that we just added so basically this is currently just a reference to the object that we're currently working with so pretend that since car 1 is using this replace this with car 1 for the time being if car 1 uses the constructor replace this with car 1. so if car 2 was being constructed then we would replace this momentarily with car two and what is this would be car two so basically it's just a reference to the object that we're currently working with and that's all that this is so when we construct one of these car objects we're really saying like car one dot make equals make or car two dot make equals make so that's what the this keyword is it's a reference to the object that we're currently working with so let's change the text of our drive and break methods because these are somewhat general and vague instead of you drive the car let's replace car with the model of the car that we're working with so let's edit this you drive the comma this dot model you step on the this dot model then maybe apostrophe s breaks okay let's try this i will have car one use the drive method you drive the mustang and i'll have car 2 step on the brakes car 2 dot brake you step on the corvette's brakes and honestly you probably wouldn't step on the brakes ever with the corvette here's another thing to consider you can use the this keyword outside the context of a class so within a console.log statement i will display whatever this is and this is our window object that we're currently working with so outside of the context of a class if you use this keyword we're making a reference to our window object then however if we construct a car object or some other type of object this is referring to the object that is currently using the constructor so everybody that is the this keyword it's a reference to the object that we're currently working with if you would like a copy of this code i will post this to the comments section down below and well that's the this keyword in javascript hey what's going on everybody it's you bro hope you're doing well in this video i'm going to explain to the static keyword in javascript so sit back relax and enjoy the show well it looks like we're on the static keyword today the static keyword can be applied to a method or property and that method or property will belong to a class and not any one object created from said class so with static methods and properties i tend to like to declare these above my constructor currently with what i have written i have a class named car as well as a constructor for this class that accepts a model argument i have two cars car one car two car one is a mustang car two is a corvette so let's pretend that these cars are going to enter a race i can create some static methods or properties of a car class so the first let's create a static property named number of cars how many cars are going to be within this race so we will use our static keyword and then the name of a variable or property so let's say number of cars and i will set this equal to zero to begin with now the nice thing with constructors is that this isn't necessarily limited to just assigning properties you can do anything that you want within a constructor when you construct a car object so let's write a bit of code to increment our number of cars by one but in order to change this property of the car class we first need to list the name of the class car kind of like this keyword except we're naming the class car dot number of cars and we will increment this by one so after creating two car objects number of cars should be two because we have two cars within this race now so to display number of cars we have to access it in a static way by listing the name of the class so if i need to access number of cars i would type car dot number of cars and we have two cars within this race let's create a third car just to test it so car 3 will be let's say a challenger now i have three cars so that's kind of the point now anything that is static is the property of the class itself and not any one object if i type car one dot number of cars well then number of cars is going to be undefined so this static property is more or less the property of the class itself than any one object same thing goes with methods this time let's create a method so static what about begin race begin race and we will display something console.log the race has begun okay so then to begin our race car the name of the class dot begin race the race has begun so none of these objects can begin the race because it's a static method so car 1 can't begin the race on his own terms we'll run into a type error car one dot begin race is not a function so in order to access or use a static property or method we first need to list the name of the class in which this static property or method belongs to another good example of us using properties on methods would happen to be with anything related to the math class so if we need to access pi we would type math the name of the class dot pi and this is a static property of the math class if we need to round a number we would type math the name of the class again dot round so these are both static this is a static property of math and round is a static method it wouldn't really make sense to create a math object like let math1 equal new math right if we need to access pi or the round method we would just access this in a static way by typing the name of the class so in conclusion everybody the static keyword can be applied to a method or property and that method or property now belongs to the class itself not any one object normally objects created from this class do not have access to anything that is static so if you would like a copy of this code i will post this to the comment section down below give this video a thumbs up and well that is the static keyword in javascript hey what's going on everybody it's bro hope you're doing well in this video i'm going to explain inheritance in javascript so sit back relax and enjoy the show well it appears we're on inheritance inheritance is useful for code reusability we can reuse properties and methods of an existing class children classes inherit from parent classes here's an example of how inheritance is useful let's say we have a class called animal and within our animal class we have a property named alive so we'll need a constructor and we will have one property alive and i will set this to true for all animal objects all animals will have an eat method and within this method we will display a message console this animal is eating the animal class will be the parent class and it will have children these children classes will be able to inherit this alive property and the seed method let's create three classes of specific kinds of animals let's say rabbit fish and hawk class rabbit and i will place nothing within this class for now class fish and class hawk now for these classes to inherit everything from another class you take the class to inherit two and extends the class you would like to inherit from so rabbit extends animal same thing goes with fish extends animal and hawk extends animal and now let's create an instance of rabbit fish and hawk so we will create a rabbit object let rabbit equal new rabbit let's create a fish object let fish equal new fish then lastly hawk let hawk equal new hawk let's take a closer examination of a rabbit object so type the name of your rabbit object dot and well would you look at that we have a live property and a neat method so if i place rabbit.live within a statement well then the value stored within this property would be true and let's take a look at our rabbit's eat method rabbit.eat this animal is eating the same thing applies to fish and hawk so even though there's nothing within these classes of rabbit fish and talk since they extend the animal class they will inherit these properties and methods found within this class this parent class so one benefit of using inheritance is that if there's any similarities between each of these classes we can have all of these classes inherit from a common ancestor and place any similarities of code within the ancestor if we weren't using inheritance we would have to write the same code for each of these classes so we may have to like copy and paste it but you know this still works but it's a lot of extra coding that we have to do plus let's say that we're in a workplace setting if our boss needs us to change one of these methods from this animal is eating to this creature is eating well we would have to change this for each instance of the eat method so it's not too bad if we only have three different classes but what if we have dozens or hundreds well that's going to be a lot of work it would be a lot easier just to have all of these classes inherit from a common ancestor and then make the change here in one place instead of for every single class so that's another benefit of inheritance it's useful for code reusability and we can reuse properties and methods of an existing class and not only that but we can give each child class their own unique properties and methods too so not only do rabbits have in a live property and an eat method we can give them their own unique properties and methods let's say that rabbits will have a run method like they're fleeing so this will be a run method which will display console.log this rabbit is running then fish could have a swim method i guess rabbits can swim too but probably not as well so swim console.log this fish is swimming and hawks well they can fly let's create a fly method so fly console.log this hawk is flying all right so with our rabbit object rabbits they're alive they can eat and they can run fish they're alive they can eat and they can swim and hawks they're alive they can eat and they can fly so this rabbit is running this fish is swimming this hawk is flying so in conclusion inheritance is useful for code reusability we can reuse properties and methods of an existing class children classes inherit the properties and methods from a parent class we created three child classes rabbit fish and hawk by using this extends keyword we can inherit all the properties and methods from a parent class in this case the animal class so if you would like a copy of this code i will post this to the comments section down below and well that's inheritance in javascript yo what's going on everybody it's you bro hope you're doing well in this video i'm going to explain method overriding in javascript so sit back relax and enjoy the show well it looks like we're on method overriding method overriding is when a child class will use methods with the same name that are more closely associated with it here's an example i have a class named vehicle vehicle will be a parent class within the vehicle class i have a method named drive and when we call this method we will display a simple message such as you drive the vehicle now i'll create a car class to inherit from the vehicle class class car extends vehicle so my car class will inherit this drive method so let's create a car object let car equal new car and i will have car use the drive method and of course this will display you drive the vehicle one thing that you might see is that if we declare a drive method within our car class what we're doing is method overriding so this car class will use the method that has the same name that is more closely associated with it since we're declaring a drive method as well within this car class we will end up using this version of the drive method so let's change you drive the vehicle to you drive the car so when our car object uses the drive method it will instead use the version of drive that is more closely associated with it you drive the car so what if our car class also is a parent class to another class let's create a class named racecar and this will extends the car class so if this was a race car object race car equals new race car and i have race car use the drive method this will of course display you drive the car but i could override this method again so if i copy and paste what we have here and change the message to you drive the race car with a bunch of exclamation points well this racecar object is going to use this version of drive instead of the one that inherits from the car class it's direct parent so basically that's method overriding it's when a child class will use methods with the same name that are more closely associated with it so if you would like a copy of this code i will post this to the comments section down below give this video a thumbs up and well yeah that's method overriding in javascript yo what's going on everybody it's you bro hope you're doing well in this video i'm going to explain the super keyword in javascript so sit back relax and enjoy the show well it looks like we're on the super keyword super is a reference to the parrot class also known as the superclass it's very similar to the this keyword we can use a superclass's constructor or methods here's an example i have a parent class a superclass named person and we will have two children classes also known as subclasses student extends person and teacher extends person let's create a constructor for both student and teacher so let's say constructor and we will have a few properties to assign so students will have a name and age and what about a gpa now let's create a constructor for teacher teachers will have a name age and a class size but no gpa class size so let's assign some of these properties this dot name equals name this dot age equals age and this dot gpa equals gpa and let's do the same thing for teacher so let's copy what we have here paste it name and age are the same for both student and teachers they both have a name and age property but teachers do not have a gpa but they do have a class size so let's change this.gpa to this class size equals class size now with programming we try not to repeat code if we don't have to within my student and teacher constructors we are repeating two lines of code this dot name equals name and this dot edge equals age so to reduce the amount of code that we have we can use the constructor of the person class to assign the name and age properties of both students and teachers because this is what they both have in common so i'm going to copy one of these constructors get rid of gpa and we will only have name and age properties assigned within this constructor so we can get rid of these two lines of code within both of these constructors for both student and teachers now to use the constructor of a parent class a superclass within the constructor of a child class also known as a subclass we would type super and then pass in our arguments so let's send name and edge over to the constructor of the person class and this class the constructor of this class will take care of these properties for us so we will assign any properties that are unique to the specific class we're calling the superclass to take care of name and age and this constructor will take care of gpa so let's do the same thing for our teacher class so teachers we will call the superconstructor of the parent class person send in a name and age and all we have to do is assign our class size which is a unique property for teachers now let's create a student and teacher object just to be sure that everything is working fine let student equal new student then we will pass in a name agent gpa the student's name is steve he is 21 and his gpa is a 2.0 just barely passing i think and let's create a teacher let teacher equal new teacher this teacher's name will be how about bob bob is 45 and his class size is 30 students let's say okay now let's display some of these properties of our student first then our teacher console dot log student dot name then age student dot age then student dot gpa and let's try the same thing for teacher so let's replace student with teacher and change gpa to what class size well would you look at that we have steve he's 21 his gpa is 2 well 2.0 bob he's 45 and his class size is 30. not only can we use the super keyword to call the constructor of a parent class but we can call a parent classes methods as well let's create a method within student and teacher to display some of this information so let's begin with student let's create a method named hello so console.log hello this dot name then let's display the age next console.log u r this dot age years old and then lastly the gpa your gpa is this dot gpa now let's create a hello method within our teacher class but change your gpa is to your class size is this dot class size okay then we will call these methods student dot hello hello steve you are 21 years old your gpa is too and teacher teacher dot hello hello bob you are 45 years old your class size is 30. so using the same principle as before we can reuse some of this code so what do these methods have in common they both have this section of displaying the person's name along with the word hello and displaying the person's age so let's create a method within the person class we can name this hello or something else but i'll keep it consistent hello then we will display this dot name and this dot age we can get rid of these two lines and immediately when we call the hello method we will use the super classes hello method or something else if you named it something else so within our hello method with student and teacher we will call supers hello followed by your gpa is for students and then within teachers super dot hello and then we will add on your class size is this class size and this program will work as the same as it did before now technically speaking these methods don't need to be consistent we can change the name of the method within the person class to maybe welcome so we will say super dot welcome and do the same thing within our teacher class so this also works too if you have another method that you want to call i would like to use the super classes welcome method and follow this with this line of code so that's the use of a super keyword it's a reference to the parent class also known as the superclass it's very similar to this keyword this refers to the object that we're currently working with super refers to the parent class of set object and we can use a super classes constructor and methods so that helps with code reusability so if you would like a copy of this code i will post this to the comments section down below and well that is the super keyword in javascript well here's an example of how we can pass objects as arguments i have a class car and within this class i have a constructor this constructor has two parameters model and color so each car will have a model and color what i'm going to do is create a function that will change the color of my car object that i pass in as an argument so let's create a function function change color and this function will have two parameters a car object as well as a color so we'll need some car objects to work with let car one equal new car so we need a model and a color what about a corvette and for the color maybe blue so let's create another car and we'll call this car too car 2 equals i'll pick a mustang that is red so let's display the properties of each car object console dot log i'll display car one's model and color car one dot model and car one dot color and let's do the same thing with car two console.log card two dot model and cartoon.color so we have a blue corvette and a red mustang so if i want to change the color of my car i can pass my car object in as an argument so let's pass in a car object to our change color function we'll do that right about here so i'm going to call change color and i will pass in two arguments that match my parameters a car and a color i will pass in car one and pick a new color what about purple that's an unusual color and now to change the color of my car object i will type the name of my parameter car dot color equals color actually on second thought i'm going to rename this parameter as new color just to avoid some confusion car dot color equals new color and honestly that's all there really is to it we can pass an object in as an argument you just have to list the object name car one so my corvette is now purple and let's change the color of our mustang next so change color i will pass car 2 in as an argument and for the color maybe pink that's a manly color and my mustang is now pink so basically that's how to pass an object as an argument you just have to list the object's name and then you can pass it as an argument well that's pretty much it if you can give this video a thumbs up drop a random comment down below and as always subscribe if you'd like to become a fellow bro hey welcome back everybody i'm going to show you all how we can create an array of objects so i have a class car and within my class car i have a constructor this constructor will take a model and a color as an argument so let's create an array named garage because that would be fitting to store a bunch of car objects within so let garage equal and this will be an empty array for now so let's create some car objects let car 1 equal new car so we will need a model and a color so i will pick a blue corvette corvette and a color blue let's create two more cars let's create car two car two will be a red mustang and car three will be let's see how about a yellow lambo so we now have three car objects we can store objects in arrays much like what we do with variables and values so to add these objects to our array we would type garage equal then within straight brackets car one car two car three and that's really it now to access one of these objects let's say console dot log garage at index 0. so this is kind of like a parking spot number so at index 0 of my array of garage we have our blue corvette and then if you need a property or method of an object stored within an array you'd follow this array name followed by the index of the object you're looking for followed by dot and then the property name or the method name so if i need the model of this car this would be a garage at index zero dot model and this will display corvette if i need the models of my other cars i just need to list the index number so garage at index 1 dot model garage at index 2 dot model so we have our corvette our mustang and our lambo another option is that we can use a for loop to iterate over the elements of an array so this is how we would do that for let i equal zero remember i is our index we will continue this for loop as long as i is less than our garage dot length and we will increment i by one after each iteration so let's display the model of each car but this will be at index of i so this will do the same thing as it did before however it's a little more flexible now this time let's call a method within our for loop let's say that we have a race and we are going to call the drive method of the car class for each car that we have so first we'll need to define that method let's say drive all we'll do is display this line of text you drive the this dot model so each car has a drive method now within this for loop i'm going to type garage at index of i dot drive so we are going to iterate once for each car each element within our array and then for that element we will call the drive method so this will display you drive the corvette you drive the mustang you drive the lambo well everybody that is an example of an array of objects we can store objects in arrays much like what we do with values and variables however to access a property or method of an object within an array we have to type the array name followed by the index followed by the method or property that we need so if you would like a copy of this code i will post this to the comment section down below give this video a thumbs up and well yeah that's an array of objects in javascript yo what's going on everybody it's you bro hope you're doing well in this video i'm going to show you all how we can create an array of functions in javascript so sit back relax and enjoy the show all right well in this video i'm going to show you while how we can create an array of functions let's say that we're playing a video game and we can jump we can punch we can kick and we can block so let's create a function for each of those actions function jump we can jump like mario and when we call this function let's display something console.log u jump all right so let's copy this and create a punch function function punch u punch and let's repeat this process so we have kick u kick and block function block u block so using an array we can store a sequence of events or actions so we're going to store a bunch of different actions like jumping punching kicking and blocking within an array so let's create an array named actions let actions equals and i will keep this empty for now so within actions let's store some actions actions let's say we would like to jump first so i will store the name of my jump function followed by maybe punch then how about kick then block so how do we call these functions stored within our actions we can use a for loop or a for each loop i'll show you both let's begin with a for loop four then we need our index let i equal zero we will continue this for loop as long as i is less than actions dot length and we will increment i by 1. so during each iteration of our for loop let's take our actions at index of i and then add a set of parentheses to call the function within our actions array so after running this program this will display you jump you punch you kick and you block now another way of writing this that would be simpler in my opinion would be to use a for each loop so we would write something like this actions dot for each then we will need an argument that will be funk short for function then arrow function func then add a set of parentheses and this would do the same thing now the nice thing about this array of functions too is that we can rearrange these elements maybe we would like to kick first then block then jump and then punch so that's one of the benefits of an array of functions if you need to store a sequence of actions or events you can store the name of a function and then invoke it whenever you need it so that is an example of an array of functions if you would like a copy of all this code i will post this to the comments section down below but yeah that's an array of functions in javascript hey you bro hope you're doing well in this video i'm going to explain gutters and setters in javascript so sit back relax and enjoy the show all right people getters and setters these are ways to get or set the properties of an object they secure better data quality and they can do extra things behind the scenes i have a simple user object there's three properties first name last name and full name full name contains a function that will return this first name and this last name so without using getters and setters to assign some of these properties i would just type the name of the property so user dot first name and we can assign some first name like spongebob he's a cool dude and then let's assign a last name to this user so that would be user dot last name equals some last name okay then to call this function within my property full name within a console.log statement i would type the name of the object dot the name of the property full name then add a set of parentheses to invoke it and as you would expect this displays spongebob squarepants now this time let's assign some values to these properties using getters and setters and there's a specific keyword for each of these we will set some of these values of these properties so let's create a setter for first name so we use this set keyword followed by a unique function name let's say first because we're going to set the first name and then there is one parameter and with setters there can only be one parameter so let's just name it value so within the setter we will take this dot first name and assign it equal to our value that we assign now let's do the same thing with last set last this dot last name equals some value that we pass in then be sure to separate these setters with a comma okay so now what we're going to do is use user dot the name of the setter so this would not be user.firstname it would be user.first so currently this works the same as before however we have an entire block of code dedicated to assigning and formatting this value so let's say we would like to make the name all uppercase we can just add that on value dot to uppercase and let's do the same thing with last name my name is all uppercase then so if there's any other formatting or calculations that you need to do you can just add that to your setter now let's change this full name property to a getter so we need to use the get keyword let's get rid of this function portion but keep the parentheses now to access this full name we do not need to invoke it we can access it like we do a property so that would do the same thing too now where getters and setters are really useful is when you use them within a class so let's turn our single user object into a class class user and let's create a constructor constructor and there are two parameters first and last first comma last now let's take these two lines of code and we're going to move them to within our constructor and they are going to behave very similarly so this dot first this dot last this dot first equals first this dot last equals last we can get rid of these properties here and get rid of those commas okay now let's construct a user object let user equal new user then pass in a first name and a last name spongebob squarepants cool let's create a second user so we have user one and user two user two will be patrick star and then we have to display the name so user two dot full name spongebob squarepants and patrick star so that's the benefit of using getters and setters it's a way to get and set properties of an object it secures better data quality and it does extra things behind the scenes if you need to do any sort of formatting so those are getters and setters if you would like a copy of all this code i will post this to the comments section down below if you can give this video a thumbs up and drop a random comment down below and well yeah those are getters and setters in javascript yo what's going on everybody it's you bro hope you're doing well in this video i'm going to explain at template literals in javascript so sit back relax and enjoy the show well well well we are on a template literals this is a new feature as of es6 it's another way of formatting output that can contain placeholders for formatting and inserting strings values variables etc we use a combination of backticks and placeholders a placeholder is a dollar sign followed by a set of curly braces within the set of curly braces we can insert a value or variable a few of the benefits of template literals is that our output can use multiple lines and not only that but we can embed expressions within a placeholder here's an example of some sample output without and then with a template literal let's say we would like to display a message hello first name last name and then an exclamation point so without a template literal we would write something like this let first name equal some first name and then we will create a variable for last name let last name equal some last name now to display a message we would say console.log hello space plus first name plus space plus last name whoops then plus exclamation point so this does in fact work but it's a lot of work to actually write all this and concatenate all these strings together so a way to simplify this is that we can use a template literal we will still continue to use a console.log statement but within it we're going to use a set of backticks these right here it's easy to confuse these with single quotes so pay attention to that so within a set of backticks we can write a string like hello space then to insert a value variable or whatever we need to use a placeholder dollar sign then curly braces and list the value or variable within the set of curly braces if i need to display my first name within the placeholder i will just say first name space i need another placeholder for last name then i will add an exclamation point so this will do the same thing however it's a lot easier to work with because we're using these placeholders now the nice thing about this too is that this can take up multiple lines so if i need the last name to display on the second line i can just hit enter so there's no need to use a like new line character so it's a lot easier to read and work with another benefit of using a template literal is that we can embed an expression within a placeholder this time let's say that the user is on some sort of shopping website and they're going to make a purchase but we need to display a total price including tax so let's create a few more variables let price equal some price how about ten dollars for something and a tax rate let tax rate equal how about five percent 0.05 and we will need a total i'm going to declare it but not yet assign it let's let the user know what the price is the tax rate the amount of tax that they're paying and the total so let's use a template literal for that console.log let's display the original price first so we need backticks the price is colon space then our placeholder then our price variable the price is 10. i think i'm going to add an additional dollar sign the price is 10 now let's display the tax rate so we need our backticks again then within here let's display tax rate placeholder tax rate tax rate 0.05 now let's display the price of the tax so tax is placeholder then price times tax rate i'll probably add another dollar sign too okay now let's calculate the total console.log backticks total is colon space placeholder total equals price plus then within parentheses price times tax rate total is dollars and fifty cents so as you can see we can embed entire expressions within a template literal so that's a benefit too so everybody in conclusion a template literal is another way of formatting output that can contain placeholders for formatting and inserting strings values variables whatever you use a pair of backticks and then you can insert a placeholder that contains a value variable whatever you need to display and the benefits of using a template literal is that your output can take up multiple lines and you can embed expressions within a placeholder so that is a template literal if you would like a copy of this code i will post this to the comment section down below and well yeah those are template literals in javascript hey it's bro hope you're doing well in this video i'm going to explain how we can create some html elements using javascript so sit back relax and enjoy the show well i guess i'm going to show you all how we can add html elements using javascript there's two ways to do this by using inner html or inner text by using inner html we will actually be vulnerable to cross site script attacks so i would not recommend using this on a regular basis but we should still understand how it works the better option is to use inner text so i'll show you both starting with inner html let's say we need to add an h1 header tag to the body of our document so we'll create a variable we can either use let or const i'll create a constant const h1 equals document dot create element and what type of tag do i want to create what about an h1 header tag so just pass that in as an argument and put it within quotes so we now have an h1 header tag named h1 and now what i'm going to do is take my h1 header tag and use inner html and change the html of this h1 header tag so let's add maybe hello world and then i need to append the body of my document so document dot body dot append then pass in h1 the name of my tag and well there we go and now since we're using the inner html property we can add some tags to this text so let's say i need this text underlined so i can use a pair of underlined tags that would be u within angle brackets and then close it and my text is now underlined however this opens the door to cross slide scripting so what if i wrote a malicious script within here so it's much better to use inner text instead of inner html so let's replace inner html with inner text but there's going to be one issue we'll run into so these underlined tags are going to be added directly as if it was part of the string so let's create a separate element just for these underline tags so let's add that here const underline equals document dot create element then add u for underline and you do not need those angle brackets and let's get rid of these within inner text now this part may not make sense but it will momentarily so replace h1 with the name of our underline tag then we are going to append h1 h1 dot append then pass in your underline tag yep there we go so this is a much safer way of adding an html element but let's take a look in depth so i'm going to go to elements and if we take a look at our body we have an h1 header tag and within our h1 header tags we have a pair of underlined tags that has the text of hello world so basically what we did is we created two tags h1 and underline we changed the inner text of our underline tags so when you use inner text on a pair of tags it will change the text between the opening and closing tags then we appended h1 with our underline tag that's why this pair of underlined tags is within our pair of h1 tags we appended the underlined tags to the h1 tags and then lastly we appended the h1 tags to the body of our document document.body.append h1 so that's how that works so let's try this again and add some different text this time for practice let's create a different constant let's say h2 const h2 equals document dot create i can't see anything create element and then pass in what tag you want to use what about h2 okay let's maybe use italic so const italic equals document dot create element and i will italicize your text so let's take italic dot inner text equals what about sup with a question mark okay then we will append h2 with italic h2 dot append pass in your italic tag document dot body dot append h2 all right there it is all right one last one for practice what about some paragraph tags so const p equals document dot create element p maybe we will make this bold so const bold equals document dot create element and to bold your text that would be b i guess strong works as well so take bold change the inner text equal to maybe buy by now take our p tag dot append pass in bold then append the body of our document document dot body dot append then pass in our p tag all right there it is it's actually a little bit hard to tell if it's bold let's just test this so this is before and this is after well okay then everybody so that's how to create some html elements using javascript you can use either inner html which i would not recommend because you'll be vulnerable to cross-site script attacks and the better option would be to use inner text maybe i'll make a separate video on cross-site script attacks i haven't decided yet so if you have the capability please give this video a thumbs up and drop a random comment down below and well yeah that's how to create html elements using javascript yo what's going on everybody it's bro hope you're doing well and in this video i'm going to show you all how we can modify html elements using javascript so sit back relax and enjoy the show all right welcome back everybody in today's video i'm going to show you all how we can modify html elements using javascript there's two popular ways of doing this we can select an html tag using get element by id or query selector getelementbyid is the older way of doing things the newer more powerful way is to use query selector really you can use either one but i'm going to be sticking with query selector there's a few additional features now before we modify some html elements we'll need some html elements to work with so let's head to our html document and add a few tags let's say we need an h1 header tag so h1 i will give this tag a unique id of my h1 and then let's display some text like hello world and then close it let's add a couple paragraph tags so these will be p tags i will give this a class name of what about my p my pp as you can see this is a very mature channel then let's add a sentence between these paragraph tags this is sentence one let's copy this line of text and paste it the second set of paragraph tags will have the same class name but we will change this is sentence one to sentence two and then let's create a button so we need a pair of button tags button i will give this button a unique id of my button and will display some text on the button like click me all right so we should be good so let's save then head to our javascript file so let's say we would like to change the text of our html document some of these tags when we click on this button so we can easily do that but first we need to select our button so the way in which we can do that is to take our document dot query selector and select our button so we need the id of this button my button and if we need to select an id we need hashtag then the name of that id and then place it within quotes too all right so we are taking our button with an id of my button dot on click and on click is a property on click equals sum function so when we click on our button it's going to perform whatever code is within this function let's change the text of our h1 header tag i'm going to create a constant h1 to store this element and we are going to use document.queryselector then pass in the id of this tag so that would be my h1 so within quotes add a hashtag then follow this with the id name then we are going to take h1 dot inner text and set the sequel to some new text like by world so now when i click on this button after saving it should update my text by world now what if we need this text may be underlined well we can easily do that using the create element method of our document but let's store this within a constant i'll create a constant named underline and this will be document dot create element then list the name of the tag so we need a uteg to underline so we are going to take underline and set the inner text equal to by world then we can get rid of this line we will take h1 dot append then pass in underline so there's one more change that we're going to make so let's save and click this button so this will append the text to the end of the current text that is within our h1 header tag so let's just clear that h1 dot inner text and an easy way to clear syntax is just to set the inner text to an empty string so now when i click this button it will change the text to by world all underlined now let's change some of these paragraph tags there's another variation in query selector named query selector all we can select more than one element so i'm going to create const p to hold some p tags const p equals document dot query selector all and we can pass in a class name so the class name that we need is myp so then within quotes add a dot then the class name so if you need to select an element by id you use a hashtag if you need to select a class name that would be dot then the name of the class so p is now a type of array it's a node list of elements but it behaves exactly like an array so let's modify this first sentence but we need to access it by an index so that would be p at index 0 and i will change the inner text equal to what about whoa all right so when i click this button it's going to change the first element within my array of p which is this first paragraph tag the first set of paragraph tags now if i change this index to one that will modify the second sentence now what if you need to change both sentences there's a few ways in which you could do this but one way that i like to use is to use a for each loop that is built into arrays so p dot for each then we need our arguments element i will use the arrow function for simplicity we will take our element dot inner text and set this equal to some new text like just the word whoa so after saving if i were to click on this button then all elements with the class name of my p will have their inner text changed to whoa so that's why both sentences change this time now let's remove this button after clicking it so let's get this element by maybe the tag name itself button so let's create const button equals document dot query selector then pass in the tag name of button and then put it within quotes then to remove this element we would take our element button dot remove method so when i click this button it will be removed from my document now here's the thing with query selector if we pass in an element name the first element that has the same name will be selected so what if we have multiple buttons i'm just going to copy this set of button tags and then paste it maybe two times let's get rid of the ids for buttons two and three and change some of the text as well so let's change the first button to click me one then click me two and then click me three so we should now have three buttons and when i click on this first button it will remove the first instance of button so one thing we can do if we need to remove all of these buttons for some reason we can use query selector all we will select all elements that have the tag name of button and i will store this within a node list of elements of buttons now to remove one of these buttons i will list the index of buttons so the first button would be index 0 so click me one is now gone let's change this to buttons at index of one click me two is now missing then if i change this to buttons at index two click me three is gone now if i need to remove all of these buttons i can use the for each method to do that much like what we did with our paragraph tags so i will take buttons dot four each our arguments are just element arrow function element dot remove then when i click on click me one that will remove all of the buttons here well everybody that's how to modify html elements using javascript if you would like a copy of all this code as always i will post this to the comment section down below and well yeah that's how to modify html elements using javascript hey what's going on everybody it's bro hope you're doing well and in this video i'm going to demonstrate how we can add or change css properties using javascript so sit back relax and enjoy the show hey so in today's video i'm going to show you all how we can add and change css properties we'll need some html tags to work with let's create an h1 header tag and a button and when we click on our button we will change the css properties of our h1 header tag so let's create an h1 header tag with a unique id of my h1 and let's display some text hello world and then close it okay let's create a button so button i will give this button a unique id of my button and we'll add some text like click me okay so we have an h1 header tag and a button the h1 header tag has an id of my h1 and the button has an id of my button so let's head to our javascript file so when i click on this button i want to change the css properties of my h1 header tag so let's create a function to do that so document dot query selector and i will pass in the id of my button so within quotes hashtag my button remember you need that hashtag for an id so dot on click then we will set the sequel to a function function parentheses curly braces any code that we want to use to change some of the css properties we can place within this function now let's assign our h1 header tag to a constant const h1 equals document dot query selector then pass in the id of our h1 header tag so within quotes hashtag myh1 alright now the next step let's display some of the style properties that we have access to i will do that with a console.log statement just so that it's easier for us to take a look so i'm going to type h1 dot style and pass this as an argument to my log method so let's take a look here so i need to click on my button and let's take a look at some of these so we can add an animation we can change the background color all sorts of different things so let's change a few of these properties let's begin with the color so to change the color property i would type h1 dot style then after style type dot and then the name of the property that you want to change so i would like to change the color which is right here so color equals within quotes the name of a color maybe let's try blue so after clicking on this button the text is now blue you can also pass in rgb values or hexadecimal values if you know how they work so if i need green that is hashtag zero zero ff00 so this is a very bright green so you can add custom colors as well now let's change the background color so let's take a look to see if there's a property here so background where is it color notice that these are in camel case normally with css properties there is a dash between some of these words so h1 dot style dot background color i just lost it there it is background color i'm just going to copy that paste it set the sequel to maybe black okay so the text is green and the background is black let's change the font too so h1 dot style dot font family equals i like this consoles font it's pretty cool it's like digitized all right let's enter this next so h1 dot style dot text align equals center so this should be centered in my webpage cool let's try a few more what about border h1 dot style dot border equals what about four pixels solid i think the default might be black so it might be difficult to see oh it's green okay uh let's change that to something else h1 dot style dot border color what about blue so again you can pass in a color name rgb values or a hexadecimal value so the border color is now blue well everybody that's how to add or change css properties using javascript you type the name of the element that you would like to change followed by style then the property name then you can assign a value so if you would like a copy of this code i will post this to the comment section down below if you can give this video a thumbs up drop a random comment down below and well yeah that's how to add or change css properties using javascript yo what's going on everybody it's you bro hope you're doing well and in this video we're going to discuss some basic mouse events in javascript so sit back relax and enjoy the show all right well here's how to detect mouse events there is a built-in method of elements named add event listener we can listen for a type of event to occur and then call a function we can pass in a callback function an arrow function whatever so first we'll need an element to work with so within our html document let's create a basic div tag with a unique id of my div then close it and save all right so let's give this div tag some unique properties let's create a box and we can interact with the box via mouse events so i'll create a constant div equals document dot query selector then pass in as an argument the id of your div tag which was hashtag my div alright so we have a constant named div let's change some of the css properties div dot style and i will change the background color background color to maybe gray and we'll need to change the width and height as well so div dot style that width maybe 200 pixels and the height div dot style dot height equals 200 pixels so we should have a gray square within our web page now let's add an event listener we just have to follow this formula so we need an element add event listener a type and then a function so our element is div dot add event listener we'll pass in a type of event let's listen for a mouse click so within quotes click comma then a function for simplicity i'm going to add an arrow function so e will be the arguments arrow then what we want to do we can place that within a set of curly braces i would like to display whatever e is console.log e and we'll take a look at this and if i were to click within the square this will display the mouse event that occurred this is a mouse event object and it has a bunch of different properties that you might find useful like where you clicked within the square there's a time stamp to element stuff like that so this is a mouse event object now let's display maybe just a message like you clicked the mouse so now when i click within the square it will display this message you clicked the mouse within the curly braces of this arrow function we can do something else too let's change the background color of our div tag so i will copy all this and let's change this to maybe what about yellow that's an annoying color so when i click within the square it will change the background color to yellow and that kind of hurts my eyes so let's get rid of that now the next event is mouse down so let's copy what we have we're only really going to make one change and place this within one giant comment okay so mouse down will be the type of event u are holding the mouse down and let's change the color to what about red okay and then save if i were to hold down the mouse it will display you're holding down the mouse then there is a separate event for mouse up if you let go of the mouse so let's copy this and change one thing mouse up you let go of the mouse you let go of the mouse and let's change the color back to gray all right so i'm holding down but i'm not letting go the color is red and i'm going to let go in three two one zero and it's back to gray you let go of the mouse so that is mouse down and mouse up what about a double click well there's an event for that so let's copy one of these blocks of code change the event to dbl click let's change the text u double clicked and i'll change the background color to purple okay so if i click once nothing happens but if i double click well then that will execute this function you double clicked and it will change the background color now this next one is odd if you right click and open this context menu well there's an event for that so let's copy one of these blocks again and this is context menu let's change the text to you opened the context menu and we don't really need to change the color so let me get rid of that so i'm going to save then right click you opened the context menu this next one's a good one we can detect to see if we enter the area of an element so we can use the mouse over event for that so let's change this to mouse over you entered the square okay so if i were to take my cursor and enter the area well then this will execute that function you enter the square so what if we leave well there's another type of event for that so that would be mouse leave and we'll change this back to gray you left the square okay so i'm entering no i'm leaving entering leaving entering leaving you get the idea here's the last type of mouse event that will discuss mouse move our element can detect to see if there's mouse movement so mouse move and we don't really need this you are within the square okay so if i were to move my mouse through my square you can see that these notifications are starting to pile up so an element can detect mouse movement too all right everybody so those are some basic mouse events we can detect clicks mouse down mouse up double clicks opening the context menu hovering over an element leaving that element and detecting to see if there's movement within an element so i will post all of this code to the comment section down below if you can give this video a thumbs up leave a random comment down below and as always subscribe if you'd like to become a fellow bro hey you yeah i'm talking to you if you learned something new then help me help you in three easy steps by smashing that like button drop a comment down below and subscribe if you'd like to become a fellow bro [Music] you

Channel: Bro Code

Views: 95,703

Rating: 4.984293 out of 5

Keywords: javascript tutorial, javascript, javascript tutorial for beginners, programming tutorial, learn javascript for beginners, javascript course, java script tutorial, js tutorial, java scripting tutorial for beginners, javascript tutorials, javascript for beginners, java script, programming tutorial javascript, javascript (programming language), javascript course for beginners, javascript crash course, learn to code, learn to program, coding tutorial, yt:cc=on

Id: t9dEgHpCNJE

Length: 270min 20sec (16220 seconds)

Published: Sun Apr 25 2021