JavaScript Full Course for free 🌐

hey guys in this video i'm gonna teach you everything you need to know to get started writing code in javascript so sit back relax and enjoy the show if you wouldn't mind please leave a like comment and subscribe one like equals one prayer for the youtube algorithm all right let's get started everybody what the heck is javascript javascript is a web-based interpreted programming language that's used to add interactive behavior to web pages build web and mobile applications to create command line tools and for game development i like games here are some important notes before we get started javascript is not the same as java even though they share the same name both languages were developed around the same time now knowing html and css is helpful but not necessary at least until we near the end of this series where we begin working extensively with the dom the document object model hey if you're interested i do have a one hour full course on both of those subjects what you'll need you'll need a web browser and a text editor you'll need a web browser well because javascript runs in a web browser i recommend using the latest version of chrome firefox safari opera whatever please do not use internet explorer i also recommend a text editor a few popular text editors include but are not limited to visual studio code sublime text replit which is an online text editor or notepad if you want to torture yourself in this series i'll be using google chrome as my web browser and visual studio code for my text editor if you would like to download visual studio code i'll show you how to download visual studio code head to this url code.visualstudio.com look for this blue drop down menu then download the latest stable version for your operating system i'm running windows i will install this for windows then your download should start automatically if it doesn't you can hit this big blue button then i'm just going to go ahead and open this accept the license agreement yes i actually did read it that fast if you would like you can create a desktop icon next install we might as well go ahead and launch vs code now within vs code the first thing i recommend doing is downloading the live server extension let's go over to the left navigation bar go to extensions then look up live server then we're gonna click on this let's pretend that this wasn't already installed then click install what live server does is that every time that you save your javascript file it will update your current web browser right away to reflect any changes it's a helpful development tool we're going to create a new folder to hold all of our files i'm going to go to open folder i'm going to create a new folder on my desktop i'm going to right click go to new folder i'll name this website click website select folder there we go now let's create a new javascript file go to new file i'll name this file index.js be sure to get that extension js because well that's a javascript file i'm also going to create an html file index.html on a website this would be the landing page then a css style sheet which i will name style dot css okay we have our three files index.javascript file our index.html file then our css stylesheet we'll need html skeleton code to work with so within your html file if you type exclamation point then hit tab that will generate some sample text to be used to create a webpage we'll want to take care of this early let's link our css style sheet within the head tags of my html document i'm going to create a link tag link take the rel attribute set the sql to style sheet the next attribute is href set the sql to your css stylesheet style.css so our stylesheet is now linked to our html file then we need to link our javascript file to our html file within the body of my html document i'm going to create a pair of script tags script that's the opening tag then forward slash script to close it within the opening script tag i will set the source attribute equal to the name of my javascript file mine is index.js then be sure to save everything to save myself from potential future headaches i tend to save all three files to display output from our javascript file we'll need to open up a web browser an easy way to do that would be to go to explore right click on your html file open with live server i now have this window to work with this window is a representation of my html file when coding with javascript i like to place my browser window and vs code right next to each other kind of like this to access our console which we can use to display output i'm going to right click within my window go to inspect click on these arrows then go to console and then just save any output within my javascript file will go to my console to display some output we can type console.log then a set of parentheses typically with programming you end a statement with a semicolon it's like the punctuation at the end of a sentence it's optional to add a semicolon to the end of a statement but in nearly all programming languages besides python to add a statement you need a semicolon i type it in just as a force of habit but it would still work regardless now let's type something let's type some output to the console window this can be either within single quotes or double quotes let's say something i like some food you like pizza i do have that live server extension set up when i save that will update my web browser within my console we have the statement that i made i like pizza if i would like to print another statement i can again type console.log then within either single quotes or double quotes i can say something else it's really good i like pizza it's really good you can also create an alert box by typing window dot alert within the parentheses within a set of quotes what would we like to say i really love pizza alert will create a pop-up i really love pizza there's also comments to create a comment you use two forward slashes comments are ignored by the interpreter this is a comment usually comments are used for notes for yourself or for other developers you could also write a multi-line comment by typing forward slash asterisk wherever you would like your comment to end you would type asterisk forward slash again this is a multi-line comment all right everybody that is a quick introduction to javascript and in the next topic we'll discuss variables all right everybody that's a quick introduction to javascript hey if you enjoyed this video let me know by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro all right everybody variables so a variable is a container for storing data it's a representation of some value think back to middle school algebra class where you had to solve an equation you have to solve for x and x is some representation of a value it's basically no different in programming a variable behaves as if it was the value that it contains there's two steps to creating a variable declaration and assignment to declare a variable we use one of three keywords either var let or const we'll discuss const in a future video but for now we can either use var or let but using let is best practice due to something called variable scope but that won't make too much sense until we reach the video on functions so for now for best practice to create a variable let's use the keyword let we precede the variable with let and now we need a unique descriptive name of this variable so if you're thinking of algebra you might think of a variable such as maybe x or y like they are some number but in programming you want a variable to be descriptive of what it contains let's assign a number to this variable maybe in this example we need to store a student's age so age would be a descriptive name for this variable and that is step one we have declared a unique variable named age but it doesn't yet contain a value that's where assignment comes in that's step two so let's try and use this variable console.log and i'm just going to display age and then let's see what happens if you declare a variable but do not assign it a value it's undefined so we haven't reached step two yet we've only declared a variable when you display a variable make sure it's not within quotes because then we're literally printing the word edge instead of the value contained within age the variable now step two is assignment we take the variable name and use the assignment operator which is an equal sign and set this equal to some value let's say that i'm 21 years old not anymore but i like to think that i still am now when i display this variable age it displays the number 21. so age is a variable it behaves as if it was the value that it contains now with creating a variable you can do this in two steps or you can combine them both together so instead of taking two lines of code we could combine them both together like this and this would do the same thing but there may be times when you need to declare a variable and then assign a value later on like maybe you're accepting some user input so in that case it would be better to do that in two steps different variables have different data types 21 is a number data type we can use this variable in some arithmetic expressions maybe it's my birthday and i need to add one to my age i can easily change that by setting age equal to age plus one and my age is now 22 so this is a number data type another data type is a string a string is a series of characters let's create a variable to hold a student's name so we will use that let keyword and i'll create a variable name named first name then i could assign a value later or right away i'll do so right away so i will set first name equal to then to create a string we can use a set of quotes either double quotes or single quotes and i can add a series of characters so why don't you enter in your first name and now i can use this variable and it contains a series of characters let's display this within our console console.log first name so this displays bro 21 another data type is a boolean a boolean is only one of two values true or false this time let's say that we have a boolean variable named maybe student if a person is currently enrolled we could set student to equal true if they're not enrolled or maybe they graduated this could be false so a boolean is one of two values true or false then let's display this within our console console dot log student and this displays false or if i was a student this could be true so these are three common data types strings which are a series of characters numbers and booleans as a beginner it's actually really easy to mix up strings and numbers numbers we can use with arithmetic expressions strings we cannot let's use that previous example of incrementing my age by one because it's my birthday age equals age plus one we can use numbers in arithmetic expressions see my age is now 22 but if this was a string i'll put this within quotes string well when we add one to age it's going to concatenate one to the end of the string i am not 211 years old it's treating age as a series of characters and we're adding an additional character to age so as a beginner you really have to pay attention to data types it is really easy to put things within quotes when you don't mean to when you display a variable within the console or the dom you can display it along with some other text so along with my first name i'm going to display hello hello then after i finish the string i will add comma so hello bro with my second log method i'll print another message perhaps you are age years old hello bro you are 21 years old and what can we do with student um let's say maybe enrolled so this will display true if i'm currently enrolled or false if i'm no longer a student if you need to display a variable within your dom here's one thing that we can do so within our html document let's create maybe some paragraph tags i'll create three so we need an opening paragraph tag and a closing paragraph tag i will set a unique id of p1 copy this paste it two times the second one will be p2 and the third will be p3 so within our dom we have three paragraph tags each with a unique id if i need to change the inner html of these paragraph tags i can do so using this statement document dot get element by id parentheses and then within a set of quotes i will list the id of the html tag i would like to change let's begin with p1 and then i will follow the statement with dot inner html and set the sequel to so let's display hello then to display a variable we will use some string concatenation so we will use plus a variable name let's say first name hello bro okay let's do the same thing with p2 u r so when using string concatenation you do have to pay attention to spaces within strings you are age plus years old you are 21 years old and lastly p3 uh let's say enrolled colon space student enrolled true and then you know you can change any one of these values well yeah everybody those are variables a variable is just a container for storing data it's a representation of some value a variable behaves as if it was the value that it contains there's two steps declaration and assignment you can do these both together or separate and variables have different data types three that we discussed are strings which are a series of characters numbers and booleans which are either true or false you can display variables along with text within your console or you could use string concatenation to display a variable's value along with some text in your dom so yeah those are variables everybody if you would like a copy of all this code i'll post this in the comments section down below if you enjoyed this video let me know by smashing that like button leave random comment down below and subscribe if you'd like to become a fellow bro hey everybody i have a super quick video on arithmetic expressions an arithmetic expression is a combination of operands and operators operands are values variables etc operators are well the addition sign subtraction multiplication division and modulus which we'll talk about a little bit later an arithmetic expression can be evaluated to a value for example y equals x plus five x and five would be operands and the addition sign would be the operator just really quick let's cover a few maybe we have a variable named students we're a teacher and we have a whole class of students to keep track of i need to add one student i could take our students variable and set the sequel to if i need to increment students by one i can set the sequel to students currently it's 20 plus one and then let's display this console.log students and this should be 21. so we also have subtraction students equals students minus 1 and now we have 19. for multiplication you use an asterisk maybe we're combining two classes students equal students times two and now there's forty students perhaps we're dividing a class in half students divided by two and you use a forward slash and now there's ten now this one's a little bit strange we will discuss modulus the modulus operator is a percent sign it gives you the remainder of any division we have a class of 20 students and we need to divide this class into groups of three but 20 doesn't divide by three evenly i can store the remainder within a separate variable i'll create a new variable called extra students and we will take students modulus 3 and let's display the extra students that we have so we have two extra students but if this was 21 well 21 divides by three evenly so the remainder is zero we have zero extra students so that is the modulus operator one popular use of the modulus operator is that you can find if a number is even or odd by taking a value or variable modulus 2. if extra students is 1 that means we have an odd number if it's 0 that means we have an even number so that is the modulus operator it can be somewhat tedious to write these long expressions out so there is a shortcut instead of saying students equal students plus one you could just write students plus equals one this is also known as an augmented assignment operator it's kind of like a shortcut so students is now 21. then we have students minus equals one students is 19. students times equals 2. there are 40 students now students divide equals 2. and there are 10 students with augmented assignment operators you can use these if you're reassigning the same variable like i couldn't say let extra students modulus equals three right and then if we were to display this we would have a syntax error so augmented assignment operators are kind of like a shortcut you can do if you're reassigning the same variable another thing to consider with arithmetic expressions is that there's operator precedence maybe we have this equation let result equals 1 plus 2 times three plus four and then i'm just going to display whatever the result is so the result is 15. the order in which you solve this is that you begin at the left and work your way towards the right you solve anything within parentheses first then exponents then multiplication and division then lastly addition and subtraction starting on the left and working our way towards the right we would solve anything with parentheses first three plus four is seven then we solve any exponents there aren't any multiplication and division we can either resolve one plus two or two times seven so multiplication has precedence over addition we would solve this first then it's just 1 plus 14 which is 15. now by adding a set of parentheses you can force operator precedence this time i would like to resolve 1 plus 2 first and now we have a new result the result is 21. so yeah that's a super quick video on arithmetic expressions it's a little dull but it's kind of necessary to cover hey if this video helped you out help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey everyone in this video i'm going to show you how we can accept some user input in javascript i'll demonstrate two ways the easy way with a simple window prompt and the difficult way with an html text box let's begin with the easy way i'm going to create a variable named username and the user will type in a name for themselves let username equals and to create a window prompt we type window dot prompt parentheses and within the parentheses we can add a message what's your name after a user types in some user input we will assign whatever they type into a variable so i'm going to display this console.log user name what's your name type in your name press ok and this will display the value that you typed in the difficult way although it's more practical is to use some html elements within our html file let's create a prompt a label enter your name and then maybe i'll add a line break and an input box input this is a self-closing tag a line break with my input tag let's set the type equal to text it's a text box and i'll give this an id of my text okay so save we have our label and a text box let's create a submit button we'll need a pair of button tags type will be button and the id will be my button you can add some text to the button between the button tags just write something submit okay make sure to save your html document then we'll head back to our javascript file what i'm about to show you is a little advanced but you can always just copy this and save it for the future after clicking our submit button whatever text is within our text box we'll assign it to a variable we'll type document dot get element by id then type my button follow this with dot on click and we will set this equal to function parenthesis then a set of curly braces at the top of my program i'm going to declare my variable but not yet assign it and within my function the set of parentheses i will take username and set this equal to document dot get element by id parentheses then within quotes my text that's the id of the text box dot value so when we click on this button take whatever text is within our text box and assign it to user name then afterwards let's display whatever our username is within our console or if you want we can change maybe this label console.log user name type in your first and last name press submit and this will display your name let's change this label but i'm going to give this label a unique id id equals my label so save go back to your javascript file i'm going to edit the inner html of this label document dot get element by id my label dot inner html set the sequel to user name okay so again type in your first and last name press submit and this should change that label maybe i'll add hello plus username this time hello bro code so yeah those are two different ways to accept user input you can go the easy way with a simple window prompt or you can take the difficult approach with an html text box although it's more practical but it's above our current level of understanding at this point in time so yeah those are two ways to accept user input in javascript if this video helped you out you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain type conversion type conversion is the ability to change the data type of a value to another and i'll explain how to do this with strings numbers and booleans here's one issue when accepting some user input let's say we have variable age and i'll create a window prompt to ask a user to enter in their age how old are you once we accept some user input i'm going to increment age by one because let's say it's the user's birthday then let's display the user's age console.log happy birthday u r our age variable years old how old are you let's say that i'm 21 i press ok happy birthday you are 211 years old when we accept user input it's of a string data type we can't normally use strings for any sort of arithmetic expressions what i intended was to add our edge 21 plus 1. that would give me 22. if you add a number to a string you just concatenate that number to the end of the string because a string is just a series of characters if i need to take some user input and use it with some sort of arithmetic expression i'll want to convert that string to a number and one way i can do that is to use the number constructor so i'm going to set age equal to then type number make sure it's capital parentheses and then pass in age this will convert a string to a number how old are you 21 press ok happy birthday you are now 22 years old if you ever need to get the data type of a variable there is a type of keyword let's display it type of age so before we convert our age variable it's a string then let's display the data type of age after we convert it at first it's a string we convert it and now it's a number and then we can use it in arithmetic expressions here's a few other examples we have three variables x y and z i'm going to set x to equal and we will use the number constructor and we will convert the string 3.14 into a number and then i will display whatever x is as well as the data type type of x remember we're converting a string into a number so 3.14 is now a number let's convert a number into a string y equals and we can use the string constructor and we will convert the number 3.14 into a string console.log y and type of y 3.14 is now a string and to convert something to a boolean you can use the boolean constructor so if you pass in an empty string just a set of quotes this will give you false console.log variable z and the type of z so converting an empty string to a boolean will result in false and this is of the boolean data type but if you type in anything else it will give you true so maybe i try and convert the word pizza when you convert a string to a boolean that's not empty this will give you true if it's an empty string just a set of quotes it results in false this would be useful if you need to accept some user input or user types in their name if they skip that step and using an if statement which we'll talk about later you can check to see if a user typed in something or not based on if that boolean is true or false but we'll get into that later so yeah those are a few basic ways of type conversion you can change the data type of one value to another if you need to get the data type of a variable just precede that variable with the type of keyword and to convert a value or variable into another data type you can surround that value or variable with a given constructor the number constructor the string constructor or the boolean constructor oh one fun fact too if you try and convert something into a number that normally shouldn't be a number like the word pizza well then this will result in n-a-n not a number that's just a fun fact so yeah that is type conversion in javascript if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey everybody in this video i'm going to explain constants a constant is a variable that can't be changed it adds some security to our code to declare a constant you use the const keyword in place of var or let in this example we're going to create a sample program to calculate the circumference of a circle which has this formula circumference equals 2 times pi times radius let's declare all of the variables that we'll need we're going to write this program without constants and then later with constants and i can show you their usefulness we'll create three variables let pi equal 3.14159 just the first few digits of pi let radius and let circumference we're going to accept some user input we will assign radius equal to window dot prompt enter the radius of a circle then when we accept user input it's a string we'll need to convert that to a number radius equals and use some type conversion and convert our radius into a number to calculate the circumference of a circle we will set circumference equal to and follow that formula 2 times pi times radius and with the radius the user will type that in at the end of our program we will display our result the circumference is circumference let's run this enter the radius of a circle if the radius is 9 i press ok the circumference is 56.54 now here's why constants are useful let's say that somebody changes our code pi now equals 420 69. now when we run this program and we type in 9 for the radius while the circumference is now 7572 we can prevent a variable from being changed if we assign it as a constant in place of let use the const keyword and our variable pi is now a constant and a common naming convention for constants is that you make all of the letters uppercase it's not necessary but it's good practice then we are going to change that here too enter the radius of a circle i'll type 9 the same as before and we encountered a type error assignment to constant variable so once we declare a constant we can't change it so if i were to get rid of this line run this again 9 the circumference is 56.54 you'll want to use constants as often as possible if you have a variable that you know will not be changed later we're not going to assign radius and circumference as constants because we'll need to update them later in our program so yeah those are constants it's basically just a variable that can't be changed it adds a little bit of data security if you found this video helpful you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro all right everybody let's talk about javascript math math is an intrinsic object that provides basic mathematics functionality and constants there's a lot of functions i think that you would find useful in this example we have a variable x and x equals 3.14 feel free to choose any number that you want maybe i need to round this variable well there's a built-in function of math that can do that for us i could just type x equals then type math dot and then i have access to a bunch of different functions i would like to round x so add a set of parentheses and pass in a value or a variable that you would like to round and then if i was to display the value of x with console.log this would display my value or variable rounded whatever's within the set of parentheses of this function and x rounded is 3. let's cover a few more the floor function will always round a number down if this variable was 3.99 the floor function will always round down x is still three if you need to round up there is the ceiling function which is shortened to c e i l if x is 3.14 seal will round up x is now four you can raise a value to a given power x equals math dot pow in the parentheses you'll give a base and an exponent each is separated with a comma x to the power of 2 is 9.8 x to the power of 3 is 30.9 their square root x equals math dot square root sqrt for short the square root of x is 1.77 to find an absolute value you can use the absolute value function x equals math.abs the absolute value is the distance away from zero if x was negative three point one four the distance away from zero would result in a positive number positive three point one four this time we have a couple variables and we need to find the maximum and the minimum we'll create two more variables let y equal i don't know what about five let z equal nine i'll declare a maximum and a minimum let maximum lat minimum i will assign maximum equal to math.max function and pass in x y and z this will return the maximum and assign it so the maximum between x y and z is nine then there's also minimum so minimum equals math.min the minimum between x y and z is x 3.14 there's also some built-in constants too with x i assigned 3.14 i would like to assign pi with more digits well there is a built-in constant of math x equals math.pi and when i display x x is three point one four one five nine two six five three five eight nine seven nine three so math is an intrinsic object that provides basic mathematics functionality and constants there's a lot more functions and constants than what we covered but here's a few of the basics so yeah that is javascript math if you found this video helpful you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey welcome back everybody in this video we're going to create a practice program to find the hypotenuse of a right angled triangle and the formula to solve that is c equals the square root of a squared plus b squared we'll create two variations of this program first we'll accept some user input via some prompts then later on we'll adjust this program and accept some user input through some html text boxes let's begin let's declare three variables each for side a b and c let a let b and let's see we'll accept some user input for sides a and b a equals window dot prompt and the prompt will be enter side a when we accept user input it's a string we'll need to convert that to a number a equals number pass in a let's do the same thing for side b let's copy and paste what we have but change a to b and the formula to calculate the hypotenuse goes a little something like this c equals we'll need to square sides a and b and add them together we can use javascript math dot power function a to the power of two plus copy this paste it b to the power of two then we need to square all of this and that equals c so in the next step we could set c equal to math dot square root and pass in c if you would like to do this in less steps you could copy all of this cut this line and paste what we just copied so this would only take one line of code then at the end we will display side c side c c okay let's run this enter side a a is three b is four side c equals five okay now let's make a more advanced version of this program we'll accept some user input via some html text boxes so let's head to our html file and add a couple elements we'll create three labels label the first will have an id equal to maybe a label then close this tag and i'll add a line break then i'll copy this paste it will have a b label and a c label i'll change the text to side a colon side b and side c okay and this is what we have so far i'll add two text boxes right underneath a and b and then a button later we'll create a self-closing input tag then i'll add a line break at the end before i forget set the type equal to text because it's a text box and i will give this a unique id of a text box okay let's copy this then underneath b label and give this text box an id of b text box okay this is what we have so far then i'll create a button underneath this second text box so right here so we'll create a pair of button tags and a line break i'll set the type equal to button and an id of what about submit button then i should probably add some text so between the button tags submit so let's save then heading back to our javascript file this is what we have to type this will be a little bit advanced for us because we haven't discussed functions yet when we click on this button we need to do something to select this button we will type document dot get element by id within the parentheses we will list a unique id i would like the id of my submit button then follow this with dot on click when we click on this button we would like to do something we would like to perform a function function parentheses curly braces within the curly braces we will execute some code and actually we can copy a lot of what we have here so let's copy our previous code and paste it but we need to change a couple things around we would not like window prompts so let's change this line to a equals document dot get element by id and i would like to get the value of this text box which has a unique id of a text box follow this with dot value we're taking the value of this text box and assigning it to variable a when we accept user input it's normally a string we're going to convert it to a number let's do the same thing with b so copy that line paste it change a to b here and here as well then convert it to a number we can keep this line of code the logic is still the same and lastly we can update this label i'm going to change this around real quick i don't want to display anything but we'll still keep the label i'm going to change the inner html of this label c label document dot get element by id we are selecting c label and i'm going to change the inner html and set this equal to side c colon space plus c okay so make sure you save both your html document and your javascript file and let's run this so side a is three side b is four let's press submit and side c is five so yeah everybody that is a practice program to find the hypotenuse of a right angled triangle if you would like a copy of all this code i'll post this in the comments section down below if this video helped you out feel free to help me out by smashing that like button leave random comment down below and subscribe if you'd like to become a fellow bro hey yeah everybody in this video we're going to create a simple counter program using javascript so sit back relax and enjoy the show let's begin everybody so head to your html document we will create one label and three buttons label use a closing tag add a line break the id of this label will be count label count label the text will set to be zero to begin with we'll need three buttons button close it the first button will have an id of decrease button decrease button and the text will be decrease okay let's copy this button paste it two additional times the second button will be a reset button text reset and the third button will be increase increase button increase i would like to change the font size as well as the positioning of my count label i'll link an external css style sheet so i will create a new file style dot css within the head of my html document i need to link the style sheet use the link tag we'll set the relationship attribute set the sequel to style sheet and set the href attribute to the name of your style sheet style dot css we'll need this count label id i would like to change the css properties of my count label so add a set of curly braces we'll center this label and increase the font size display block text align center font size 50 should be fine 50 pixels save your style sheet save your html file and head to your javascript file we'll declare and assign a count variable let count equal zero when we click on one of these three buttons we would like to perform some function let's select the decrease button document.getelementbyid decrease button dot on click let me close out of this equals a function parenthesis curly braces so copy this paste it two additional times we have reset button and increase button when i select the decrease button i will take our count variable minus equals one and we will change the inner html of this label document.getelementbyid count label dot inner html set the sql to our count copy these two lines of code paste it within each of these functions for the reset button we will set count to equal zero and the increase button count plus equals one let's save when i click the increase button it increases my label decrease decreases my label and the reset button resets my label so yeah everybody that is a simple counter program in javascript i'll post the code for this program in the comment section down below hey if this video helped you out help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey everybody just so you know that this topic is completely optional if you're ever interested in making any sort of games with javascript then this video is a must let's begin to create a random number let's declare a variable and we will set the sequel to type math dot and there is a random method then let's display whatever x is console.log x the random method of math will generate a random decimal number between 0 and 1. but we can actually use that maybe we're rolling a dice how do i generate a random number between one and six so to do this i'm going to take math dot random and multiply this by six this gives us a random decimal number between zero and five technically to truncate the decimal portion we can round down i will surround this with a set of parenthesis and we will use math dot floor and this will round down this generates a random number between 0 and five because computers always start with zero if i need a one through six i can add an offset i'll just add plus one this generates a random number between one and six as if we were rolling a dice now i like to play a lot of dungeons and dragons and there's different sized dice there's eight sided dice 10 sided dice 20 sided dice etc if i'm simulating rolling a 20-sided dice i would multiply math.random method times 20 plus 1. so this generates a random number between 1 and 20. maybe i need to roll a couple dice i'll copy this line of code we'll create variables y and z then display them console.log x y and z this would be as if we're rolling three dice we get three random numbers between one and six just for fun let's create some labels and generate some random numbers within our dom so within the body of my html document i'll create a couple labels label id this will be x label then close this label add a line break i'll add two more y label and z label then i'll create a button close the tag type equals button id equals roll button then i will add some text to the button roll make sure to save heading back to our javascript file when we click on this button we will execute a function so we need to select our button document dot get element by id the name of our button is roll button dot on click equals set the sql to a function parentheses curly braces let's copy these lines of code we don't need to declare these again let's get rid of this text we'll declare the variables at the top so after rolling three random numbers between one and six i will update our labels x label y label and z label we need to select each of these labels document.getelementbyid label dot inner html set the sql to x then do the same thing with y and z make sure to change the labels to y label equals y z label equals z so make sure to save both of your files oh i'm forgetting z there okay so now when i press this button we will roll three dice and we end up with three random numbers between one and six so yeah that's how to generate some random numbers in javascript if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey welcome back everybody so let's talk about some useful string properties and methods i have a variable user name and assign this whatever your first and last name is if we type this variable and add a dot we have access to a bunch of different properties and methods of this string one of which is the length property this will give us the length of a string how many characters are within the string we could assign this to a variable name length equal username dot length or we could display it i'm going to display this with a console.log statement console.log username.length the length of my name is eight characters but yours will likely be something different let's cover a few more we can get the character of a string at a given index type the name of the string variable dot char at add a set of parentheses whatever character you would like to return you will add the index of that character computers always start with zero so the first character in the string would have an index of zero so maybe i would like to assign this to a variable let first letter equal username dot char at index zero or you know i could display it with console.log and then just add this variable and method within the parentheses the character at index 0 of my string is b then index 1 would be r 2 would be o that is the char at method you can find the index of the first occurrence of a letter type the variable name user name dot index of then pass in a character you would like to find the first index of how about o and then i will display this with console.log the index of the first occurrence of the character o is at index 2 0 1 2. there's also last index of last index of and we'll keep that as o the last occurrence of o has an index of five zero one two three four five we can also trim spaces before and after a string so i'm going to display this as it is and i'll turn these into comments okay console.log username and we have all the space that we would like to get rid of so to do that we will reassign username with user name dot trim this gets rid of any empty spaces before and after any other characters we could make our string all uppercase username equals username dot to uppercase and my name is all uppercase there is also lowercase to lowercase and all the characters are now lowercase okay here's another replace all but this time let's create a phone number let phone number equal then within a set of quotes make up some phone number with dashes 123-456-7890 okay using the replace all method i can replace all given characters with another one so phone number equals phone number dot replace all so this has two arguments the character we would like to replace add a comma the second character is what we'll be replacing all of these dashes with how about a forward slash and we will display phone number so here's my phone number if you would like to eliminate these dashes then just don't type in anything and those dashes are gone so yeah those are a few useful string properties and methods if you have a string variable add a dot and you have access to a bunch of different properties and methods a lot of which we didn't cover but these are just a few of the basics so yeah those are some useful string properties and methods if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro sup everybody let's talk about the slice method the slice method extracts a section of a string and returns it as a new string without modifying the original string how is this useful maybe we have a variable full name set the sequel to whatever your full name is what i would like to do is extract certain portions of this full name to create a first name and a last name without changing the full name i'll declare two additional variables but not assign them yet first name as well as last name i can create an entirely new string from an existing string via the slice method let's extract this last name and assign it to this last name variable last name equals then type the original string full name dot slice within the parentheses there's up to two values that we can add the starting index and the ending index if i need my last name that would be at index 0 1 2 3 4. so 4 would be the last value if you don't add a second value it's assumed to copy everything until the end of the string i would like the entire rest of the string after index 4 and then we'll assign it to this new variable last name let's display it to test it console.log last name and this should display my last name yep what if i need the first name you can place up to two indices so first name equals type the original string full name dot slice the starting index will be zero and the ending index will be in my example 0 1 2 3. this doesn't include the last character all right then let's display my first name and there's my first name even though this does work it wouldn't be realistic to do this by hand manually every time we would like to create a first name and a last name from a full name right so why don't we use the string index of method to search for any spaces and return it index so let's try this again let's begin with last name last name equals full name dot slice and we only need one index we need the starting position of where to begin so we would like to begin where there's any spaces plus one so we need to begin at this character in my example but it might be different depending on what your full name is so i would like to search for any spaces and i can do that by taking my string full name dot and use the index of operator and we will search for the index of any spaces so let me hide my first name here oh pay attention to capitalization there however i need to get rid of the space because the first value is inclusive so i will add plus one everything after the first space slice it and create a new string so there's my last name then let's do this with our first name first name equals full name dot slice then we'll need two indices zero the beginning and we will end wherever there's a space so there's my first name and my last name let's try a different name just to be sure that it's working right how about snoop dogg yep snoop dogg all right everybody that is the slice method it extracts a section of a string and returns it as a new string without modifying the original string in our example we created a first name and a last name from a user's full name and that is the string method if you found this video helpful you can help me out by smashing that like button leave random comment down below and subscribe if you'd like to become a fellow bro hey everybody we're talking about method chaining method chaining is a programming technique where you call one method after another in one continuous line of code here's an example of where it could be useful let's say we have a username and assign this whatever your first name is but i'm going to make this all lowercase in this example what i would like to do is take the first character of the string and make it uppercase without using method chaining we could do something like this we'll create a temporary variable to store a letter and i will return the first letter in the string user name dot and i will use the char at method and the first letter has an index of zero letter is now b but now i would like to make it uppercase i will need to reassign my letter variable equals letter dot to uppercase and then we can display this console.log letter this should display the letter capital b to write this code a little more elegantly we could use method chaining after calling one method we can call subsequent methods i'll eliminate this line and follow the char at method with two uppercase then add that set of parentheses this single line of code will do the exact same thing and it's easier to read and understand you can follow one method call it with another if i would like to invoke another method i don't know like trim i could just add that to the end you have the capability of calling one method after another in one continuous line of code it makes your code cleaner and more readable so yeah that's method chaining if you found this video helpful feel free to help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro sup guys in this video i'm going to explain if statements an if statement is a basic form of decision making if a condition is true then we do something we execute some subset of code if not then we don't do it in this example i have variable age and i'll set the sequel to maybe 21. if somebody's age is over 18 i would like to display a message that says you're an adult if they're under 18 it doesn't display anything so to create an if statement type if a set of parentheses for a condition and then a set of curly braces if some condition that we check is true we will execute any code within these curly braces i would like to check to see if age is greater than or equal to 18. if it is then we'll execute whatever code is within these curly braces and i'll display a message you are an adult my current age is 21 the if statement checks this condition it's true so we do this if it's not true like i'm 12 it will skip over anything within these curly braces entirely this gives us a lot of options if statements are a basic form of decision making now in place of just skipping this code entirely we could do something else if you would like to take a different course of action you could add an else statement else let's print a different message you are a child now when i run the same code we will check this if statement if it's false then we skip everything within the curly braces if there's an else statement we instead do this you are a child if there's any other conditions you would like to check before reaching the else statement you can add an else if statement else if maybe i'll check to see if age is less than zero and we'll display something else console.log you haven't been born yet currently my age is 12 this condition isn't true we skip it this condition isn't true we skip it and we move on to the else statement kind of like a last resort now if this condition is true age is less than zero maybe i'm negative five years old well then this statement is false but this one is true and you can add as many else if statements as you want now check this out let's check to see if somebody is a senior if they're 65 or older else if age is greater than or equal to 65. you are a senior citizen so let's change our age to 65. now check this out so it displays the message you are an adult still that's because this if statement is still true our age is greater than or equal to 18. so the order of your if statements does matter if i would like to check this condition first i should probably move this to the top and make it an if statement so let's make this statement if and the second one else if there you are a senior citizen if you need to check a boolean value that's actually really easy to do with if statements so i'm going to turn all of these into comments and here's another example maybe we have a variable online if somebody's online this is true if they're offline this is false if you need to check a boolean value using an if statement you could just place the boolean variable within here if online so if a user is online let's display you are online else you are offline okay online is set to true you are online if this was false you are offline so yeah everybody those are if statements it's a basic form of decision making if a condition is true then do something if not then don't do it so yeah those are if statements in javascript hey if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain the checked property of check boxes and radio buttons all the checked property does is let us know if a check box or a radio button is selected accessing the checked property will give us a boolean value true or false heading to our html document let's create a checkbox input the type will equal check box give this check box a unique id my check box is good there's our check box but we should probably add a label because we don't know what it's for label for equals copy your id paste it close the label let's add some text perhaps this is a subscribe button we can check either the check box itself or click on the label to check that then we will add a button this will be a submit button button id equals my button let's close it add some text submit i think i'll add this on a new line i'll add a line break and that should be good for now heading to our javascript file when we click on this button we would like to do something first we will select this button by typing document dot get element by id the id of that button was my button set the on click event attribute equal to a function when we click on this button what would we like to do i would like to see if this checkbox is checked or not i'll use an if else statement if that checkbox is checked we'll do something if not we'll do something else within the parentheses we'll select this checkbox document dot get element by id the id of that checkbox was my checkbox follow this with the checked property we can check to see if this is true by using the comparison operator which is two equal signs true this is optional but you don't necessarily need to write that if document.getelementbyid my checkbox is checked what are we going to do let's let the user know that they're subscribed console.log you are subscribed else if this checkbox is not checked then you are not subscribed okay let's try it i'll just press submit you are not subscribed i'll reload the page check that checkbox again press submit you are subscribed now this can be a little difficult to read what i like to do is store elements within a variable for readability i'm going to copy this section then assign it to a variable maybe a constant const my checkbox equals by document.getelementbyid my check box we can refer to this element by this variable name if my check box is checked this would do the same thing i find it easier to read okay level two let's do this again but with radio buttons heading back to our html file we'll create three radio buttons input type equals radio these will all have the same name perhaps this will be card for payment what kind of card are you going to use the id of the first button will be a visa button if they're paying with a visa card okay let's copy this paste it two times a mastercard button then what about paypal button i'm gonna add a line break at the end then let's add some labels label close it the four attribute will be the same as the id the text will be visa then mastercard master card lastly paypal paypal okay we have our three payment options since these three radio buttons are within the same group we can only select one be sure to save everything heading back to our javascript file let's get all of the buttons and store them within a variable const visa button equals document.getelementbyid the id was visa button then we have mastercard button then paypal button okay we have our buttons using if else statements we'll check to see which of these buttons is selected first we'll check our visa button if visa button dot checked then we'll display a message you are paying with a visa else if mastercard button is checked you are paying with a mastercard else if paypal button is checked you are paying with paypal else no radio button must be selected you must select a payment type let's try this i'll select visa press submit you are paying with the visa mastercard submit you are paying with the mastercard paypal submit you are paying with paypal i'll refresh the page not select anything that will execute the else statement you must select a payment type so yeah everybody that is the checked property they're typically found within check boxes and radio buttons you can access this property by following a check box or a radio button with dot checked this value will be true or false if it's true you can do something if not you can do something else so yeah that's the checked property everybody if you would like a copy of all this code i'll post all of this in the comment section down below and well yeah that's the checked property in javascript hey guys in this video i'm going to explain switches a switch is a statement that examines a value against many case clauses it's more efficient than using many else if statements in this example i have a letter grade what i would like to do is examine this letter grade if our grade equals a then we will display you did great else if grade equals b you did good c you did okay d you passed barely f you failed and there is an else statement if something is not one of these letter grades maybe the word pizza pizza is not a letter grade it's not normally good practice to use a whole bunch of else if statements if you find that you're using a lot of else if statements it may be better to instead create a switch let's write the same program but use a switch instead to create a switch we type switch a set of parentheses and then a set of curly braces within the parentheses we're going to examine a value or variable i'm going to examine our grade and we will compare our grade against many case clauses and see if there's a match to create a case clause you type case and then some value that you would like to examine to see if there's a match case a we're checking to see if grade is equal to a if they match then we do something so add a colon then type whatever you would like to do console.log you did great then at the end of your case make sure to add the word break this is our case if grade is equal to a so what if grade is equal to b case b you did good case c you did okay case d you passed barely case f you failed now if there's no matching cases you can add a default clause default let's display grade is not a letter grade this will do the same thing except it's more efficient our grade is a you did great b you did good c you did okay d you passed barely f you failed let's make up something pizza pizza is not a letter grade so that's a switch statement now with your cases you could put a condition instead of letter grades what if we were working with number grades like 95 is an a so another way of writing the switch is that if we're checking conditions we could pass true within the switch we'll examine true against some matching conditions case grade is greater than or equal to 90 so that would be an a case grade is greater than or equal to 80. that would be a b grade is greater than or equal to 70 that's a c grade is greater than or equal to 60 that's a d grade is less than 60 so that would be an f now this way you can compare a value or variable against many matching conditions so that would be another way of writing a switch so yeah everybody that is a switch statement it examines a value for a matching case against many case clauses it's more efficient than using many else if statements using an elsif statement isn't bad but you don't want like you know 10 of them so yeah that's a switch everybody if you found this video helpful you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro well alright then everybody we are on the and as well as or logical operators they give us the ability to check more than one condition concurrently how is this useful here's an example we have a variable temp temp short for temperature i would like to check to see if my temperature falls within a certain range using an if statement is 15 degrees celsius that's not a bad temperature within the condition of an if statement i would like to check if my temperature is greater than 0 and less than 30 so within the parentheses let's check if temp is greater than zero and to check another condition concurrently we can use and which is two ampersands and i would like to check if temp is less than 30. if my temperature falls within this range between 0 and 30 then we execute whatever's within this if statement let's display the weather is good else the weather is bad our temp is currently 15 15 degrees celsius the weather is good this condition is true and this condition is true with the and logical operator both conditions must be true in order for us to execute this if statement if one of them is false then we don't what if our temperature was negative 10 this condition is false but this one is true and using the and logical operator both conditions must be true which they're not in this example so we skip this if statement and execute the else statement the weather is bad maybe our temperature is 50 degrees celsius this time this condition is true but this one is false therefore we skip this if statement the weather is bad that's one use of the and logical operator you can check more than one condition and it's useful if you need to find if something is within a certain range like a range of temperatures let's talk about the or logical operator using the or logical operator either condition can be true in order to execute this if statement so let's rewrite this this time let's check to see if temp is less than or equal to zero or which is represented by two vertical bars or temp is greater than or equal to 30. if at least one of these conditions is true then we execute this if statement but the weather will be bad else the weather is good our temperature is currently 50 the weather is bad what if our temperature was negative 10. the weather is still bad how about 15 well the weather is good using the or logical operator either one of these conditions can be true if one is false and the other is true that's completely fine now you can add more than one logical operator let's head back to our previous example i'm just going to undo everything let's throw in another variable let sunny sunny will be a boolean value sunny will equal true if it's sunny outside if it's cloudy outside well then sunny will be false so in order for the weather to be good the temperature needs to be above zero and under 30 and sunny needs to be equal to true but if you're working with a boolean value you don't need to say equals true you can just add that boolean variable so our temperature is 15 and sunny is true all three of these conditions are true therefore the weather is good if the temperature is 15 but it's not sunny outside that's false well then the weather is bad you can link more than one condition using these logical operators so yeah that's the and as well as the or logical operators you can check more than one condition concurrently hey if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey everybody let's talk about the nut logical operator which is represented by an exclamation point within a condition it's typically used to reverse a condition's boolean value a condition that is true that's preceded with the not logical operator becomes false if it's false originally it becomes true it gives us a few additional ways to write code here's an example we have variable temperature temp for short and i'll set this to 15 degrees celsius if i would like to check to see if it's warm or cold outside normally i could write an if else statement if temp is greater than zero then it's warm outside it's warm outside else it's cold outside currently our temperature is 15 degrees celsius it's warm outside if it was negative 15 it's cold outside using the not logical operator we can write this code a different way if we choose to we can check to see if the temperature is not greater than zero so to do so we will surround this condition with a set of parentheses and precede this condition with the not logical operator an exclamation point in plain english we're checking to see if our temperature is not greater than zero so that would mean it's cold outside right else it's warm outside so taking our same temp of negative 15 it's cold outside if it's 15 it's warm outside now let's do this with a boolean variable let sunny equal true if with a boolean variable if you would like to place it within a condition all you have to do to check if it's true is just write the name of the boolean variable if sunny so you don't necessarily need if sunny equals true if sunny if sunny is true then it's sunny outside else it's cloudy outside currently sunny is true therefore it's sunny outside if i would like to check if it's not sunny outside i can precede this boolean variable with the not logical operator and you don't necessarily need to surround it with those parentheses if it's a boolean variable if it's not sunny well then it's cloudy outside else it's sunny outside sunny is true it's sunny outside if it's false it's cloudy outside so by using the not logical operator it gives us a few additional ways in which we could write code more versatility is a good thing so yeah that's the not logical operator it's typically used to reverse a condition's boolean value if a condition is true it's now false if it's originally false it's now true and that is the not logical operator hey if you found this video helpful be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro well sup everybody i have to explain what a while loop is a while loop is like an if statement except it repeats some code while some condition is true it could potentially repeat an infinite amount of times here's an example let's say we need to get some user input we would like a user to type in their username let's create a variable user name and i will set the sequel to just an empty string for this example to create a while loop we type while set a parenthesis set of curly braces we will continue this code while the condition remains true let's check to see if our username is equal to an empty string that means the user didn't type in anything so within the curly braces let's create a window prompt username equals window dot prompt enter your name then at the end let's display console.log hello user name and to your name i'm just going to press ok when we reach the end of a while loop we check the condition again if it's still true we repeat this code for another iteration and then check again i'm hitting ok but i can't exit this window prompt until i enter in my name i'll type in my first name hit enter hello bro my username although in this example i'm hitting ok but you could hit cancel to exit let's add another condition or username is equal to null that means there's no value to exit i simply can't press ok or cancel i need to type in something because we're stuck in a while loop i'll type in my first name again and then we can exit once i typed in something for my username both of these conditions were no longer true then we could escape the while loop and continue on with the rest of the program now when you create a while loop you should write some sort of way to escape the while loop from within it otherwise you'll encounter what's called an infinite loop like this while and our condition is while one is equal to one there's no way we can escape it console.log help i'm stuck in an infinite loop so this code will just repeat forever you can see that the counter here is going up i think my web browser froze so yeah that's a while loop everybody it repeats some section of code while some condition is true once you reach the end of that section of code you check the condition again if it's still true you repeat the code again and this could potentially repeat an infinite amount of times so that's a while loop in javascript if you found this video helpful be sure to help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro all right guys i have to explain a variation of the while loop it's called a do while loop how this works is that you do something then you check the condition then you repeat if the condition is true so going back to the previous topic on while loops i have a while loop we're checking if our username is an empty string which it is originally while this condition is true we will prompt the user to enter their name if i run this program and press ok without typing anything i can't escape this prompt once i type in my name hit enter or ok we escape the while loop and move on with the rest of our program which displays hello whatever your username is what i would like to do is not assign my username right away i'll declare this variable but not yet assign it anything now when i run this program here's the problem we don't get that window prompt to type in our name we skip the while loop and continue on with the rest of the program and this displays hello undefined we're using a variable we declared but not yet assigned once we reached our while loop this condition was false from the get go so we skip over the while loop entirely what if i would like to run this code at least once and then prompt again if the username is equal to an empty string one way although i wouldn't recommend it is that we can copy this line of code and paste it before the while loop that prompt comes up i'll skip it and then we enter the while loop and we're stuck within it until we type in something i don't like to repeat code if i don't have to so there's a better way of writing this let's convert this while loop to a do while loop let's copy the while keyword and the condition and we're going to move it to the end of our curly braces and preceding the opening curly brace we will write do instead of checking the condition first we check the condition last we will do all of this code and then check the condition now if i run this program we encounter that window prompt i'll press ok and try and skip this prompt i can't i'll type in my name and we escape the while loop so a do while loop is a variation of the while loop you do something first and then check the condition with a standard while loop you check the condition and then do something if that condition is true with a standard while loop you may skip some code entirely if the condition is false from the beginning with a do while loop you do it at least once and then check the condition so yeah that's a super quick video on do while loops in the next topic we'll move on to for loops well i should probably explain four loops a for loop repeats some code a certain amount of times there's a lot of similarities between what for loops and while loops can do there are a few discrepancies though you tend to use for loops when you want to repeat code a limited amount of times a while loop is better suited to something that could execute an infinite amount of times possibly in this example we'll create a program to count to ten we'll start at one count to ten and we can do that with a for loop so type four parentheses curly braces what would we like to do within our curly braces let's display a variable console.log let's call this counter now within the for loop there's three statements that we can add the first is that we can declare and assign a counter or some other variable the first statement we will type let counter and i'll set the sql to 1. then make sure to add a semicolon at the end to terminate the first statement second is our condition we'll continue this statement as long as this condition is true i will continue this for loop as long as our counter variable is less than or equal to 10 then add a semicolon and the third statement is that we can increment our counter counter plus equals one after each iteration we increment our counter variable by one after running this program we begin at one and count to ten if i need to count to 100 i can just change this condition counter is less than or equal to 100 and we have counted from 1 to 100 if i need to begin at a different number i could just set my counter to a different number like i don't know 50. now we have begun at 50 and counted to 100 so this variable counter it's known as a local variable it doesn't exist outside of this for loop what a lot of programmers do if they need some sort of temporary variable within a for loop to keep track of what iteration they're on they'll simply just use i that's a common convention so let's change counter to i so let i equal let's change this back to 1 we'll count to 10 and increment i by one after each iteration now we could begin at 10 and count down if we were to take that approach we'll set our variable i to 10 we'll continue this for loop as long as i is greater than zero and we will decrement i by one we could pretend that this is a countdown to new year's day this time when we escape the for loop let's print happy new year console.log happy new year okay we begin at 10 count down to one once this condition is no longer true we escape the for loop and print happy new year so this simulates a countdown so for loops are fairly flexible we can increment or decrement our counter i we're counting down by one currently but we could count down by two if we would like let's change i minus equals one to two and now we will count down by two ten eight six four two happy new year or even three ten seven four one happy new year so yeah that's basically a for loop we repeat some code a certain amount of times there's a lot of overlap where you could use either a while loop or a for loop a while loop tends to be better in certain situations where you may potentially need to repeat some code an infinite amount of times for loops are more suitable for code where you only need to repeat it a certain or given amount of times so yeah those are for loops hey if this video helped you out you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey guys i have a super quick video on the break and the continue statements let's begin with the break statement the break statement breaks out of a loop entirely in this example i'm going to create a for loop we will count the numbers 1 through 20. however once we reach 13 i would like to exit this loop because 13 is considered an unlucky number i know it's a weird example so let's define our counter i i equals one and i will continue this as long as i is less than or equal to 20 then increment i by one for the time being let's display whatever i is this will display the numbers 1 through 20. if i would like to break out of this loop entirely if we reach the number 13 i can add a break statement so let's check to see if i is equal to 13 if it is then we'll break okay we have the numbers 1 through 12 then we break there's also the continue statement it will skip an iteration of a loop if we replace break with continue we will skip that specific iteration and continue on so we have 1 through 20 but the number 13 is not here so that's the main difference between break and continue break will break out of a loop entirely continue will skip only that iteration so yeah those are the differences between the break and continue statements hey guys in this topic i'll be explaining nested loops a nested loop is just a loop inside of another loop here's an example so i'll create an outer loop that will count i don't know to three let i equal one continue this as long as i is less than or equal to three increment i by one during each iteration i will display the value of i console.log i this counts up to three what if i would like to repeat this entire for loop so many times well i could put a for loop inside of a for loop so let me copy this get rid of this line and paste another for loop within the curly braces of the outer for loop we have a nested loop it's a loop inside of another loop now one thing with nested loops is that you'll want another counter besides i because we don't want to reuse the same counter a common convention of the counter of nested loops is that they'll use a counter of j because j comes after in the alphabet so let's replace i with j and do so with our console.log statement so if i was to run this program we would count the numbers one through three three times once we complete all of our iterations of the nested loop we then complete one iteration of the outer loop if i change this outer loop to continue as long as i is less than or equal to two well then we will repeat this inner loop a total of two times here's a different example let's use nested loops to draw a rectangle within our dom and we'll accept some user input the outer loop will be in charge of the rows the inner loop will be in charge of the columns we'll declare two variables let rows equal window dot prompt enter number of rows then let columns equal number of columns the outer for loop i will continue as long as i is less than or equal to rows and the inner for loop will continue as long as j is less than or equal to columns we'll need an html element to work with so within your html file let's create a label label close it and i will give this an id of my rectangle make sure to save then heading back to our javascript file let's change the inner html of our label i will select our label element document.getelementby id my rectangle i will set the inner html before we draw a rectangle let's print some of these numbers i would like to append the inner html i will set this to plus equals our counter j the inner for loop will print one row then to go down to the next row we can add a break line document dot get element by id my rectangle dot inner html and i'm going to append a line break okay so let's try this for now we'll just print some numbers what about three rows and nine columns so we have three rows and nine columns of our index j let's replace these numbers with maybe a symbol so it's an actual graphical rectangle let's symbol window dot prompt enter a symbol to use and replace j with our symbol enter a symbol to use what about a dollar sign press ok number of rows maybe four rows five columns and we have a graphical rectangle let's try it again what about an asterisk three rows nine columns sweet so yeah everybody that's a nested loop it's a loop inside of another loop when you encounter them it's kind of situational in this video we used a nested loop to help us print a rectangle so yeah that's a nested loop everybody hey if you found this video helpful be sure to help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey everybody we are moving on to functions with a function you define code once and then use it many times whenever you need to perform some code you simply call the function name in this scenario i need to sing happy birthday like three separate times so without using a function i could write something like this this will be one iteration so when i run this we sing happy birthday once if i need to sing two additional times well i would have to copy this code and paste it two additional times to sing three verses of my happy birthday song so we don't like to repeat code if we don't have to wouldn't it be nice if we could write this code once and reuse it whenever we need well we can do that with a function so to create a function we will type function and then a unique function name let's name this function happy birthday add a set of parenthesis and a set of curly braces any code you would like to repeat simply place within the curly braces if i need to sing one verse of happy birthday i take the function name and add a set of parentheses this will invoke otherwise known as call the function so you type the function name add a set of parentheses i like to think of the parentheses as a pair of telephones that are talking to each other that's how you call a function if i need to use this code again i can simply call the function again so that's 2 times and three times so we have accomplished our task of singing three verses of my happy birthday song what if we have some variables let user name equal your first name and let age equal some age within my happy birthday song i'm going to insert my username as well as my age so within my happy birthday song we have my username and my age functions have access to global variables a global variable is basically a variable that's declared outside of any functions or any set of curly braces for example we may have a function to start our program and we will place this code within here i will call the start program function to begin my program but we have one issue uncaught reference error username is not defined variables when declared with the let keyword aren't recognized outside of the immediate set of curly braces so my happy birthday function has no idea what username or age is these variables only exist within the immediate set of curly braces what i could do is that when we invoke the happy birthday function from within the start program function we can send some information to this happy birthday function so that it will recognize my username and my age to pass some values or variables to a function when you invoke that function within the set of parentheses just list whatever you would like to send over i would like to send over my username and my age these are known as arguments however you need a matching set of parameters within the declaration of my happy birthday function i need a matching set of parameters you can just copy the arguments over and then paste them within the happy birthday function these are known as parameters you need to send over a username and an age so now this should work so here's my username and my age if i invoke this function without passing my arguments well then this function doesn't know what my username and age is and with your parameters they don't necessarily need to be the same name you can rename these values when you receive them within the function i'll rename username as a and age as b and i'll change that here and here this would also work but make sure you get the orders of the arguments and the parameters right so if i switch these around happy birthday dear 21 you are bro years old so the order of the arguments and the parameters does matter so yeah everybody that's a function you define code once and then you can use it many times to perform some subroutine of code you just call the function name this is useful because we don't have to repeat code more than once if you find that you're going to repeat code more than once you could write it within a function so yeah those are functions everybody in the next video we'll discuss return statements hey if this video helped you out you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro well alright everybody i need to discuss the return statement the return statement is used within a function to return a value back to the spot in which you invoked a function when you call a function you can return some information to demonstrate this we're going to create a program to calculate the area of a rectangle using a function and then return the value so to create this program let's declare a few variables let area let with and let height we'll accept some user input width equals window dot prompt enter width copy this line paste it change width to height here and here at the bottom of our program let's create a function to calculate the area of a rectangle so to create a function type function let's name this get area parentheses curly braces when we use this function to calculate the area of a rectangle we'll need to set up some parameters in order to do so we'll need a width and a height when we invoke this function we will pass these variables as arguments when we assign our area variable let's set this equal to then invoke the get area function but we need to pass in a matching set of arguments our width and our height let's fill in this get area function i will declare a temporary variable let result equals and to calculate the area of a rectangle it's simply width times height if i need to send a value back to the spot in which we called a function we can use the return keyword i would like to return the result then at the end of our program but before our function let's display the result just to be sure that it works fine console.log the area is area okay let's try it okay enter the width maybe five height six the area is thirty let's try it one more time how about the width is six and the height is nine the area is 54. so when we returned the result once this function was completed just imagine that we're replacing this function call with 54. we're returning a value back to the spot we invoked a function we assigned 54 to our variable area you could shorten this code as well you don't necessarily need a temporary variable we could eliminate this line and return width times height and that would do the same thing 6 times 9 is 54. so yeah everybody that is the return statement it returns a value back to the place where you invoked a function so yeah that's the return statement hey if you found this video helpful be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain the ternary operator it's a shortcut for an if-else statement it's represented by a question mark there's three parts we write some condition follow the condition with a question mark as if we're asking a question if that condition is true we perform an expression if that condition is false we perform a different expression and separate each expression with a colon here's an example let's create a function that will check a user's age initially we'll use an if else statement and then later write it using the ternary operator maybe we have a boolean variable let adult and we will invoke a check age function and pass in some age let's define this function function check age there is one argument let's name this age i need to check to see if age is greater than or equal to 18 i could write with an if statement if age is greater than or equal to 18 let's return a boolean value of true else return false let's display whatever our adult boolean variable is console.log adult i passed the number 21 as an argument check age returns true if i was 12 well then check age returns false there's another way of writing this and i think it's a lot easier lot less syntax this function will return a value so i'm going to precede our tenary operator with the return statement to use the ternary operator we write a condition followed with a question mark as if we're asking a question age is greater than or equal to 18 question mark second is an expression if that condition is true we're returning something let's return true and the second expression if that condition is false after a colon write some expression or some value false so this will do the same thing currently i'm 12 this returns false if i'm 21 well then it's true we have three parts a condition with a question mark an expression if that condition is true colon and expression if that condition is false here's another example maybe we're playing a game and we have to check to see if somebody won the game i'll declare a check winner function function check winner let's declare a parameter of when this will be a boolean value we're not returning anything we don't need that return keyword if we're examining a boolean variable or parameter all we need to do is type the name win question mark if when is true what do we do let's display a message this time console.log you win colon then some expression if win is false you lose then let's invoke this function check winner then we can pass in a boolean value or variable like true you win or false you lose so that's the ternary operator it's a shortcut for an if else statement you write some condition followed by a question mark if that condition is true you do something if not you do something else it's a shortcut basically so yeah that's the ternary operator if you would like a copy of this code i'll post it to the comment section down below and well yeah that's the ternary operator in javascript guys in this video i'm going to explain some of the differences between the let and var keywords when declaring variables variable scope is where a variable is accessible any variable declared with the let keyword is limited to a block scope it doesn't exist outside any sets of curly braces any variable declared with the var keyword is limited to a function here's an example let's create a for loop we'll count up to three we will declare a counter of i set this equal to one will continue as long as i is less than or equal to three then increment i by one so within my for loop i will display whatever value i is console.log i our results are one two three what if i attempt to access this variable i outside of this for loop console.log hi what would happen exactly we have an uncaught reference error i is not defined that's because any variable declared with the let keyword is limited to a block scope it doesn't exist outside of the set of curly braces that's why my interpreter doesn't know what the heck this is if we instead used the var keyword to declare a variable well then this variable i can exist outside of curly braces and that could be a problem so now if i attempt to display whatever i is it's now 4. so if i would like to reuse this counter i but we declared it with var since it already has a value it's going to potentially mess with my program and cause problems however any variable declared with the var keyword doesn't exist outside of any functions if it's within one let's create a function function do something i don't really care what it does so let's copy this for loop place it within the function and invoke this function do something now when i display i after it's been declared with the var keyword we have that uncaught reference error i is not defined a variable declared with the var keyword can escape a set of curly braces but it can't escape a function if it's contained within one and that's where we need to discuss global variables a global variable is declared outside of any functions so we have our function if i was to declare let name equal some name since this variable is outside of any functions it's considered a global variable my entire program has access to it and recognizes what it is if you use the var keyword when declaring a global variable that can be problematic because if a variable declared with var is global it can and will change the browser's window properties here's an example for a demonstration within my console i'm going to access my browser's window object i will type window select it hit enter we haven't discussed objects yet we will in a future video but windows have properties and my browser window has one property of name and currently it's just an empty string let's say that i'm a beginner programmer and i would like to declare a name variable to hold a username so if i was to use the var keyword and i create a variable name and set the sequel to whatever my name is behind the scenes i will unintentionally change this window property of name so i'm going to save and run this let's access our window again and let's find name there so i have unintentionally changed this windows property of name and i didn't even realize it and that could happen to any of these properties and that could of course possibly mess with your program and cause problems now this time i'm going to use the let keyword and you may need to open this again with live server this time i'm using the let keyword i will type window again select it hit enter and let's find that name property again there by using the let keyword i was able to declare this variable name without changing this windows property of name so yeah those are some of the differences between the var and the let keywords a variable declared with let is limited to a block scope a variable declared with var is limited to a function scope if you declare a global variable with var it can potentially mess with your browser's window properties let will avoid that problem so it's considered good practice to use let over var but you should still know that var exists so yeah everybody those are a few of the differences between var and let hey if you found this video helpful please be sure to smash that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey guys in this topic i'm going to be discussing template literals they're delimited with backticks instead of double or single quotes they allow for embedded variables and expressions maybe we're working on a page for an online store let's create three variables let username make up some username let items for the number of items that we have our cart has maybe three items in it let total and make up some total price 75 okay so normally if i would like to display these variables along with some strings with console.log i would write something like this hello username you have items items in your cart your total is dollar sign total hello bro you have three items in your cart your total is 75 dollars another way of writing this which i like to use is to use template literals in place of singular double quotes for strings we will use these backticks so i'm going to copy these three lines of code turn these into comments so when using backticks we can embed a variable or expression within a string for this first string let's type hello and to embed a variable or expression use a dollar sign followed by a set of curly braces and we can embed a value variable or expression i would like to embed my username so currently this is what we have hello your username let's try this again you have i would like to embed items so that's dollar sign curly braces type the variable name items the word items in your cart you have three items in your cart your total is dollar sign curly braces total so if you need that dollar sign i could just precede this with another dollar sign your total is 75 i find using template literals a lot easier to work with here's a scenario what if we would like to display one very long string here's what we can do let's assign a new variable let text equals and i will copy what we've placed within these log statements make sure it begins and ends with that backtick character so we have assigned this entire string template to a variable text if i need to display all of this i can simply just use this text variable console.log text hello bro you have three items in your cart your total is 75 where this is really helpful is if we need to update an html element with some text especially if it takes up several lines let's head to our html file i'll create a new label label add a closing tag i'll give this an id of my label in place of displaying this to my console i'm going to update this label to select that label i will type document dot get element by id the id was my label change the inner html equal to text and this is what we have currently except i'm going to add some line breaks i'll add that here here and maybe here so there you go hello bro you have three items in your cart your total is 75 dollars by using template literals they allow for embedded variables and expressions it's a more flexible way to write some output i'll be using these a lot more in the future because well i like them so yeah those are template literals everybody if you would like a copy of this code i'll post this in the comment section down below and well yeah those are template literals in javascript hey what's going on everybody so in this video i'm going to explain the two locale string method of numbers what this does is that it returns a string with a language sensitive representation of this number it's fantastic if you need to format a number as some currency we have a number with numbers there's a built-in method named to locale string and a few arguments the first is locale locale specifies the language if you pass in undefined well then you'll use the default set in your browser next is options options is an object with formatting options we can specify if this number is currency a unit of measurement a percent let's begin let's create a number let my num equals make up a number i'll just pick one two three four five six point seven eight nine so i'm going to reassign my num equals my num dot to locale string the first argument is locale this is a string then we'll pass in a language united states english that would be en us then let's display my num console.log num so when i run this this number is formatted with a comma for every thousands place so that is us english okay next let's try hindi so let's copy this paste it hindi is h i dash i n so there's a different number formatting system that is hindi let's try one more what about standard german standard german is d e dash d e there's a different number formatting system standard german whatever language you need you just have to look up the format code then pass that as a string but those are a few this time let's format some currency we would set that within options i'll pick us english to add some options we'll use curly braces set the style to currency then currency colon then a unit usd is us dollars so this number is now in us dollars and you can see too that this number is rounded to dollars and cents originally we had three decimal places okay let's try another what about rupees let's copy this paste it h i i n currency rupees have a currency code of i n r there then let's try euros let's set the language to german d e dash d e the currency code is e u r for euros now there's other styles besides currency this time let's try a percent mynum equals mynum to locale string this time i will set the first argument in place of a language to be undefined but i will set the style to be percent this number as a percent is 12 million percent so let's change that 100 would be ten thousand percent point five is fifty percent point zero one is one percent that's how to format your number as a percent then let's go to units my num equals my mynum.2 locale string we can set the first argument to be undefined then under options set the style to be unit a unit of measurement what kind of unit would we like i will separate that with a comma unit colon space what about celsius celsius so currently my number is 100 make sure it's lower case there 100 degrees celsius you have a couple different units to choose from celsius kilometers miles kilograms whatever you need well okay then everybody that is an introduction to the two locale string method it returns a string with a language sensitive representation of a number you can set the locale which specifies the language by passing in undefined as an argument that will use the default set in the browser then you can pass in formatting options would you like to set the style to currency percent a unit of measurement etc so yeah everybody that is the two locale string method in javascript hey guys in this video we're going to create a very basic number guessing game in javascript so heading to our html file let's create some html elements i'll need a title for this game i'll use an h1 take we'll add some text number guessing game let's save that i'll add a paragraph right underneath pick a number between 1 through 10 and i'll add a label label close it enter a guess we'll need some input this will be a text box input id equals guess field and a submit button input type equals submit the id will be submit button and those are the html elements that we'll need now heading back to our javascript file we'll need a random number i'll make this a constant and it will be answer answer will be a random number between 1 and 10. so we will use math.random times 10. this will give us a random number between zero and nine so let's add one for numbers one through ten then we will surround this with math.floor to round it math.floor and i will surround this code with math.floor math.floor we'll keep track of our guesses let guesses equal zero so when we click on this button we would like to do something but we need to select this button and the id was submit button document dot get element by id the id is submit button and set the on click event attribute equal to a function what would we like to do well there's a lot of stuff we have to do we'll need to get the value from this text box so document.getelementbyid the id is guest field dot value and we will assign this to guess so let's declare that and assign it whenever we make a guess we should increment guesses by 1 to keep track of it guesses plus equals 1. we'll first check to see if our guess is equal to our answer if guess is equal to our answer let's create an alert message alert i'll use a template literal answer is the number it took you guesses guesses else if our guess is less than answer we will alert the user too small else alert too large okay make sure you save everything and let's run it enter a number i'll pick something right in the middle five too small what about seven two small nine nine is the number it took you three guesses so yeah that is a very basic number guessing game everybody if you would like a copy of this code i'll post this in the comment section down below and well yeah that's a very basic number guessing game in javascript hey everybody in this video we're going to create a practice program in javascript to convert some temperatures using some html elements so sit back relax and enjoy the show okay let's begin everybody before we add html elements to our dom let's work on the logic behind the functions let's declare and assign variable temperature and set the sequel to some temperature doesn't matter if it's fahrenheit or celsius yet and at the end of our program let's declare two functions function to celsius and there will be one parameter temperature and function two fahrenheit the formula to convert a temperature in fahrenheit to celsius is our temperature minus 32 times five divided by nine the formula to convert celsius to fahrenheit is return temp times 9 divided by 5 plus 32 let's say that our temperature is currently in fahrenheit and i need to convert this to celsius i will reassign temp equal to and i will invoke the 2 celsius function and pass in my temperature then at the end we will display whatever our temperature is console.log temp so the temperature should be zero zero degrees celsius if we're converting this to fahrenheit then 32 degrees celsius converted to fahrenheit is 89.6 degrees now that we have the logic behind these functions completed let's add some html elements heading to our html file within the body tags we will create a label then close it and i'll add a line break for some text let's add enter a temperature then we'll create a text box so use a self-closing input tag i'll create a line break the type is text the id let's say is text box let's create a second label label close it add a line break we will add the text convert to colon we'll create two radio buttons input type equals radio so with a radio button if they're in the same group you can only select one this first radio button will be for celsius we'll give this a unique id of c button for celsius name unit let's save there's one radio button and we'll add a label next to this radio button label close it add a line break and the label will be celsius okay let's copy these two lines and paste them and make a few changes this will be the fahrenheit radio button we'll give this an id of f button the name will be unit and change the label fair and height since these radio buttons are within the same group they have the same name we can only select one of them if they had a different name like c or f well then you can select both of them because they're in different groups so these will have the same name unit let's create a submit button right at the end so button let's close it add a line break the type will be button and the id is maybe submit button let's add some text to this button submit i'm going to close that at the very bottom of our dom let's add a label that will display the temperature use a pair of label tags i'll give this an id of temp label and those are all the html elements that we'll need let's save head back to our javascript file when we click on the submit button there's a lot of things that we need to do at the very top of my program i'm going to type document dot get element by id the id of this button is submit button dot on click and i will set the sequel to a function parentheses curly braces there's a lot of lines of code that we're going to add between these curly braces so let's get rid of these three lines of code we don't need them any longer i'm going to declare a local variable within this function let temp so when we click on our button let's check to see if one of these radio buttons is selected let's begin with the celsius button if document dot get element by id and the id of the celsius button is c button we need to check to see if this radio button is checked or not so add dot checked if this equals true but since this is a boolean value you don't need to necessarily add equals true document.getelementbyid c button dot checked that's fine as a condition if our celsius button is selected do something else if our fahrenheit button is selected do something else let's copy our condition paste it this time we are checking the fahrenheit button that is f button and lastly else else means we didn't select anything let's work on the else statement first that's fairly easy so i would like to change our label that's down here at the bottom temp label so type document dot get element by id temp label and i will change the inner html i'll set the sequel to select a unit if i were to click on the submit button it should change the text of my label to select unit we know that it's working if we enter in a temperature press the celsius radio button then click submit what would we like to do let's extract the temperature from this text box so we will take our temperature variable set the sequel to document dot get element by id and the id of this text box is text box dot value when we accept user input from a text box it's of a string data type we'll need to convert that to a number so let's reassign temp equal to use the number constructor and pass in our temperature it's assumed to be in fahrenheit if we would like to convert to celsius let's invoke the 2 celsius function i'll reassign temp equal to the 2 celsius function invoke it and then we need to pass in our temperature after the temperature is converted we need to change our label so copy this line of code paste it and i will set the sql to temp plus if you're writing this code on a pc if you need the degree symbol one shortcut is to hold alt and on the numpad press zero one seven six if you're on a mac then do this i'll post it on the screen right now so this temperature is in celsius okay let's test this 32 degrees converted to celsius is 0 degrees celsius if this was 50 degrees fahrenheit converted to celsius that would be at 10 degrees celsius now with the fahrenheit radio button let's copy everything we have within this if statement paste it and we will invoke the 2 fahrenheit function instead of the two celsius function and change the temperature from c to f okay let's try this zero degrees in celsius converted to fahrenheit is 32 degrees fahrenheit so yeah that was a practice project to convert temperatures using javascript hey if you found this video helpful please be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro well well well we've finally made it to a raise think of an array as a variable that can store multiple values it's a little more complex than that but that's an easy way of thinking about them in this example i have a variable fruit fruit contains some string representation of a fruit like an apple i can store multiple names of fruits within this variable if i convert it to an array so to change this variable into an array surround all of your values with a set of square brackets and separate each value with a comma maybe i don't want just an apple maybe i would also like an orange and a banana just so it's more obvious that this contains multiple values i'm going to change this variable name from fruit to fruits well i guess in the english language fruit would also be plural but it's just not obvious so we have an array fruits now look what happens when i display this array using console.log if i display my array fruits it will display all of this junk you can see the different values within this array apple orange banana each value within an array is also known as an element if i would like to access a particular element within this array when i use the array name i will add a set of square brackets then i need to list an index number of the element i would like to access computers they always start with zero so the first element in my array has an index of zero if i was to display fruits at index of zero then we have access to the first element which contains an apple the next element which has an index of one is my orange at index 2 there's the banana if i attempt to access an element that doesn't exist such as index 3 well then it's undefined you can also update and change the elements of an array so to do that type the name of the array followed by an index number maybe fruits at index of zero is now a coconut and then let's display fruits so we have a coconut orange and banana if i change this to one we have an apple coconut banana two apple orange coconut so to access an element from an array you type the array name followed by a set of square brackets and then an index number you can later on add an element to do that use the push method type the array name dot push parenthesis then add a value like a lemon we have an apple an orange a banana and a lemon this will add an element we can remove the last element fruits dot pop okay that lemon is no longer there apple orange banana removes last element we have the capability to add an element to the beginning of an array type the array name dot on shift method and add a value maybe a mango mango apple orange banana this method will add element to the beginning and the shift method will remove the beginning element fruits dot shift apple orange banana that mango is gone because i ate it so the shift method removes element from beginning you can access the length property of an array i'll store this within a variable let length equal fruits dot length and the length of my array is three we have three elements an apple an orange and a banana you can find the index of an element let index equal the array name dot index of method i would like to find the index of our apple value and i will display this so again computers always start with zero the index of my apple value was found at index zero the beginning orange would be at one banana is at two if you search for an index of an element that doesn't exist such as how about a kiwi well then this will return an index of negative one that means it was not found so yeah everybody that's an array think of it as a variable that can store multiple values it's a little more complex than that but that's an easy way to think about it so yeah this is the beginning on a small series on arrays hey if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to show you how we can loop through the elements of an array maybe we have an array of prices and i will set this equal to and just make up some prices it doesn't really matter five dollars ten dollars fifteen dollars twenty dollars good enough two popular ways to iterate over an array is one to use a standard for loop and the other is a for of statement let's begin with a standard for loop so type four parentheses curly braces we'll need to create a counter let i set this equal to zero i would like to continue this while i is less than the length property of our array prices prices dot length then i will increment i by one i plus equals one during each iteration i will display my array prices but we gotta list an index so that index is i prices at index of i during the first iteration i will be zero during the next iteration it would be one then two then three so on and so forth so after running this program this will iterate and display the elements of my array 5 10 15 20 and it will adjust according to the size of the array and my for loop will iterate over that price as well now if you would like to iterate backwards over this for loop here's how to do that so i'm going to set my counter equal to prices dot length minus 1. i would like to continue this as long as i is greater than or equal to 0 and then lastly we will decrement i by 1. this allows me to iterate over my array backwards we're beginning at the end 25 20 15 10 5. so that's how to use a standard for loop to iterate over the elements of an array an additional option is a for up statement we'll type four parentheses curly braces we'll declare a counter let i of our array prices console.log just i and this will also iterate over our array but a better way of writing this in place of our counter i let's use a word that's more descriptive of what's within our array our array is named prices an element of this array prices would be price so let's change this to price because it's more descriptive console.log price and i think people would understand that more there 5 10 15 20 25. so yeah everybody those are a couple different ways to iterate over the elements of an array hey if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey everybody in this video i'm going to show you how we can sort an array of strings in javascript let's create an array of fruits because i'm hungry and add some various names of fruits make sure that they're not in order banana apple orange and a mango to display my array of strings i can use a for of statement we'll create a for loop and the statement within the for loop is let fruit of fruits console.log fruit singular and here is my array of fruits to sort this array there is a built-in method of arrays called sort but i'm going to reassign this to the same array fruits equals fruits and use the sort method and my fruits are now sorted in alphabetical order if you need this in reverse alphabetical order this is what you can do i'm going to turn that line into a comment copy it paste it we're going to do some method chaining add dot reverse parentheses and my array of strings is now sorted in reverse alphabetical order so yeah that's a super quick video on how to sort an array of strings in alphabetical order and reverse alphabetical order if you would like a copy of this code i'll post this in the comment section down below and well yeah that's how to sort an array of strings in javascript hey guys in this video i'm going to discuss 2d arrays also known as multi-dimensional arrays it's an array made up of arrays so in this example we'll create a grocery shopping list and that grocery shopping list will be made up of separate individual lists a list for fruit vegetables and meat let's begin by creating three individual arrays and then add them all to one array to contain them let's begin with an array named fruit or fruits let fruits equal and think of some fruit i'm thinking apples oranges bananas this is our first array let's create another i'll name this vegetables what about carrots onions and potatoes and lastly meat or meats eggs chicken fish we have three individual arrays if we wanted to we could add these individual arrays into another array i'm going to create another array this will be our two-dimensional array named grocery list equals and add the names of the arrays that you would like to add fruits vegetables and meats so grocery list is our two dimensional array how can we iterate over the elements of this two-dimensional array we can use nested loops i'll use nested four of loops the outer loop will be in charge of managing each list let let's name each item maybe list let list of grocery list so right now if i display list it's going to display all of the individual arrays i'm just going to test that console.log list this for loop will iterate three times one for each array within our grocery list and it displays details of each list to access the individual elements within each list each array i'm going to create a nested loop we'll use a for of loop again let how about food like each food item of list and i will display console.log each food item each element food so this will display all the elements of my two-dimensional array apples oranges bananas carrots onions potatoes eggs chicken fish what if you need to change one of these elements within your two-dimensional array with a two-dimensional array there are two indices to access one of these elements within a two-dimensional array type the name of the two-dimensional array and there's two indices so if we take a look at the way that all of these elements are set up it kind of resembles a grid there's rows and columns picturing a grid the first index would be the row the second index is the column i would like to replace apples with mangoes i need to find the row number and the column number so computers they always start with zero the first row would be row zero and the first column would be column zero so the indices are zero zero and i will set the sql to mangoes i think that's how you spell mangoes yeah after refreshing we have mangoes oranges bananas let's replace bananas that is row zero column two zero one two so change the second index to two apples orange's main goes let's replace eggs with steak that would be row zero one two column zero steak chicken fish for my last example let's replace fish with steak that is row zero one two column zero one two two two eggs chicken steak yeah everybody that's basically a 2d array it's an array of arrays it's useful if you ever need some sort of grid of information we probably won't be using 2d arrays too much in the future so yeah those are 2d arrays hey if you found this video helpful please be sure to smash that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey y'all everybody in this video i'm going to explain the spread operator it allows an iterable such as an array or string to be expanded in place where zero or more arguments are expected basically speaking when used with an array it unpacks the elements in too many individual pieces let me give you a demonstration we have an array of numbers let numbers equals make up some numbers put them within this array one two three four five six seven eight nine using console.log if i was to display this array directly console.log numbers this will display the details of this array this array object now if i was to precede my array with the spread operator which is three dots it would expand the elements of this array we have the elements one through nine actually you can do this with a string too i'll give you a demonstration let user name equal your first and last name so i will use the spread operator a string and this will spread the string into individual characters how could this be useful let's say we need to find the maximum value within this array well we could use the math.max method but with the max method it accepts a varying number of arguments we could pass in a value a variable like x y z whatever the maximum is we would return it and we can store that within a variable let maximum equal math.max so what if we stick an array in here math.max numbers and then display it console.log maximum what happens exactly uh so this returns not a number in place of passing this array directly to a method we could expand it by using the spread operator so this will unpack these elements into individual arguments now when i run this we have our maximum value of 9. if i added another like 10 well then it returns 10. so it's fantastic if you need to pass in a varying amount of arguments to a function or method here's another example we're a teacher and we have two classes each represented by an array of student names i need to merge these two classes into one we'll create class 1 let class 1 equal some student names we have spongebob patrick and sandy class 2 has these students class 2 equals squidward mr krabs and plankton to add an element to an array you type the array name followed by the push method and pass in an element if i would like to add all of these students you would think that i passed the array name as an argument class1.push class2 so let me show you what happens console.log class 1 so we have three students and an array so we have an entire array as an element which i didn't want to do so in place of adding this class directly as an element let's spread it into individual arguments by using the spread operator now when i display this array we have six students spongebob patrick sandy squidward mr krabs and plankton another way to display this is to use the spread operator i will precede class 1 with the spread operator class 1 is divided into individual elements spongebob patrick sandy squidward mr krabs plankton so the spread operator allows an iterable such as an array or string to be expanded in place where zero or more arguments are expected by preceding an array with the spread operator you unpack the elements it's kind of like you're opening a box and taking out whatever's inside so that's the spread operator if you would like a copy of this code i'll post this in the comments section down below don't be afraid to smash that like button leave random comments down below and subscribe if you'd like to become a fellow bro everybody in this video i'm going to explain rest parameters rest parameters represents an indefinite number of parameters it packs arguments into an array when you pass arguments to a function here's how using rest parameters would be useful i have five different variables i would like to sum a varying amount of these variables using console.log i will invoke a sum function which we will need to declare let's pass in variables a and b to begin with i need a matching function that is named sum that accepts two arguments function sum arguments a and b we will simply return a plus b so this returns three variables a and b are arguments what if i would like to add another argument like c this specific sum function isn't suitable for three arguments i would need a sum function that accepts three arguments this time a b c return a plus b plus c then i could accept three arguments but wait what if i have to pass in another argument like d well this function no longer is suitable i would need to create another function that accepts four arguments a b c d return a plus b plus c plus d you can kind of see where i'm going with this we have three different sum functions if this time we need to pass in two again two arguments we receive not a number we would need to give each of these functions a unique name like sum2 sum3 sum4 but this isn't practical wouldn't it be better if we had a function that could accept an indefinite number of parameters while we can with the rest parameters so let's get rid of all this code we will declare a function that will accept any number of arguments function sum the rest parameters will pack these arguments into an array so we will use the three dots for the rest parameters then we need a name for this array like numbers if our elements are within an array we would just need some way to access those elements there's a couple different ways you could do this i'm going to create a total let total equal zero and we will iterate over our array for let number of our array numbers we will take our total incremented by our number and then at the end return total this time we can pass two arguments to this function or three or four five doesn't matter so that's the benefit of using rest parameters they represent an indefinite number of parameters when you call a function that has rest parameters it will pack the individual arguments into an array then you would just need some way to access the elements of that array you can mix and match the parameters for example you could say x and y if i was to write it this way these first two arguments will be x and y respectively and any arguments afterwards would be packed into this array if you're mixing and matching rest parameters along with some named parameters make sure that the rest parameters take up the last parameter within this function so yeah that's rest parameters if you would like a copy of this code i'll post this to the comment section down below if you haven't already smash that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to discuss callbacks a callback is a function passed as an argument to another function using callbacks is a popular programming technique because it ensures that a function is not going to run before a task is completed here's an example of where a callback would be useful let's say we need to add two numbers together let total equal sum pass two numbers as arguments maybe two and three i'll create a function to add these numbers together and return something we will declare a function sum to add these two numbers together and set up some matching parameters to these arguments let's name these x and y let result equal x plus y return result then afterwards i would like to display my result one function to display the results to the console and the other to the dom function display console i'll name this argument output console.log output after finding a total we will invoke the display console function and we will pass our total as an argument this displays the number 5 to the console now let's create a function to display some output to the dom function display dom we'll keep output as the argument however we will change the inner html of an element so heading to our html file let's create a label close it i'll give this an id of my label save head back to your javascript file and i would like to select my label document.getelementbyid the id of that label was my label and i will set the inner html equal to the output that i receive i will instead invoke the display dom function display dom pass in total as an argument and we have the number five another way of writing this is that we could use a callback we can pass a function as an argument to another function let's get rid of these lines we won't need them anymore but we will keep these two functions this time i'm going to invoke a sum function pass in my arguments 2 and 3 and also the name of a function i would like to execute once we finish this function let's invoke the display console function once we finish the sum function so we will pass the name of this function as an argument just be sure not to add that set of parentheses after because then you would be invoking that function just the name of the function next i need to set up this sum function this specific function will have three parameters the first two are the numbers we would like to add together and the third is a callback so let's define a sum function function sum and there's three parameters we'll name these x y and for the callback you can really name it anything i'll just name it callback and again make sure not to add that extra set of parentheses afterwards so call back we'll add these two numbers together let result equal x plus y and then we will invoke our callback so at the end of the function type callback remember that it stores a function kind of like a variable then add a set of parentheses then we'll be invoking this function and if there's any arguments we have one parameter output make sure to pass that in so pass in result execute my callback pass result as an argument and this display is my output if i would like to pivot and instead display my output to the dom i'll just pass in a different callback display dom so we'll pivot and execute a different function and our output is displayed to the dom so you don't necessarily need to name this parameter callback we could name this maybe do something at the end of the function do something do some other function or maybe my funk this would be valid too so remember you can rename parameters so using callbacks is an additional way in which we can write code it ensures that a function is not going to run before a task is completed it helps us develop asynchronous code when one function has to wait for another function it helps us avoid errors and potential problems for example we could wait for a file to load once the file loads then we do something we'll have more practice with callbacks in future videos so yeah that's a callback everybody you can pass a function as an argument to another function and then execute it later hey if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to discuss the for each method of arrays the for each method executes a provided callback function once for each array element we have an array of students let students equals and make up some student names in this example let's make all of the letters lowercase we'll create a function that will capitalize the first letter of each student name so i'm going to write spongebob all lowercase patrick and squidward let's define a function that will capitalize the first letter of each string function capital lies now with the for each method there's up to three arguments that are provided automatically behind the scenes that we have access to an element an index and the array we don't necessarily need to use any of these but they're provided for us but in this function we will to capitalize the first letter of each string this is what we can write i would like to access my array parameter at index of index equals our element at index of zero this will select the first character of every string dot follow this with the two uppercase method plus element dot sub string method pass in one this line right here will capitalize the first letter of each string then i will print one of these elements console.log students at index of zero now to use the for each method we will type the name of the array students dot for each then pass in a callback as an argument we will apply this callback to every element in an array the callback is the name of the function capitalize make sure to not add an additional set of parentheses that will call the function we're only passing the name of the function as an argument this will display the first student spongebob and the first letter of his name is capital let's do this again but create an additional function to print each student that's within my array function print up to three arguments are provided for us an element an index and an array we don't necessarily need to use all three i would just like to use element and remember you can rename these two such as x y or z but i would do something that's descriptive but this time we only need element using console.log i am going to display each element and again we will use the for each method students dot for each passing our callback of print and here we go yeah spongebob patrick squidward alright everybody that is the for each method of arrays it executes a provided callback function once for each array element so yeah everybody that is the for each method of arrays if you would like a copy of this code i'll post this in the comment section down below and well yeah that's the for each method of arrays in javascript hey everybody in this video we're going to discuss the map method of arrays the map method executes a provided callback function once for each array element and creates a new array here's an example let's create an array of numbers let numbers equal one two three 4 5. we're going to use the map method of this array at numbers and the map method will square each element in this array and create a new array let's define a square function function square we need at least one parameter element we will return math use the power method pass in our element as a base raised to the power of 2. this is our square function we will pass the name of this function square as a callback to the map method and this will create a new array so let's define a new array let squares equal to then i would like to invoke the map method of my numbers array numbers dot map pass in my callback of square and then i would like to display the elements of squares i'll do that with a print function function print element console.log element and i will use the for each method of my squares array squares for each method pass in a callback of print let's take a look at the elements of squares yeah each element from my numbers array was squared and added to a new array squares 1 4 9 16 25. hey for fun let's create a cube function function cube we need at least an element parameter copy this line but change two to three element to the power of three let cubes equals numbers dot map cube cubes for each method pass in print as a callback and all of my original numbers are now cubed and stored in a new array cubes 1 8 27 64 125 so yeah everybody that is the map method of arrays it executes a provided callback function once for each array element and it creates an entirely new array so yeah that's the map method of arrays if you would like a copy of this code i'll post this in the comments section down below and well yeah that's the map method of arrays in javascript all right let's talk about the filter method the filter method creates a new array with all elements that pass a test provided by a function we can filter out elements from an array and create a new one based on certain criteria let's create an array of student ages let ages equals make up some student ages 18 16 21 17 19 90. i'm going to create a new array of anybody that's 18 or older so i will create a function to check age function check age and there is one parameter element this will create a new array we will return and now we need some tests to filter out any elements that don't meet the criteria our test will be element is greater than or equal to 18. so we will use this check age function as a callback within the filter method this will create a new array so let's define that let adults equal ages the original array dot filter pass in the check age function as a callback and then we just need to display all of the elements of this array adults dot for each pass in a callback to a print function which we'll define momentarily function print element console.log element so the elements in our new array are 18 21 1990 so yeah that's basically the filter method it creates an entirely new array with all the elements that pass a test provided by a function and this will leave the original array alone but it creates an entirely new array of elements that pass a test so yeah that's the filter method everybody if you would like a copy of this code i'll post this in the comment section down below and well yeah that's the filter method of arrays in javascript hey guys in this video i'm going to explain the reduced method of arrays the reduce method reduces an array to a single value a very good use of the reduce method would be to sum up all the values of an array imagine we have an online store and somebody has a bunch of items in their cart we could sum up the prices of all the items and create a total let's create an array of prices let prices equals make up some prices five dollars ten dollars fifteen twenty twenty five that's fine and i will create a function that we will use as a callback function checkout we'll call this function when we would like to check out and make a purchase so there are at least two parameters that we need total this parameter will hold the accumulated value as well as the current element that we're working with we will return if we're trying to create a sum of all the elements total plus element so when we return a value we will reuse it as an argument for the next iteration this is how we can reduce all the elements of an array to a single value let's create a total variable and this will hold the final price that the user has to pay to reduce all of these prices to a single value we type the name of the array use the built in reduce method and pass in the callback checkout then i will just display what our total is console.log i'll use a template literal for this i will use a set of backticks the total is total okay so the total price is 75 let's add something else something that is 30 now the total is 105 so that's the reduced method of arrays it reduces an array to a single value a fantastic use of the reduce method is to sum up an array of values like items in a shopping cart and create a total that's the reduced method of arrays if you would like a copy of this code i'll post this in the comments section down below and well yeah that's the reduced method of arrays in javascript hey guys in this video i'm going to show you how we can sort an array of numbers in javascript let's imagine that we're a teacher and we have a student grade book our task is to sort our students grades in either ascending order or descending order let's begin let's create an array named grades and make up some student grades i'm thinking 100 50 90 60 80 70. let's create a function that will be used as a callback to sort these numbers in descending order so the greatest number will be first the lowest number will be last function let's name this descending sort there's two parameters x and y all we have to do is return y minus x this will compare two values at a time to sort this array and use this callback function i will reassign grades equal to grades dot sort method and pass in a callback descending sort and then we just need to display our grades grades i'll use the built-in for each method and i will pass a callback of print then we just need to define this function function print there is one parameter of element console.log element now after running this our grades are in descending order let's create a callback function for ascending order so let's copy this paste it change descending to ascending return x minus y and for the callback we will pass the argument ascending order and our grades are now in ascending order the lowest is first the highest is last so yeah that's how to sort an array of numbers if you would like a copy of this code i'll post this in the comment section down below and well yeah that's how to sort an array of numbers in javascript hey guys in this video i'm going to explain function expressions a function expression is a function without a name also known as an anonymous function a benefit is that function expressions help us to avoid polluting the global scope with random function names we can write a function and then forget about it if i need to create a function to display a greeting message using a function declaration i would need to think of a unique function name such as function how about the say hello function console.log hello then to invoke this function i just type the function name followed by a set of parentheses boom we have our function so it can get somewhat tedious and annoying to think of unique function names especially if the rest of your program is not going to use it another way that we could write this is to use a function expression and we will store that within a variable i will use the const keyword this time const is just a variable that you can't change the value of later const greeting and i will set the sequel to a function expression we will type function parentheses curly braces and we do not need to think of a unique function name what would we like to do console.log hello then to invoke the function stored within this variable i just type the variable name followed by a set of parentheses to invoke it hello so there is no need to think of a unique function name we can assign an anonymous function to a variable or some other entity which we'll discuss in the future here's another example we'll create a counter using two buttons we can increase or decrease our counter heading to our html file let's create a label and two buttons we'll need an opening label tag close it add a line break i will set the id of this label to my label i'll add some text just zero we'll need two buttons button close it the idea of this first button will be decrease button the text will be decreased and we'll need an increase button copy this paste it change decrease to increase and we have our two buttons if we were using function declarations we would need to think of two unique names to link to these two buttons using function declarations we would probably say something like function increase count and we need a count variable let count equal zero we will increment count by one count plus equals one and change the text of this label so we need to select it document dot get element by id we are selecting my label change the inner html equal to count then we will create a decrease count function function decrease count count minus equals one lastly we just need to link these buttons to these functions there is an on click event attribute beginning with the decrease button take the on click attribute set the sequel to the appropriate function decrease count add a set of parentheses copy this paste it for increase button and we will select the increase count function let's save and run this so with this label we can increase it and decrease it however i think this would be better with function expressions we don't need to declare two functions such as increase count and decrease count we can assign some function expressions to these buttons and then simply forget about them i'm going to get rid of both of these functions and we will create some function expressions let's select this increase button i'll just copy what we have here increase button dot on click set the sequel to a function expression what would we like to do these two lines of code increase count by one and change our label let's copy this function expression paste it do the same thing but with the decrease button decrease button decrement count by one and change our label we can get rid of this previous code let's save heading back to our html file we can also get rid of these on click event attributes okay save everything and this should work we can increase our label and decrease it and there is no need to create two unique function names we were able to assign function expressions to the event attribute of an html element so those are function expressions if you would like a copy of this code i'll post this in the comments section down below don't be afraid to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain arrow function expressions which are represented by well and arrow it's a compact alternative to a traditional function expression i'll give you a whole bunch of examples of where this could be useful let's create a traditional function expression which we learned about in the last topic i'll create a constant greeting and i will set the sequel to a function expression function we have an argument maybe username console.log will display a message i'll use a template literal hello then my placeholder user name so to invoke this function i type the function name a set of parentheses and i have one argument a username i'll type in my first name run this and this displays hello whatever your username is a compact alternative to this function expression is that we could convert it to an arrow function expression we will eliminate these things eliminate the function keyword after your arguments add an arrow and we can eliminate these curly braces looks good to me does this still work yes it does so depending on what arguments you have if you have no arguments you need just a set of parentheses if you have one argument you don't necessarily need to enclose this in a set of parentheses if you have two or more arguments you do need a set of parentheses that is one example of the arrow function let's try a different example the second example will have two arguments it will calculate a percentage first let's write a function expression const percent equals a function expression there are two arguments x and y x will be the denominator y will be the denominator and i would like to return x divided by y times 100. let's use console.log i'll use a template literal for this i would like to display here's my placeholder i'll invoke this function percent pass in two arguments a nominator and a denominator what is 75 over 100 then let's add percent to the end so 75 over 100 is 75 what about 80 over 150 53.3 repeating percent in place of a function expression let's use the arrow function so we eliminate the function keyword keep the arguments add an arrow and we can eliminate these curly braces and we don't necessarily need this return statement and this still works the same what about 45 over 50 that is 90 here's one last exercise we'll reuse the code on the video on sorting an array of integers in that example we had an array of student grades and these are integers one student has 100 another has 50 90 60 80 70. if i was using standard functions i would write something like this function descending there are two arguments x and y return y minus x and i will also create a print function function print we have one argument an element console.log element to sort and display each of these elements i will use two separate functions grades dot sort pass in a callback descending and i would also like to print grades for each pass in a callback to print so all of these grades are in descending order if we were writing the same code using function expressions i could stick a function expression within each of these methods let's turn this first function into a function expression cut it and paste it within the sort method and we will do the same thing with print get rid of the name cut this and paste it and that does the same thing but it uses function expressions in place of function expressions let's now use the arrow function we get rid of the function keyword add an arrow after the arguments and we can eliminate these curly braces and we don't need the return keyword either let's do the same thing with the for each method to display each element get rid of the function keyword add an arrow after the arguments we can eliminate the curly braces and that semicolon all right let's see if this works i can't believe it it actually worked in place of function expressions we were able to instead use arrow function expressions it's a compact alternative to a traditional function expression it makes your code a lot more readable so yeah those were a few examples of us using the arrow function you have your arguments on one side arrow then some code you would like to perform so yeah that's the arrow function everybody if you found this video helpful please be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to show you how we can shuffle the elements of an array this would work perfect for a card game let's say we have an array of cards let cards equal these will be string representations of cards we have an ace a two i'm not worried about the suit but you can feel free to add a suit if you would like i'm just gonna fill in this array then we have a jack a queen and a king so this is our array of cards to shuffle this array i can create a function to do that for me function shuffle and there will be one parameter an array when we invoke this function we need to pass an array as an argument shuffle our array cards now to shuffle this we'll begin at the end i need this array's length and i will store that within a variable that we will name current index and set this equal to the arrays length we will begin at the end and we'll need a while loop our condition is while current index does not equal zero now we'll need a random number between the beginning of this array up to the length of the array let's declare random index set the sql to math math.random times the arrays length property then surround this with math.floor math.floor decrement our current index by one current index minus equals one so i'm going to maximize this we will begin at the end we will swap this element with another one during the next iteration the previous element will be the current index we will swap this element with another one chosen randomly we'll continue this process until we reach the end of our array then stop then it's a matter of swapping two elements but we'll need some temporary storage let temp equal array at our current index array at our current index equals array at our random index array at our random index equals temp at the end of this function you can return the array if you like if you would like to reassign it i'm going to display all of the cards the array itself console.log cards so here's our array every time i run this program these elements are being shuffled if you would like the top element that would have an index of zero the top card in my deck currently is an eight now it's a king one trick if you would like to deal all the cards is that you can use the for each method of arrays cards dot for each method we can pass in a callback a function expression or an arrow function expression i'll use an arrow function expression we have one argument let's name this card arrow i would like to display that card console.log card this will deal all of the cards in my deck and every time i run it it's shuffled so yeah everybody that's one way in which we can shuffle the elements of an array if you would like a copy of this code i'll post this in the comment section down below and well yeah that's how to shuffle the elements of an array in javascript hey yeah everybody in this video i'm going to explain nested functions it's a function inside of another function think of the topic on nested loops it's a loop inside of another loop outer functions have access to inner functions inner functions are hidden from outside the outer function they add data security and they're used in closures which is a future video topic so let's begin we'll use traditional functions and then create some nested functions i have two variables let username equal some username and a variable to hold the amount of messages that i have like an inbox let user inbox equal zero or some other number i'm going to create a message to log in like we're logging into our email function login i'll create a function to display our username function display user name and another function to display our inbox user inbox when i display my username let's use console.log i'll use a template literal welcome i'll add a placeholder user name with the display user inbox function we will display how many messages we have you have add a placeholder user inbox new messages after logging in i would like to invoke these two functions display username and display user inbox and we need to invoke the login function as if we were logging in welcome bro you have zero new messages now a problem with this we have access to the display username function as well as the display user inbox function from outside of the login function meaning that we don't need to log in in order to display our username and our inbox so i can invoke these functions directly display username display user inbox and there's no need to even log in welcome bro you have zero new messages to add a little bit of data security i could place these functions within another function so in order to access the display username function i need to first log in and the same thing goes with the display user inbox function if i attempt to invoke these functions when they're nested i don't have access to them it adds some security in order to invoke these functions i first need to login so we'll invoke the login function and then we have access to the display username function and the display user inbox function so yeah those are nested functions they're functions inside of other functions the outer function has access to inner functions inner functions are hidden from outside the outer function it adds some data security and they're also used in closures which is a future video topic so yeah those are nested functions if you would like a copy of this code i'll post this in the comments section down below and well yeah those are nested functions in javascript hey guys in this video i'm going to explain what a map is a map is an object that holds key value pairs of any data type here's an example we have an online store we can associate prices with items constant store equals new map add a set of parenthesis a set of square brackets and within the square brackets we can create key value pairs add each key value pair to a set of square brackets and separate each pair with a comma the first value is the key the first key value pair is a t-shirt and the associated value is twenty for twenty dollars this is one pair in my map object let's create another my second pair are jeans they go for about thirty dollars maybe the third pair in my map are socks i'll sell them for ten dollars and what about underwear they're expensive they're fifty dollars they're very good underwear okay here is my map object it's named store to iterate over the pairs in my map i can easily do this using the for each method so type my map name dot for each i can pass in a callback a function expression or an arrow function expression i'll use an arrow function expression we have two parameters a value and a key arrow i would like to display my key value pairs console.log i'll use a template literal i'll add a placeholder key and each value value and i'll add a dollar sign so this is what i have currently this line will iterate and display each pair of my map and here is each pair it's kind of like i'm listing all the items in my store if i need to get one of these items like i would like to make a purchase there is a get method i'll create a variable to store the prices that are going to add up let shopping cart i'll set the sequel to zero if i would like to buy one of these items there is an associated price and i just need to access this value so i will take shopping cart and increment it to access one of these values i will type the name of the map store get and then a key i would like to buy a t-shirt so i will get my t-shirt and let's display our shopping cart console.log shopping cart currently our shopping cart is twenty we have to pay twenty dollars i would like to add another item i want some of that fancy underwear store dot get underwear my total is now seventy dollars twenty dollars plus fifty so that is the get method here's a few other methods there's a set method we can add a pair to our map store dot set i would like to add a hat and the price is 40. it's an expensive hat it's gucci now when we iterate over this map we have a t-shirt jeans socks underwear and a hat that is the set method we can delete a pair store dot delete type in the key hat and our hat is gone we can check if there's a key within our map type the map name has and pass in a key do we have any hats this will return a boolean value so i'm just going to place this within a console.log statement do we have any hats store has hat false store has underwear that's true that is the haz method and the last one i'll show you is the size property type the map name store dot size i'll put this within console.log and the amount of pairs within our map is four so yeah that's a map everybody it's an object that holds key value pairs of any data type you can associate a key with the value one example that we covered is if we had an online store we could associate products with prices so those are maps everybody hey if you found this video helpful please be sure to help me and smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro alright guys we have finally made it to object-oriented programming an object is a group of properties and methods properties are what an object has like a name a color a year methods are what an object can do for example if we're creating a car object two possible methods could be drive and break so let's create some car objects to begin with i'll create a constant constant car and this is how we can create an object within a set of curly braces we can create some properties which are kind of like variables this car has a model property and we can assign a value this car is a mustang separate each property with a comma let's create a color property the color could be red and a year the year is 20 23. we can also add some functions too i'll create a drive function so create a function name colon function parentheses curly braces when we invoke the drive function we can do something i'll display a message console.log you drive the car let's create another function this will be the break method so function parenthesis curly braces you step on the brakes and there we go we have a car object within a set of curly braces you can assign properties and methods and then at the end make sure you don't have a comma an object can have properties what an object has like a model a color and a year and methods what an object can do this car can drive and it can break to access an object's properties and methods follow the object name with a dot if i need access to the model of this car i would type the object name car dot model and i will display this within console.log but you can assign it change it do whatever you want with it this statement displays mustang if i need the color property i would type the object name dot color which is red car dot year is 20 23 if i would like to invoke one of these methods found within my car object i would type the object's name followed by the method i would like to perform car dot drive add a set of parenthesis to invoke it you drive the car then we have car dot break you step on the brakes we can create multiple objects each with different properties and methods one way to do this we haven't discussed classes or constructors yet we can just create a new name and we'll rename car as car 1 so we have two different car objects but i'll change the properties of card too we'll keep drive and break the same this will be a corvette the color is blue and the year is 20 24. so this car is named car 2. in order to access this car's model i would type the name of the object car 2 car 2. model car 2.color car 2.ear car 2 dot drive car 2 dot break we have a corvette the color is blue the year is 20 24. when we invoke the drive method you drive the car the brake method displays you step on the brakes so yeah those are objects it's a group of properties and methods that have a name properties are what an object has methods are what an object can do they're functions that belong to an object to access properties and methods of an object you use a dot following the object name so those are objects if you would like a copy of this code i'll post this to the comment section down below if you haven't already please be sure to smash that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey yeah everybody in this video i'm going to explain the this keyword all it is is a reference to a particular object but it depends on the immediate context where you use the this keyword here's an example i have two objects car one and car two car one is a red mustang car two is a blue corvette each has a similar drive function you drive the car in place of the word car why don't we replace the word car with the model of each car object i'm currently using a template literal i could insert the model of my car will create a placeholder this is what happens if i just type model you think this would work because this is like a variable right and let's do the same thing with cartoon i will invoke these two methods car one dot drive and cartoon.drive okay we ran into an error model is not defined at object drive within an object if i would like to use one of these properties i would need to precede this property with the this keyword in place of model i would type this dot model and do the same thing with cartoon this dot model let's run this again you drive the mustang you drive the corvette this refers to the object that we're currently working with the immediate context within this object the immediate context of this is car1 in this other object the immediate context of this is car two within an object when using the this keyword just imagine that we're replacing this with the object name car1.model and cartoo.model this will do the same thing so this is just a reference to the object we're working with let me show you what happens if i use the this keyword outside of any objects i will console.log this so what the heck is this we're actually within the context of a window object if you use the this keyword outside of any objects that you declared well then this refers to instead the window object because that is the immediate context and i can change one of these properties if i wanted to let's change this name property i would type this dot name equals my cool window so i can run this let's find that property there's my name property my cool window if i would like to access this property directly i would follow this with dot name my cool window so that's the this keyword everybody it's a reference to a particular object just imagine that we're replacing the keyword this with the name of an object hey if you found this video helpful please be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey everybody in this video i'm going to explain classes a class is a blueprint for creating objects within a class we can define what properties and methods that type of object should have and they typically contain a constructor to assign some unique properties but we're going to focus on constructors in the next video i had some trouble brainstorming some possible class ideas that wouldn't utilize a constructor but one that i thought of could be a player we can create a player class as a blueprint and create some player objects so to create a class we will type class player curly braces and we can define a properties and methods that all player objects will have its blueprint maybe each player has their own individual score and i will set this to zero each player will start at zero each player has a pause method now when you declare a method within a class you don't necessarily need that function keyword when a player pauses we will display a message console.log you paused the game and maybe an exit method console.log you exited the game now to utilize this class to create an object we would need an object name let's say constant player1 this will be the first player that joins now to utilize this class to create a player object we use the new keyword followed by the name of the class player add a set of parentheses and a semicolon we have created player one player one has a score property and two methods pause and exit let's display what player one score is console.log player1.score and that is currently zero but you can adjust its score player one dot score plus equals one he scored a point player one now has one point player one dot pause method you pause the game and player one connects it player one dot exit you exited the game we can reuse this class to create multiple players i'll create player two constant player two equals new player i'll display player two score and we will have player two exit the game player one has one point player two has zero points player one invoked the pause method player two invoked the exited method you can keep on reusing this class as much as you would like this time i would like four players so same process as before declare a unique object name set the sql to use the new keyword the name of the class that's a class it's basically a blueprint for creating objects we can create as many objects as we want and within this class we define what properties and methods that each object created from this class should have and in the next video we're going to discuss constructors so we can assign some unique properties to each object so those are classes hey if you liked this video let me know by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro all right everybody constructors a constructor is a special method of a class its job is to accept arguments and assign properties or anything else you would like to do when you instantiate an object let's create a student class class student to create a constructor we will type constructor parentheses curly braces now when we create an object a student object in this example we can assign some properties each student has a name an age and a gpa within the constructor we can assign some of these arguments to properties of this class we can state this dot name equals name this dot age equals age this dot gpa equals gpa there we go there's our constructor you can also add additional properties or methods outside the constructor let's add a study method study let's display i'll use a template literal this dot name is studying okay let's create some student objects we can use var let or const i'll use const student one equals new student within our constructor we have three parameters that means that we need to pass three arguments a name an age and a gpa so that we can assign these properties the first student will be spongebob that's his name his age he'll be 30 and his gpa he has a 3.2 gpa and i can display these console.log student1 dot name his name is spongebob age and a gpa spongebob his age is 30 his gpa is 3.2 and for fun let's invoke the study method student one dot study spongebob is studying now we can reuse this class as a template to create other students and pass some unique arguments to assign to its properties let's create student 2 student 2 equals new student the student's name will be patrick he will be 35 years old his gpa is 1.5 and we have access to student two's properties and methods student two dot name age gpa and he has his own study method okay patrick is 35 his gpa is 1.5 and patrick is studying we can reuse this class to create as many students as we like so lastly let's create one last student student 3 student 3 will have a name of sandy sandy will be 27 and sandy's gpa is of course a 4.0 student 3 has its own unique properties and methods a name age gpa and study method we have sandy she's 27 her gpa is 4 well 4.0 and she has her own study method sandy is studying so that's a constructor it's a special type of method within a class it accepts arguments and assigns properties when you construct an object so those are constructors hey if you haven't already please be sure you smash that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain the static keyword a member that is static whether it's a property or a method belongs to a class and not any objects created from that class in this example i have a class car and a constructor when we create a car object we can pass in a model of a car so i have three car objects suppose i would like to keep track of how many cars i have created we're entering some cars into a race well we could create a property to keep track of how many cars that we have instantiated let me show you why we would want to make this static so we have a property number of cars and i will set this equal to zero within the constructor we can add additional code every time we create a car let's increment cars by one number of cars plus equals one now i will precede number of cars with the this keyword so what happens when we display number of cars for each car console.log car one dot number of cars car two car three so the total number of cars within our race is one i guess so the reason why number of cars is in three is because each car object has their own number of cars variable each car object can share the same property or method and we would precede that property or method with the static keyword instead of each car having their own copy the car class itself has the only copy then to increment number of cars by one in place of the this keyword i will use the name of the class car the car classes number of cars will be incremented by one every time we call the car constructor there's a problem here i'm accessing the number of cars property but no one object from this class has ownership of this variable to access the static property of number of cars i will use the name of the class car car dot number of cars how many cars have we created we have created three cars and i could create another car for is a ferrari now we have four cars or even five cars a static property is useful for caches or anything with a fixed configuration we also have the capability to make methods static it's more or less useful for utility functions now we would like to start our fictional race we could create a start race method start race console.log three two one go so currently this is not static so any one of these cars can begin the race on their own terms car one wants to begin the race start race three two one go so i'm going to make this a static method it's more or less a utility function so precede the method name with static now to invoke this start race method type the name of the class car car dot start race three two one go basically that's the static keyword anything that's static belongs to the class and not the objects one place where we do see static methods is within the math class say i need to round math the name of the class dot round method i wouldn't need to create a math object such as const math1 equals new math that would be silly to access the round method i would just type the name of the class dot round it's a static method that's the static keyword everybody if you would like a copy of this code i'll post this to the comment section down below and well yeah that's the static keyword in javascript hey y'all everybody in this video i'm going to explain inheritance inheritance is when a child class can inherit all the methods and properties from another class how is this useful let me give you a demonstration our job is to create three classes a class for rabbits fish and hawks three specific kinds of animals so we have class rabbit each rabbit will have a boolean variable called alive and i will set this to true if you're a rabbit object you're alive and a name equal to rabbit each rabbit should be able to eat console.log i'll use a template literal this at a place holder this dot name is eating and all rabbits should be able to sleep sleep this this dot name is sleeping and one more how about run run this this dot name is running this is our rabbit object so let's copy this class paste it and convert the second class to fish alive will remain true name will be fish eat and sleep will remain the same but fish they don't run well because they don't have legs they will instead have a swim method this this dot name is swimming copy all this code and we will create a hawk class this will be the last class class puck name is hawk hawks will be able to eat and sleep in place of a swim method they will have a fly method this this dot name is flying we have three separate classes rabbit fish and hawk but with programming we don't like to repeat code and we're repeating quite a lot of code within each of these classes each class has an identical eat and sleep method as well as in a live boolean variable so to eliminate the need for us to repeat some of this code we can simply create a class and all of these individual animal classes can inherit some properties and methods from that one class so what do all of these classes have in common and a live boolean variable and an eat and sleep method so why don't we create a separate class and each of these classes will inherit from that one class this will be a parent class rabbit fish and hawk will be children classes so let's create class animal that's descriptive of what they all have in common class rabbit will extends the animal class rabbit is the child class animal is the parent class do the same thing with fish and hawk any properties or methods that all of these classes have in common we can put within the parent class they each have an alive property set to true we can eliminate that for each class and stick it within the parent class there's no need to repeat this variable each time they each have the same eat and sleep methods we can copy those paste it within the animal class and then eliminate each of these methods within the children classes so any properties or methods that are unique to these children classes you should keep within the children classes rabbit inherits these properties and methods from the animal class fish does the same as well as well as hawk and you can see that we eliminated a lot of lines of code there was no need for us to repeat ourselves let's create some animal objects const rabbit equals new rabbit fish equals new fish hawk equals new hawk let's test to make sure that each of these children classes does in fact have access to these properties and methods rabbits should have in a live boolean variable if you're a rabbit you're alive congratulations console.log rabbit.alive that is true even though within the rabbit class we didn't write in a live boolean variable within the rabbit class itself it inherited one from its parent and i bet rabbits can also eat i bet they can sleep and they can run yep the rabbit is eating sleeping running so let's test this with fish fish not alive fish.eat fish.sleep what would happen exactly if i attempt to invoke the run method of fish fish.run is not a function so this run method belongs to the rabbit class fish don't have a run method but what they have in common are those eat and sleep methods fish do have a swim method so the fish is eating the fish is sleeping the fish is swimming and let's test hawk hawk dot alive hawk.e hawk.sleep hawk.fly okay true this hawk is eating this hawk is sleeping this hawk is flying so that's inheritance everybody a child class can inherit all of the properties and methods from a parrot class if you have multiple classes that all have the same properties and methods you could stick those properties and methods within a parent class and there's no need to repeat those properties and methods if they're identical not only does this eliminate repetition when you're coding but if you need to make any changes to one of these methods it's all in one place if my boss says i need to change the eat method to this this dot name is eating to hunting i just have to make this change in one place if we had an eat method within each of these classes i would have to go to each individual class and make that change manually it's not bad if there's three classes but imagine if you had hundreds that would be a lot of unnecessary work when you could just make that change in one place so that's inheritance everybody if you would like a copy of this code i'll post this in the comments section down below if you haven't already please be sure you've smashed that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain the super key word the super keyword when using inheritance refers to the parent class it's commonly used to invoke the constructor of a parent class here's an example i have three children classes rabbit fish and hawk they all inherit from the animal parent class suppose we have a constructor within each of these child classes constructor rabbits will have these three properties a name an age and a run speed so to assign these properties when we instantiate a rabbit object we could assign this dot name equals name this dot age equals age and this dot run speed equals run speed i'll copy this constructor paste it within the fish child class fish well they don't have a run speed but they will have a swim speed property swim speed this swim speed equals swim speed let's copy our constructor paste it within hawk change swim speed to fly speed this fly speed equals fly speed let's create some of these objects const rabbit equals new rabbit we have to pass in three properties a name an age and a run speed for the name we'll say rabbit age one one for one year old and a run speed of 40 kilometers per hour i don't know if that's accurate i just made up a number okay let's create a fish object fish equals new fish the name is fish the age will be i guess two swim speed 80 kilometers per hour okay then we have hawk equals new hawk pass in a name hawk and age maybe three and a fly speed 200 kilometers per hour just to test everything i'm going to display my rabbit's name age and run speed rabbit dot name rabbit dot age and rabbit dot run speed okay let's take a look what the heck so we encountered an uncaught reference error must call super constructor in derived class before accessing this so if we have any children classes and those children classes have constructors we would want to invoke the constructor of a parent class one of the reasons why this would be useful is that within each of these constructors we're repeating some code this dot name equals name and this dot age equals edge but the run speed swim speed and fly speed are all unique to each of these classes to promote code reusability we can call the constructor of a parent class to assign the name and age properties so within the animal class i will create a constructor we will have a name and age property and then we'll assign them this dot name equals name this dot age equals age we can eliminate these two lines and when we construct a new rabbit object we will first invoke the superconstructor so you type super then pass your arguments to the superconstructor we will pass our name and age and we can do this with the other constructors this eliminates some code repetition and this should work so we have our rabbit we have our name rabbit age is one year old and the speed is 40 kilometers per hour let's try this with fish fish dot name fish dot age fish dot swim speed the name of this fish is fish this fish is two years old swim speed of 80. and in our last example we have hawk hawk.name hawk.h hawk.flyspeed the name is hawk this hawk is 3 years old and has a fly speed of 200 kilometers per hour so the super keyword refers to a parent class it's commonly used to invoke the constructor of a parent class it helps with code reusability we could write this code once and simply reuse it by invoking the superconstructor of the parent class then if any class has any unique properties you can assign those unique properties within the constructor of each of these child classes so that is the super keyword it just refers to the parent class if you would like a copy of this code i'll post this to the comments section down below and well yeah that's the super keyword in javascript hey yeah everybody in this video i'm going to explain getters and setters let's begin with getters to create a getter you use the get keyword its job is to bind an object property to a function when that property is accessed here's an example let's create a class car class car i'll create a constructor constructor we'll have one parameter power this will be in horsepower this dot power equals power when i create a car object let car equal new car i will pass in a unit for power this will be in horsepower 400 horsepower is good then i will display this console.log car.power my car has 400 horsepower one thing i don't like about how my code is written is that when i'm displaying the car's horsepower there's no unit of measurement when i display this property i could add on car.power plus hp for horsepower but i have a better idea let's use a getter when we get this property we can add some additional logic i will type get the name of the property power parentheses curly braces when we access this property we will instead invoke a function we will return this dot power now there's a couple issues with this when i run this first we have a type error cannot set property power of car the property name and the getter cannot have the same name a common naming convention with properties of objects if you have getters and setters set up is that you take the property name and precede it with an underscore this lets other developers know that this is a protected property and you probably shouldn't mess with it now if i run this we have another issue uncaught range error maximum call stack size exceeded that's because when we invoke this getter we're returning this dot power again we're invoking the getter method from inside of it we will instead return this dot underscore power underscore power is the protected property now when i run this it displays my number 400 by associating a protected property with only a getter this protected property is read-only and not writable if i was to take car.power and set this to like a gajillion and i display my car's power well it's still at 400 we do not have direct access to this property i mean theoretically you could set car dot underscore power to a kajillion but developers know that if you see underscore than a property name that means it's protected and you shouldn't mess with it at all another thing that we can do with getters is that we can add some additional logic instead of just returning this.power let's add horsepower to the end i'll place this within a template literal and add hp for horsepower so when i display my car's power it's 400 horsepower so that's a few benefits of getters is that one it increases data security and two you can perform some additional logic when you access a property directly to use a getter you type the object name followed by the getter name it appears to be no different from accessing that property directly we don't need to invoke a power method you just type power as if it's a property let's create a protected property for gas within my constructor i'll set this dot underscore gas to some amount of gas in liters perhaps we're selling cars and each car will have 25 liters of gas to start with then to display my gas i can use a getter get gas return this dot underscore gas the unit of measurement will be liters let's display my car's power and its gas 25 liters let's add some additional logic along with the gas level i would like to display the percentage of what my tank is at so zero percent would be empty 100 would be full i'll return a template literal what about this dot underscore gas divided by maybe some max tank size like 50 liters times 100 percent if my guess level is at 25 well then my tank is half full and i can change this to a different number like 50. now my tank is completely full or it's empty now let's work on setters setters bind an object property to a function when that property is assigned a value with my power property i don't want anybody to mess with that that's why i only have a getter but with the gas level i would encourage people to change the gas level they would want to be able to fill their tank i'll create a setter set gas we'll need some argument i'll name this value to fill my car with gas i can take this dot gas property equals value since gas has a setter that means it's writable i'll take my car's gas property and set the sql to some value as if i'm filling the tank currently there's no additional logic within this gas setter a user could theoretically add like a kajillion liters of gas now my gas is like 2 billion percent full i might want to limit that i'll check to see if our value that we receive is greater than maybe 50. so that will be the max tank size if the value is greater than 50 then let's set value equal to 50 to limit it if we attempt to add over a billion liters of gas it will be capped at 50. or possibly somebody will set this to a negative number negative 100 liters else if value is less than zero value now equals zero there now our tank is empty so yeah everybody those are getters and setters they bind an object's property to a function when that property is accessed in the case of a getter or assigned a value in the case of setters so those are getters and setters everybody if you would like a copy of my code i'll post this in the comment section down below and well yeah those are getters and setters in javascript hey guys in this video i'm going to show you how we can pass objects to a function as an argument i have a class car and we have three car objects each car has a model year and color how could passing objects to a function be useful i need a function to display all of the information for each car so let's create a function function and we could name this display info if we're accepting an object as an argument we need a matching set of parameters i think we should just name it simply car all lowercase remember when you pass an object to a function the parameter name is kind of like a nickname that you're giving it temporarily then to invoke this function i will type the function name display info and pass a car object as an argument i would like to display car one's info within this function let's display this car's model year and color car model year and color okay let's see if it works yeah with this car object the model is a mustang the year is 20 23 the color is red we can pass a different object as an argument this time how about car two display info card two car two is a corvette the year is 2024 and the color is blue then car three is a lambo the year is 2022 and the color is yellow let's create another function to maybe change the color of a car and we will have two parameters function change color we will accept a car object and a color we will take car dot color set is equal to whatever color we receive as an argument let's change the color of our lambo so i will invoke the change color function and i will pass in two arguments a car and a color car three and let's change the color to gold and then display it and the color of our lambo is now gold and not yellow that's how to pass an object to a function when you invoke a function just pass the name of an object as an argument and with the parameter name just find a name of what's descriptive of what you're accepting as an argument so that's how to pass objects as arguments if you would like a copy of this code i'll post this in the comment section down below if you haven't already please be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to show you how we can create an array of objects in javascript i have a class car and we have three car objects car one cartoon car three each car has a model year and color as well as a drive method let's come up with a descriptive name of this array what about cars then with creating arrays you use a pair of straight brackets what would we like to add to this raised elements well the names of our objects car 1 card 2 and car 3. let me show you what happens when we display one of these elements console.log type the name of the array followed by an element number the first element has an index of zero because computers always start with zero and we have our car object but if you need one of these properties or methods you would follow the array name and the index number dot and then a property or method so at index 0 of our array cards i would like to access the model property the first element of this array has a model property of mustang if i were to repeat the process for cars at index of one and two those respective models are a corvette and a lambo if you need to access a property or method of an object that's within an array you type the array name and index number followed by dot then a given property or method just for practice let's invoke the drive method of each of these cars so i would type the array name and index number follow it with a dot then a property or method i would like the element at index zero within this array to use the drive method let me get rid of these lines okay you drive the mustang let's do that with the other elements one and two you drive the mustang you drive the corvette you drive the lambo just as a challenge let's create a function that will loop over the elements of this array and invoke the drive method of each element we're going to have a race we need a function to start our race and have every car use its drive method so i will create a function let's name this start race say that we need to pass our array of objects as an argument we'll need a matching set of parameters i will name this parameter cars and i would need to loop through all of the elements within this array i can use a4 loop for that let's say const car of cars car is the current element i need each car to use its drive method then we need to invoke this function start race then we can pass in our array of objects cars you drive the mustang you drive the corvette you drive the lambo hey let's add another car car 4 is a ferrari the year is 2025. the color is white so let's add this object to our array car four now we have four cars in our race you drive the ferrari so yeah that's an example of an array of objects it's a useful programming technique because you can keep all objects organized within an array so that's an array of objects if you would like a copy of this code i'll post this in the comments section down below if you haven't already please be sure you smash that like button leave random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain anonymous objects they are objects without a name a benefit is that using anonymous objects requires less syntax and there's no need for unique names however a downside is that we do not have direct access to one of these objects so here's an example we're going to create an array of cards each card will be an object which we'll create with a class class card i'll add a constructor each card will have both a value and a suit this dot value equals value this dot suit equals suit suppose i would like to make a card normally if we're using names not anonymous objects i would declare a unique name like let card one equal new then the name of the class to instantiate an object card for this object i need to pass in a value and a suit this card will be the ace of hearts a the second argument will be hearts i'll create a couple other cards card two will be named well card two card two will be the ace of spades card three ace of diamonds card four will be ace of clubs i'll just create four more cards i'll copy all this paste it we have cards five six seven eight these cards will be two of hearts two of spades two of diamonds and two of clubs i'll just stick with eight cards for this example i don't need a whole deck of 52 cards to explain this so we have eight cards i'm going to add them to an array let cards equal we'll add card one card two and the others that's good enough to access one of these properties of one of these cards i can either do so directly by the object name or by an array element so if i were to display console.log one dot value plus card one dot suit this would display ace of hearts or i could access this object indirectly via the array that would be my array cards at index of zero dot value plus cards at index of zero dot suit this would do the same thing with this first statement we're accessing this object directly by its name in the second statement we're accessing this object indirectly via an array index you know this does in fact work and all but i would write this a different way there's no need to create all of these unique names that's a lot of work if we were to rewrite this using some anonymous objects this is what we can do we'll get rid of everything before the new keyword we've created eight cards but we have no way to reference them in place of adding some object names directly to our array when we instantiate a card object we can actually place that within the array we'll add a new card with these properties and that will be the first element then let's add the others i'll speed up the footage this would do the same thing however we have a reference error card 1 is not defined so there is no card 1 anymore my interpreter doesn't know what the heck card 1 is that's because we never declared it so using anonymous objects we have no way to directly access these objects by a name because well they don't have one in order to access the properties of an object i would need to do so indirectly since these objects are within an array i can reference them by an index number cards at index 0 would be the ace of hearts cards at index of 1 is my ace of spades and then 7 is my two of clubs so you can see that this still works and it's a lot less syntax sometimes it would be impractical to give an object a name if you're never ever going to reference it directly for fun let's display all of the cards within this deck using the for each method cards dot for each we will take card as an argument arrow function console dot log i'll use a template literal let's take card dot value and also display card dot suit there here are all the cards in my deck displayed so yeah everybody those are anonymous objects they're just objects without a name you don't need to declare a name to create an object names are just used as a reference as storage the downside is that you don't have direct access to an anonymous object you would typically store them within something like an array and some benefits is that there's less syntax it reduces the size of your code and there's no need to create some unique names so those are anonymous objects everybody if you would like a copy of this code i'll post this in the comments section down below and well yeah those are anonymous objects in javascript hey guys in this video i'm going to explain error handling errors are objects with a description of something that went wrong encountering an error will halt the execution of your program we would like some way to gracefully handle these errors without interrupting our program errors can happen for one of a few reasons a few examples would be you can't open a file you lose connection to a device a user types in some incorrect user input or a type error one example of type error is that we mistype something instead of saying console.log maybe we misspell log as leg console.leg well we encountered an uncaught type error console.lag is not a function if an error happens while your program is running it can cause your program to stop we would like to gracefully handle these errors and one way to do that is to surround any dangerous code with a try block code that could cause an error is considered dangerous accepting user input is almost always dangerous because you don't know what they're going to type in so let's create a try block and add some dangerous code now if you have a try block you need to follow this with a catch block and there's one argument an error if something goes wrong we will do something else in fact i will display whatever our error is console.log error again if i type console.leg while this won't interrupt my program it will simply just display the error type air console.lag is not a function so we don't get that big nasty red error message sometimes in your program something will go wrong but it won't generate an error here's an example let's accept some user input we'll ask a user to type in a number let's declare variable x x equals window dot prompt enter a number when we accept user input it's of a string data type we'll need to convert that to a number okay at the end let's display a message console.log i'll use a template literal x is a number okay let's run this enter a number well pizza is my favorite number i'll enter that in so even though this didn't cause any errors it's definitely going to cause problems for me in my program something is going to go wrong using this throw keyword i can execute a user-defined error but we'll need to know when to use it i'll add an if statement if and the condition is is not a number pass in x if this is true then we will throw an error or an argument to be used as an error so we're just displaying a message in this example that wasn't a number so now when i run this again i'll enter pizza in that wasn't a number what if the user doesn't type in anything they just press the ok button 0 isn't a number so that means they didn't type in anything we can throw a user defined error we'll need another if statement if x is equal to an empty string then throw that was empty let's try this again i'll just press ok that was empty so an error is an object with a description of something that went wrong there may be times when something will go wrong in your program but it doesn't raise an error like somebody types in something that you didn't anticipate you can use this throw keyword to execute a user defined error now there's one more statement that we can add to this you can add a finally block finally we'll always execute doesn't matter if your code is successful or unsuccessful if there's an error here's one use of the finally block let's say we open a file after we open the file and are done with it we would like to close it but if we open the file and cause an error we would still like to close it so the finally block is good for any sort of cleanup but we're not going to be working on opening files let's just display a message console.log this always executes let's run this again i'll enter in a number 123. 123 is a number this always executes so even if our code is successful we will still execute the finally block let's enter in something that's not a number like the word pizza that wasn't a number this always executes so yeah everybody those are a few ways to handle errors and error is an object with a description of something that went wrong sometimes things will go wrong and they don't cause errors if that's the case you would want to use this throw keyword and it will execute a user defined error or a message or value that can be used in an error so that's some basic error handling if you would like a copy of this code i'll post this to the comment section down below and well yeah that's error handling in javascript hey yeah everybody in this video i'm going to explain the set timeout method it invokes a function after a number of milliseconds it's an asynchronous function meaning that it doesn't pause the execution of your program for my example we're going to be annoying we're going to spam some alert messages after a given amount of milliseconds let's create a few functions function will display three messages this will be the first message first message i'll create an alert alert i'll use a template literal buy this course for five hundred dollars okay let's create two more messages second message third message for the second message let's say that this is not a scam the third message will be do it i would like to invoke these functions after a given amount of time i will use the set timeout method so we pass in a callback a function expression or an arrow function expression just to keep things simple i'm going to pass a callback let's begin with the first message that's the first argument the callback is the first argument and then a given amount of milliseconds we would like this function to execute after three thousand milliseconds three seconds we will alert the user to buy this course for five hundred dollars it is possible to have multiple set timeout methods executing concurrently let's invoke the set timeout method two additional times after about maybe six seconds we will invoke the second message function then we will invoke the third message function after nine seconds okay let's try buy this course for five hundred dollars this is not a scam do it if at any time you ever need to clear or cancel your set timeout method you can use the clear timeout method but i'm going to link this to a button let's create a button within our html document button id of my button and the text will be by if we want to buy that fictional course that we're selling i need to select this button by its id document dot get element by id the id was my button set the on click attribute equal to a function i will invoke the clear timeout method but we need to pass in the id of a timer when you invoke the set timeout method it will return an id so let's store that within a variable let timer 1 equal set timeout then let's create timer two and timer three so we will pass these variables as arguments to the clear timeout method so copy and paste timers one two and three let's alert the user so if they click on this buy button they buy our fictional course thanks for buying buy this course for five hundred dollars i'll click buy thanks for buying that will cancel and clear the set timeout methods if you need to pass arguments to a function you can list those after the milliseconds argument let's create variable item we would like to sell how about a crypto currency this time we will list a price let price equals 420 69. so i'm going to pass these two variables as arguments item and price when i invoke the first message function but we need parameters item and price let's actually use these buy this item for price buy this cryptocurrency for 4 20 69. so yeah everybody that is the set timeout method it invokes a function after a number of milliseconds it's an asynchronous function it doesn't pause the execution of the rest of your program if you need to perform a task after a given amount of time you can invoke the set timeout method hey if you found this video helpful please be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm going to explain the set interval method the set interval method much like the set timeout method it invokes a function repeatedly after a number of milliseconds it's an asynchronous function it doesn't pause the execution of your program let's create a count up timer i will declare a counter let count set the sql to zero and we will accept some user input let max equals window dot prompt count up to what number i'll need to convert the user input to a number because it's normally of the string data type when we accept user input now let's invoke the set interval method set interval we can pass in a callback a function expression an arrow function expression let's just pass a callback to keep things simple count up after how many milliseconds would we like to repeat this function maybe one thousand for one second let's declare this function function count up i will increment count by one this will be our counter and we will display whatever count is console.log count let's stop if count is greater than or equal to max the number that we enter in the user input to stop the set interval method we can use the clear interval method however as an argument we need to pass in the id of the set interval method so we can actually assign that constant let's name this my timer equals set interval my timer is storing the id of the set interval method i'll pass that as an argument to the clear interval method and when i run this we should count up to a number that we set count up to what let's count up to ten press okay okay we begin at one two three four and we should stop at ten yeah if you ever need to pass arguments to a function a callback maybe a lot of these variables are within a function so if i need to pass max i can add that as an argument then make sure to have a matching set of parameters so that is the set interval method everybody it invokes a function repeatedly after a number of milliseconds if this video helped you out please be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey guys in this video i'm gonna discuss date objects date objects are used to work with dates and times to create a date object we just call the date constructor let date equal new date and then we can display the date console dialogue date and here's the current date and time including time zone although it's not that readable we can actually change that i will set the date equal to date dot 2 locale string method and that is a lot more readable hey for fun within our dom let's create a label and update the label with the current date and time so within my html file i'm going to create a new close it i'll give this a unique id my label is fine and i will change the inner html of my label document dot get element by id pass in a unique id my label change the inner html equal to date yeah it's pretty cool right now with the day constructor if you don't pass in any arguments date will equal the current date and time however if we pass zero as an argument zero is a reference point for us this is known as the epic it will be some date around the year 1969. imagine this is the date where time began not really but just imagine it this is a reference point for us within the day constructor we can pass an amount of milliseconds as an argument so if i pass in i don't know how many milliseconds that is this will create a new date 10 million milliseconds after this date the starting point so 10 million milliseconds after our epic is the same day but 8 o'clock at night so i'm just gonna pass in some random numbers and see what dates we get this number equates to the date september 8th 2001 8pm and let's see what this is okay now we're in the year 33 000. so you can pass an amount of milliseconds to the date constructor but zero is a reference point there are additional arguments you can pass too the first argument is a year let's pick the year 2023 the next argument is the month zero corresponds with january february corresponds with one then you just follow that pattern i'll pick uh let's say january so zero the next arguments for the day the hour minutes seconds and even milliseconds so after passing how many arguments do we have here i think seven the current date and time is january 1st 2023 about two in the morning if it's easier for you you can even pass in a string representation of a date and time how about january 1st 2023 midnight that's another option available to you too you can even get properties from a current date if you need the year we could assign that to a variable let year equal date dot get full year and let's display this so the current year is 2022 day of the month day of month the corresponding method is get date let's display day of month and it is the seventh currently day of week get day sunday is zero monday is one tuesday is two you just follow that pattern since day of week is one that means it's monday we have access to the month get month the month is currently one january is zero february is one march is two you follow that pattern we have access to hours get hours the current hour is 10 this is in military time so the possible hours are between 0 and 23 minutes get minutes so the current time for me is six minutes after 10 seconds get seconds every time i refresh this page you can see that the seconds is going up and even milliseconds let's name this variable ms for short get milliseconds and this is pretty much updating every time i refresh the page so if you need one of these properties of a date you can use an associated method you can also set these properties too i would like to set the year of my date date set full year i'll pass in the year 2024 and let's display our date so for me i'm recording this on february 7th but the year is changed to 2024 there's also set month date dot set month i'll change the month to december so that would be 11 december 7th 2024 you can set the day of the month date dot set date i'll change this to 31 december 31st 2024 we have set hours date dot set hours let's move this to 12 that would be 12 p.m and 23 would be 11 p.m same thing applies four minutes set minutes what about one seconds set seconds i don't know 30 and even milliseconds although we're not displaying it currently date dot set milliseconds and pass in some amount of milliseconds so those are various set methods you can set a property of a date we can even create our own custom functions to format a date and time so i'm going to get rid of this line let's create a function to format the date first function format date we will accept a date as an argument let's create a few variables for the year month and day let year equal and we can get the year date dot get full year let month equal date dot get month and let day equal date dot get date so let's return a string representation of the year month and day return i'll use a template literal so if you would like the month first like what's displayed in my web browser we can put the month first then the day next end of the year when i update my label i will invoke the format date function that i created and pass in our date there we go remember though that january is zero and february is one but whoever's using this program probably won't know that let's add one to our month there now it's february and for some additional practice let's create a format time function function format time we have one parameter a date let hours equal date dot get hours let minutes equal date dot get minutes let seconds equal date dot get seconds let's return a string representation of the hours minutes and seconds i'll use a template literal hours minutes seconds let's invoke the format time function that we created yeah and that's my current time but it's currently in military time let's change it to standard let's add am or pm let i don't know what to name this variable am or pm i guess equals and i'll use the ternary operator our condition is we'll check if hours is greater than or equal to 12 question mark if that's true we will return pm if it's false we'll return am and i will display my variable am or pm and it is currently am the hours are still currently in military time so to convert that to standard this is one way in which we can do that let's reassign hours equal to we'll write hours modulus 12. modulus finds the remainder of any division then i'll use the bitwise or operator 12. we're taking hours modulus 12. if ours is currently 12 this expression would evaluate to be zero then using the orbit wise operator we would instead use 12. so this line will convert your hours from military to standard so yeah everybody that's a few things we can do with date objects they're used to work with dates and times if you would like a copy of this code i'll post all of this in the comment section down below and well yeah those are date objects in javascript hey everybody in this video we're going to create a practice program to create a clock that will update every second let's begin by going to our html file and i will add a label we'll use a pair of label tags and i will set the id equal to my label save head back to your html document i'll assign that variable to a label constant my label equals document dot get element by id the id was my label and we'll create an update function function update and we will get the current date and time let date equal new date let's update this label just to test it my label dot inner html equals date and then we should invoke this function update so that's the current date and time but i would like to format this within our update function let's create a nested function to format the time function format time let's get the hours let hours equal date dot get hours the minutes let minutes date dot get minutes and seconds seconds date dot get seconds let's return a template literal hours minutes seconds make sure you spell return right let's invoke the format time function and we should probably pass a date so set up a date as an argument and a parameter this time is in military time so let's set this to standard we'll need am or pm let am or pm equal i'll use a ternary operator we'll check if hours is greater than or equal to 12 question mark if that's true return pm otherwise return am let's add our variable am or pm my current time is 12 22 pm the hours is still in military time although you can't tell from my example to convert that between 1 and 12 i can set hours equal to hours modulus 12 bitwise operator 12. modulus gives you the remainder of any division if hours is 12 then the remainder of 12 divided by 12 is 0 then we would instead use 12 in place of 0 using the or bitwise operator since i'm filming this at 12 pm there's no change i would like this clock to update every second after we invoke the update function let's invoke the set interval method of our window object the first argument is a callback we'll pass our update function as a callback and then a delay every 1000 milliseconds i would like to update our clock there it's updating currently now if one of these variables is a single digit we don't have any leading zeros i'd like to change that if we have a single digit i would like a leading zero before the actual time unit so let's create another nested function function let's call this format zeros we'll accept a time let's set our time parameter equal to time dot to string this will convert a number to a string then we will use some string concatenation and return we'll use the ternary operator let's check the times length property if it's less than two that means it's a single digit if our time length is a single digit then we will precede our time with zero if it's false we'll just return time back so then we just need to invoke and reassign hours minutes and seconds we'll invoke our format zeros function pass in our hours and do the same thing with minutes and seconds and we now have some leading zeros so yeah i thought that would be a fun practice project we have a clock that will update every second if you would like a copy of this code i'll post this to the comment section down below and well yeah that's a simple clock program in javascript hey guys for this topic i will explain the differences between synchronous and asynchronous code in a span of a few minutes synchronous code isn't an ordered sequence they are step-by-step linear instructions you start some process now and you finish now the rest of your program has to wait for a synchronous process just a quick demonstration let's display something start this step is synchronous and then end so these are step-by-step instructions in order to move on to the second step we first need to complete the first step no matter how long the statement will take our next step has to wait for the first step to finish so our results are start this step is synchronous and end now asynchronous code can be out of sequence these may be tasks such as accessing a database fetching a file basically tasks that take time they'll take an indeterminate amount of time you don't want the rest of your program to wait around for some process to finish you start now finish sometime later and the rest of your program can carry on with whatever it was doing an example of some asynchronous code would be the set timeout method so i'm going to replace the second line with set time out just to keep things simple i'll pass in an arrow function expression and we will display a message console.log this is asynchronous and we'll wait maybe five seconds okay we have start and end and that asynchronous code should kick in right about now so you can see that this step is out of order it's asynchronous it's out of sequence it's running in the background step three in my program doesn't need to wait for step two to finish step two will start now finish sometime later when it's ready that's the main differences between synchronous and asynchronous code synchronous code has to be in order it's a set of linear instructions you start now and finish now such as a console.log statement asynchronous code is out of sequence it takes an indeterminate amount of time like accessing a database fetching a file etc start now finish sometime later and it doesn't pause your program it will continue on with the rest of the instructions so that is a quick description of the differences between synchronous and asynchronous code in javascript hey guys here's a super quick video on the time method of the console object i think you would find this fairly useful it's a great utility method its job is to start a timer that you can use to track how long an operation takes and you can give each timer a unique name to track how much time has elapsed for a given operation i can use console.time to give this timer a unique name i can pass that as a string argument let's see how long it takes for a user to click a button i'll name this timer response time so this is the start to end this timer i can use time end at the end of my program i will invoke console.time end and pass the same name as an argument response time so this is the end if i run this currently the time end method will print the elapsed time in my console this program took .0019 milliseconds to complete let's actually do something i'll create an alert alert click the ok button and let's see how much time elapses okay click the ok button i will press ok and the response time for me to click on that button was 4 86 milliseconds so about 4 seconds if you ever need to track how long an operation takes you can use the time method of the console object however if you have an asynchronous process well the time end method isn't going to wait around for it so what if we have set timeout set time out we'll just display a message we need a callback i'll simply just pass in an arrow function console.log hello i would like this to execute after three thousand milliseconds so three seconds so when i run this we have already completed our program and then the set timeout function kicks in so the time method and the time end method will track how long a synchronous operation takes so yeah i thought that would be a very useful utility method that you might be interested in if you would like a copy of this code i'll post this in the comment section down below and well yeah that's the time method of the console object hey everybody we have a big topic today that is promises promises are an object that encapsulate the result of an asynchronous operation a benefit is that they let asynchronous methods return values like they were synchronous it's a promise to return something in the future for this topic let's pretend that we're fetching a file i haven't talked about the fetch api yet but we'll do so in the future for the time being we'll just pretend that we're loading a file let file loaded this will be a boolean value true or false i'll set this to true loading a file is an asynchronous process we could encapsulate this asynchronous process with a promise when this process is finished the promise can return a value or catch any exceptions if there's any problems like we can't find the file so this is how to create a promise let's declare one const promise equals new promise within the promise we can list a callback a function expression or an arrow function expression i'll use an arrow function expression there's two arguments resolve and reject if our asynchronous process is successful we will invoke this resolve callback if not we'll invoke reject so what would we like to do within this promise we can place any asynchronous code within this promise then let's check to see if our file is loaded if file loaded we will invoke this callback of resolve if you have any arguments for this callback you can place those here i'll add some text file loaded else we will invoke reject place any arguments within this callback file not loaded that's step one of our promise promises have a state they're pending then they're fulfilled or rejected and the result is what can be returned there's two parts to a promise the producing code which is this portion and the consuming code if this promise is resolved what do we want to do we'll handle that with the consuming code we will take our promise follow the promise with invoking the then method if our promise is resolved then we can perform some function this can be a callback to a function a function expression or an arrow function expression i'll stick with an arrow function expression if we have any arguments we can list them here we're returning one value just some text value arrow then let's do something console.log whatever my value is okay let's try this after creating this promise my file loads that's set to true file loaded what would happen if we couldn't locate a file this value is false well we have an uncaught exception because we invoked this reject callback to catch any exceptions we can follow then with catch and i'll place this on a new line just so it's easier to read we have one argument so let's set up one parameter this is the argument we will name this parameter error arrow what would we like to do console.log whatever my error is when i run this again we have caught this exception file not loaded so that's kind of the basics of a promise it's a promise to return something in the future the state is pending then it's either fulfilled or rejected now you don't necessarily need to reject a promise this would still work too it doesn't do anything here's another example let's create a separate promise we'll wait for five seconds then display a message const promise equals new promise i'll write an arrow function expression this time we will only resolve arrow and then maybe some curly braces okay what are we gonna do within this promise let's set timeout for five seconds set timeout resolve after five seconds that's 5000 milliseconds then i will take the name of my promise follow it with then then pass in a function so you don't necessarily need to return a value when resolving so this function will have no arguments arrow will display message console.log thanks for waiting after five seconds this should display my message thanks for waiting what if you would like to pass an argument to a promise let's rename this promise object as something else something that's more descriptive like wait wait is now a promise when we create this promise we can pass an argument how about an amount of milliseconds let's wait for three seconds that's three thousand milliseconds i'll precede this promise with an arrow function and list any arguments before the arrow maybe time time will be this value whatever we're passing in we'll wait for some amount of time 3000 milliseconds let's run this again one two three thanks for waiting so yeah those are promises they're objects that encapsulate the result of an asynchronous operation they let asynchronous methods return values as if they were synchronous it's a promise to return something in the future so those are promises if you would like a copy of the code we worked on today i'll post that in the comments section down below and well yeah that's an introduction to promises in javascript hey guys in this topic i'm going to explain the async keyword it makes a function return a promise in this example i have a promise there's a callback with two arguments a callback for resolve and a callback for reject all we're doing is we're checking to see if a file loaded not really but we're pretending we are because i haven't taught about loading files yet so we have a boolean variable file loaded it's set to true if our file didn't load we can set this to false if file loaded we will invoke this callback of resolve if not we'll invoke this other callback of reject so currently my file loaded if i switch this to false my file is not loaded an easier way of writing this is that we can stick this code within an async function and it will return a promise so let's create an async function use the keyword async function and what's a descriptive name of this function how about load file that's an asynchronous process i'll copy this code cut it i'll delete this promise and paste my code within this async function there's no need to use this resolve or reject callback if my asynchronous process is successful i will simply return a value return file loaded this will be an argument if my asynchronous process is not successful i could instead use the throw keyword this will raise an error and we can catch it so this is my error message right here now to invoke this function in place of a promise i will invoke the function that contains my asynchronous process load file so let's check to see if this works file loaded is set to true file loaded i'll set this to false file not loaded when using the then and catch methods in place of adding these methods after a promise object we would invoke a function and a promise is going to be returned back to this place in which you invoke the function another way of writing this that's a little more clear but it's a lot more syntax is if we were not using the async function we would return a promise i'll eliminate this async keyword just for a demonstration so we're returning a promise object promise dot resolve and i will pass this text as an argument else return promise dot reject this would do the same thing but it's more syntax file loaded file not loaded when we invoke this function we're returning a promise back to the spot in which we invoked this function but i like using the sync keyword it's a lot less text so yeah that's the async keyword everybody it makes a function return a promise and it pairs very well with the await keyword which we'll discuss in the next topic in about three two one go hey guys in this topic i'm going to explain the await keyword it makes an async function wait for a promise in this example i have an async function that is named load file we're pretending to load a file that would be an asynchronous process if our file loads we will return a promise with this text as an argument file loaded if for some reason we can't load our file we will throw an error and catch it and display this error message another way of writing this without using these two lines of code invoking an async function followed with then and catch is that we could use the await keyword so we will type await then invoke an async function await load file we're waiting for a promise awaiting an async function in this example will return some text file loaded or file not loaded so i'm going to store that text within a temporary variable let's say let message equal await load file then i'll simply display that message console.log message and i can eliminate these two lines so after running this we have an uncaught syntax error a weight is only valid in async functions so in order to use this await keyword we need to place it within another async function so maybe we're beginning the process of loading a file usually that takes more than one asynchronous process you have to first locate the file open it then close it so i'm going to declare an async function async function start process and i will stick these two lines within that function you can only use the await keyword within an async function and then we need to invoke this function to begin the process start process file loaded there was no need to invoke this async function followed with then and catch we can eliminate that all you need is a weight but it does have to be within an async function now check this out what if our file doesn't load this will throw an error uncaught in promise file not loaded we would need some way to catch this error when it's thrown one way in which we can do that is to surround any dangerous code with a try block see the topic on the series in error handling where i'll discuss this more in depth so try this code if there are any errors we will catch them so catch there is one argument of error and i will simply display our error catch console.log error so let's run this again file not loaded so this is very helpful if we have to wait for more than one asynchronous function we'll discuss this in the next topic maybe not only do we have to load a file but we first need to locate it and we have to close it in the next topic we'll have to wait for multiple asynchronous functions we might have locate file and close file so when we begin a process we're waiting for multiple asynchronous functions but we'll discuss that in the next topic so yeah that's the await keyword everybody it makes an asynchronous function wait for a promise when using the await keyword you don't need to invoke a function then follow it with the then method and catch there's no need for that so yeah everybody that's the await keyword we'll practice this more in the next topic hey guys in this video i'm going to explain es6 modules the idea behind a module is that it's a file of reusable code we can import sections of pre-written code to use whenever we want they're great for any general utility values and functions they help to make your code more reusable and maintainable think of modules as separate chapters of a book each javascript file could be its own individual chapter to begin working with modules within the opening script tag of your html document add this attribute type equals module then we'll create a new javascript file i'll name this math underscore util dot js this file will contain some general map utility functions such as get the circumference of a circle or the area so let's begin i'll create a constant as well const pi i'll set the sequel to 3.14159 and maybe some functions function get circumference will accept a radius and we'll return two times pi times radius then let's create a get area function get area will return pi times radius times radius to export any variables or functions i will precede them with the export keyword i like to do this inline then save heading back to our main javascript file we can import everything from this javascript file to do that we will type import then within curly braces then list all of the variables or functions we would like to import i would like to import pi get circumference and get area add from then an absolute or relative file path i'll use a relative file path because these files are right next to each other so that would be dot forward slash the name of the file math underscore util dot js and that's it so we can use these variables and functions as if they were in the same file to test this i will use console.log pi and that value is 3.14159 we have access to this variable even though it's not written within this file we've imported that variable from the separate javascript file let's calculate the circumference of a circle let circumference equal get circumference pass in a radius maybe 10. then let's display our circumference console.log circumference if we pass in 10 as a radius the circumference is 62.83 we also have get area 2. let area equals get area the area would be 314.159 even though all of this code is written in a separate file we can access it from another file by importing it make sure that anything you want to export is preceded with this export keyword there is another way to import this too i'm going to copy all of this and paste it if there's a lot to import we can simply import everything by using an asterisk but we'll give all of these imports an alias that's like a nickname import asterisk as your nickname should be descriptive of the file that you're importing this is as if we're creating a separate namespace maybe math util now in order to use these variables or functions i would need to precede them with that namespace mathutil dot pi mathutil dot get circumference mathutil dot get area then this would work when i'm using math util dot pi that's kind of similar to math.pi it's kind of the same concept except we ourselves created the separate javascript file so yeah those are modules they're files of pre-written code that we can import and use whenever we need to if you would like a copy of this code i'll post this in the comment section down below and well yeah that's an introduction to modules in javascript hey guys in this video i'm going to quickly explain the dom it's an acronym for document object model technically it's an api an application programming interface it's an interface that's used for changing the content of a page and it's arranged in a hierarchical tree our dom is a representation of an html document and this tree contains nodes the first child of our document is the html root element so our html tags enclose all of this content including the head and the body elements which are here and here the head can contain a title and some text which you see right here and the body can contain some various html elements like a div tag by interacting with this dom we can change the elements of a web page document is the entry point of our dom if i typed console.log document this would display my dom and everything within it so we have document our html node the head and the body and a bunch of stuff within those nodes too now if you were to type console.dir then pass document as an argument this will list all of the properties of your dom if i need access to the title of my document i can access that by typing document dot title property and then i'll display this console.log document.title and the title of my document is well document or i could get the url console.log document.url so this is my url and you can change these properties too i can change the title of my webpage document.title set the sql to something title goes here and taking a look at this tab of my web browser you can see that it says title goes here i can even change the location document.location i'll set the sequel to google so http colon two forward slashes www.google.com then when i save this it takes me to google by accessing the dom i have access to my body element and i can change something about the body of my document if i would like to change the background color i would type document dot the name of the node body in this case and i will set the style background color sky blue and this will change the background color of the body of my document if i need to change some html element like this div tag i could type document dot get element by id and we will search for an id within our dom like my div and i can set the inner html equal to some text like hello hello that's a quick summary of what the dom is it's an api an application programming interface it's an interface for changing the content of a page we can change content without having to reload the page to reflect any changes document is the access point each node can contain an object this tree is a model so it's a document object model a dom and in the next few topics i'll demonstrate how we can search for given elements and traverse nodes so that is a quick overview of what the dom is hey guys in this video i'm going to show you a few different ways we can select elements in a web page let's begin with something very basic i'm going to create an h1 header tag we'll create a menu for a restaurant this is the menu and i will give this h1 element a unique id my title to select this element i can type document dot get element by id and the id was my title and i will store this within a variable let element equal document.getelementbyid and what should we do with this element let's change the background color so type element dot style dot background color i'll set this to light green that's a good color so yeah you can select an element by its id but you probably knew that already we have a little bit of experience with this method let's select elements by their name the name attribute is useful if you have more than one elements in some sort of group like radio buttons let's create some radio buttons input type equals radio and i will give this a name of fruits the first will have a value of apple then i'll create a label for this label for equals apple close the label i'll add a line and i will type apple okay two more fruits what about an orange for orange the text will be orange and a banana value banana for banana and the text will be banana so each of these three radio buttons has the same name fruits to select all of these radio buttons within my document i can type document dot get elements that's plural with an s by name then pass a name as an argument fruits this method returns a node list it's similar to an array so i will store that within let's say fruits let fruits equal document dot get elements by name fruits so what would i like to do with this node list of fruits if i were to use console.log and display fruits well we have a node list with our three elements a radio button for apple orange and banana if i add an index number only that element is displayed so we have our apple at index one would be our orange and two is our banana maybe i would like to change the background color of each of these elements what's one way we can check to see if one of these elements is selected i'm going to add an attribute with the apple radio tag let's add this attribute checked equals checked by default this will already be selected i would like to print whatever radio button is checked we've already selected our elements by their name fruits so i will use the for each method of this node list fruits for each i will cycle through this node list of elements and find whatever element is checked and display it so we have our parameters fruit arrow function let's check to see if our fruit is checked fruit dot checked then we will console.log whatever our fruit is then add dot value so our apple is selected let's change the checked attribute of our orange this time so we have orange now and banana so that is get elements by name now we have get elements by tag name heading to our html file let's create an unordered list ul for unordered list close it we will add some list items perhaps these are vegetables carrots potatoes and onions we can select elements by a given tag name like list item let's store our elements within vegetables let vegetables equal document dot get elements by tag name and the tag name was li for list items this method returns technically an html collection it behaves similarly to an array let's take vegetables at index of zero that would be our carrots i'm going to access the style the background color property set the sequel to light green the second element would have an index of one and the next element would be two so that is get elements by tag name find tags that you would like to select and then just pass that as an argument to this method okay we have get elements by class name i think this time i'll create some div elements div close it and i will give this a class of desserts desserts first we'll have ice cream cake and maybe pie each of these three developments has the same class name desserts i'll store elements within let desserts equals document dot get elements plural with an s by class name and the class name was desserts desserts is technically an array-like object but it behaves similarly to an array again so i'm going to change the background color let's start with element zero so that is the first element index zero index one and index two that is the get elements by classname method now we have query selector query selector tends to be fairly popular we can select an element by either an id a class name a tag or an attribute let's create variable element equal document dot query selector then pass in an id a class name a tag name or an attribute let's begin with an id let's select id my title if you're selecting an id be sure to precede the name with a hashtag i will change the background color of this element to light green again there so using query selector we've selected an element by a unique id we can also do so by a class name so class desserts with a class name you're going to precede the class name with a dot so class desserts now with quarry selector it selects the first element of any group if you need all of the elements you'll need to use query selector all which we'll cover in just a little bit you can also select by a tag name like list item the first list item within my document will be selected or you could even use an attribute so maybe the first element that has the four attribute i would like to select i will use a set of square brackets and type four the first element with the four attribute is selected if you need all elements you can use query selector all so let's copy this paste it let elements query selector all i would like to select all list items and change the background color but we'll need to iterate over each of the elements i'll use a for each loop elements for each element i will change the background color of each element there each list item was selected how about anything with the desserts class name or anything with the v4 attribute so yeah those are a few different ways in which we can select html elements if you would like a copy of this code i'll post all of this in the comments section down below and well yeah that's how to select elements using javascript hey guys for this topic i'm going to show you a few different dom traversal techniques but before we do that i need to explain some family relationships between elements say we select our body element within my html document i have three unordered lists a list for fruit vegetables and dessert they are arranged in a hierarchy a family tree if we select our body these three lists since they're contained within the body they would be considered children my list of fruit is a child same with vegetables and dessert since my list of fruit appears first within my body the fruit list would be considered the first child kind of like it's the firstborn dessert is last that would be the last child it's the last born if we select this middle list of vegetables then my body element is considered the parent of this list the body element is the parent the two other lists would be considered siblings sibling and sibling since fruit appears before vegetables fruit would be considered the previous sibling dessert would be considered the next sibling my unordered list does have children too each of these list items would be children of my unordered list yeah that's a quick overview of the family relationships between elements with that out of the way here's my html document within the body i have three unordered lists each has a unique id fruit vegetables and dessert suppose i would like to select the body of my document i'll store that within a variable let element equal document dot body to select the first child that would be the first unordered list i'll store that within another variable let child equal element dot first element child let's color the background of this child element green child dot background color equals light green this entire unordered list is now green let me show you what happens when i select the last element child of my body so nothing appears to change let's take a look at this child using console.log console.log child so when i selected the last element of my body we selected the script element this element is the last child of my body so that's something you need to pay attention to let's select our vegetable list document dot query selector i will select vegetables we will select the parent element i'll rename this as parent the parent of this list would be the entire body of my document that's why the entire background color is now green we can choose the next element sibling sibling sibling if we select our list of vegetables the next sibling would be my list of dessert and the previous element sibling is my list of fruit what if you need one of these list items i'll select my list of fruit then select one of these elements first element child that would be the apple list item last element child is the banana another way to access the children of an element is via an index this time i will follow element with children and list an index number 0 is the beginning and we will change the first element at index 0. one would be the second element orange two is the next element banana if you need all the elements you can simply use children this will return a collection we would need to convert that to an array this collection doesn't have the for each method i will surround element.children with array dot from method and we can iterate over the elements of this array let's rename child as children children dot for each method we have our parameters child arrow function we'll change the style of each of the children of this list now each child is green we could select a different list like vegetables or dessert so yeah those are a few dom traversal techniques elements are arranged in a family tree whatever element you select that element can have a parent maybe some children or siblings so yeah those are a few basic dom traversal techniques in javascript hey guys for this topic i'm going to show you how we can add and change html elements i need to create an h1 header tag to do that i will type document dot create element within the create element method and within quotes i can list a tag that i would like to create i would like to create an h1 header tag i'll assign this to a variable constant maybe name tag we'll store our name name tag is an h1 header tag however it doesn't contain any text that's where changing html elements comes in two ways in which i could add some text to this h1 header tag is to either use inner html or text content text content is the preferred way because inner html is vulnerable to something called cross site scripting attacks i'll give you a demonstration momentarily if we were using inner html i would take my tag dot inner html set the sql to some text maybe your first name then to add this element i would need to declare where i would like to add this tag specifically the body of my document would be a good place document dot body and i will use the append method and place my tag within the append method as an argument this will create an h1 header tag then add it to the body of my document what if we accept some user input instead window dot prompt enter your name enter your name type in your first name press ok and there's your h1 header tag now here's the problem with using innerhtml we could also assign some tags along with some text if i was to run this again i could place a malicious script within the user input this would be an example of a cross site script attack i'm going to blur this section just because i don't want to give you guys any ideas then if i were to press ok this would activate my script this script that i wrote just has a pop-up that says virus the preferred way of adding some text to an element is to set the text content when i run this program again and enter my malicious script this script will be instead parsed as text setting text content is a much safer approach than using innerhtml this time we're going to add a list item to an unordered list heading to our html document we'll create an unordered list i'll give this list an id of fruit then we will add some list items apple orange banana okay here's my list to append an item to my list well i need to know what my list is i'll store that within a variable constant my list and i would need to select this list i can do that with document dot query selector pass in an id the id was fruit then i can create a list item element construct list item equals document dot create element what kind of element would we like to create let's create a list item element to set the text of this list item element i will take my list item then set the text content property equal to whatever i want i feel like a main go then we just need to add this list item to my list my list use the append method then pass in my list item there we have added a mango if you would like this list item at the beginning of your list you can use prepend pre-penned now we have mango apple orange banana otherwise if you need to place an item somewhere within the middle of the list it's a little more complex but here's how take your parent element my list in this example dot insert before method pass in what's to be inserted our list item then we need to get all of the elements we can do that by taking my list again dot get elements by tag name we would like to select all list item elements then an index number to insert main go before orange the index would be 1. following the get elements by tagname method i will add the index of where i would like to insert this list item so 1. now we have apple mango orange banana two would be apple orange mango banana and then three would be the end so yeah everybody that's a beginner's way to add and change html elements if you would like a copy of this code i'll post all of this in the comment section down below and well yeah that's how to add and change html elements using javascript hey what's up guys in this video i'm going to show you how we can change some css properties of elements heading to our index.html file let's create a simple h1 header tag i'll give this header tag a unique id of my title then add some text this is my title then save in order to change the css properties of this element we first need to select this element i'll declare this as a constant const title equals then to select an element you type document dot get element by id within the parentheses and within quotes we will list the id of our element we would like to select getelementbyid is a very basic way of selecting an element in the future we'll cover more advanced methods but for now we'll stick with getelementbyid so we're storing this within a variable title and now we can do stuff with it to change css properties of some element such as my title i will follow the name of this element title then access the style attribute dot then a css property maybe i would like to change the background color so i will list that property background color when accessing a css property through javascript the format is in camel case normally with css there's a dash between words such as background dash color but if you're using javascript you use camelcase the first letter of the first word is not capital then the first letter of any word after the first is capital background color and set the sequel to a color you can pick a color name maybe blue you can select rgb values rgb within the parenthesis you have three numbers each corresponds to the amount of red green and blue uh so maybe 50 200 250 i don't know what this color is going to be oh i kind of like that color or you could use hexadecimal values what's 2 two two two two two okay that is a dark gray you have a couple options when it comes to colors let's change the font of my title what element would we like we would like title we'll access the style then a property color uh let's use rgb this time rgb 5200 250 there and we have that color again so again you can use color names rgb values or hexadecimal values and if you don't know any you can always google hex color picker and pick a color that you like here are the rgb values or the hexadecimal values okay let's change a few other properties we're selecting our title accessing the style attribute then let's change the font family property i will set the sequel to pick a font i like this font and there we go we have a new font i would like to text align center this element title dot style dot text align equals center then add a border title dot style dot border equals 2 pixels solid is good yeah and we have a border to hide an element we can access the display property title dot style dot display equals none this will hide this element or we could set this to block to display it so yeah everybody that is a very basic way to change css properties you would first need to select an element or elements follow that element with dot the style attribute dot the css property and you can set it equal to a new value that is how to add and change css properties using javascript if you would like a copy of all this code i'll post this in the comments section down below be sure to look underneath the original video in the 100 video playlist and well yeah that's how to change some css properties using javascript hey guys in this video i'm going to explain events an event is some action that the user or the browser does many html elements contain event attributes for example let's create a button i'll give this button an id of my button for the text let's just say button buttons have an on click event attribute on click i can set this equal to the name of a function and invoke it let's create a function that will do something i'll cleverly name this function do something all we'll do is create an alert alert you did something i will set the on click attribute equal to the name of my function do something then invoke it when i click on this button my on click event attribute will invoke this function do something you did something in place of setting event attributes directly within your html elements you could do so within your javascript file i would first need to select my element constant element equals document dot get element by id the id was my button i will take this element and set the on click event attribute equal to some function do something be sure not to invoke it this is a callback save everything then when i click this button we activate the on click event attribute so that's one event attribute on click another event attribute is on load when the web browser loads it does something this time i'm going to select the body of my document constant element equals document.body i will take this element and set the on load attribute equal to some function do something when the body of my document loads it activates the onload event attribute another option is that within the opening body tag of your html file you can directly set that attribute do something and this would work too that is the onload event attribute when an element loads it does something next we have the on change event attribute element dot on change equals do something when an element has been changed it activates the on change event attribute heading to our html document let's create a text box input id equals my text get rid of this we will select our text box constant element equals document dot get element by id we are selecting my text now when we make changes to this text box and then leave it activates my on change event attribute if used with a text box you could format some text once you leave okay this next one is going to be fun let's create a div tag div id equals my div close it then heading to our css style sheet let's select my div we'll change the background color to light green and the width to 100 100 pixels and the height to be 100 as well let's save we'll select this id my div constant element equals document dot get element by id the id was my div when we move our cursor over this div tag we'll change the background color we will take our element and use the on mouse over event attribute set the sql to a function do something change the background color element dot style dot background color equals how about red when i hover my cursor over this div tag it's gonna change the color when you leave an element you can set the on mouse out event attribute element dot on mouse out we'll create a function to do something else let's copy this paste it do something else we'll change the background color to light green again so when i enter the color is red when i leave it's green red green red green red green so that is on mouse over and on mouse out okay we're on the last two on mouse down element dot on mouse down equals do something so when i click down when i click on this element it activates the on mouse event attribute by itself it's basically no different from the on click event attribute but it pairs very well with the on mouse up event attribute on mouse up when we let go of our mouse we can perform another function do something else when i click and hold down it's red when i let go it's green red green red green red green all right everybody so those are a few events on click on load on change on mouse over on mouse out on mouse down on mouse up and in the next topic we'll look at event handlers if you would like a copy of all this code i'll post all of this in the comments section down below and well yeah those are a few javascript events hey guys in this video i'm going to explain the add event listener method we can link an event and a function to an html element using the add event listener method is the preferred way of handling events a benefit is that one element can have several event listeners even the same event can invoke different functions within my html document i'm going to create a div div close it i'll give this a unique id of inner div eventually we'll create an outer div then within my css style sheet i'll select inner div i'll give this a background color of light green light green a width of 100 a height of 100 and a border one pixel solid is good save everything and here's our div element using the add event listener method this development can listen for multiple events we'll need to select an element i'll name this const inner div equals document dot get element by id we're selecting inner div to add an event listener you take your element inner div in this case then invoke the add event listener method the first argument is an event let's add mouse over mouse over then a function let's create a function to change the color red this will be a callback change red let's define this function function change red let's take our inner div take the style set the background color property equal to red when i hover my cursor over this div element it changes red a benefit of using the add event listener method is that it's easy to wait for multiple events so to wait for another event we can simply invoke the add event listener method again this time we'll also listen for the event of mouse out let's create a function to change green function change green background color equals light green this development is listening for two events mouse over and mouse out using the ad event listener method it's really easy to wait for multiple events there's one more argument within the ad event listener method that is the use capture argument suppose we have an element within another element i'll surround this inner development with another div div the id will be outer div be sure to enclose your inner div i'll change the style of outer div i'll get rid of the border the width and the height will be 200. save everything so we have an outer div and an inner div the inner development is inside of the outer div element what would happen exactly if both of these elements are waiting for the same event mouse over which event would be handled first the inner element or the outer element well we can set that with the third argument the use capture argument let's add an event to the outer div i'll store this within a variable outer div the id is outer div i'll eliminate all of this i'll add an event listener to the inner div add event listener the event this time will be click the function will be change blue this time we'll add the same event to the outer div outer div add event listener click change blue let's define this function change blue function change blue we will take this dot style dot background color equals light blue both of these div elements are doing the same thing but there's some overlap the inner div element and the outer development are within the same space so when i click on the inner div element we're also clicking on the outer div element at the same time which element handles its event first the inner element or the outer element just to test this within the change blue function let's create an alert just to slow things down you selected then let's display the id of the element that is being handled this dot id okay so when i click on this element we're handling the inner div first before the outer div but with the outer element if you pass in another argument true for use capture well then we will handle the outer element first before the inner element so that's what that third argument is use capture if two elements are taking the same space and they're listening for the same event you could specify which one has preference yeah that's the add event listener method it's the preferred way of having an element listen for events as arguments you can pass in an event a function to be executed and a preference if you would like an outer element to be handled first so yeah that's the add event listener method everybody hey everybody in this video i'm gonna demonstrate how we can show and hide html elements for this demonstration i recommend downloading a picture here's a picture of a card that i found place it within the same folder as your javascript file when i click on a button i would like to toggle between showing and hiding that image heading to my html file let's create a button button id equals my button i'll add some text toggle is fine we will add our image image id equals my image set the source equal to where your file is located this image is in the same folder as my html file i just need the file name my file name is card.jpg but it's probably going to be something different for you car dot jpeg let's change the size it's a little massive heading to my style sheet i will select my image set the width to something reasonable like 300 pixels that's a lot better at the bottom i'll add some text a paragraph element is fine press the button heading to my javascript file i'll select my button and my image const my button equals document dot query selector i'm selecting my button do the same thing with image my image next i'll add an event listener to this button my button dot add event listener when we click on this button we're going to perform a function i'll use an arrow function expression what we'll do is check the display property of this image i'll use an if statement if my image dot style dot display is equal to none none means that this image is hidden if it's block that means it's being displayed if this image is hidden my image dot style dot display equals block this will display my image else let's hide our image my image dot style dot display equals none when i click on this button it hides my image when i click on it again it displays my image now it's hidden now it's showing hidden showing hidden showing there's one issue with this though perhaps i would like this image to be hidden from the beginning then we display it to do that we can go to our style sheet then set the display property to none now check this out when i click on this button the first time it doesn't do anything until i click on it a second time then it performs normally the reason that this is happening is that the style from our style sheet is not ready yet to demonstrate that i'm going to console.log the display of my image when i click on this button well there's no value within my display if the display of my image is equal to the property none then we show the image but this is technically null and not the property none therefore we will hide this image which it already is a quick fix for that is that we can add some inline styling to this element i'll add this display property inline instead of externally find your image tag set the style attribute equal to that css property this should work now i will click once to display my image then hide it display hide it another option is that we can set the visibility of this image when we toggle the display property all the elements that are underneath are going to shift downwards but if we were to use visibility this space will be reserved let's replace display with visibility in place of none we will check hidden in place of block this will be visible within the inline styling let's set display to visibility our visibility will be hidden make sure to save everything all of the space is reserved for that image you can see that my text down at the bottom is way down here when i show and hide this image there's no shifting of elements this space is reserved so that's another option too you can always toggle the visibility of an element so yeah everybody that is how to show and hide html elements if you would like a copy of this code i'll post all of this in the comment section down below and well yeah that's how to show and hide html elements using javascript hey yeah everybody in this video i'm going to show you how we can detect key presses to do that we can add an event listener to our window window dot add event listener the first argument is the attribute let's detect any key down events second is a callback a function expression or an arrow function expression let's use an arrow function expression there is one argument event arrow then what would we like to do when we press down on a key let's display what key was pressed console.log event dot key and that's it let's test it press some random keys q w e r t y a s d enter backspace one two three the arrow keys would be up down left right okay we know that that works let's have some fun with this let's create a box within our window and we can move the box with key events heading to our html file let's create a div tag pretend this wasn't here div id equals my div close it let's style it my div will set the background color to whatever color you would like set a width 100 pixels is good a height 100 you could add a border if you would like border one pixel solid and we'll want to set a position position either absolute or relative we'll move our box relative to the body that it's in okay save everything i'm going to select our development const my div equals document dot get element by id my div and we'll add an event listener to our window in place of an arrow function expression let's pass a callback as an argument let's pass a callback to a move function and we'll need to define that function move there's going to be one argument that's provided for us within the parameters of the move function let's add event this argument is provided for us i think the best way to detect certain keystrokes would be with a switch let's detect arrow down up left right switch we're examining event dot key for any matching cases the first case will be arrow down arrow down we'll have to keep track of some coordinates of where our div element currently is let's create variables x and y let x equal zero let y equal zero as well whenever we press down let's move y by maybe five pixels down y plus equals five then we will take my div take the style access the top property and set the sequel to whatever y is plus pixels then at the end of our case let's break so when we save by pressing down we should be able to move down yeah there we go let's do the same thing with the other arrow keys arrow up we will decrement y so we should be able to move down and up arrow right x plus equals five my div dot style dot left equals x plus pixels now we should be able to go right arrow left x minus equals five now we can go right down left and up then you could add a default case too if you would like default break so yeah that's how to detect key presses everybody you can add an event listener to your window the event attribute is key down you could also switch this to key up when you let go of a key then it triggers the event the second argument is a callback a function expression or an arrow function expression so yeah that's one way to detect key presses if you would like a copy of this code i'll post this in the comments section down below and well yeah that's a very basic way to detect key presses in javascript hey guys in this video i'm going to show you how we can create a few simple animations using javascript we'll create a button and a development heading to our html file let's create a button i'll give this an id of my button i'll add text begin this button will begin the animation i'll create a development id equals my div let's style our development my div choose a background color i'll pick light green but choose whatever color you like a width of 100 is good a height of 100 is good as well then set the position property to relative we'll position this element relative to the container that it's in the body of our document okay save everything in our javascript file let's store our button element constant my button equals document dot get element by id my button then let's get our development i'll name this my animation get element by id my div when we press on the button we'll begin an animation we'll want to add an event listener to the button my button dot add event listener the event will be click then we will pass a call back begin let's define this function function begin what would we like to do i'm going to declare a timer id we'll use the set interval method let timer id i'll set the sequel to null for now we'll need some coordinates to keep track of our position of our div element let x i'll set this equal to zero let y equal zero as well we will use the set interval method passing a callback to a function we'll name this frame after how many milliseconds would we like to invoke this function what about every five milliseconds that's a good speed set interval returns an id of the timer that we're using so let's assign this to timer id we will use this timer id to stop the animation when it's completed we're going to create an inner function function frame this inner frame function will be in charge of updating our div every five milliseconds but when would we like to stop let's slide our div element to maybe like 300 pixels out so i'm going to write an if statement if x is greater than or equal to 200 then we will stop set interval we can do that by using the clear interval method pass in our timer id this will stop the animation else if we would like to advance one frame let's increment x by one x plus equals one then we just need to adjust the left property of this development we'll take myanimation access the style access the left property set the sql to whatever x is currently then add pixels so when we begin this animation it should slide to the right and stop right about here now let's move this animation down instead of right if y is greater than or equal to 200 y plus equals one myanimation.style dot top equals y plus pixels now this animation moves down we could combine them both if x is greater than or equal to 200 or y is greater than or equal to 200 then we will increment both x and y by one x plus equals one my animation dot style dot left equals x plus pixels now this animation moves diagonally that's a simple slide animation let's make this element rotate i think that would be cool let's eliminate some of these lines of code i'll post all of this in the notes so don't worry about that okay we'll need a variable degrees set this equal to zero let's perform a full 360 degree rotation if degrees is greater than or equal to 360. then we will stop our timer else we will rotate by increasing degrees by one or a different number if you would like this to be faster take my animation dot style dot transform set the sequel to this string is going to be a little bit awkward let's rotate x parentheses we'll need to insert our degrees within quotes plus degrees plus d e g okay and that should be it so this will rotate my element on the x-axis and it does a full 360 degree turn okay rotate on the y-axis pretty cool right or z hey just for fun let's rotate this element and have it move diagonally across the screen this will just be practice let x equal zero let y equal zero we'll continue this as long as x is greater than or equal to two hundred or y is greater than or equal to two hundred increment x by one increment y by one my animation dot style dot left equals x plus pixels myanimation.style.top equals y plus pixels okay this should move diagonally and rotate okay let's make the spin a little bit faster i'll increase degrees by two or three or a higher number like five okay last one we can scale the size of an image so let's get rid of what we have written currently okay let's create two new variables let scale x equal one one means one hundred percent let scale y equal one as well let's scale this image twice as big our condition to stop is if scale x is greater than or equal to two else scale x plus equals maybe 0.01 this would be one percent then we will take my animation dot style dot transform set the sequel to scale then within parenthesis we'll need to insert scale x and scale y plus scale x plus comma plus scale y plus and that should be good if we're only scaling x upwards then this element will expand horizontally if we stop where scale x is three it would expand to be three hundred percent on the x-axis okay let's do this with y scale y y plus equals 0.01 this element will expand on the y-axis then let's do both if scale x is greater than or equal to 2 or scale y is greater than or equal to 2 then increase both scale x and scale y then this element will expand in both directions or we could shrink an element by scaling down scale x is less than or equal to what about 0.1 do the same thing with scale y less than or equal to 0.1 then let's decrement scale x and scale y this will cause an image to shrink so yeah those are a few simple animations you can do with javascript if you would like the code that i've written here i'll post this in the comments section down below and well yeah those are a few simple animations with javascript hey guys in this video we're going to draw some simple shapes using the canvas api it's a means for drawing graphics it's useful for animations games and data visualization heading to our html document we'll need to create a canvas element canvas close it i'll give this an id my canvas and we should probably set a width and a height width equals maybe 500 and height equals 500 as well let's save there's no apparent change but we do have a canvas here to better visualize it heading to our css file make sure that you link it within your html file we can begin styling the canvas i will select my canvas i'll add a border border one pixel solid black yeah and there's our canvas you can also change the background color too background color and pick a color maybe sky blue that's pretty nice so this is our canvas but just for demonstration purposes i'm going to turn this line into a comment we can begin drawing some shapes let's head to our javascript file i'm going to store my canvas within a workable variable let canvas equal document dot get element by id the id is mycanvas to draw on the canvas we need to get the context and i will store that within another variable let context equal canvas dot get context and there's one argument 2d imagine that context is a painting within a picture frame and the canvas is the picture and the frame together that's how i imagine it at least to draw on the canvas we need to draw on the context the painting itself and not the frame let's begin with a simple line i would like to draw on the context to begin drawing a line i will use the begin path method then we need starting coordinates we'll begin in the top left corner type context dot move 2 then pass in a pair of coordinates the top left corner of our canvas is zero zero think of the move to method as if we're placing our brush on the canvas we're picking a starting position to draw a line we have to use the line two method context dot line two then pass in another set of coordinates so the bottom right corner over here would be five hundred five hundred then we will follow this with the stroke method context dot stroke there and there's our line let's pick a different set of coordinates what about right in the middle so 250 250 you can continue this line in a different direction just invoke the line two method again i'll take this line from the middle of our canvas to the bottom now i'll follow line two with another line two method if i need to connect the line down here i'll follow line two with two fifty five 500 there so we have drawn two lines i would like to draw a line from the top right corner to the middle my brush is currently down here i need to move this brush to the top right corner i will invoke the move two method and the top right corner of my canvas would have coordinates of 500 0. then again invoke the line 2 method and the middle is 250 250. cool we have drawn some lines we can set a line width currently the width is one pixel context dot line width equals what about 10 so we have some extra thick lines you can also change the stroke color context dot stroke style equals and pick a color this can be a color name rgb values or hexadecimal values i'll say just purple i like purple we have some purple lines now that's how to draw some lines on our canvas draw lines this time we're going to create a triangle to create a triangle we have to use the line two method we'll type context dot begin path and end this with context dot stroke we'll need to place our brush somewhere maybe the top middle to place our brush down we will use the move to method context move two so the coordinates of the top middle would be 250 zero let's draw a line to the middle of the left border context line two that would be zero two fifty let's draw another line line two maybe the opposite side that would be 500 250 and another line let's bring it back to the top is 250 0. there we have a triangle there is a fill method to fill this triangle in place of stroke you can use fill you can pick a fill color maybe you want more options than just black so that would be context dot fill style and pick a color maybe yellow if you need a border you can use the stroke method along with the fill method there we have a border around our triangle we can increase the border width technically that's the stroke width context dot line width equals maybe five let's change that to maybe ten there that's better to change the color of the border all you have to do is set the stroke style context dot stroke style equals currently it's black maybe we can pick i don't know gray there we have a gray border so that's how to draw a triangle next we'll move to rectangles to draw an empty rectangle we will use the stroke rect method context dot stroke rect we'll need starting coordinates maybe the top left corner that is 0 0 followed by a width and a height so for the width 250 and the height 250 as well there we have a rectangle to change the stroke style we can set the stroke style property context dot stroke style equals let's pick i don't know red there so we have a red border i think i'll change that to black though if you need a filled rectangle use the fill rect method so i'm going to copy this paste it and this would be fill rect so this will fill our rectangle if you need to change the fill color we can set the fill style property context dot fill style and pick a color maybe red again there we have a red rectangle with a black border to change the border thickness you just have to change the line width property i'll keep that as it originally was okay let's create another rectangle so i'll copy this paste it i'll make the original one black let's place the second rectangle directly underneath the first so the starting position would be 0 250 and the stroke would be 0 250 as well there let's create another this will be a green square and the starting corner will be 250 250 same thing with the stroke okay last one let's fill in this empty space a blue square and this will begin at this point that is 250 0 for the coordinates so yeah we have successfully drawn four squares okay this time we're going to draw a circle context dot begin path and we will end the section with context dot stroke to draw a circle we will use the arc method context.arc and there's a few arguments starting coordinates for the center of our circle if i place the starting coordinates at 0 0 the center of my circle will begin in the top left corner of my canvas then a radius what about 100 for the next two arguments we need a starting angle and ending angle in radians for a full circle that would be zero 2 then multiply 2 by math dot pi there well it's a part of a circle but the center is starting the top left corner i'll set the x and y coordinates to 100 there that's much better what about the middle 250 250 i'll increase the radius to maybe 200. the starting angle and ending angle are in radians so you can change these for an incomplete circle if you ever need to reverse these pass in true for the last argument this would probably be helpful to you if you have a pie chart to work on okay let's fill the circle context dot fill let's change the color that would be fill style context fill style i'll set this to maybe light blue let's try draw bubble and i'll give this a thicker stroke for the border context dot line with property equals maybe 10. i'll change the color as well context dot stroke style equals maybe dark blue sweet so yeah that's how to draw a circle and for this last section we'll draw some text draw text to draw some text you would type context dot fill text what's some text we would like to add maybe you win then we need some coordinates let's begin at zero zero you can't really see it right now it's above the top left corner let's bring it down a little bit 100 100 there although it's very small let's change the font context dot font property equals and pick a font maybe 50 pixels and the font style will be you know pick whatever you want but i like mv bully that's better we can change the fill style that's the font color context dot fill style equals maybe gray now if you need to center some text within a canvas this is what you can do we'll need to calculate half of our canvas's width so as the second argument within the fill text method type canvas dot width divided by two do the same thing with the height canvas dot height divided by 2. we're almost there we will need to set the text align property to center preceding our fill text method context dot text align equals center and that's how to center some text so yeah everybody those are a few simple shapes along with text that you can draw on a canvas if you would like a copy of this code i'll post this in the comments section down below and well yeah that's an introduction to the canvas api in javascript hey guys in this video i'm going to explain the window object it's an interface used to talk with the web browser and actually the dom the document object model is a property of the window let's examine this window object i will use console.dir and pass our window as an argument here's our window object it has its own properties and methods one of which is document the document object model by interacting with the properties and methods of our window we can change the behavior of our web browser let's cover a few i need the width and height of this inner window to do that i would type window dot inner width and window dot inner height i'll place these within console.log to display it console.log the inner width of this window is 383 pixels and the height is 263 but we could change these now the width is 488 and the height is 208 there's also outer width and outer height so these are now respectively 871 and 984 another is scroll x and scroll y but we'll need some scroll bars within our window i'll create a very large development div id equals my div i'll close it and add these properties a width of 1000 a height of 1000 and a background color so we have these scroll bars now within our window i can get the scroll x and scroll y properties to shown how far that we have scrolled console.log window dot scroll x and scroll y scroll x is this value 631 and scroll y is this value 758. if i were to place these back in their original positions well then these values are both zero that is scroll x and scroll y i'll get rid of this div element we can change the href property of this window so that it redirects somewhere else i'll display that console.log window now href is found within location dot window.location.href the current href property has this address it's basically my web address but we could redirect it somewhere else window.location.href equals pick a website maybe google https colon2forwardslashes google.com this should redirect me to google yeah hey if you need the host name that would be window dot location dot host name here's my host name it's just a local ip address 127.0.0.1 if you need the path name that would be window dot location dot path name and my path name is forward slash index.html for me this would be the landing page here's a few useful methods we're going to create a button though button id equals my button let's close it i'll add some text just buttons fine i'm going to select this button constant my button equals document dot i'll use query selector this time query selector the id was my button and let's add some event listeners when i click on this button i would like to open a new window i'll take my button invoke the add event listener method when we click i will perform a function i'll use an arrow function expression and i will invoke the windows open method when we click on this button it opens a new window you could pass the url within the open method i'll place this address for google as an argument then when i click on the button it takes me to that website another is close window dot close this will close the current window when i click on this button it closes the window okay another method is print window dot print and we can print the current page so when i click this button we initiate the process of printing this page we do have a few pop-ups too window dot alert i'll just display the message hello hello there's also window.confirm we can have a user confirm something press ok to continue press ok to continue window.prompt is another window dot prompt enter your age let's store this within a variable let age equal window dot prompt if age is less than 18 let's create an alert window dot alert you must be 18 plus to visit this site then we will close the window window dot close okay enter your age let's say that i'm 12 i press ok you must be 18 plus to visit the site then it closes the window well okay then everybody that is the window object it's an interface used to talk with the web browser there's a lot of useful properties and methods related to the window object if you would like a copy of all my code i'll post all of this in the comments section down below and well yeah that's an introduction to the window object using javascript hey guys in this video i'm going to explain cookies a cookie is a small text file that is stored on your computer it's used to remember information about a user data within a cookie is saved in name value pairs in order to check to see if we have cookies enabled within console.log i can type navigator dot cookie enabled for me that's true i have cookies enabled to add a cookie we would type document.cookie we will set the sequel to a string but the string has certain components first is a name value pair i would like to create a cookie to store a user's first name the name of this pair will be let's say first name set the sequel to some value the value that i will pick is spongebob then end it with a semicolon now you can add an expiration date when the current time has passed a certain expiration date well then this cookie will be deleted to set an expiration date set expires equal to then pick a date i'll pick sunday first january maybe a date that's really far out like 20 30. at midnight utc then semicolon we're also able to set a path for this cookie i'll use the default path that would be path equals forward slash okay let's take a look at this cookie console.log document dot cookie even though this appears to be a string it's actually an object the expiration date and the path aren't displayed all that's displayed is the name and the value you can add more than one cookie so again we will type document.cookie let's copy this text paste it last name last name equals square pants then let's take a look at our cookie again the cookie property of our document can hold more than one cookie but to access it you would just type cookie to overwrite a cookie you would just change the value of a name value pair if i overwrite the first name and the last name they'll change this time let's set first name to patrick last name star there we go first name patrick last name star if we change the expiration date to a date that has already passed that will delete this cookie it'll expire so maybe the last name expired in the year 2000 that last name portion of my cookie is no longer there so that's how to expire a cookie at this point we're going to create a function to create a cookie instead of doing so manually function set cookie we'll need a few things a name because these are a name value pairs a value and an expiration date although that's optional for the third argument let's name this parameter days to live as an argument you'll pass a number of days that you would like this cookie to be set to expire 365 would be one year let's create a date object const date equals new date i will set the time of this date date dot set time method within the parentheses we will take date dot get time this will return the current time in milliseconds then add the amount of days to live converted to milliseconds days to live times 24 hours times 60 minutes times 60 seconds times 1000 for 1000 milliseconds our future date is currently in milliseconds we'll convert that to utc string date to utc string method i'll assign this to a variable let expires equals and then we'll use some string concatenation we'll need to set this expires value so within quotes expires equals plus our future date converted to a utc string then we can assign our cookie document.cookie equals i'll use a template literal we're inserting our name that we pass in equals our value add a semicolon to finish this section then the expire section expires then you could also add a path if you would like path equals forward slash that's the default path okay now let's create some cookies i will invoke our set cookie function pass in a name value pair and the amount of days i would like this cookie active what about an email address email make up some email address sponge gmail.com i would like this cookie to live for 365 days then let's display our cookies console.log document dot cookie and here's our cookies we still have our first name and last name because we never deleted them but we do have an email now email equals sponge gmail.com how can we delete a cookie all we have to do is set the expiration date to a pass date here's one easy way to do that let's create function delete cookie all we'll need is a name what we'll do is invoke set cookie pass our name as an argument null for the value and null for the days to live if i was to invoke the delete cookie method and pass in the name email well that email cookie is no longer in here so it's gone let's delete the other cookies too delete first name delete last name and those three cookies are cleared let's create a function to get the value of a cookie by a name let's declare this function function get cookie we'll accept a name as an argument what we'll need to do is decode our cookie i'll store this within a constant constant c for cookie decoded equals decode uri component then pass in document.cookie let's take a look at this console.log c decoded let's make sure we have at least two cookies set cookie first name spongebob 365 days to live set cookie last name squarepants then i will invoke the getcookie method then pass in a name first name is fine okay let's see what we have this is what's stored within c decoded we have our name value pairs what we'll need to do is split each of these name value pairs at each of these semicolons that's how to separate them so after this first statement we'll take c decoded and split at each semicolon semicolon space this will return an array we'll store that within const c array cookie array let's display cookie array console.log cookie array each of those name value pairs is now within separate elements what we're going to do is for each element we'll check to see if there's a match between each of these element names and the name that we're looking for let's take our cookie array c array and use the for each method i'll use an arrow function expression there is one parameter element arrow what would we like to do for each element i'll use an if statement let's check to see if our element at index of the name that we're looking for is equal to zero say that we're looking for last name we'll iterate over each element of our array and see if there's a match we check the first element these don't match but this one does if there's a match then let's return the result results equals and we'll create a substring element.substring name dot length plus one the length of the name plus one will create a substring and return this text so let's declare let result at the end return result actually i'm going to set result to null okay let's see if this works so we have two cookies and i'm going to console.log getcookie pass in my first name and that first name is spongebob let's get last name last name spongebob and squarepants okay yeah that's how to set delete and get cookies let's take this a step further let's create some text fields a submit button and a get cookies button heading to our html file let's create some text fields and some labels label for equals first text first name colon close the label input id equals first text i'll add a line break let's do the same thing with last name last text last name id is last text i'll create a submit button button id equals submit now let's name this btn for short submit button will be submit then a get cookies button cookies btn for button the text will be get cookies okay heading back to our javascript file let's select these elements const first text equals document dot query selector we're selecting the id of first text let's do the same thing with last text our submit button submit button then cookie button cookie button i'm going to add an event listener to our submit button submit button dot add event listener the event attribute will be click when we click we're going to perform an arrow function expression we will set the cookies according to what these values are within these text boxes we will invoke the set cookie function the name will be first name the value will be whatever's within our text boxes first text dot value and days to live i'll set this to be a year 365 days let's do the same thing with our last name set cookie last name last text.value let's add an event listener to our cookie button that will populate the fields that function will search for any cookies and return a value okay we have cookie button add event listener click first text dot value equals get cookie then the name of the cookie first name do the same thing with last text last text value gut cookie last name whoops looks like i misspelt this id cookie button now before we run this i'm just going to delete our cookies delete cookie first name delete cookie last name then save and run it so when i press get cookies well we don't have any first name or last name cookies there's nothing to populate these text fields so i'm going to type in a first name and a last name spongebob squarepants press submit this first name and last name are stored as cookies now so i'm going to refresh this page press that get cookies button again that will populate these text fields with the cookies i have so yeah everybody that's an introduction to cookies their small text files stored on your computer they're used to remember information about the user and they're saved in name value pairs if you would like a copy of all this code i know there's a lot here i'll post all of this in the comment section down below and well yeah that's an introduction to cookies 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 create an interactive stopwatch using javascript so sit back relax and enjoy the show sup guys let's create a stopwatch head to your html file then we will create a container to hold our stopwatch div id equals i'll name this time container then we're gonna close it within our time container let's add a div for the time display id equals time display i'll add a time zero zero colon zero zero colon zero zero hours minutes and seconds let's close that div section we'll add three buttons start pause and restart button id equals start button i'll put this within a class class equals timer button let's close the button add some text the text will be start let's copy this button paste it two times the second button is a pause button the text will be pause next will be a reset button reset the text is reset that is everything for our html file let's head to our css file let's begin by adding some properties to the timer button class i'll set a width of 80 pixels a height of 30 pixels a border 3 pixels solid is good a border radius of 12 pixels a background color uh let's select a hexadecimal value pick whatever color you want i'm going to pick a dark gray color you can always use a color picker to select the color i'll set the color to be white i'll set the cursor to be a pointer when we hover our cursor over that button then we have a cursor pointer then i'll change the font family font family i'll pick this font with the backup of monospace yeah cool let's change the time display right here this is an id time display i'll edit the font size font dash size this will be 75 pixels i'll select a color uh go ahead and pick a color i'll select maybe that that looks good sweet i'll change the font family then let's add a background color and center everything this will be our time container text align center i'll add a border 3 pixel solid border radius of 25 pixels background color of this is a dark gray color six twos yeah there we go so there's our css styling our css styling is done our html file is done let's head to our javascript file let's select all the elements that we'll need first is the time display let's get that id time display i'll store this as a constant const time display equals document dot query selector we're selecting an id the id is time display next is our start button let's copy this paste it start button start button then our pause button pause button pause button then reset button reset button the id is reset button here's the variables we'll need let start time i'll go ahead and set this to zero right away let elapsed time equal zero let current time equal zero let paused this will be a boolean variable if our timer is currently paused we'll set this to be true false if it's running let interval id let hours hrs is fine equals zero let mins for minutes equals zero let then sec four seconds equals zero here's what we're going to do we're going to add event listeners to each of our buttons start pause and reset add event listener i'll fill these in momentarily pause button then reset button then we'll declare a function to update our time function update time let's fill in these event listeners these will each be click we'll use an arrow function expression i'll just copy this and paste it okay let's begin with our start button we'll check to see if paused is true if paused we'll take paused set it to false calculate the start time start time equals date dot now method the now method of date will give you the current date and time in milliseconds minus elapsed time which will initially be zero to begin with then we'll begin our timer interval id equals set interval we'll need a callback the callback will be update time let's invoke this function every maybe 75 milliseconds that should be good enough let's fill in the update time function we'll calculate how much time is passed elapsed time equals whatever time it is right now date.now method minus the original start time this will be a time in milliseconds we'll have to format it so that we can display it within our timer let's take our seconds set the sql to math.floor method we will pass in our elapsed time divided by 1000 because it's normally in milliseconds modulus 60. i'm going to put these within parentheses it's a similar process for minutes except this section is 1000 times 60. that will be 60 000 milliseconds in every minute let's calculate the hours hours 1000 times 60 times 60. then we'll need to update our display that is time display dot text content equals i'll use a template literal will display the hours colon the minutes then the seconds let's take a look to see what we have so far we'll have one issue let's press start you can see that it's currently running but when we display zeros i would like two zeros let's add a zero as padding for any single digit numbers i'll create an inner function function pad will accept a unit we will return this will be a ternary operator it might be a little difficult to understand so we're going to add a zero to the front of our unit whatever we pass in hours minutes and seconds we'll access the length property if we add a zero to our unit what's the length is that length greater than two question mark if it is we'll simply return unit otherwise we'll prepend a zero plus unit then we'll invoke the pad function our seconds equals invoke pad pass in our seconds do the same thing with minutes and hours minutes hours then let's move this line down right about here okay we should have some zeros as padding now yeah there we go one two three so we have no way to pause this timer let's work on that next let's head to our pause button we'll check to see if not paused then we will set paused equal to true we'll calculate the elapsed time equals date dot now minus our start time this will save how much time has passed in milliseconds then clear our set interval method clear interval we'll pass our id as an argument okay now we should be able to start our timer one two three and pause and you can see that it's paused lastly reset this one's kind of easy head to our reset button we'll take paused set that to true clear our timer take start elapsed and current time set them all to zero take hours minutes and seconds set them to zero then lastly change our time display to all zeros time display dot text content equals zero zero colon zero zero colon zero zero oh then make sure you don't add this let keyword then we're creating a local variable this should work now one two three we can pause we can reset we can start again and reset all right everybody that is a simple timer if you'd like to make a more advanced version you could add milliseconds and well yeah that's a basic stopwatch using javascript hey guys in this video we're going to create a game of rock paper scissors using javascript so sit back relax and enjoy the show all right then everybody in this video we're going to be creating a game of rock paper scissors we'll be using html elements javascript code and styling with css let's head to our html document i'll create a div section to contain our game div id equals i'll name this game div we'll close it i'll create three labels one for the player the computer and the result who won these will be h1 header tags i'll give each of these header tags a class class equals game text i'll give the first h1 header tag a unique id of player text the second header tag will be computer text third will be result text the first h1 header tag will have this initial text player colon space then computer colon space result colon space let's add three buttons for rock paper scissors button close it each of these buttons will have a class class equals choice button we'll need three buttons add some text rock paper scissors that's everything for now let's head to our javascript file let's select all of the elements that we'll need we'll begin with the player text const player text equals document dot query selector we are selecting an id that id was player text we'll select the computer text const computer text the id was computer text we'll select the result text const result text the id was result text then we will select all of the buttons const choice buttons equals document dot query selector all we are selecting the choice button class we'll create three variables let player to store the player's choice let computer for the computer's random choice let result to display who won we'll iterate over our choice buttons using the for each method choice buttons for each we'll use an arrow function expression for each button within our choice buttons array we will use an arrow function i'm going to add an event listener to each of these buttons within the arrow function expression button dot add event listener the event is click when we click on a button we're going to do something within the ad event listener we'll add a second arrow function expression there are no arguments arrow we're gonna do a bunch of stuff so let's expand this when we click on a button what are we going to do let's take our player this is our player's choice set the sequel to whatever button we select and get the text content if we click on this rock button then our player variable contains the string rock same thing goes with paper and scissors if we select those then we will invoke the computer's turn computer turn function we'll need to declare this function outside of our for each method let's declare this computer turn function function computer turn we'll select a random number between one and three const brand number equals math.floor we'll need a random number math.random method there's only three choices we'll multiply this by three then add one this will give us a random number between one and three we can examine this random number with a switch switch rand number we'll find any matching cases case one computer will equal the string rock then break case two computer equals paper case three computer equals scissors and that's it for the computer turn function the player variable will be assigned a string as well as the computer next what we'll need to do is set the text with our choices player text dot text content equals i'll use a template literal player colon space i'll add a placeholder player let's do the same thing with computer computer text text content computer computer then the results text result text dot text content we will set the sql to invoke a check winner function we'll need to define this function let's do that after the computer turn function function check winner first we'll compare if our player and computer strings are the same if player is equal to computer we will return a value this will be a string draw it's a tie else if computer is equal to rock i'm going to return then use the ternary operator our condition is if player is equal to paper question mark if the computer is equal to rock is the player equal to paper if so then we will return a string you win if this condition is false we'll return a different string you lose okay let's create another elsif statement else if computer is equal to paper and the player is equal to scissors add another else if statement else if the computer is equal to scissors and the player is equal to rock and that should be it let's test it okay rock it's a draw paper you lose scissors you win alright so that is the logic of our game hey for fun let's style this using css let's begin with our game development that surrounds our game let's take this id we will style game div it's an id i'll set the font family to brush script mt if my web browser can't display this font i'll have a fallback of cursive i'll add a border three pixels solid i'll round the corners border radius 25 pixels that's better but let's add some padding padding 10 pixels is good i'll add a background color background dash color maybe light gray i'll align the text in the center text align center okay we're getting somewhere let's select these buttons they all have the same class that class is choice button i like to add classes at the top choice button class let's change the line height to 30 pixels then set a width because all of these buttons have different widths to accommodate the text i would like them all to be uniform width of pixels is good uh let's expand this a little bit there let's select our player text id player text i'll change the color of the text color pick a color i'll be blue let's do the same thing with computer text id computer text i think the computer should be red okay let's try this one last time rock paper scissors well alright everybody that is a basic game of rock paper scissors for beginners if you would like a copy of my javascript code as well as the html and the css markup i'll post all of this in the comments section down below and pin it to the top be sure to check underneath the original video in the playlist but yeah that is a basic game of rock paper scissors 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 create a game of tic-tac-toe using javascript so sit back relax and enjoy the show well all right everybody let's create a game of tic-tac-toe let's create a div element to contain our game div this will have an id of what about game container let's close it i'll add a title this will be an h1 header tag the title will be tick tack toe we'll create a div section for a grid div id equals let's name this cell container it will contain nine cells for each of the spaces then let's close it within our cell container div we're going to create nine div tags div we'll create an attribute named cell index i'll set the first equal to zero add them to a class the class will be cell then close the div tag let's copy this development and paste it eight additional times so we should have a total of nine we have cell index zero one two three four five six seven eight outside of our cell container that ends right here it looks like we'll create an h2 header tag to display some messages like whose turn it is who won so let's close this h2 header tag i will give this an id of what about status text then we'll need a button button the id will be restart button add some text restart okay that should be everything within our html file let's head to our css style sheet be sure to save everything let's begin with the cell class this is a class so use dot the name of the class cell i'll set a width of 75 pixels a height of 75 pixels i'll add a border 2 pixel solid is good okay here's our div elements so far but we got to put them in a grid they're all in a single column i'll select our cell container we're selecting this by an id cell container the display will be grid grid template columns repeat three auto then we gotta set a width width 225 pixels margin auto yeah let's head back to our cell class let's add a box shadow box shadow zero zero zero two pixels all of these lines should have an even thickness i'll add a line height of 75 pixels just to test the x's and o's i'm going to add an x like right here and an o here let's edit the font font size 50 pixels when i move my cursor over these cells i would like my cursor to be a pointer to indicate that we can click on something so cursor pointer let's test that yeah there's our pointer okay let's select our game container i'm going to center everything and change the font game container i'll add a font family i'll select permanent marker i like that font and a backup of cursive then we just got to center everything within this container text align center yeah and that's our css style sheet so let's get rid of this exyno that we have i was just writing that there to test it okay so our html file is done our css file is done let's head to our javascript file okay now we're within our javascript file let's declare all of the variables that we'll need const cells equals document dot query selector all we're selecting a class the cell class dot cell then let's select status text const status text document dot query selector not query selector all we are selecting status text then our restart button const restart button id restart button we need a constant of all of our win conditions const win conditions win conditions will be a two-dimensional array of indices if three cells all have the same character we would need to check that but we'll have to know what cells to check let's begin with the first row these would have indices of 0 1 2 so let's add that zero one two then the second row three four five six seven eight then columns zero three six one four seven two five eight then the diagonals zero four eight two four six and that's it we'll need an array of placeholders i'll name this options let options equals options will be originally an array of empty strings we'll need nine of them one for each cell okay let's make sure we have nine one two three four five six seven eight nine we'll need to keep track of the current player let's current player equal x then we'll need a boolean variable to keep track if our game is running let running equals false we'll switch this to true when we initialize our game let's create all of the different functions that we'll need function initialize game function cell clicked function update cell there will be two parameters cell as well as index function change player function check winner function restart game okay and that's the functions when we begin our game let's initialize the game we'll use this function initialize game to take care of any setup before we need to start we'll have to add some event listeners to our cells take our cells then use the for each method we'll use an arrow function expression for each cell we will take our cell add event listener the event will be click we will add a callback of cell clicked the second line will add an event listener to our restart button restart button dot add event listener when we click we are going to invoke the restart game function for the third line let's update our status text status text dot text content set the sequel to i'll use the template literal current player it's their turn okay looks like we have one problem looks like i accidentally capitalized that l in current player okay let's work on the cell clicked function when we click on a cell what are we going to do i'll create a local variable const cell index i will set the sequel to this this refers to whatever cell that we click on we will get an attribute get attribute the attribute that we're getting is cell index we have an index number what we would like to check to see is if that index number within our options our placeholders are not empty we'll only want to update a cell if there's nothing there if our options at index of cell index does not equal an empty space or if the game is not running then we will return not do anything otherwise we will invoke the update cell function pass in this as an argument as well as cell index followed by check winner function okay let's head to the update cell function take options at index of the index parameter set the sequel to the current player so we're updating our placeholders then change the text content of one of these cells whatever cell that we click on originally cell dot text content equals current player now we should be able to click on at least one of these cells oh i forgot one thing when we initialize our game we have to set running to true running equals true there so we can click on one of these spaces x x x x then we just need to change the player take our current player then we will set the sequel to then use the ternary operator our condition is if change player is equal to x if current player is equal to x we will reassign our current player with o otherwise x then take status text dot text content set the sequel to i'll use the template literal current player it's their turn yeah just temporarily i'm going to invoke this function after updating a cell now we should be able to alternate between x's and o's x o x o x o yeah we're good i'm going to remove this i was just testing it to make sure it works okay then head to our check winner function we have a lot to do here we'll create a temporary variable of round one i will set the sequel to false if somebody wins we'll flip this to be true we'll use a for loop we haven't used those for a while we will iterate over all of the win conditions within our two-dimensional array the first statement will be let i equal zero we'll continue this as long as i is less than our win conditions dot length property increment i by one we will iterate over each inner array within win conditions but let's store each of these arrays within a temporary variable const condition equals when condition at our current index of i each row has three indices const cell a equals our options but at what index while the index is going to be our condition at index 0 then we have cell b cell b condition at one cell c condition index of two let me explain how this is gonna work let's head to the top we're iterating over all of these inner arrays we'll begin with the first we have three indices zero one two we're going to check within our options at these three indices zero one two at least that row to begin with if these three are not spaces and they're all the same that means somebody won if there is no winner we'll check the next set of win conditions three four and five these are indices within our option at these three indices three four and five if there are no spaces and they're all the same character that means somebody won we'll repeat this process for each set of win conditions so heading back down to our check winner function we'll need to check if there's any empty spaces if cell a is equal to an empty space or cell b is equal to an empty space or cell c is equal to an empty space if there's an empty space we'll continue and skip this iteration so if there are no empty spaces that means all the spaces are full let's make sure they're all the same character if cell a is equal to cell b and cell b is equal to cell c that means we have a winner we'll take our local variable of round one set the sql to true then break we don't need to continue this for loop anymore we can break out of it outside of our for loop if round one is equal to true let's update our status text right here status text dot text content is equal to i'll use a template literal current player wins running equals false the game is over else if so if there's no spaces left it's a draw we could check that with this condition take our options then use the includes method we'll check for any spaces does our array include any spaces precede this with the not logical operator if our options does not include any spaces if this is true then we will update our status text to equal draw running equals false else we can change player change player okay let's try this x o x o x o uh we should have a winner here yeah x wins let's work on this restart button to restart the game we'll take current player set the sequel to x take our options i'll just copy this we're going to reset them so they're all empty spaces status text dot text content equals i'll use a template literal current players turn we'll have to clear each cell take our cells use the for each method use an arrow function expression for each cell we will take that cell update the text content equal to an empty space then set running equal to true okay let me make sure the game's a draw first okay draw i'm going to restart and we have a new game so yeah everybody that is a basic game of tic-tac-toe if you would like a copy of all this code i'll post this in the comment section down below underneath the original video in this playlist and well yeah that's a basic game of tic-tac-toe using javascript hey what's going on everybody it's your bro hope you're doing well and in this video we're going to create a game of snake using javascript so sit back relax and enjoy the show hey what is up everybody in this video we're going to create a game of snake let's head to our html file i'll create a div as a container div id equals game container let's close it we'll be using a canvas to draw our components canvas the id will be game board i'm gonna go ahead and set the width and the height attributes right away 500 for the width the height will be 500 as well then close the canvas i'll add a score div id equals score let's close the div section the initial score will be set to zero then we'll need a reset button button close it id equals reset button the text is reset okay let's work on our css styling that's everything for our html file let's select our game board game board this is an id i'll add a border border 3 pixel solid is good let's enter everything within our game container game container text align center i'll change the font of the score you can barely see it font family pick whatever font you like one font that i like is permanent marker permanent marker then a backup of cursive let's change the font size font size 100 pixels then let's work on our button next reset button i'll pick the same font family the font size will be 22 pixels a width of 100 pixels a height of 50 pixels border 4 pixels solid border radius to round the corners 15 pixels then cursor pointer when we hover our cursor over this button okay that is our css style sheet and our index.html file let's head to our javascript file we have a lot of variables to declare let's begin with the constants const game board equals document dot query selector we are selecting an id that id is game board that's our canvas with a canvas to paint on the canvas we have to get the context const ctx for context equals game board dot get context then pass in 2d we'll store our score text as a variable const score text equals document dot query selector we're selecting an id the id is score let's change this id to score text we're already going to have a score variable hey this is future bro so i forgot to change that within my css style sheet make sure you make that change here as well let's select our reset button const reset button equals document dot query selector we are selecting our reset button i'm going to create a variable to hold the width of our game board const game width equals game board dot width then game height const game height equals game board dot height width and height are the attributes that we assigned within our canvas initially when we run this javascript file if we would have declared those within the css file they wouldn't have been available to us right away that's why i assigned these attributes within the element itself inline we're going to assign some colors the first is for the board background const board background equals pick a color i'll just pick white pick a color for your snake const snake color i'll pick light green but feel free to pick a different color i'll add a black border around the snake snake border equals black then we'll need some color for the food const food color equals red it's an apple okay then a unit size what's the size of everything within our game const unit size equals i'll pick 25 pixels now we'll create a couple more variables let running equal false we'll examine running to see if our game is currently running or not let x velocity x velocity will be how far we move on the x-axis every single game tick i will set this to be the unit size we'll be moving 25 pixels on the x-axis every game tick if x-velocity is a positive number we'll move to the right if it's negative we'll move to the left then we have y velocity let y velocity equal zero that means we're not moving up or down if we would like to move down we would set this to unit size if we would like to move up we would set that to negative unit size to move up up or down one space one unit but to begin we'll just be moving to the right we'll need the coordinates of our food let food x coordinate let food why we'll calculate these randomly later within a function let score equal zero then we need our snake our snake is going to be an array of objects an array of parts let snake equal straight brackets it's an array and we will create objects an object for each body part each body part will have an x and a y coordinate let's begin with the tail the tail will begin in the top left corner so i will set those coordinates 0 0 is the top left corner initially let's create 5 body parts to the snake but after it eats its food it's going to increase by one let's add a second body part this is a separate object separated with a comma but i don't want this in the same space i'll place this next body part to the right of the first one so let's say x is unit size times one or just unit size i suppose okay let's add another body part unit size times two so we'll have three squares okay two more body parts unit size times three unit size times four and that's our snake it's an array of objects body parts each object is a body part of the snake they each have their own x and y coordinates let's add an event listener to our window to listen for key events window dot add event listener the event is key down we'll pass in a callback to a change direction function then we'll add an event listener to our reset button to restart the game reset button dot add event listener when we click we will invoke the reset game function which we still need to declare then we will invoke game start let's declare the functions that we'll need let's begin with the first function game start function next tick function clear board clear board is going to be in charge of repainting the board function create food the create food function will find a random place within our game board to place a food item function draw food we'll need to paint the food within our game board function move snake function draw snake function change direction function check game over function display game over then lastly function reset game those are the functions let's begin with the create food function we'll create an inner function function random food there will be two parameters min then max within this function we'll return a random number return rand number so to calculate this number we'll store this within const rand num set the sequel to math dot round math dot random we will multiply this by max minus min plus the minimum if there is one i think i'm going to expand this all right just to demonstrate this i'm going to invoke the random food function and store this within food x food x equals random food we'll pass the minimum zero then the max game with minus our unit size temporarily i'm just going to display whatever food x is i have to explain something then we will invoke this create food function temporarily i gotta explain something currently when we're generating a random number that random number is between zero then our game width minus our unit size every time i run this i have a random number between that range however i would like to divide the width and the height of my game in two spaces i will take this part of this expression divided by unit size now we'll receive a random space between 0 and 24 because 500 divided by 25 our unit size is 25 available spaces to accurately place the food in the top left corner of one of these spaces i will multiply all of this by unit size so every time i refresh this you can see that all of these numbers are divisible by 25 and that's what we're looking for let's create food why food y equals the same thing okay that is our create food function let's move on to the draw food function this is fairly easy we'll take our context set the fill style equal to our food color take our context fill rect to fill a rectangle we need a pair of coordinates food x food y we need a width and a height they are both going to be unit size now if i were to invoke the draw food function after the create food function this will draw a random food item every time we refresh the page that's what we're looking for that completes the create food function and the draw food function i'm going to eliminate these two function calls we're going to fill in the game start function we will set running equal to true our game is currently running we'll update the score text text content to equal whatever our score is initially it's going to be zero we'll invoke the create food function then the draw food function then lastly next tick next tick is what we want to do every round every time we update the clock okay every time i refresh this an apple should appear randomly within your game board let's close the game start function we'll work on the next tick function we'll check to see if our game is currently running if running let's invoke the set timeout method set timeout we'll use an arrow function expression there's a lot we have to do we'll list an order of steps first we'll clear the board clear board function followed by draw food move snake draw snake check game over then invoke next tick again so after the right curly brace how often do we want a game tick to occur maybe 75 milliseconds that's a good speed if you would like a slower speed you can increase the number or decrease the number for a faster speed i'll just pick 75. then we'll add an else statement else display game over if our game currently isn't running that means the game's over so that is the next tick function let's work on clear board this is fairly simple we'll take our context set the fill style we'll take our fill style set the sequel to board background this is a color that we picked take our context fill wrecked will begin in the top left corner zero zero will end in the bottom right corner we will take our game width for the width game height for the height that's it for this function let's work on draw snake we'll need to change the fill style context dot fill style equals snake color for my snake i picked green if you have a border we can set the stroke style context dot stroke style equals snake border we'll take our snake it's an array of objects so there is a for each method i'll use an arrow function expression the argument is snake part for every snake part then within curly braces i will take our context fill rectangle snake part each snake part has an x coordinate and a y coordinate so we'll begin painting wherever that snake part currently is on the x-axis and the y-axis what's the width and the height of the snake part well our unit size 25 pixels and the height is 25 as well unit size hey if you have a border we can fill that in let's copy this paste it stroke wrecked looks like i misspelt something clear board phil rhett not rexed okay and that will draw our snake so now how do we move our snake let's go to the move snake function to move the snake we're going to create a new head of the snake in the direction that we're moving then eliminate the tail const head equals then within curly braces the x-coordinate will be r snake's current head so that has an index of zero take the x-coordinate of that plus our x velocity how far are we moving on the x-axis this will be a positive number if we're going right a negative number if we're going left okay then do the same thing with y y equals snake at index of zero dot y plus the y velocity then to add this new head to our snake we can use the unshift method snake dot on shift head okay so our snake is just expanding now we need to eliminate the tail after each move i'll use an if else statement if else else will be snake dot pop that will eliminate the tail every time that we move uh but i gotta fill in something for now i'm just going to set this to be false just temporarily okay our snake should move now within this if statement we'll check to see if the food was eaten if food is eaten so that's a comment if the head of our snake snake at index zero take the x-coordinate we will use the comparison operator is the x-coordinate of our snake equal to the x-coordinate of our food food x and let's copy this portion the y coordinate of the head of the snake is equal to food y if the head of the snake and the food are overlapping well then the snake has eaten the apple let's increment the player score by one score plus equals one change the score text score text dot text content equals the new score then create a new food object create food we have no way to test this until we can control our snake let's close out of this function then go to the change direction function the change direction function should have one parameter event we invoke this function every time we press a key our window is currently looking for the key down event we'll store this within const key pressed set the sql to event dot key code so i'm going to display whatever key pressed is currently with console.log i'm going to click on my window and press up down left right each of those four arrow keys has a key number that's what we're looking for in fact i'm going to store those let's say const left equals 37 const right equals 39 const up equals 38 const down equals 40. actually i'm gonna rearrange these so that they're all in numeric order much better this is how to determine which way our snake is headed i'll store these within some constants const going up equals we'll write a condition is the y velocity of our snake equal to negative unit size so our unit size is currently 25. if the y velocity of the snake is negative 25 that means we're moving up so let's do the same with the other directions going up going down going right going left going down is going to be y velocity is equal to unit size positive then x velocity is equal to positive unit size going left is x velocity is equal to negative unit size so these will be boolean variables i'm going to write a switch switch will examine true against many matching cases the first case will be key pressed is equal to left and we are not going right we don't want to be able to move like to the left then immediately to the right because according to the rules of snake if any body parts touch then we lose the game we don't want to accidentally go back into any body parts so if we're going left we can continue to go left otherwise up or down but not right because then we lose the game if we would like to go left then let's set the x velocity equal to negative unit size take our y velocity set that equal to zero we're no longer going up or down then break let's add another case keypressed equals up and we are not going down x velocity equals zero y velocity equals negative unit size we need another case key pressed equals right and we are not going left x velocity equals unit size y velocity equals zero okay last one key pressed equals down and we are not going up x velocity equals zero y velocity equals unit size okay we should be able to control our snake now yeah there we go we can go up left down right so let's eat the apple and we should expand and our score increases now let's work on getting a game over because we can go off the screen currently which we should not be able to do okay let's close out of this function check game over if we pass one of these borders then we have a game over i'll write a switch to check that switch will examine true against many matching cases the first case will be is the head of our snake snake at index zero take the x coordinate is that less than zero that means we went over the left border if this case evaluates to be true well we have a matching case so let's take running set the sequel to false then break so if i go over the left border the game stops running okay let's add another case if the x coordinate of the head of our snake is greater than or equal to the game width now if we go over the right border the game ends take the y coordinate of the head of our snake check to see if it's less than zero that means we go over the top the game's over then the last one is case y is greater than or equal to game height we shouldn't be able to go over the bottom border yeah awesome there is another game over condition two if any body parts of the snake overlap to check that i'm going to use a for loop to iterate over the body parts four then our index is going to be i we don't want to begin at the head let i equal one that's why i'm not using the for each method our condition to continue is i is less than snake dot length property increment i by one we'll write an if statement if our snake at index of i that's going to be one of the body parts besides the head because we're starting at one if the x coordinate of that body part is equal to snake at index of zero take that x coordinate and let's copy this paste it change x to y if the head of our snake is equal to one of the body parts that means the game's over running equals false okay let's test that yeah the game just ended now we'll want to display game over let's close out of the check game over function then head to display game over i'll take the context access the font set the sql to a font of your choosing i'll pick 50 pixels mv bully context dot fill style pick a color i'll just pick black i'll center the text context text align equals center to draw some text on a canvas we'll type context dot fill text add a string of text game over then your placement i'll put this right in the middle game width divided by two comma game height divided by two then set running equal to false okay so when we hit a border it's game over then when the head of our snake runs into a body part it's also game over the last thing we need to do is set up the reset game function we'll take our score set that back to zero take the x velocity set that equal to unit size take our y velocity set that equal to zero we'll recreate our snake copy that paste it but we're not going to use the let keyword then invoke the game start function so after we get game over we should be able to reset our game yeah sweet well okay then everybody that is a game of snake using javascript if you would like a copy of all this code i'll post this in the comments section down below be sure to check the original playlist and well yeah that's how to create a game of snake 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 create a game of pong using javascript so sit back relax and enjoy the show all right let's begin everybody let's create a div section to contain our game div close it the id will be game container we'll add a canvas canvas close it the id will be game board i'll set a width and a height in line the width will be 500 the height will be 500 we'll add a score this will be another div section id equals score text the initial text will be 0 colon 0 then a reset button button close it the id is reset button the text is reset cool that's our html file let's head to our css style sheet id game board border 3 pixel solid let's change our score text next score text pick a font family font family pick a font that you like then i'll add a backup i'll change the font size to 100 pixels that should be readable okay let's work on the button reset button i'll set a font of permanent marker then a backup of cursive font size 22 pixels a width of 100 pixels a height of 50 pixels border 4 pixels solid border radius 15 pixels then cursor pointer when we hover our cursor over this button the cursor is now a pointer then let's enter everything i will select our game container text align center all right there we go so that's our css style sheet and our html file let's head to our javascript file let's declare all the constants first const game board equals document dot query selector we are selecting our game board const context equals game board dot get context 2d context is what we draw on const score text equals document dot query selector we are selecting the score text i'm just going to copy this then we have our reset button id is reset button let's store the game with within a variable what's the size of our canvas const game with equals game board dot width attribute then we have height game height equals game board dot height i'm only storing them within a variable so that they're accessible let's select some colors const board background what color i'll select forest green kind of like it's a tennis court const paddle one color what color would you like the first player to be i'll pick light blue then paddle two paddle two color player two will be red if you want you can add a border const paddle border equals black const ball color i'll make this yellow like it's a tennis ball const ball border color i'll pick black so what do we want the size of the ball to be i'll store that as a constant const ball radius i'll set this to be 12.5 then the full diameter is 25 then our paddle speed how far do we want our paddles to move when we press down on a button paddle speed equals 50. that's good enough feel free to change this number if you'd like now we have let interval id let ball speed i'll set this to be one that will be the lowest speed then ball x and ball wide they will be coordinates let ball x equal initially i'll place the ball right in the center of our game board i will take game width divided by two then ball y is going to be game height divided by two let ball x direction i'll set that to be zero ball x direction will be the direction in which the ball is headed on the x axis then ball y direction let player one score equal zero let player two score equal zero we'll define two paddle objects let paddle one equal this paddle will have a width property of 25 a height of 100 these are in pixels the starting x coordinate will be zero all the way at the left border then y zero so this petal will be in the top left corner initially so let's copy this paste it change paddle one to paddle two the width and the height will be the same i would like paddle 2 to be on the other side of my canvas i will set x to equal game width then i'm going to subtract negative 25 whatever the width is if i set x to be game with the left border is going to be lined up with the right border of my game board so i'm just going to shift it over by the width 25 pixels so that you can actually see it then y is game height minus the height of our paddle and those are the two paddles let's add an event listener to the window to listen for key down events window dot add event listener we will listen for key down then we will invoke a change direction function let's add an event listener to our reset button reset button dot add event listener we are waiting for click then invoke the reset game function we'll still need to declare these two functions when we would like to start our game we'll invoke the game start function then we'll need to declare these functions the first function is function game start we'll fill these in momentarily function next tick function clear board function draw paddles function create ball function move ball function draw ball function check collision function change direction function update score function reset game okay those are all the functions why don't we begin by drawing the paddles we'll start with the easy stuff so we will take our context set the stroke style equal to the paddle border let's begin by drawing paddle one context dot fill style equals paddle one color context fill rectangle the first two arguments are the x and the y coordinate of the top left corner of the rectangle that will be paddle one dot x then paddle one dot y the next two arguments are the width and the height of this rectangle the width will be paddle one dot width then paddle one dot height to test this i'm going to invoke draw paddles right after game start temporarily okay there's our first paddle but let's add a border we can just copy this paste it change fill rect to stroke rat okay there is our first paddle let's copy these three lines of code paste it change paddle one to paddle two and there's our second paddle i'll eliminate this function call let's fill in game start when we begin the game what are we going to do first we'll create a ball then invoke the next tick function let's fill in the next tick function we will take our set interval id set this equal to set timeout method we'll pass in a callback then we'll add a routine what are all the things that we're gonna do first we will clear and redraw our board clear board then draw paddles move ball draw ball draw ball is going to have two arguments ball x ball y and we should probably fill that in within the parameters there then we will check collision then invoke next tick for another round i would like to repeat this routine every 10 milliseconds that is the next tick function let's fill in the clear board function all we're doing is redrawing our board let's take our context set the fill style equal to the board background context dot fill rect will begin in the top left corner 0 0 the width will be game width the height will be game height and that's our background so that is the clear board function we're redrawing our canvas let's head to the change direction function this will be in charge of moving the paddles but we'll need to know what key that we pressed i'll store that as a constant key pressed equals our event dot key code uh so we do have one parameter that's event so fill that in let's display whatever key pressed is console.log key pressed w has a key code of 87 s is 83. the up arrow key is 38 the down arrow key is 40. so we can use that for something const paddle 1 up equals 87 const paddle 1 down equals 83 const paddle 2 up is 38 const paddle 2 down is 40. let's write a switch to look at key pressed switch we're examining key pressed against many matching cases the first case is paddle one up if we press up we will take paddle one axis the y property minus equals our paddle speed you could also think of paddle speed as paddle distance how far we're going to move then break so we should be able to move up but we can't move down paddle one down the y property of paddle one plus equals paddle speed by pressing s we can move down by pressing w we can move up but currently we're exiting the game board let's write an if statement to check that if paddle 1 dot y is greater than zero then we will move then within the second case paddle one down we'll write another if statement if the y property of paddle one is greater than game height okay now check this out so we can't go above the border but we can go below the border up to a certain point from game height we need to subtract the height of our paddle game height minus paddle one axis the height property we cannot go above the game board or below okay let's work on paddle two case paddle 2 up we'll check to see if paddle 2's y property is greater than zero then we will take the y property of paddle two minus equals the paddle speed so we cannot move paddle two above the game board then our last case is paddle two down okay let's copy what we have here within paddle one down paste it but change paddle one to paddle two y property of paddle 2 plus equals the paddle speed with paddle 2 we shouldn't be able to go below or above the game board these paddles are complete let's close out of the change direction function let's work on the draw drawball function we'll take the context set the fill style equal to the ball color context dot stroke style equals ball border color we can set a line width if we'd like context dot line with equals to context begin path context arc to draw a circle ball x ball y then the radius ball radius zero this is for radians two times math dot pi context dot stroke method context dot fill method and there's our ball okay that is the draw ball function let's head to the create ball function when we create a new ball let's set the ball speed equal to one let's begin with the x-axis if math dot round math dot random is equal to one this part of the condition will give us a random number between zero and one if that number is one let's move to the right if not let's move to the left so if we would like to move to the right let's set ball x direction equal to one else ball x direction equals negative one we're moving to the left okay let's copy these if else statements then change ball x to ball y then when we create a new ball we'll set it to be right in the middle set the ball x coordinate equal to game width divided by two set the ball y coordinate to game height divided by two then invoke the draw ball function pass in as arguments ball x ball y that's the create ball function then we need to move the ball ball x plus equals the ball's speed times the ball's direction ball x direction then do the same thing with y ball y plus equals ball speed times ball y direction so our ball should move in a random direction let's just test that by refreshing the page so let's close out of the move ball function now we'll need to check collisions let's check to see if we hit the top border if so then we'll bounce off of it if ball y is greater than or equal to zero plus the ball radius remember the center of the ball is where we place the x and y coordinates so that's why we're adding the ball radius to account for that if we touch the top border let's change the y direction ball y direction times equals negative one that will reverse the direction i'm just going to test that so we should bounce off the top yeah let's check to see if we hit the bottom border if ball y is greater than or equal to game height minus ball radius then we will change direction okay let's check that yep we just bounced off the bottom what if we touch the left border if ball x is less than or equal to zero let's update player two score player two score plus equals one we'll update the score create a new ball then return once we hit the left border that should create a new ball yep there it is okay let's copy this if statement if ball x is greater than or equal to game width then we will update player one score when we hit the right border that creates a new ball okay now this is the tough part we're going to bounce off the paddles i'm going to maximize the screen if ball x is less than or equal to this is for paddle one paddle one take the x property plus paddle one axis the width property plus the ball radius on the x-axis if so let's check the y-axis if ball y is greater than paddle one take the y property and ball y is less than paddle one dot y plus paddle one dot height that means there's a collision we'll take ball x direction multiply this by negative one hey if you want for fun you can increase the ball speed ball speed plus equals one okay we should be able to bounce off this paddle yeah there we go okay let's do the same thing with the right paddle so i'm going to copy this section paste it is greater than or equal to the x property of paddle 2 minus the ball radius if ball y is greater than the y property of paddle two and ball y is greater than the y property of paddle two plus paddle two's height so we should be able to bounce off these paddles now then the ball speeds up so we do have one situation where the ball might get stuck kind of like this if that happens i'm just going to push the ball out of the way and move it forward ball x equals paddle one take the x property plus paddle one dot width plus ball radius this is if ball gets stuck this line of code helps prevent the ball from getting stuck within the paddle this statement will be ball x equals paddle two dot x minus the ball radius okay now let's update the score update score this one's easy score text dot text content equals i'll use the template literal player one score colon player two score so we should be able to keep track of the score okay that's one and one lastly we have the reset button reset game player one score equals zero player two score equals zero let's reset these paddles i'll just copy them paste them get rid of the let keyword by setting the x and the y coordinates that will put them in their original positions to demonstrate i'll press reset and they go back to their respective corners ball x equals zero ball y equals zero ball x direction equals zero ball y direction equals zero will update the score we'll invoke the clear interval method pass in our interval id then invoke game start again okay we should be able to restart this game yeah there we go well okay then everybody that is a game of pong using javascript if you would like a copy of this code i'll post this in the comment section down below be sure to check the original playlist and well yeah that's a game of pong using javascript you

Channel: Bro Code

Views: 2,745,783

Keywords:

Id: 8dWL3wF_OMw

Length: 480min 0sec (28800 seconds)

Published: Sat Mar 05 2022