[CFCODELAB] - Custom Javascript Part 1

Looks like we've got Jeremy on, we got Richard on. Good to see you all this morning. So today's session is all about custom JavaScript and there's a pretty good chance that we'll not be able to get through all of it today because it's a pretty meaty section. So. But we will go in and go through a bunch and then we'll see how we feel at the end. And if there's more to cover and there's more questions to answer and all that, then we'll definitely go through and, and break this into a second session so that we don't take everybody's entire Saturday up. But I feel like there's gonna be a lot to cover here, so we'll go ahead and get started. But the big Things with custom JavaScript we kind of went through in the last session in custom CSS and we covered how to select elements using CSS and what we use for custom JavaScript or what I use in ClickFunnels specifically is jQuery. And jQuery is great because it specifically uses very, very similar selectors, in fact identical selectors in the majority of cases. To be able to say, here's an element, find this element on the page and then take some sort of action on it. And that's actually why it's called jQuery, because you're querying what's called the document object model, the dom, and you're querying that for elements on the page and then you're saying, okay, take some action on this element. So I'm gonna go ahead and share my screen here and we'll just kind of start walking through this and I'm gonna share, I'm actually gonna share this desktop here and then let's minimize some of this stuff here and I'm gonna drag over. This is just an example. I just happen to have this pulled up. This is some custom code I've worked on in the past. This is actually my cfajax submit add on and I think this one is inside of. Inside of the CFO Tools VIP club. Sorry, my dog is in. My dog. Hey. I didn't let everybody know. I actually. We have made the full time move to Boise, Idaho. Actually Eagle, Idaho, but just outside Boise. I've been transitioning and traveling back and forth from Indiana to Idaho for the last little over a year. My wife comes out here, I go back there, back and forth. Well, we're both officially here full time and so my dog is here as well. So my dog is sitting on the floor just outside the view of the camera. And so if you see me nudge him every once in a while, it's because he's licking on his feet or doing something funny. But yeah, so we're excited about that. But anyway, so we've got this piece of custom code here and this custom code, you might recognize some of this stuff from what we had talked about last session with custom css. We've got this ability to check on attributes and then find elements based on this. So this, this selector right here says, hey, give me any element where the href attribute, which is what you would have on a link. An anchor tag would have an href. Where did, where should this link go? So find me any element that has an href that equals AJAX submit. And so that's what this, you know, the square brackets. The selector is exactly the same. You could do the same thing with custom CSS and apply some sort of style to it if you wanted to. The only difference would be you'd have, you know, in this one, you'd have, you know, if you want to do styles, you'd have style tags like we talked about last time. And then you would take this exact same thing. And then we could say, okay, so if we wanted to have say for any link that has that href. Oh, we could say, oh, man, I'm having trouble typing today. Declaration. We want to make sure it's underlined. So this would just say, hey, find me any element that has an href of AJAX submit and make sure the text decoration on that is set to underline. So we went through this and kind of in the custom CSS and jQuery really uses the same rules to find elements on the page. And then in this case we've got a comma, which means, okay, find this element or find an element that has a data image link that's equal to AJAX submit. So what this does is inside of clickfunnels, this is how they use images to actually create, make them linkable. And so they have, would both have the same URL. So we're just saying grab me any link that has this or grab me any date image that has an attribute of data image link. And then the next thing we do is actually call what's called a function on that. And in that function we're gonna, we're gonna do something, right? So jquery, one of the things we can do is hey, for this, for these elements on, and then click. So which means, hey, when somebody clicks on one of these elements Then we pass in a, what we call an anonymous function, we're gonna call. So we have a function here. And you'll notice up here we have a function, but there's nothing after that function to give it any sort of name. So in JavaScript a lot of times you would have a named function like my awesome function. And then we would have parentheses where we can pass in what are called parameters. And so we can have param1, param2. This is the ability to pass in data to that function call that we can then use with inside of that function. So this is a named function because we have we call function, which just tells the JavaScript that, hey, I'm creating a function here. I'm defining a function and this, this is the name that I want to give to my function so that I can call it somewhere else. And then these are the parameters that I want to define that people can pass in, that I can then reference. And we could say something like if param1 equals param2, and we'll just say, spit something out to the console. Yay. There. Oh, there. That's not what I want. Same. Okay. And so this would basically be just a defined function that says, hey, somebody can pass in param one, somebody can pass in param two. These are just values that are gonna be passed in when they call a function. And then this one says, hey, if the param1 is the same as param2, then output to the developer console a message that just says, yay, they're the same. So this, this is a name function. So now up in here we can actually call that function and we could just. Then all we have to do is say my awesome function and we can pass. Jamie Van. And so we're passing those values in and so, and we can see from this one that they're not the same. So this isn't gonna be output. There's nothing gonna be written to the console. But if we made them the same, then it would output this statement. Kind of a silly example. Not sure what anyone would ever use that for, but this is just kind of the difference between what we have here, which is anonymous function, we have no name between function and the actual list of parameters. But in this case we have a name. So we have anonymous functions and we have named functions. And named functions are generally things that are gonna be used over and over again. So you'll be, you know, you might have the same logic that you might need to apply. And let me see if I've got. See if we've got any useful code here pulled up with named functions? Probably not, but actually this one probably does. Okay, so we can. Let's see. Yes, so we can see in this case, this is, this is the promo code pro add on. And you'll see in this one I have a named function called cfcheck promo code. And I actually use that in several places. So you can see here I want to be able to do the same thing. It's the same logic. I'm just checking to see if this promo code is valid. So I'm going through and I'm saying, hey, find out what was entered, find out what the input name is, go through and do all this stuff and see if it's actually valid. And check to see if, if you know and update the products and do all that work. I don't have to write that multiple times. I, I just want to have the code written one time but be able to use it in multiple places. So in this case, I've got. I want to do when somebody presses the enter key on my input, my promo code input field, when they so on key press means they press the key in that field. If the key that they pressed is number 13, which is our inner key, then I want to. And there's. And I'm gonna check the value. If it has a value meaning that they actually entered there is something in the input field, then call that promo code. Check to see if the promo code is valid. But I also want to be able to do if they just click off the field, if they type something in, they don't click enter, but they just, they click off on some other field or they click off the page. I also want to go ahead and check at that point. So we do that on what's called the BL event. So when somebody leaves an input field, then the blur event is called because they've left. So we have a focus event when somebody enters a field and then we have a blur event when they leave the field. And so I want to call that same code. So we have these two separate instances of that code being called, but they both call the exact same function. And so the exact same stuff happens either way. So it just saves us effort of having to take all this code that I wrote down here inside of this function instead of having to duplicate that. And there's a lot of it. You can see there's a lot of code here. We wouldn't want to have to rewrite this. We wouldn't have to call, have all that included multiple times and be huge. So instead of having to put all that right here in this place, we can just have this named function that we call and it. And it actually fires all that code. So it's, it's our developer way of being lazy. So I say that the smartest things come out of lazy people. And so it's just, you know, when you don't want to have to do things multiple times, you find ways to do it once and then be able to use that effort multiple times. So we always look at, as developers, we try and follow the rule of, we call it the dry principle, which stands for don't repeat yourself. So if you do something once, then you can just put it in line. I could have just put the, if I was only going to ever call this code in one place, that I could just take all that code and put it right in here. Instead of having this function call, I would just put the code right there. But in this case, I have at least twice that I want to call that same code and do that same function. So I don't want to repeat myself. I'm gonna export, I'm gonna extract this out, put it into its own named function, and then I'm just gonna call that function in two different places. And I'm pulling up the chat here. So yeah, if you have questions as. Yeah, Nancy's and other languages, they may call it a subroutine. Yeah, absolutely. Different things. We can call it functions, we can call them methods, we can call them routines, we can call them subroutines and call all these different things, they go by different names depending on your language. Within JavaScript we call them functions within a lot of object oriented programming languages like Rails, C Sharp, we'll call them methods. So methods on an object, an object has methods and JavaScript has functions. So yeah, so, and I'll tell you this, one thing that I'll share is that I write coding in a lot of different languages. I've worked in a lot of different languages for a lot of years. And so I don't necessarily try and remember the exact syntax for everything or the exact name of what things are called, but what I do try and remember is that Google is my friend and I can look up just about anything that I need to figure out on a specific, you know, a specific language or a specific syntax for a particular language, as long as I know what's available or what's, what's possible. And so that's where it's kind of great. Once you learn some of these Principles, you can look and say, okay, well, I know I can do this thing and I can do it in this language, and it's probably available or similar in another language. So let me just do a quick Google and find. So we call those programming constructs. I'm actually gonna pull up a document here. Let me see if I can get this going here. So we'll call these programming constructs. And so kind of what I've been going through with the functions is one of the, one of the constructs. And so this is something I learned early on as a developer is that the most important thing that you can understand with, with any sort of programming language is what are the constructs, what are the things that you can do? Really are pretty universal when it comes to computer programming. Some languages have, you know, additions, but as a general rule, if you know the basic constructs of, you know, computer technology, then you can really apply those same constructs to pretty much any language. And so we look at those things and those things are things like functions and methods. So we'll say functions, methods. Most programming languages have some. They might call it a different thing, but they've got some, you know, some similar tool of a function or a method. The other things that you'll have are loops. And loops are things like you can do for each loops which will iterate over a package, an array, an object, a set of keys or something like that. And say for each element in this thing, then loop and, and take some action on that thing. And so every language has some, some ability to do some sort of for each loops. Then we also have while loops. And while loops evaluate while something is true. Wow, I'm really not doing good with the spelling today. So a while loop is something you can say, hey, while this thing is true, then loop. And then what you do is within that. Then you would say you would do some sort of evaluation. And then if you finally reached your destination, then you set a variable to false that the while is checking. And so once you set that to false, then the loop stops. So you escape out of that loop. So that's a while loop. And we'll, we'll run through some basics of, you know, of these different types so we can kind of understand these constructs. And then, and then you also have, for loops and for loops are things that are do do counters. And so for loops would be, you know, for I equals zero, you know, do something I, not one y equals zero. And then you might say I is Greater Less than 10 and I. And so that's basically saying, hey, loop, we're gonna start with I being equal to zero. And then as long as I is less than 10, then do this. And then once you've done that, then increase I by one. So I plus plus means add one to I. And so and then do the loop again and then do this again. And then, so you'll loop through this until I is greater than 10, or. I'm sorry, until I is reaches 10 or greater, which it will never will be greater because it's gonna escape out of the loop. And so, so this is another way to do a loop. So these are, you know, these are the main types of loops that you'll use most often. So you've got for each loops, you've got while loops and you've got. For loops, fors are used for counters. I wanna count a certain number of things. I wanna do this a certain number of times. Then you can, you can use that for loop for each. Loops are like, hey, I have a set. I have a set of things. I wanna just go through each of those things. I don't care how many there are. You know, I've received an array of a certain number of values. So I wanna loop through that entire array where I, regardless of how many there are. And I'm gonna take the same action on each one of those things. And then the while loop is again, I don't necessarily know in advance how many things there are. I just know I wanna loop in this thing until I get a. Until I, you know, it could be an instance of I wanna loop through until I find the element that I'm looking for. And then you could, then, you know, it could be the first element, could be the tenth element, could be the hundredth element. We don't know we're gonna loop through until we find that thing. Until that thing is false, then we're gonna keep looping through until we find it. So those are some examples of those. So loops are, you know, one of the most important constructs. The other ones are your if your logic constructs. And we'll just. Those, those are things like most often you're gonna use if then else sorts of logic. So, you know, something like that is going to be if this equals true, do this, else do that. So that's kind of an if then else. And so this is actually just an if else. But if then do this, if this equals true, then do this, else do this other thing. So that's an if then else statement. You also have the ability to do an else. If, Like this. So then you've got, you know, if this is true, do this. Else if that is true, then do that. Else do the other. So this is just. So this is a fallback. So this is gonna happen if either of these other two cases aren't true. And so you can run through and you can have as many of these nested as you want to. And we'll go through and do some examples of this. But you could say if this, then do that. Else if do this other thing. Else, if this other thing is true, then do this other thing. Else if you could have as many of these nested as you want to. And then your else is that finally, if none of those other things were true, then do this thing. And so these are ways. So only one of these is ever going to evaluate and actually function. Excuse me, if this is true, then we'll never reach the do. The other will only reach the do this. And same as that is true, then we'll only reach the do that. We'll never do this and we'll never do that. So that's kind of the if, then else structure. And we'll kind of run through some examples of that. So that's an. One logic construct is the if, if, then else. And another one. And actually let me drop this so it makes a little more sense. We'll do this. Okay, so that's some examples. And then another way to do a pretty similar thing, but in a much, much better structure, if you're going to have a lot of options is called a switch. And a switch is something where you say switch and this syntax isn't gonna be right and mo. And again, all, all your different programming languages will have some version of this switch. And what you'll do is you'll actually, depending on what you're trying to program in, is you'll actually go in and you'll change your syntax based on the language. So some of them represent it in a slightly different way, but they have the concept of a switch and a concept of an if, then else. All of your major languages have that. Those concepts. Same with the loops. The structure of how you create a for loop might be slightly different in Java than it is in C Sharp, but the concept of the for loop exists in all the different languages. And so a switch is basically taking in a value. And so we're gonna say, okay, switch, you know, based on, you know, my variable. And then let me do this, we'll do this in code where it looks a little better. And then you're gonna define value. So if my variable is equal to Jamie, then do this. Else if my variable is equal to Dan, then do that. So this makes it oh, And then default do the other. So this is pretty similar, you can see to the if then else. So, but it's a. It's a much easier way to. Actually, we're working on the value that's being passed in where in this case we're. We're having some sort of a statement that's being evaluated. So the switch is great. If you have a. I just want to look at a specific variable to see whether it's set to 1, 2, 3, 5 or 10, or whether it's set to Jamie, Dan, Richard or Jeremy. And based on what the value is, I'm going to take different actions. So a lot of those things would be if you're. If you're accepting, say, you know, say an order, and you're looking at, okay, which product did they buy? Then look at the product ID, and if it was product ID1, then do this product ID2, do this other thing. Product ID3, do this other thing. So that could be logic that, where you're saying, okay, I want to see what they purchased on the order form. And if they purchase product one on the order form, send them to this OTO page. If they purchase Product two, send them this other OTO page and they purchase Product three, send them to the the other, other order OTO page. So you could build some custom logic that way. Using a switch, you could do the same thing almost all the time, every time. You can rewrite a switch as an if, then else, but it gets a little unwieldy because the if then else structure, the syntax of it is much longer. So a switch is a simpler way to write something that's simple validation, but they do pretty much the same thing. So switch is another construct that you'll use. You know, just know as long as you know loops and if then else, you've really hit the majority of the constructs. And then the other things you'll have. So we talked about functions and methods. The other thing you'll have are variables. And variables are just like in algebra that we always said in high school, when would I ever use this stuff? Well, I actually use it quite a bit when it comes to writing programming. And when you're doing any sort of validation on numbers and things like that, then you end up using some algebraic equations for that. But variables are. When you say, you know, x plus y equals 6, you know, figure out what the X and Y is. If x is 2, then what's y? If y is 4, then what's x? So in those cases, X and Y are the variables. They, they might, their values might change depending on the value of something else. So that's where, you know, we'll go in and we'll see here that we've got, we're setting these VARs VAR for variable and we give it a name. And then in that, in that value, we're going to assign it a value. So in this case we're, we're giving it the value of an actual jQuery object that is a span element that has these, this class applied to it, these classes applied to it and has the text of apply. So we've created an element here and then we've assigned that element to the variable apply button. And then what we can see is now we've gone down here later because we've got a definition of this thing in our variable. It's stored this value. Then we can then now reference that variable later in our code. Instead of having to put all of this stuff inside of here. I can just reference the variable name and I can also say something like if I wanted to go in and say, if, you know, if you know, let's say if, you know, we'll just say customer name or actually we'll just do product id. If product ID equals one, then we're going to say, you know, apply button equals this other thing. And so, and then we could do, you know, set it down here, do that. And then now we've got a different value for this based on some logic here. But in here we don't have to have that logic. We just know that, hey, whatever, whatever apply button is, go ahead and append it to this element because we've set a different value up above. And so this is kind of the beauty of variables is you can change those things and whatever the value is at the time, that's what gets inserted here. And so that's kind of our use for variables is they're, they're containers of data that might change over time. And then also we can pass those things into our functions. And so, you know, in this case, where we're passing in all main prods, we're setting these things up above. And then we've got a function here. This is part of the underscore library. That's why it starts with underscore. There's actually a library like jquery called underscore. It's also included with ClickFunnels. So because we have underscore here, we can say, okay, call into underscore and then give me a unique. So take this array and I'm gonna pass in the array and give me the unique values. Return me a unique array of those values. And so that's what we've got going here. And so we're passing in that variable and that variable may change and then we can pass it in here and then our functions accept those variables and we can pass in those variables to other calls. And same thing here we've got, here we've got a function being called and this one's an anonymous function and we're passing in parameters and they have variable names. And then we're going to reference those same variable names later in the code to be able to use those things. Those are our variables. These are the core things that we need to keep in mind and know that, okay, here's the things I can do. I can create reusable containers of code and we'll call those things functions or methods. Then I have containers of data. Well, those things are called variables. Then I have the ability to loop through things and I can do, I can loop through a package of things over each one of them and do certain things or I can loop while something is evaluating to true, or I can loop through a specific number of times. I can just do a for loop and then I also from within those things, I can do if then else logic to say, okay, if this is true, do that. If this is true true, if this other thing is true, then do the other thing. And I can do that in a couple of different ways. So once we have those, all of those things, we can combine them together into writing our programs or our, you know, in this case, our custom code, our custom JavaScript snippets to make the magic happen. And doing that specifically within ClickFunnels, I try, I always use jQuery to do that because jQuery gives you a lot of helpers along the way to make things simpler to do. It was written specifically for interacting with HTML pages and so there's a lot of helper functions built in that just don't come out of the box with regular JavaScript. So they've done a lot of the heavy lifting for you. And because clickfunnels has already included it, it's no additional strain on the pages. The pages already have it. So all you have to do is actually use the library that's already included versus, you know, and it simplifies the code a lot of times because a lot of the same things that you'd want to do if you were writing it as pure vanilla JavaScript that your browser understood without any external library, it's going to be a lot longer to write that same code. And so jQuery is great for that. There's also the Underscore library is also included in your clickfunnels pages. It's more of a utility sort of library. It has some very specific things that are cool, like making an array unique. That's something that's not built in as a jQuery library. So having it available is a great thing. So being able to call that from with underscore is really the majority of time. That's what I use that for, is that you just strip out all the extra duplicate values here. And so, yeah, so that's why I always use jQuery. So you'll always see that when we're using this dollar sign in here that generally represents jQuery. So that's just a shortcut function for calling jQuery. So we could also write jQuery right here and it would do the exact same thing. The dollar sign is just a shortcut method for calling jQuery. And so we could also say jquery here and say, okay, jQuery, go find me any element that has the data de type attribute of orpo. And then when you find that element or all of those elements, because this will loop through and call this function on each one of those elements, then hide them on the page. So make them hidden. So that's a quick example. And so we want to use jQuery basically to do and to put together these constructs. And so, yeah, so those are kind of some basic foundational stuff. And then next let's run in and actually do some examples and work through some of the things that are the common things to do within click Funnels. And while we get ready to do that, I'm going to go let my dog out before he drives. And dan asked, besides jQuery and underscore, what other libraries are built into CF? Those are the two majors. I'm trying to think if there's another library, there's a few other packages that are built in. I don't have an exhaustive list by any stretch. There's a few that I wish were built in that are not. And you might see those get included several times. So, like the customer info replacer. So let's see. Customer info v2, I believe. Nope, actually that's not the one. Let's do trying to think. There's one that I include quite a bit called handlebars. So we'll just do location swapper. So location swap. You'll notice here that we include a library called handlebars. It's actually a jQuery plugin. This one I wish was included with clickfunnels out of the box, but it's not. So I actually have to include at the top of the add ons to make sure that it exists before I can use the code that gives me the ability to set data values for city, country, name, state and then this actually will loop through. Now when I call this swap, I can call this HTML and call this template and pass in my data and then handlebars. This is a handlebars function I'm compiling using handlebars. I'm compiling my source, which is my data, my HTML compiling that which then goes through and says give me this structure, go through and be able to loop through it and define what my values are. Then I can replace that in my HTML later using my template function that also comes with handlebars and so or actually template is my function name here. So this is, this is actually returning a function. So I'm calling that function and passing in my data. And so this gives me the ability to say then put on my page I can actually. Handlebars is one where you actually put in like double curly brackets city in your text. And handlebars will look for any place that has these double curly brackets and that's what they call handlebars. And whatever's in between those is a data name. So I have a city in here. So it will replace that city with whatever my value is. So that's going to pull my location city value for my GeoIP and it's going to give it that value. So then city, these double. All of this will get replaced with the city name. So that's the geo, the location swap add on. And it uses the handlebars library that is not included with clickfunnels. I wish it was, but it's not. It's based on jQuery as well. So you have to have jquery included, which luckily it already is, so we don't have to include that. Underscore is another good one that's already there. And it seems like there's a few other libraries that are already included, but they're not. So like jquery is a. Is an entire library. It's a kind of a framework of code and functions. Then you've got a lot of plugins to the jQuery library. There's a few of those plugins that are included, things like the countdown library. Countdown is how all of our countdowns work. So the jQuery Countdown library is included and so you can write your own countdowns if you want to, or you can modify the existing clickfunnels countdowns based on that library. And so let me see if I have FOMO Countdown. So let's see here. So the other, this is actually another good one that's included and that is the moment, the jQuery moment library. And so that's included. So moment is a great one for doing timestamps and math, dates, things like that. So you can see in this one it's moment is giving us the current timestamp. And this one we're going to convert it to UTC and then we're going to format it by giving us just X. I think is is actually there is a Unix timestamp. So that's why we're setting this variable TS equal to the current timestamp in UTC time. So it's, it's universal translated time zone instead of our local time zone, which is what generally happens is MoMA looks at the local browser to see what time zone the local browser is in. So yeah, so moma is another good one that we'll that you will probably use quite often because it gives you the ability to look at the current date, add dates, subtract dates. And so we can do one with date, replace with math. There we go. This is another one. This is an add on one. I use handlebars in this one. Then we also are using moment. In this case we've got dollar sign mom equal to moment. You'll notice that sometimes in my code I use this dollar sign mom. This just represents to me that this dollar sign tells me that this is a jQuery object that's being stored in this variable. So I know I can do jQuery functions directly on this object when it's called put inside of a parent in front of a parenthesis here like this. Then this is actually the name of the jQuery function. This is a shortcut to that jQuery function. And so, and like this, in this case, when we do a dollar sign dot that's saying jquery as an object call the each function on that. So when it's put in front of a variable name like this, it's not representative of jQuery this is just a little shortcut way of me knowing that this is a jQuery object being stored in this variable so that I can identify it more easily. But you can see we've got a moment here which gives us a timestamp. And to that I want to add a certain number of units. So my quantity might be a number. My units might be seconds, hours, minutes. And then if. So if my, you know, if my. If I have dash, add dash in the title, then add a certain number of quantity and a certain number of units. And if it's not, then it must be a subtract. So they're gonna subtract from that moment, the number of units from that. So moment is another good one. Handlebars is a good one. That's not included. That should be. And Then Countdown, the jQuery Countdown element. And let's see if we actually, I don't think we're doing anything on countdowns in this one. Let me think of one, every mince. So in this one we're actually modifying. And this one we actually have, we're using moment as well because it's included. We're using handlebars as well. And then in this case, we are going to modify the countdown using the countdown library. And so when we're saying, hey, this, this means grab me my. This is representative of the current element being returned by this. So this is a countdown object. And so I'm gonna call on that element, I'm call a countdown function. And this is a library called countdown. And it takes in some parameters. And then you can take, you know, make changes to that existing countdown element. So countdown is another good one, just to be aware of that it's there, because when you know it's there, then you can use it and you can actually look it up. So if we go in and do a quick Google on jQuery Countdown, Then the one we're looking at is actually this Keith Wood jQuery Countdown. So this is the actual jQuery Countdown library that's included with clickfunnels. And so this is just the documentation page for that. And it's very dated, as you can see, as far as the design goes. But the functionality is great. And you have actually a quick ref here for all the things that you can do with this countdown library. So you've got all the different attributes, the labels, the things you can modify, and like the different things that we'll do. So you can say, okay, I want to give it an expiry URL so When that expires, I don't know why this is. Let's refresh this page. I don't know why that's popping up. So if I go to the quick ref, then we can see. So you know, we've got things like the expiry URL always expires. On expiry means pass in a function and it tells you a callback for when the countdown expires, what to do on tick. So for every, when the countdown is updated, which means every second, then call this function and tick interval is how often to update this. So a tick by default is 1. So every second it's going to tick and you could set that to 1000 if you wanted to. And every thousand seconds it's going to tick or every 60 seconds. So it could just do a minute countdown. So every minute and then you could use in combination that on tick to actually set something to happen every minute in your page. And so there's, you know, there's some good uses in learning what these options are and what you can do with it. And then you've got things that like you can figure out based on when somebody, you know, you can call a pause, you can call a resume, you can call a destroyer, your countdown elements. So you could have a hidden countdown timer on your page that gives somebody five minutes from the time they land on the page to actually take an action. And if they don't take that action, then it could redirect them to another page. But if they take that action, you could then destroy the countdown and it will stop and then your redirect will never happen. So there's some, some cool things that as long as you know that these options are available and these things, there's things you can do, then you can use those codes to build up your own functionality. So those are the key ones that I look at that I referenced quite a bit. Inside of clickfunnels are countdown, moment and handlebars. Handlebars I have to include externally because it is not automatically included inside of clickfunnels. And then underscore, I don't use a lot. There's a few very specific functions inside of underscore. You can actually look up JavaScript underscore library, I think should pull us up the documentation. So, yeah, so you can find underscore JS and it will walk you through all the different, you know, all the different things that are available inside, you know, what can you do on arrays, what are the functions that are available, what are the objects that are available and you can go through and look at this reference and you know, you've got utilities. And so like you saw earlier, one of the things that I did on arrays is give me a unique array. And let's see. Yeah, so that is this unique function for array. So I can say, you know, give me a unique array and it will return me back that array. So if my array has 1 2, 1 4, 1 3, it's gonna give me back 1 2, 4, 3, because it has removed the extra ones in that array. And so that's kind of what the unique does. So that's definitely a handy one to have because sometimes you might have arrays that have the same thing in it multiple times and really only want to run through the uniques. And so that's what I use that. But there's other ones in here. So it's always good to know that the underscore library is included. And there's a bunch of utility functions in here that you can use. The other ones that are nice and underscore are debounce and debounce. And let's look it up real quick. Okay, debounce. So debounce is a way inside of underscore to say, hey, I only want to call this function one time every so often. And so, you know, that way if somebody's clicking on a button or something that you've created and you've got custom JavaScript tied to that button, click. And you don't want that same thing to fire a hundred times because somebody got click happy. Then you can actually call the debounce function to say only call it. Only call this function once every so often. So even if somebody clicks 100 times, I'm only gonna actually call the function once. It's useful for. Very useful for things like doing a resize of a window, like is the case here. You don't want that to happen. For every pixel that somebody resizes the window, you don't call the same function. You just want to call it once every, you know, say in this case it's every 300 milliseconds. So if they, if they, you know, once every 300 milliseconds, do a recalculation of size. That's debounce and that's included in underscore. And that's one that I've used quite a bit in different functions to not have an effect happen over and over again. When somebody does takes an action, maybe only call it once after a certain period of time has elapsed, or once and then elapse a period of time before we look for it again. So hopefully that's helpful. Okay, so let's jump back in here and let's so far, if you all could just give me a thumbs up in the chat or unmute yourself and just say, yep, this is making sense so far. Or if you have any questions, feel free to throw them in the chat. I'll answer them as I can. Dan says we're good. Awesome. So hopefully, you know, the goal here was just to kind of walk through some of the foundational elements and then, and Jeremy says, keeping up so far. Awesome. And so I just want to lay some of the foundational elements, some of the things to be aware of that these are things that exist across the board in programming languages specifically for us in JavaScript and jQuery so that, you know, okay, I know I can do a for loop. What's the syntax on a for loop? So then you can just go in and say, hey Google, give me the syntax for a JavaScript. Oh boy. For loop. And so we get a JavaScript for loop. And Dan mentioned W3 schools earlier. Stack overflow. Again, great references W3 schools. I think we talked about this last week with, or not last week, but last session about custom CSS. W3 Schools is an awesome reference for JavaScript, for CSS, for all kinds of programming. Actually it started out when I started using W3 schools. It was just HTML and then they expanded into CSS and JavaScript and now they've got pretty much anything that have to do with programming and especially web based languages included here. But so give you the references for JavaScript loops. And so again we've got different kinds of loops. So we've got for JavaScript we've got four, we've got four in, we've got four of, we've got whiles, we've got do whiles. And so there's, you know, all these kinds of different loops and they'll give you the actual structure. So again, so we've got four statement one, statement two statement three. And so here's again a reference. Kind of like what we've looked at is for I equals 0 and I is less than 5 I plus plus so that's gonna loop through five times and output the text or it's gonna add to the text, the number is whatever and break and then it's gonna output it, you know that you can then output that text later. And so you know, and then you've got different, you know, different things that you can do Here with the different sorts of four structures. And then let's see. So these are all kinds of different ones. The for in loop. So for X in person, this would be, you know, for and they give. So this is gonna loop through this object person and it's gonna loop through. The X is actually the different attributes. And so this is gonna say grab the value, the text plus equals the person X. So grabbing the value of the X, which in this case, the first time through it's gonna be F name. The second time through it's gonna be L name. The third time through it's gonna be age. And so it's gonna add to this, it's gonna be text plus equals John. Text plus equals Doe. Text plus equals 25. So that's what this loop's gonna do. So it's something, you know, kind of good to know there. The for of loop is, you know, gonna loop through and do something very similar to that up above. And you know, here's some examples. So, you know, we can go through and look at, look at this array and then it's gonna grab that, it's gonna set this variable equal to the value of this, this array value. So it's gonna loop through each of those elements in the array, it's gonna set that to X and then write the X. You can loop over strings. A string is actually an array. Actually that's, that's a good one we should put down in here as well. Cause variables are variables, but arrays are a type of variable container. So we'll talk about arrays as well. And then let's talk about, let's talk about objects, since you're going to reference those quite a bit inside of JavaScript and all kinds of languages actually. So arrays are sometimes called a hash. And then we've got objects, and objects have properties which are sometimes called attributes. And so we can see here, you know, that we're going through those things. And again, we've got while loops. And so this one. Actually, let's go to the next page. I'm not sure why this doesn't look quite complete. So yeah, so here's our while loop. So an example of while I is less than 10, then, you know, this is similar to what we did with the for loop earlier, only this is a little different way to do it. So you're actually increasing the value of I from within the loop. So while I is less than 10, then do this, do the work that's inside here. So it starts out so you would probably what they don't show here is that you should set that variable of I up above I equals 0 or something like that. And then so while I is less than 10, then you know, set the text and the number is whatever the value of I is in this current iteration and then increase its value by one. And so but this could be. Doesn't have to necessarily be an entire evaluation here could be just a variable and you could set that variable equal to true or false here. This is just looking to say while this, this evaluation is true, then do the work within and once this evaluation returns false, then stop doing the work. And then the alternative of that is the do while is that says and so the do is always gonna execute at least one time. Um, it's very similar to the while loop. The while loop just may never execute if this statement isn't true the first time through. The do is always gonna execute at least one time. And then while this is true, it's gonna do it again. And so the just slight different variations are pretty much the same thing. So we've got whiles and do whiles. Whiles are the most popular version. You'll use those the most often. But do while is something to keep them. Keep in mind as as far as an option. So I'm gonna go throw. Go ahead and throw those in as our different types of loops. We did while loops and we'll throw do while in here as well. And then we've got. We have our 4 in and 4 of JavaScript types of loops there. And so great reference here. So this is what I often have to do is just say, okay, I know I can do a loop. I know I want to do a while loop. I might need to go and look up the proper syntax for that. Or I know I want to do a for loop because I want to count through this 10 times. I can do this as a four, I could do it as a while. So let me go look up the syntax and just do a Google search for the syntax. But it's important to start with knowing what's possible to do based on your constructs. And then from there you can always look up the syntax and you know, so there's a lot of different ways that you can do that thing. One other thing I'm gonna throw in here before I forget about it. And that is. And we'll get to it in just a little bit. But we're gonna put in here Try catch blocks. And so the that Try catch is hey, I want to try doing something. And as long as that thing doesn't fail, then go ahead and do it. But if it fails, I want to catch the failure. So I don't actually just bomb out. I don't cause an error to happen which causes my code to stop executing. So try catch as a safety net to keep your code from actually bombing out and causing your page to stop functioning properly. So we'll go through those in a little bit as well. But W3 schools, great reference. Google, great reference. A great way to find references on specific libraries like Countdown or a moment. I reference the moment JS library documentation quite often and trying to do different things, calculate different times, what kind of, you know, what, what are my formats? So like if I go and look up moment, Go and look at moment js, then it'll find me the docs for moment js and then you can actually go in and it will show you, hey, here's all the ways to include moment. It's already included in Clickfunnels, so you don't have to do that. And these are the different things you can do. Okay, so you can parse, you can parse times, you can parse strings. You can get, you know, get the current timestamp just by calling now you can, you know, give it a string and it'll turn it into an actual date object you can work with. And so here's the different string formats you can pass in that that it knows how to parse. You can format a string into a date, you know, or you can tell it. This is the string and this is the format of my string. So these are the parts of the date. So this is a good reference. A lot of times is to say, okay, what do the. I want to define something as, you know, year, day, month. How do I do that? Well, here's your reference of which letters represent which part of the year or the date or the time. So here's all the different things. Week, year and weekday tokens. Here's your locale tokens, here's your hours, minutes, seconds tokens, your time zone tokens. So you know how to signify that format. So I don't try and memorize these at all because there's a lot of different ways to do that. So but you can come in and actually know that you can go to the reference. You just need to know, hey, there's a token that represents a long date format. Llll I just need to go and remember what. I need to go and look up what that token is so I can actually output it. And so that's what I did when I wrote this code for the CFDate replace Pro. You can see here that I've got a long date format is one that you can output. So I've got. Okay, I know I can format this date, this moment, I can format it and I just need to pass in what my format is. I want returned and it will do that. I've also got one called long dash date or I actually have one where I can give it. I'm defining my own format here and I'm passing in all these variations. So the day DDDD is the full day name. Month mmmm is the full month name. D is just the single digit day number. So instead of being 06 that would be DD. It's just a single digit if it's a single digit or double digit if it's a two digit like 13 and then a four digit year. So I know that all of these things are combinations that I can find in here and it will tell me what those, what all of those things mean and how do I get them. So the day of the month, you know one to 31 day of the month with an ordinal. So that'll come. You know, D lowercase O is kind of nice. It'll be first or it'll be second to nd. It knows how to calculate the ordinals. So yeah, so there's all kinds of cool things that you can find inside the documentation. So those are important things to just know. Know what your constructs are, what's included and then know that you've got the power of Google and these references at your hands. W3 schools stack overflow the actual library documentation in moment is very, very good. It's one of the libraries that we use quite a bit. The library documentation and countdown is decent. It takes a little bit of figuring out sometimes but it's at least you understand what are the different functions that I can call on my countdown? How do I pass in a new option value? How do I change an option value name? How do I retrieve an option value to see what it currently is? There's, there's different ways to do this thing. So just know that looking up your reference is going to be your friend. So okay, so let's jump, let's close some of these things down and just know that when we need to look them up, we'll know how to go and look them up. So let's talk about arrays because we didn't really talk about arrays. Arrays are a grouping of multiple values and so an array would be, you know, say you want to create an array of animal types. Then you know, you would have, you know, something like dog, cat, llama, horse, big. Okay, so this is an array of animals. It's just a set of things, right? And so these are string values. Each one of these is string. So you can have an array of strings, you can have an array of numbers, 1, 2, 3, 4, 5. So these numbers could represent a value of something. So they could be the counts. They don't have to be in sequence. They could be, you know, the first person that bought spent $100, second person spent $200, third person spent $3, the fourth person spent $404 and the fifth person to go through spent $50. So you know, this could be an array of purchase values. You know, you might need to grab those for some reason. You could do that. So this is just an array of numbers. And also have in JavaScript you can have array of mixed things. So you can have dog, 175, cat, and then you could even have an a variable X in there and you could store all these things. They're just. JavaScript is an object oriented language and it's a, it's loosely defined so you can, you know, you don't have to say, hey, this is an array of strings in advance. It's just an array of stuff. It's an array of objects. And a string is an object, a number is an object, a variable is an, can be a string or number. And so it can be stored here. So this is just an array of stuff. And so then that gives you a way to store that collection of stuff so that you can reference it later. And then what we can do is say, okay, so I'm gonna, that's an array of stuff. So I'm gonna say my bear, myarray equals dog. Or let's say my animals equals dog, cat, horse. Okay, so that's my array of animals, right? And so what if I want to output, I want to grab whatever's stored in my second animal spot. In JavaScript, arrays are what we call zero indexed, which means if you wanna reference the first element, it's actually element zero, element one and element two. So I would just say my animals and then I would give it a number, an index number. So my animals 1 is equal to cat, my animals 0 is equal to dog, and my animal's 2 is equal to horse. So this is the index of the number in my array. So my animals is an array. So I can say, okay, Well, I wanna grab my second or my. I wanna grab actually my third element. I wanna grab my element that's in index two, which is actually my third index. My third element, I wanna grab its value. So that's how you would do that with an array in JavaScript. And so that's kind of an array structure. Hashes, you really don't. They're not called hashes inside of JavaScript. That's more of a Rails or Java way of kind of managing arrays. And those are generally referenced as more named arrays. But in JavaScript you can also name things. I'm actually gonna do this one inside of a new script window here, and I'm just gonna have a little shortcut that creates this as JavaScript. So in this one I'm gonna say var my object equals. And in this case we do the curly brackets is the way you would define an object inside of JavaScript. And this gives us the ability to have named associations within this. And so we can say, so this one you saw earlier, something like first name, last name, age. So we could call this my person. So in this case, my person first is equal to Jamie and then a comma, and then last is equal to Smith, and then age is equal to 45. And so this is an object reference here, an object definition where first. And you'll notice that I don't have this in quotes because it's a simple definition of just one word, no special characters, no nothing weird. It's not a number. You can do that without the quotes, but you could also do the same thing and have quotes around it. And you could do single quotes or double quotes there and then a colon. So this is the name of this element or this, you know what we'll call an attribute or a property on this object? This is the name of that property. This is also called the key. So within this object, the key of first has a value of Jamie. So this is the name of your key. And so, and then the colon, what comes after the colon is the actual value. And so, so the key of first has an has a value of Jamie, the key of last has a value of Smith, and the key of age has a value of 45. So in 45, here is a number. If we store this with quotes, it's actually the string 45 without the quotes, it's the actual integer 45. So it's important to know the difference of those things inside of JavaScript because you can do math on a number, you can't do math on a string. Or if you do, it's not actually going to turn out the way you think that it will. So it's important to know and you can evaluate these things. So when you're looking at something like if saying, oh, if my person age less than 45, Something like that, you say, hey, if my, if my person's age is less than 45, then output holy cow to the data log, then you can do that with an integer. But if you made this a string that's not gonna evaluate to the same thing. Cause then it's the string 45. So it's gonna try and evaluate the math, add up these, the characters, and determine whether the characters are greater than 45. And that's not necessarily gonna evaluate the thing that the way that you think it will. You would first have to convert this string, you would have to parse it and then turn it into an integer to do the comparison here. So it's important to know the difference between strings and numbers when you store them in JavaScript. So anything when you put quotes around it, whether it's single quotes or double quotes, those things are strings. And the math on those is not the same as if you didn't have the quotes around them. And it's a number here. But at the same time, if I don't put quotes around Smith, then I'm gonna get all kinds of error because that's not a valid value, because that's considered an array or I'm sorry, a variable name. It's looking for a variable name called Smith. Just like this is a variable, it's looking for a variable name Smith or a function named Smith, something that's defined, that's an abstract thing called Smith. And I don't find that anywhere. So I'm gonna throw an error saying, hey, you're trying to reference something called Smith that doesn't exist. And so it's just gonna throw an error in your code. So if you wanna use the string Smith, you have to surround it with quotes of some variation or another single quotes or double quotes. And so those are the kind of things that you'll need to be aware of for object representation. Another important thing that is important to note with this object representation is that this is, in some languages this would be called an associative array where you can actually have names. So like in php you could have PHP. And we could have an array that is just, you know, we could have this be, okay, my strings key one equals value one. And it's not gonna color code right here because this is Considering it's HTML, not, not php. But this says, hey, for key one, which would be key one, here's the value. So it's a little different way of doing the same thing, but in PHP it's called an associative array. It's actually a named keys and then values associated with those things. So this is the way we do associative arrays. So if you ever have to look up something like that, just know that associative array is as a term that's sometimes interchanged with this object notation here inside of JavaScript. And so we've got this set up, but there's a couple different things that we have here. So age works well with this dot notation for an object. So an object, you can reference its properties by having the dot. So we could say myperson last myperson first, and those will reference those things by those attributes as properties by name. But in some cases you need to have a plus in here first name or a space in here. Well, you can't have last space name that is not a valid key because it's got a space in it. Your keys cannot have a space in it. In this representation, we can do that with quotes around it because you can have a string that represents the key name, but you can't have a key name without quotes that has a space in it. So what we would have to do there, if we wanna grab first name as my key value, I can't use myperson first name because that's also not valid. But what I can do is now instead of using a dot notation is actually go in and use our array notation, which is our square brackets, and then put the quotes in there. So this is our key name here, so we can actually reference it that way. And so it'll pull that value for that first name field. And so, so those are important things to know. There's different ways to access these variables based on what you need to store. And so it's, it's important to know sometimes it is valuable to store these things in this way. You might want to output both the key and the value. And so if you need to do that, your keys might want to have, you might want to have them be a little friendlier. And sometimes you're defining things about an object and you don't know in advance what the key name is going to be because you're looping through something else. And it may have, you know, it may have values that can't be stored as a key name without using the quotes and so you're gonna actually, you know, you don't maybe, maybe know what those key names are yet. And so you can use this array notation to get at those keys. So it's two different ways to get at the exact same piece of data. So that's an important thing to note the difference of when it comes to JavaScript. You have array notation, you have object notation, and then you have, this would be a general object way of getting things, dot notation. And then you have this is our array notation, but you can access the same thing. So just because something is an object like this doesn't mean you can't use the array notation to get at the keys, these keys. And then also you can do this, you can say my person zero is also gonna get that first key. And so, yeah, so there's lots of ways that you can get around that, those keys. And so it's important to kind of keep those things in mind that there's different ways to access that data. So that's a raise. Is that, is that kind of making sense? As far as arrays, those can be a little bit of a complex topic, but they're very, very important. And you'll see that when we do things like Promo code Pro. Let's just pull, let's pull this one up. You can see here that I'm actually using a combination of arrays. And so we'll notice here that we've got the square brackets is an array. It defines that, hey, this, this thing that I'm including here is going to be an array of things, but array of objects that include keys that include arrays. So it gets pretty ugly, a nested structure, but it gives me the ability to really define and fine tune the data that I have here and know that if I give things a certain structure, then I can loop through this array and take action on each one of the things. And then I can loop through those keys and take action on the value of those things and I can loop through those values and take action on those things. So this is the structure of the setup for how you define the data around promo codes. So we've got an array of promo codes, objects, and each of these represents a promo code. And within that promo code we have the codes and that's an array of codes. And then we have regular price products, and that's an array of products. So we can actually define 1, 2, 3, 4, 5, 7. Here we can have, you know, 1, 2, 3, 4,. 5, 8. We can have an array of product IDs, we have a Promo key that has an array of product IDs and then we have a description that's just plain text. And so these are the way we define, you know, our different. You know, I configure my different add ons is by nesting and combining these structures of arrays and objects and even arrays within those object keys. The other thing that we might notice here is that when we're using single quotes, we need to be careful of if we need to use what you know, we have the concept of quotes and we have the concept of apostrophes when it comes to the English language. But as far as code's concerned, they're the exact same thing. It's the same character on the keyboard, even though they might represent something different. This is an apostrophe in President's Day. It's also a single quote. And so if we don't identify that specially inside of this single quote, then it's just ending this previous single quote. And we'll notice now that our code highlighting has gone haywire because it's not looking at the first and the last single quote, it's looking at the first and the next single quote. So that ends our quote. So this in the green, that's a valid, that's a valid string. But what's outside of it here is not a valid string. So but if we do this the backslash, then that actually escapes the this and just says, hey, just evaluate this is for what it is. It's just a single quote by itself. It is not part of this quote pair. The other option is in that case just do double quotes around because you can have strings with double quotes and then you could just have a single quote and that'll be just fine. That double single quote then is not gonna cause any problems. So that's another way around that. So if you ever run into cases where man, I really need to use a single quote in this, but I've got single quotes already, just swap out your quote types and strings can be either single quotes or double quotes. And then it's what's within them that is important. So those are kind of some important gotchas that I run into every once in a while that people aren't always aware of is how do I deal with those single quotes? So backslash will take other care of the problem. It escapes that or you know, just switch, switch out your code or your quote types. So yeah, so is that kind of all making sense so far? Arrays and kind of objects and properties and attributes on those objects and and how those things work. If you could just give me a. Give me a yay in the chat or. Yep, okay. Dan says yep, doing good. Okay, good, good. And then one other thing that is important to note is if we're looking at this, the other thing that we can do on is to even combine these things even further is we have functions and we have methods, we have variables. So, you know, we could have age, we could have birthday, we can have that be equal to. Oh, and I have to have a comma. That's the other thing that we'll notice here is that each of these is separated by a comma, just like our array. So if we were doing this as var, my person equals an array and it's Jamie Smith 45. And we could say, you know, 0804 1974. And that's how we represent this in array. But now we don't have the benefit of the named keys, right? So that's why we do this as object notation. So we can say, hey, if I wanna pull up just my person's age, I can go straight to that by name instead of saying, oh, well, that's. I know age is always the third key, so I've got to grab key three. Or the value of that's in. That's in index, my third index, and grab its value. We don't have to remember that. We can just do it by name. Because these things may not always. You know, we may be programmatically adding these values and we may not know whether it's gonna be the third element. So we wanna do it by age here and we wanna do it by name. But we could add. So that's just kind of the difference between object notation and array notation. But for this one, we want to say, hey, birthday. I may have this defined up above and may say there, my birthday equals. And it could be a string. 08041974 I could have that defined there. And I just might say my birthday is equal to. Or the birthday is equal to my birthday. So now that's a variable. So that variable grabs the variable value and assigns it to this key. So we have variables stored there. The other thing we can do is we can have something like callback. If we have an object and we wanna say, hey, after I do something on this object, I have a function, or we just call this say my function. And we can actually define a function here. And so now we have a an anonymous function within this object called myfunction. And so now if we wanted to ever Output to the console we wanna call. Yay, I called the function. Then we can actually just say my person.myfunction and call it. And it's actually gonna call that function. And so we can store all kinds of things inside of this object notation. And so that's kind of how you know, this objects works. We can, you know, arrays work. So you'll notice this structure sometimes within. See, we've got another one Slider. So slick Slider. So inside of slick slider. Let's see. You know what? I don't think I have it contained within here. I think of another one where we had. Where we actually have a function stored on different things. But you know, this is something that you'll might notice in other libraries as you're using them and you might notice them, you know, so it's good to kind of understand that, okay, I can pass in a function call to a key and then I can actually use that, you know, later on. And it could be based on. And this can actually call, you know, and use variables from this same object inside of this function. So it's kind of a cool way to have things self contained. So just some, you know, important notes, kind of some foundational stuff. There's so some examples and let's see here. And so I think, I think that pretty much covers as long as you guys are. Is this definitely. I know Dan said, yep, we're doing good. Is this all making sense? Is this useful so far? Do you feel like you're getting a good kind of understanding of foundation? Because what I don't want to do is get past this foundational stuff and then get into the, you know, kind of deeper examples and then have it really not be sunk in. So if I could just get a quick thumbs up from everybody. Yep, this is, this is making sense and this is helpful. That'd be great. I'm gonna take a quick drink here. Give everybody a second. Yep. Dan says making sense. Hey Jamie, I wonder if you could just really quickly, I think this would be accurate. Explain how when you call that my function key, you could put a variable in for the function that would insert into what you print to your console log. Okay, so you're wanting to say. So grab, you know, say a variable name from. From here and output that into the. To the log. So and I. This would be one of the cases where I would actually probably test this and look up the exact syntax. But off the top of my head, I believe what we would do in that case is say this dot, say we Want to output birthday. And we would output this. And I would probably do something like my birthday as a string here and put a space and then do a plus. Oh, there we go. So let's actually just try this. So we're gonna call my person. This is another cool thing. And we'll actually go through. And so my person, my function. I believe that's the way we need to call this. And so let's do this. So we're going to grab these things and I'm going to go into. I'm just going to go into a page here. I don't think we have any jquery here at all. So we don't have to have that jquery. So I'm just going to call. Let's open up our inspector here. So we're inside of a browser, we've got a page on it, and we just got some JavaScript code and we want to run this JavaScript code and see what happens. And so I'm just going to paste in that code and then I'm going to hit this and you'll notice that that's what's happened here. Now I've had code that set my birthday. I set. Created my person object. I created a my function key and then I called myperson myfunction and I call that function and an output to the log, the console log that method actually prints to this console log printed mybirthday colon plus my colon space and then a plus which means take whatever this value is and add it onto the string this birthday and I get the value of 841-974. So this birthday represents the birthday key of the current object. So that's. This represents the current object and birthday equals the key on that current object. So that's how you would do that. Does that kind of answer the question? Yeah, that's. That's cool. I was. What I was thinking is where it's got my person myfunction parentheses. Could you put something in that parenthesis? Oh, absolutely. Yep, absolutely. So we could do something like yay. And so then. But what we would do then is within this function, we would take that. We would take param1 and then we would output param1. And so now we can go and we can run that same thing and we would output that. And now we output yay instead. So we're passing a parameter value into my parameter and this function is defining what parameters I want to pass in. And then I just use that same value here as a variable name. Yeah, exactly. That's what I was. I thought that I was correct, you know, But I wanted to actually see in action. Yeah, sure. Yeah. So, yeah, there's. And that's kind of the cool thing about this is there's lots of different things that you can do with this, and there's lots of different ways that you can define things. You know, another thing that you could do this that you'll see and done slightly different ways is the other thing is you can. You don't have to set these keys up all in advance. So that's one thing we have here, is we've set up all these keys, right? And so we could. But we can also say, okay, where my person equals just an empty object. I wanna say, hey, this is an object. And then we can say my person.first equals Jamie. My person dot last equals Smith. And then my person dot my function equals. And then do my function here. And then, you know, console log. Oh, sorry, pram one. And then. And then we could output my person, my function. So just a slightly different way of doing the same thing. And now if we go in and let's refresh this page to kind of reset everything. Now, if we paste in that code, if I did, my don't have any syntax errors. Yeah. So now we basically are doing the same thing, but gives us a slightly different way of setting this thing up. So we've started with an empty object and then we've added keys to it. So we can add keys, they don't have to be predefined in advance. We can add keys to it. The other thing we can do is we can say, in this case, my person first equals Amy. And so that was defined out of the box as the first key. But then I want to change that. And now it's going to be Dan. So now we've started with something. And now I might want to say, in this case, I'm going to output this first. So now we can go in and say, okay, so I started out, my first was. First name was set to Jamie. And then encode, I updated that to Dan. And now let's see what we get output here. If we go and run this again. And so now it's gonna output Dan, because I overwrote the value of my first key here with a new value of Dan. And then again I'm calling this dot first. So it's grabbing. This is the current element that I'm working on, the object that I'm in. And then I'm gonna grab the first key off of that and output its value. So yeah, so just a few different kind of structural ways that are doing kind of the same thing, but depending on what your logic is doing in your code, we'll modify how you actually need to use these things and group them together. You may not know what your keys are right off the bat, so you may not be able to define them up here. You may not know what the values are yet, but you may be looping through something and adding keys and adding values based on something else on the page. So, and for example, as I go through and say if we pull up our order summary, let's grab our latest version of this one. So we'll grab this one and let's turn this to HTML. So on this one, as part of the rebuilding the order summary, I actually go through and I create a new, a new object called CART Prods. And I'm looping through, I'm going in here and I'm saying, hey, go, go to the CFAR form on this page and we'll go through some specific on this one maybe in the next session, because we're already at two hours. I think we'll probably end up splitting this for sure into multiple sessions. But it's looping through, it's going to the CFAR form, which is kind of a hidden form. And I think we went through this last time. There's a hidden form on every Click Funnels page called the CFAR form. And it stores things like the products that are on the order. It stores things like the affiliate ID of the person that sent the traffic, stores things like the first name, last name, email address, all that stuff gets stored there. And then when you submit that form, whether you're it's an opt in or an order form or an OTO page, when that an action gets taken to actually store that data, that form gets submitted to the back end of that page so that the data actually gets stored in the database. So in this case, I know that when somebody purchases a product, that product gets added to the CFAR form and the field that actually stores that value is, it has a, it's an input field and has a name of purchase product IDs. And then this is again, it's an array notation. So this tells Rails on the back end that this field could contain multiple values and so to process them as an array. So I have an array of product IDs here. So, and look for the ones that are checked. This colon checked is a pseudo selector in jQuery. This doesn't work in CSS. So this is one of the ones that works in jQuery but doesn't work in CSS. Is this colon checked? So jQuery knows how to find items that are checked. CSS doesn't necessarily know that. So find me all the checked product IDs on my CFAR form and go through each one of them and call this function on it. So we've got an anonymous function here. And this anonymous function is gonna first take this, which is the dollar sign. This is saying, hey, jQuery, work on my current element. So whatever element you selected here, the each, it means it's working on one element at a time. So this means grab the current one that we're working on and grab its value. So we know we have an input field here. So it's gonna grab its value, which is gonna equate to some number. And then if the cart prods, which is an array I have up above or it's an object. So cart prods is an object if it has its has own property. Meaning does this item, does this object have a property of product id? So if I've already, if I know this one already exists in this object, then I just need to add one to its quantity. Otherwise I need to create on cart prods, I need to create a key and set its quantity equal to one. And so otherwise I just need to update its quantity and add one to it. So this gives me a way to say for each different product ID on this order, figure out what the quantity is. And so as I loop through these items, either add one to the existing quantity or if it doesn't already exist on the order, then just set a quantity equal to one. So this is kind of a way to loop through and search within this object and set values on the object. And then I use these things then to go through later and say, okay, now go through each one of my cart prods, each one of the items in there and find its quantity, find itself product id, and then loop through those and then do some work on that. So yeah, so lots of cool things that you can do with products and jQuery and kind of combine in these things. So, yeah, so hopefully that's making sense and is you can kind of, kind of see the power of these things and these combinations of the different constructs that we have, especially when you combine them with the power of jQuery, which is find the elements on the page and take some action on those things. Like just for this example, which is like, hey, find me all the products that are already attached to this order form and loop through them and then store them, store the information about them. So then I have a structure that I can loop through later and take some specific action on those things. So that's, this is kind of a good example of that combination of our basic constructs with jQuery and with, you know, a little bit of ingenuity and creativity on the logic side of things and being able to do, you know, add the magic to the page that doesn't already exist. Okay, so we've kind of went through that. We've kind of gotten our, you know, our basics here. We've talked about objects, properties, attributes are very similar to arrays. But you can see that we do have a little bit different way when it comes to objects. In this case, I need to find out does this product, this product ID already exists. So I have this, a different function called hasown property. This is built into JavaScript and so I can, you know, just call that, see, does this key exist? So that's what we're calling it a property here. So that's why it's kind of important to know when it comes to objects, what are the things on those? So we call those keys, we can call those properties and see if I can get back to my example code here. So we'll call these properties is what they're often referenced as well. So as you're looking through and again you can go through and just do a quick Google and say JavaScript, Does object have property? Which is exactly, you know, properties or property and how to check if an object has properties in JavaScript? You know, it's going to go to Stack Overflow, which is very common and then you can see. Oh, okay, great. So, oh, I can loop through each, you know, hey, I've got an ad as my object here. So I can say for var prop in add, if add.hasown property prop then do something. So this is how you could loop over those things. So this is the for in loop that we talked about earlier for prop. For every prop in add. If add has own property prop then it goes through. So, so yeah, so this is kind of just a quick way to know that, okay, I know these things exist. Now how? What's the syntax I need, what's the structure I need to put them in and hit up Google. And Google will help you find these things. It does not, in my opinion, it does not make any sense to try and memorize the code. In fact, it's almost impossible to memorize Every potential structure that you have. I've been doing this for 20 years, writing code, and I can tell you that I don't have any, any language memorized. We often have to look these things up to find the things that you want. What's important to memorize is the concepts and the constructs and then to commit to memory. You know, things like, you know, even within click funnels, like, okay, I know clickfunnels has certain structures of how they do things, how things are nested. I know that they use bootstrap. So I know if I, if I can find particular bootstrap classes on the page, I know that I can use those for css. I know that they use Handlebar or I know that they use Moment, and I know that they use Countdown. So I know that I can look those things up. Those are the things that are important to remember and to make note of that. Okay. There's a certain way of doing things within click funnels, and as long as I can remember those things, then I know I can go look up the syntax for how to use those things together with, with each other. Okay, so I think we've pretty much. And Dan says if you remember as a language, they will change it all tomorrow. Yeah, absolutely. JavaScript has changed dramatically since I first started learning it 20 years ago at first, you know, and HTML has changed. We're now in version 5 of HTML, so it's changed dramatically. The elements that exist now didn't exist 20 years ago. And a lot of the elements that existed 20 years ago don't exist today inside of HTML. And so, yeah, things change all over. Yeah, and exactly. CSS is on version three now and they're already working on version four. So things constantly change when it comes to the web and it constantly change when it comes to programming. And there's always new languages coming out, there's always new libraries coming out. So definitely makes no sense to try and memorize that thing. Those things. It's just more important to, to know the concept. And, and, and that's why we often call things pseudocode. So that's why you see me writing here. Things like, if this equals true, do this. This is not code. This is not valid. We could not evaluate this. But it's a pseudocode that you can say you. And this is where even if you're going to take this information and use it to hire somebody else to write the code for you, if you understand the constructs, you can actually go in and do pseudocode where you can say, okay, basically I need a program that does something like if this, you know, if my name equals Jamie, then do some work. Else do some other work. So you can, you know, pass that off and you could, you know, you could define this work a little bit better, you know, you know, store or, you know, you could say, oh, split the name into pieces and then otherwise just store the value. And you could say, if my name. And you could even do something like, oh, if my name dot contains a space, then split the name into pieces. Otherwise just do store the value. So you could hand that off to somebody and say, hey, this is just pseudocode, but this is kind of what I want to have happen. I know this is possible. I don't know what the syntax for a dot contains is in JavaScript exactly, but basically I want to say, hey, I've got a variable, I got a. My variable. My name is equal to, you know, dollar sign. It's going to be input name equals name. And so, you know, just figure out whether my name contains a space and if it does, split the name into pieces. Otherwise just store the value that you have. So this is just some pseudocode, but you can hire a custom, you know, hire developer and say, hey, this is basically what I need to do. I don't know exactly the syntax, but here's what, here's kind of the concept of what I need to have happen. And they're already going to be light years ahead of where they need, you know, where you want them to be, it's going to take much, much less time to get that work done because they're like, oh, okay, yeah, that makes sense. I can, I can figure out the syntax for you. You don't have to know that. But now I know exactly what you want to have happen. So you can take these things, these constructs, and even if you just write out pseudocode, which isn't valid code in any given language, but it's close. It's close enough for a developer to take and say, okay, yep, I can take your pseudocode and make it actual, working, functional code. So that's the other thing that we can do with these constructs. Even if you never use it to write a line of Your own custom JavaScript, you can easily at least use the constructs and the concepts in the basics to write out pseudocode that you can hand off to somebody else or even to build it out for structure for yourself. Start with, and a lot of times I will start with something like this as just pseudocode and just, I need to do a brain Dump for myself a brain dump of, okay, what do I want this, this thing that I'm writing, what I want this program or this custom add on to do. I'll write it out as pseudocode first. Basically. Okay, yeah, I need to grab a few pieces. So I'll start with. Okay, let's define out what my variables are. Variable. You know, I got my variable one. You know, it's. I mean, I need to store several different things. I need to store their last name. So I'll do that very first name. Okay, I want to grab that because I'll need that for something else. I want to grab their, you know, shirt size. So let's grab that and I'll figure out where to grab that at later. But at least I need to know these things and then I need to figure out from there. Okay, if the shirt size is small, then I probably want to do something different than if it's a large or if they didn't fill in a shirt size. I need to make sure I have that. So I want to make sure if my shirt size is empty, if it's still empty, then I need to display an error on the page or display a message that says you have to select a shirt size. So you can kind of go through and write those things out as pseudocode. And then, then jump in and look at the specifics of the page and say, okay, now how am I gonna actually put this selector on the page? Because this may change. I may, I may not have a selector yet. So I may start with, you know, name equals shirt size, but that may not actually be the name of that input yet. I may know that. Yeah, I want to kind of basically grab a value of the shirt size field, but I don't know what shirt size is actually gonna be called yet. So then when I get in actually building out my funnel, I'll know. Okay, once I grab and insert my custom input, I then I need to grab the name I use there and then I'll put it in here and then that'll work. So, but I start with pseudocode just as a. Like, let me lay out the framework of what I'm trying to accomplish and then I'll go back and clean it up and make it actually function. So. So yeah, so that's what we do with constructs. We kind of, you know, build out these things. We can use it to. We know we've got all these things at our disposal, so we can kind of set them up and we can then use them as pseudocode and go through and make them actually functional from there. Just one thing that we didn't cover that we'll want to cover real quickly. And this is one where actually every time that I need to use this, I actually go and I look up the reference on how to do it. Switch is the same way switch is. You know, I always go and like, oh man, I always forget what exactly is the syntax structure for a switch inside of JavaScript? Because a switch in JavaScript is structured slightly differently than a switch inside PHP is slightly different than a switch inside of Java. It was slightly different than a switch inside of C. The syntax of them is always slightly different, but I know that they exist. Try Catch is the same way, but let's walk through the actual Try catch statement and see what that is. Again, I've mentioned Try catch is just a safety net. It's like it's I want to try and do this thing, but if this thing fails, I don't want it to bring down the whole house of cards. I just want to then gracefully exit and I'll do this thing. A lot of times if I'm trying to call out to an external service, like if I'm doing an AJAX call to Firebase or some sort of external service, or I'm trying to submit the existing the item that's currently on the page, say I'm trying to submit the opt in form as it is to clickfunnels via the backend that may fail. I may not be able to get to the back end or they may not have the right data or may return some sort of an error to me, but I don't want my whole page to stop functioning as a result, or I don't want the rest of my code to not function. So I'll wrap that in a Try Catch block. So I might say, hey, I want to try and set my person.age = some undefined variable. Um, and so I wanna try that. And if, hey, if this fails for some reason I'm gonna catch and we're just gonna call this E. This is just the error that's being thrown that's stopping this thing from happening. So we're gonna try to call these functions and if for some reason an error is encountered, then I wanna catch that error and then I want to do something. So then we can just say, hey, console, log my E. An E will usually have properties on it. So usually there's going to be a message on the error. So E message is going to output the message of that error, but the first thing, what I would try and do is actually output the E and see what that is. And then from there, you know, you could also console log individual elements within that. So this console log E message. And so in this one we could say, okay, so we're gonna, let's go ahead and say my person. So we're gonna define my person. So we're gonna define my person. And then let's just try and run this. And now if I go back into here, refresh this page and right now I can see in my code I'm trying to set myperson age, which is totally legit. It's not defined yet, but I want to set it. So it's going to add that key, but I'm going to set it to some undefined variable. Well, some undefined variable is just that, it's an undefined variable. So JavaScript's not going to be happy about that. So it's gonna throw an error. So I want to try and run that and see what happens. And so I've got that here and now, now it's gonna tell me some undefined variable is not defined. And so that's my message. So this is my E that's being logged and this is the message of that. So this whole reference error piece is my actual E that's being spit out. And this is the message part of that. So but it didn't stop everything else from functioning. So if I put something after this and say console log, yay, I reached this. And let's say I didn't put this try catch in here. I'm just gonna comment these things out. So these are some other important things to note is there we've got comments. So there's a few ways to do comments inside of JavaScript. The slash slash is a single line comment. So this comments out a single line. So you notice this, this line is grayed out. But this line is not because I put a slash slash in comments out a single line. If I put a slash star, it's actually considered a multi line comment. And then star slash ends that multi line comment. So now I've got just one comment. Start here. Let me actually get rid of these. And so now I'm saying okay, so comment out starting here until here I want everything commented out. And I actually shouldn't do this. I need to do it this way. So there we go. I need it to be after that bracket, otherwise the bracket would be outside and throw an error. So right now I just have my person is defined. My person Age. I'm trying to set it to some undefined variable and then I want to output to the console. If I get to this point, I want to say, yay, I reached this. So let's try and run this. And now if I refresh this page and I go in here and I spit this out. Notice I never got a message that says, yay, I reached this. All I get is an uncaught reference error. Some undefined variables not defined. So this statement that I really wanted to happen, this console log, I really needed that to happen. It never happened because I hit an error first. So that's where that benefit of the Try catch comes in. So I'm gonna try this and if it doesn't work, that's okay. I'm just gonna output some things, but I still wanna reach this. So now if I go in and I put this in here and I catch this, and now I'm gonna try and run it. Now it's gonna. I can spit out that an error happened. Hey, something bad happened. But I still reached that point in my code. I still hit my console. Yay, I reached this. The error didn't stop us from continuing on with the processing of our function. So that's a try catch. And that's the big benefit there is. If you have things that have that need to happen, or you have things that are maybe slightly dangerous, that, hey, I don't know if this thing's gonna exist yet. I don't know if I have a value for some undefined variable or I know that I may hit an error with this thing. You might want to wrap it in a Try catch statement. And you can actually wrap entire chunks of code in a Try catch. You can have a lot of code in here. It doesn't have to be just a single thing. You can wrap an entire, you know, a lot of code inside of that. You could also wrap. You could put all your code into a function and then just try and call that function here. So, you know, we could. We could call my function here, you know, and pass in some parameter. And then, you know, so now we're gonna try and call, you know, we got my function as defined down below. And now this one might be. So now we might say my person.age equals some undefined variable. So we'll get rid of it here and now, you know, so we. Or we could have a bunch more work being done in this function. But if this function is gonna call this gonna throw an error, we don't know, we think it should work but it might throw an error. So, and if it does, I don't want to bomb everything out. And maybe I just want to put, you know, this one, something bad happened. And I want to output the message of what happened. But now I'm gonna go and I'm going to call this. So now if I go in and I hit this now it's gonna say, okay, I tried to call my function and send in the param, but my function returned an error. It threw an error, but I caught that error and I just output, hey, something bad happened. Param 1 is not defined. And so, yeah, so I tried to insert param1. So it wasn't even a thing that I thought. It wasn't thrown here, it was thrown up here. I tried to insert param1. Param1's not defined anywhere. I didn't send in an actual value. And so it's telling me for analysts not to find, but yay, I still reached this. So this is kind of the power of the try catch is to bring a little bit of a safety net to your code for those times when you don't know if something's going to exist or not. And even if it does or doesn't, if some sort of errors being thrown, you might want to catch that error, do something different, or you might want to just at least not entirely fail and not stop the rest of your program from functioning. You just want to maybe, maybe output that so you can troubleshoot it. Or, you know, maybe you just want to at least know that it happened so that you can go on and do something different. Okay, so. So those were kind of the foundations of those. Some other things that we've kind of seen as we go through this that are important. One other thing that we want to talk about here, and we'll do this up with variables and we'll talk about scope. So we've probably seen now that we have. We have functions, we have variables being defined here and then we have variables being used within other functions. And it's important to have this. We have this concept of scope. We have this concept of layers of an application, especially when it comes to JavaScript. We have, we've talked about anonymous functions. So this is an anonymous function that include that will bring in has its own parameter that can be passed in. So we can pass in and use param1, but we can only use param1 inside of the concept of this anonymous function. If we reference param1 outside of this anonymous function, then it's. Nothing's gonna happen. Because it was only defined as part of this anonymous function. So it's only scoped to within this function. So it can only be used within here. So let's call this a param2. Same thing here. We can use param2 inside here, but we can't use it. It's. It's not available outside of this function because it's passed in here. So let's call this. Call this myparam and let's say this is VAR Param1 equals Jamie. And then we're going to call my function Param1. So now param1 is defined in the scope here. So it's. We've set var and so it's defined within the scope in this point. We have a function created here that's an anonymous function. This is a common way within jquery to say, hey, run all of this code that's included within this anonymous function. Run it only after the page is entirely loaded. So but this is all included with an anonymous function. So we've. So this param1 is available inside of that scope. So we can use it here because it's defined up above as a variable. So we can use it here. We can use it to make this function call. But in here, the, the accepted param is called myparam. Well, this is the value of myparam. We're passing that in. So I can call it myparam here. I can also say param1 here because param1 is defined outside of this scope. So it's available inside of this. But I can't call my param. Outside of here. So let's do this. So let's kind of show a reference of. So we're just gonna add these things to kind of make them easier to identify on the log when they're output. And so we've got Param 1 set up here. It's in this. It's not a global scope, but it's global as far as this function is concerned. So we can set that up. We can also say console log, my person, age. We'll say this myperson first, since we're passing in a name that probably makes more sense. So we'll do this. Okay, so I'll put that. And so now we've got our variable defined here. We've got my function, we've got Param1. I need to define my person or that's not gonna work. So I can say there, my person equals. And so there we're good. So now let's try and run just this we've got our param defined and we've got my person defined, but my param is defined right here inside the scope of this function. It's not available outside of the scope of this function. So this call, though, is outside of this function. So I won't be able to call this variable. So that's gonna throw an error when I try and run it. So let's go ahead and try and run this. And we can probably. We don't need the page, so let's make this big. So we're gonna paste that in and now we're gonna call it. And you'll notice it tells me, okay, so it output param1, which was defined outside of this function, but it's available in the function because it was. It was defined with var outside of here, so it's available inside. So something that was defined outside is available inside. But this was defined inside. So it's not available outside the function. And so that's why you get this re this uncaught reference here. My param is not defined, but I defined it. It's defined right here, but it's not defined in this scope. So that's what this error is saying is that it's not been defined in the scope, so it can't be used. And so we have this level of scoping, and then we also have this level of scoping here above this, we can say bearmyparam equals yay. And so this now is available outside of this. So this has been scoped now globally. It's available on the entire page because this is set to be a global variable. It's outside of the scope of any function. It's outside of the scope of anything else that's going on. It's defined at a global scope. The other thing that we can do, and so if we just call this, we can say var, myparam equals yay. And now that's been defined. And now I can go in and say, okay, well, my param has been defined, so get to the right function of our code here. So now I can run this and I get no error. And the reason I get no error is because my param has been defined. But notice my param value here is yay. So I set my param is equal to yay up here. But here in my function, I have my param called. And then I'm setting, oh, this is actually set to param one. So that's good. So let's actually do this and let's. So we'll set all this internal my param and then let's call, let's actually go back and let's reload this page. And so we get it now we're getting a nice set, fresh set, right? This is brand new reset. Nothing's been defined globally. So let's go ahead and define this globally. Myparam equal to yay. We're gonna set that and then now let's go down here and we're gonna set param one and my person, we're set these up and then we're gonna output myparam. So let's set these and we're gonna call this. And now we can see here that the internal myparam has a value of Jamie and my person H, which should be first doesn't make a big deal, it's just our console log statement. But that's being set to Jamie. But yet when I output myparam here, it's set to yay. So this one again is scoping. So this reference here to myparam because it's out we've got myparam here, but we also got myparam here and we've got myparam way up here. So this is the myparam available at the global scope. This is the myparam that's only available inside of here. And this one takes precedent over the global scope in the inside of this function. And so it's important to keep that in mind because this is not overriding that value. It's just when I call my param here, it's looking first at the local. So this is called the local scope. So it's first looking for a variable called myparam available in the local scope. If it doesn't find one available called MyParam in the local scope, it will go up to the global scope and say, okay, do I have something available called myparam at the global scope? And if I do, then use that, so but first it finds finds a variable called myparam and the local scope. And that local scope variable has a value of Jamie because I set it right here as param1 and that's what I passed into my function. So it's passing that param one value of Jamie. And so that's why my myperson first got set to Jamie. And my internal myparam is out being output as Jamie, which is what we see here. Internal my param has a value of Jamie. But then when I output myparam here, it has a value of yay. And that's because this is saying, find me the global scope variable. And that global scope variable did not get reset because I reset something here. It's outputting what's available on the global scope. So that's our concept of scoping and making sure that, you know, you're referencing variables. If you have variable names that you might use in multiple places, you need to make sure that the one that you're trying to reference and use is available in the right scope. And Dan says there's a way to. There's a way to set a global variable inside a function. I think we've done that. I think I've done that. Yeah, there absolutely is. And so the. What we would do here is if we wanted to reset that global scope variable here with inside of this local function, we could actually say window.myparam equals myparam. Okay? And so window tells us it's. It's a global scope. So look up to the window level, the global level, grab its myparam and then reset it to the local scope variable of myparam. So now if we run this. So let's go back and reset this, then we're going to run this. So we're going to set that global variable of myparam. We're going to set it to yay. And now we're going to go down here and we're going to call this code again. And now we're going to paste that in. And now we can see that all of the values are set to Jamie. Even the global scope is set to Jamie. And that's because I took that reset the value of the global variable to my local version of that variable. And so now my param is equal to Jamie because I redid that. So that's how you reach up to a different scope and grab its value or reset its value. I can also say in this case, I could set. Instead of resetting that, I could. I could just use. So now I've got. So let's go ahead and refresh this page and we'll run. Run this example. So now we can say var myparam and this is setting this up in the global scope. And now I'm going to go ahead and grab this code. Copy that. And I'm gonna run that. And now we can see. Okay, so now we can see. We set that to yay. I didn't reset it here. I just set. So I'm gonna output my internal myparam value, which is Jamie, because I passed that in to my function. So I'm gonna Output that right here. That's my internal myparam. But then I'm also gonna output my global variable value, which is yay. And here I set the first name actual to the global version of that by saying my person dot first is equal to the window myparam. And so that's why my person first is now set to yay and not to Jamie, because I access the global scope, not my local scope version, and then I output that, and then my global is still set to yay because I output my global version here. Even though I didn't have to put window here, it's grabbing those one that's defined in the current scope, and the current scope is global. So window is the way to kind of access those global versions. You can also define them if you want to. Here if I just put var myparam, it's defined, it's outside of any function, so it's global. And so I can also say window myparam here. And that's defined global. I don't want to put the VAR in front of it or throw an error here you don't, you don't define globally scoped variables with a var in front of them or window. You don't say window or var window dot, you just do window dot because window is already defined. So this is like a key on site on top of the window that's already defined. So you can't redefine window. So if you put var window, you're trying to redefine window, and you can't do that, so it'll throw an error. But we can say window myparam equals yay. The other thing we can do is actually define that within here. Say it doesn't already exist, but I want it to. Then I can say window myparam equals yay. And now I don't have to have this code here. I might have a function where I wanted to find a window, I wanted to find a variable in one function that's available in all my other functions. So inside of that function, inside of my function here, I wanted to find this window variable that's available to all my other functions. And so we can say my, you know, function, my other function, my param, and console log window myparam. And so and now we'll just call my other function and we'll pass in the same parameter. Okay, so now we've got this function here that gets called first defines the myparam variable with a value of yay. And then we can go here. And now we can just copy this. We haven't defined. So we're gonna go ahead and clear this out, we're gonna refresh it. And so we haven't defined a window scope variable of myparam yet anywhere inside of this browser. It doesn't exist yet. But I'm gonna call out to this my function that's going to define it. And then later I'm gonna console and I'm gonna output it at the global scope. And so let's paste that in. And now we can see that we didn't get any errors and we actually get myparam, which is this line right here. This console log statement was able to output that variable from the global scope because we defined window myparam here. So it wasn't defined within the scope of this function. It's being defined in the global scope and this call is in the global scope. So it finds that myparam variable in the global scope. And I also have just the function of yay, the method or the value of yay being output right here because that's being called by this function. So this window myparam is available inside of this function as well because it's a global scope. Even though I defined it initially in here. I made this call to define this, this variable in here. I'm able to grab and grab it from this other function as well because it's at the global scope. So hopefully that kind of covers scope. That's another very important piece of, you know, variables and functions and everything else. And scope is important. So. And actually I'm gonna put scope outside of this. We're just gonna. We don't want this to be inside of variables because it's important for both variables and functions and methods. Because functions can also be defined at different scopes. So you can have, you know, a function that's defined. So this is a non anonymous function. So we've got myfunction defined, right? So we've got this function in here called myfunction. So if I go outside of this scope, so if we can see here. So this, this is my function. It's an anonymous function. Myfunction is defined within this. If I call myfunction and pass in a value of Jamie here and I try and grab all this code and let's run back here and I try and run that. So I know my function exists because I created it. We can see it, it's right here. Function myfunction. So if I try and call my function, it's gonna tell me my function is not defined, but I know I defined it, it's right here. But it's defined within the scope of this anonymous function. So I can't reach into that anonymous function and call that function because it's only defined within here. It's only available for use within the scope of this anonymous function. It's no longer. It's not available globally. So that's an important. But if I define my function param one console log. So now I've got my function here, right? And I've got it defined, and it tells me it's going to output to the log that I'm in the global scope. So now let's grab this code, Let's refresh this. I'm going to pass that in, I'm going to call it. And now it's calling I'm in the global scope. Now it's called my function because my function exists. But I also ran this other code in here that's calling myfunction, right? But none of that happened because it's inside this function. So it didn't call this myfunction, it called the global scoped myfunction. And so that's important to. It's important to note that, you know, the scope of those things applies to both variables and to functions. You can define a function within another function and it's only available for use inside of that. The function that's currently operating, we call that a private scope. And then some languages you'll actually use keywords, like in Java, you'll use a keyword to define a function as private, meaning that no one else can call it from external. So if you, if even if they've instantiated an object, it's only available to call from within that object, they can't call it directly by creating an object, they have to call it on the object itself. So might be called. You might call that a private function. And you know, that's a term that can be used even in JavaScript. But we don't use the keyword private to actually define it. We just define it like a normal function. It's just if it's wrapped inside of another function or inside of an anonymous function, then it's considered to be private and only available in the scope of the currently running function. Okay, so I think that covers a lot the other things that we've seen as we go through here. And we've talked about a little bit. We've talked about comments, we've talked about the different notations, dot notation, we've talked about array notation, which is our square brackets, like this, we've talked about parameters and parentheses. Those are we use within after a function call. We can also use parentheses after if statements. So these are syntactical elements. We've got, you know, our normals of, you know, greater than, less than. We can say greater than or equal to 45. We can do other things like not equal to 45. This, the Bang sign here, the exclamation point means not equal 45. And there's a big difference. One other thing that we want to talk about that's important is the difference between equals and equals. Equals. So equals is the setting of a value. We're saying in this version, MyPerson age equals 45, meaning set MyPerson age to 45. This version says evaluate this to true if my person age is equal to the number 45. So equals equals is an evaluation of truthiness. And a single equals is actually an assignment. So this is an assignment operator versus a logical operator. So, and that's, that's very important because this myperson age equals 45 will always return true because it returns the setting of 45. So it returns 45 in this case. So you might not ever notice that this is actually going to throw an error. And so especially if you do this, if we do this, let's try and run this. Nope, it didn't like the bar in there. So. In my.