JavaScript: Beginner's Guide

1. Welcome: Everyone has heard of JavaScript, right? This powerful programming language that website used to make their content come alive. No more boring, static pages that just sit there looking at you with JavaScript, we're going to be able to interact with users, respond to events, communicate data between the server and the browser, create outs and games and a lot more. My name is my body, and I will be your instructor for this course similar to how you would approach learning pretty much anything. You need to start with the basics. This is where this course comes in. This course will help you grasp the basics of JavaScript. Once you've good and good at that, you can move on to something more advanced. As you make your way through the lessons, you're going to see a practical example off where to use JavaScript and how to use JavaScript in both informative and hopefully entertaining way. By the end of this course, you will have a strong foundation in javascript. It would be able to create house and dynamic with applications and knock down any job aspect related. Challenge your face. All right. Enough talk. I'm so excited to share this course with you. Let's jump in 2. Hello World: no matter how pretty the sites of world using Onley, CSS and HTML look, they will quickly become boring the opera's aesthetic and don't respond to what the user is doing. The website you often visit our in static. That's because they're relying on JavaScript to breathe life into their content. So what is Drive a Spirit? JavaScript is a programming language used to make webpages interactive. It is what gives a page of the interactive elements and animations that engage a user. This is a short list off what JavaScript can do, quantified the HTML and, say says, for page after the page has loaded respond to events like a mask, click make animations that capture the intentions off users and many, many other interesting things. I'm not going to war you with the history of JavaScript, but I want you to know that JavaScript has nothing to do with Java. So enough background information for now, let's get our feet wet by writing some jobs. Quit. By the end of this video, you will be able to display some text in your browser before going in Mr Further, we need a court editor to write JavaScript, a basic editor like notepad can do the job, but a good good editor will make your life easier. Some off my favorite called editors include sublime text note Bad plus plus visual studio code. It really doesn't matter which one you're using, as long as you know how to create a new document. Edit, save and review it in your browser. You are good to go. The first thing we need to do is create an HTML document. This document. We contain our JavaScript code. If we review this document in our browser, we don't see anything that's totally normal because our document is blank. See the script tag? This is where the magic happens. The script Tang is where you place the JavaScript you want to run. What you want to do is display a dialog box that says Hello world when we load our HTML page. So inside our script AG, I'm going to add the following line alert and hello world. Let's say our html five and open it in our browser. And as you can see, the hello World message is displayed inside a dialogue bumps. See, that wasn't so hard. You just created a working example using JavaScript. Good job. So what exactly happened here? What we did is right. A simple Java spread statement. JavaScript statements are instructions to be executed by the Web browser. In our case, we have one statement that tells the browser to write Held the world. You can usually tell when something is a statement if it ends with a sunny Cullen. But this is not a guaranteed way to identify a statement. JavaScript works fine in many cases without having a semi colon at the end of statements, and some developers even chose to omit them. Let's take a look at our statement. We have this thing called alert Alert is just like the name suggests is responsible for grabbing your attention by this planes. In text, The word mothered is actually something known as a function. Affection is basically a reusable chunk of coat that does something. Functions usually take in data, process it and return a result. Affection could be defined by you, defined by some third party library you are using, or it could be defined by the JavaScript framework itself. Once a function is written, it can be used over and over and over again. getting back to our example. The text you want to display is hello world. Notice how we were wrapped the words inside quotation marks. You will always need toe pieces of dext, more commonly known a strings inside single or double quick the quotation marks. It may seem weird, but this is how the JavaScript San tax work. We will look at strings in greater detail in the next lessons. You can play around and change the fixed as you want. Let's say, for example, I never watch it. Game off rooms. Let's save it on. Let's review it in our browser. And as you can see, JavaScript is kind enough to not judge me and simply display the next. All right, let's recap in this. Listen, we got our hands dirty by creating a simple example. Along the way, we encountered many concepts and terms. Such a statement function string. Don't worry if you can't remember all of them right now, we're still going to elaborate on each terms with other examples. All right, see you in future lessons. 3. Variables: in JavaScript statements, usually in fourth. What we call valuables valuables provide a way off label and data with the destructive name so our programs can be understood more clearly by the reader and ourselves. It is helpful to think of variables as a containers that hold value. Their sole purpose is the label and store data in memory. This data can be then used throughout your programs. Did the clot a variable used of our key worked, followed by the name you want to give your valuable? When you are name and valuables, try your best to make sure that the name you assign your valuable is accurately descriptive and understandable. Toe another reader In this line of code, we declared a valuable cold. Say hello. For the moment, our valuable is empty. That's fixed that by initializing on were valuable a value. Let's say, for example, hello are now I'm going to use the other faction with so earlier to display the content off our variable. So alert. Say hello. It's safe. Our document. Andi, let's open it in our browser. As you can see, results is the same as earlier. If you want to change the display text to let's say hello, everyone. All you have to do is make one change to the value specified, like the hello body able. So here I'm going to change world to everyone. If I save on re run the script, you can see that the display takes changed to Hello, everyone. Throughout your coat, Wherever you reference the say hello variable. It is the new value that will be used for larger applications. This will save you a ton of time because you have just one location where you can make changes and it will be reflected everywhere. But what can you call your valuables? Is any name? Okay? Well, no. But the rules around creating valuable names is simple. Start your variable with a letter and underscore. Or a dollar side author that used as many letters numeric digits underscores or dollar signs, as you like. Oh, and one more thing. We really don't want to confuse javascript, but using any off the welt end keywords like, far or function, we will get some of these key words and what they mean throughout the rest of this course 4. Functions: you've got some A programming under your belt. Now it's time to really move things along with functions. Functions enable you to write code that can be re used over and over again, code that is much more manageable. Good. That can be abstract away and given a simple name so you can forget all the complexity and get on with the important stuff. To illustrate this, let's say we want to comfort the body mass index or B M I for short off a person. The being I is calculated by dividing a person's weight in kilograms by the square off his or her height in meters. A person is considered overweight if his or her baby, um I is over 25. So here we have two variables. Each variable store, a number, the being my valuable stored result off dividing the value stored by the weight variable by the square off the values stored by the height variable. The slash character indicates that a division needs to take place where us the asterisk character indicates that a multiplication needs to take place. Now let's say we want to calculate the bay on I for different persons. There isn't on Lee what we've learned so far. We would write something like this. I would take this code and copy it multiple times. Then I would change the name of the variables like this and change the values as well. For example, you can see where this is going. Our code is redundant and frankly speaking, it looks terrible. But using functions, we can make this great again. So I'm going to replace all of this by a smaller portion of cope. This small portion of code does the same job as previously, but without the redundancy. So how does this happen? That's what we're going to learn because you will rarely right or use code that doesn't in four functions. It is important that you became familiar with them and learn all about how they how they work. The best way to do that is to jump right to them. So I'm going to delete all of this. Let's create the simple function that says hello, but we still need to call it so where I will add the following lying after the end of our function declaration. Now let's save this and preview it in our browser As you can see, the hello message is displayed. Now let's break our code into small pieces and see how it works. First, our code begin with the faction keyword After the function keyword. You specified the actual name off the function, followed by opening and closing parenthesis. Then where's around our function? With opening and closing brackets, these brackets enclose the statements we have inside. Finally come the content off our function. In our case, the continent is the other function that displays a dialogue books with the word Hello and let's not forget the function. Call the faction. Coal is the name off the function you want to call or invoke, followed again by parenthesis. Without your function call. The function you created does not do anything. Now let's see a different function. Let me first delayed this. Remember our couple of being my function? It used to look like this. This function is what we call Obama tries function, which means that it takes arguments when it is cold. You can tell when a function takes arguments by looking at the function declaration itself function that don't take arguments, so show up with empty parentis is father win their name. Functions that take arguments aren't like that Following their name and between the apprentices thes function stayed clearly what kind of arguments they need and the number off these arguments for country 8 p.m. I. You can see that this function takes two arguments. The 1st 1 is the weight in the 2nd 1 is the height. In our case, we call our calculate being I function and specify the values you want us to the function inside the parent pieces here, the 70 corresponds to the weight argument on the 1.86 corresponds to the height argument. The order is very important. So now you know how to communicate with your functions in one direction, that is, you know how to pass arguments to functions. But what about the other way? Can a function communicate back? We have our country being my function and it discipline lays on alert message with the value off our valuable. But what if we actually want to store that value for some future use? So instead of having our cover being my function, calculate the beam and display it as an alert. We want to do something like this, they might be an my valuable will store the results off the calculation done by the calculate B M. I function. So how can we achieve this? The way to return data from a function is by using the return key work. So here inside my calculator B and I function, I'm going to make some changes. So instead of the other function, I'm going to say return am I noticed that we are still calculating the b m I by dividing the weight by the square off the height. But instead of this plane and alert were returned the b m i, as told by the BM valuable. Now all we have to do is call the function and a sign the return result to a variable. Once your function hit the return key word, it stops. Everything it is doing at that point returns. The value is specified and exits, so in the code that exists after your return statement will be ignored. Another interesting news off the return key word is just exit the function with that actually returning a value to the color. For example, I can have a function on, but it's got for example, does something, and after doing what it should do, it will say return here. The return key word is used by itself as you see to just accept the function. 5. Conditional Statements: So far, we have accomplished pre defying tasks. But what makes program is so much more powerful are conditional statements. This is the ability to test a variable against the value and act in one way. If the condition is met, obey the valuable or another way. If not, JavaScript provides a general decision making capability in the form of the language construct known as the if statement, the most basic sentence is the one you see in front of you. In this case, if the condition inside the burger parentheses is evaluated as true, then the statements between curved brackets will be executed. Otherwise, the program will not execute the statements and continue just after the last curly bracket indicating the end of the block. The basic if statement can also be extended with the keyword else. This provides an alternative set off statements to be executed if the condition is not true . To make sense of this, let's take a look at a simple example. Often f l statement in action. Here I have a valuable cold cash and wallet initialized to true, and I have two other functions. The 1st 1 says you can order a pizza the 2nd 1 say, Stepped away our It's good for your health. So which one off this true statement will be executed? Let's save our document and let's run out straight and see which one will be executed. And as you can see, the first statement which say's you can order a pizza is the one showing in our browser. This is because our valuable is initialized to true. So the true part off our F else statements kicks in. Now let's go ahead and change the value off cash and wallet. Toe falls. Let's run our script. As you can see the text that say's stick to water. It's good for your health is showing up. This happens because our expression evaluates toe falls. Makes sense right. In most cases, your expression will not be a simple valuable that takes Traore falls. Instead, you will need to compare between two or more things to get either a true or false outcome. To do this with you is what we call conditional operators. The general former off. Such expressing is the one you see in front of you if expression followed by the operator, then by the expression. So if the outcome of this is true, we will do something else. We will do something else. Let's take a look at some of the conditional operators before we move on. The double equal operator is true if the first expression values to something that is equal to the second expression. The double end, for example, is true if the first expression in the second expression both evaluates to true. For concrete example of conditional operators, imagine a banking program that prints a short notification at the bottom off. Each transaction receipt according to the remaining balance on the account. If the value off the balance variable is greater than the minimum balance, which is 100 in this case, on alert should appear saying safe balance. If the balance is not greater than the minimum balance, then a message saying warning Low balance should appear. So if I call the balance state function using a balance off 80 for example, in this case, this expression is evaluate evaluated to fault because 80 is not greater than 100. If I run the script, I should get a message off warning low balance. As you can see, that's the message I get now. If I call this function with abundance, let's say off 150 this time, the balance value is greater than the minimum balance because 150 is greater than 100. In this case, I should get a message off safe balance. And as you can see, I got the message off. Safe. Bonus. We are almost done with the if statement, the last thing I want to show you. The variant off the FL statement So far, we used the F statement executed to a different section of coat. However, we can think of cases where we would want to execute more than to a different section of code. In these cases, we can use the else F keyword to change if statements together our goat assertion inside each F and else f block looking for an expression that evaluates to true. If none of the statements have expressions that evaluates to true the code inside the else bloke, if it exists, execute. That's all for the F statements. Let's move on to a different conditional statement. Now we'll see switch statements which function in a similar way to FL statement, but with a different center. They are particularly useful when you have several else closes a switch statement evaluates a single variable on the dependent on its value, executes a certain block off coat. The general sent tax for basic switch statement is the one you see in front of you. The switch checks the value for off the variable for a match. In one of the cases, if they are equal, the statements in that case will be executed. All right, It's an example that will probably make you hungry. I have a variable cold flavor was Value is said to cookies and green. This flavor variable is what gets passed into our state switch statement. Our switch statement contains a collection off case blocks Onley. One of these blocks will get hit with their code getting executed. The way this chosen one gets picked is by matching a blocks case value, with the result off evaluating the expression in our case, because our expression evaluates to a value off cookies and green. The code inside the case blogged, was case value is cookies and cream gets executed to prevent execution. All the statement that follows the break keyword is used its purpose is to break out off the switch and continue with the rest of the program. Default is the switch equivalent off the Els clothes and an F else statement. If none of the explicit cases apply to the variable default with still apply, every value will match the default case. So this can be useful to handle unexpected situations. This which statement can be converted into equivalent fl statement. Let move or remove this, as you can see, if else is very similar to our switch statement. So just like with the switch statement, we are comparing investing our flavor valuable against the different values it can takes. Right now, you might be asking, How can I know when to use? Which there are many arguments on the Web about when to use switch versus an else statement , and the one thing that is clear is that they are all inconclusive. Personally, I you switch when I have offended. Number of expected values 12 months in a year, for example, could be represented by 12 cases. If the situation calls for a lot of range of values, it's more sweeter toe an f l statement. But again you will find someone who can convincingly provide a counter argument. So go with whatever you find more readable 6. Loops: when programming you will often need to do things in court more than once, and JavaScript gives you a few ways to repeatedly execute code multiple times. For example, let's say, have a function called say thank you. This sanction display a text message saying Thank you. So if I want to call this function, let's say 10 times. One way I could do that is by calling it the first time, then simply company in and based in this as much as I want. While this works but are redundant, code is a hard to maintain and simply a bad 80. In addition, you wouldn't always know the number of times you need to run your coat. It can change according to the specific conditions present during a certain execution, and more than likely, the number of times you want to repeat some code could be huge. You don't want to copy and paste something a few 100 or thousands of times to repeat something that would be terrible. What we need is a generous solution for a pigeon code, with control over how many times the code repeats. This solution is called Loops Loops, as the name suggests our structures that cycle through a section of code. As long a some condition is met, there are three kinds of hopes you can create four loops. Why lobes on the wire loops? One of the most common ways to create a lope is by using the four key word to create what is known as a four low. A four loop is used to repeat a specific block off code unknown number of times. The initialization statement is executed only once. Then the test expression is evaluated. If the best expression is falls, the full group is terminated. If the desk expression is true, the code inside the four Aboul body is executed and the update statement is operated. Let's see an example here we have a function called Say hello this function. Bring the word hello to the browser using the method document dot right, I'll end. I will be calling this method. Chen Tien. Let's run our script and see the result. As you can see, the word Hello is printed the browser 10 times. This is made possible thanks to the four loop, let's take a closer located. In our example, I created a new variable called I and centralize it to zero. The condition is that our variable I is less than 10 at each iteration off our full loop, we're increments our I variable by one the blessed bus after I means your enquiries. Whatever the value that I variable had by one, this process repeats until the test expression is folds. Now that we have a general idea about how for the works, there's still something that our some simple example didn't cover. Sometimes you may want to endure for group before it reaches completion. The way to do this is by using the breaky work. You have already seen the break statement used in an earlier lesson. It was used to jump out off a switch statement. The break statement can also be used to jump out of the loop and execute the code after it . If any, I'm going to make some changes to our coat. I'm going to copy this basted here, change the word hello toe on, then I'm going to use the F statement. If I is equal to six, then break. We'll remove this. So let's save this and run our script. And as you can see when the value off I is equal to six. The break statements breaks the lope and continue executing the code after loop. So here we don't have any code after the photo, so we simply stop when the six number gets printed to the brother. Sometimes you may want to force the next iteration off the look to take place, skipping any quote in between. This can be achieved using the continuous statement. Let's see an example. I'm going to make some changes to our coat. I will copy and past this here on. I will change the breaky word by Continue. Now let's run out, scraped and see what happens. As you can see, value six is missing in the output. Why, when eyes value is six. The program encounter a continue statement, which makes it jump at the begin off the four hope for next iteration skip in the statement for current iteration. As I said earlier, there are three kinds of groups. We saw the four look, now we still have two more, so let's start with the wild look. The Wild Hope executes some statements until its condition returns falls in this example. The condition is represented by number is less than 10 expression with each iteration our lope increments, the number value by one was the value off number becomes. Then the loop stops because the number is less than 10. Expression will return falls, so what gets displayed is 10. So let's run our script and see if this is true. Now it's time to see the Do I look in four and wide loops with this dildo condition at the top of the look. But do I look? We check its condition at the bottom off the loop. A Do I look is similar to a wire loop. Accept the fact that it is guaranteed execute at least one time. It's illustrate this by an example. This world group will never get executed because it's conditional. Expression is false with a do while loop because the conditional expression is evaluated on Lee. After one situation, your looks continent are guaranteed to run at least once. So if I run this script, what I will get is the I'm running baby text print into the brother, thanks to the door, while look so we covered the different kinds of groups. Right now you're my nuts yourself using loops a whole lot. But as we start manipulating collections of data HTML elements in your document and other complex situations, you will rely on loops heavily. 7. Timers: a block off JavaScript code is generally executed synchronously, which means that when a statement needs to execute, it executes immediately. But we can delight the execution of instructions he was in some native functions called timers. Those functions are said. Time out said Interval. Andhra Quist animation Frame the set Time out sets a timer, which executes a function or specified piece of code once after the timer expires. If we want to show on alert books after two seconds, for example, we wouldn't do something like this. Here we have a function called show Other that other the message saying I finally showed up . I call this function was instead I mode after two seconds or two thousands milliseconds. So if I save this and run the script, you can see that after two seconds the message shows up, You might ask why the time out I d Valuable is here. After all, we didn't use it well. This valuable is not really useless. We can use it if you want to cancel the time out. When we call the set Time out, it returns on i d. This i d can be passed toe. Another faction called clear time out in order to cancel the timer. So if I want to cancel my timer, I would do something like this clear time out. Then I will pass the I D returned by the set. Time out function like this the same time Affection probes very useful in many cases. For example, if there is an ongoing action that is unable to finish, you can use the same time out function to interrupt this action and give back control to the user, said Interval, repeatedly called the function or executes a code snippet with a fix it trying delay between each coal. Unlike the sit time out that execute the court just once. The first argument off this function specifies the function you would like to execute. The second argument specifies the time in milliseconds to wait before you code looks again , said Interval Returns, also an Interval i D, which uniquely identifies the interval so you can remove it later by calling clear Interval . All right, let's see an example here we have a function called Say hello That alert and a message saying hello you since it interval we are Lupin This function with the delay off three seconds between H Loop. If you wish to cancel the looping, you can use the clear interval bypassing the interval I d to this function when trying to animate something to the screen. You have to make sure that your animation cauldrons properly using the same interval function mentioned earlier, does not guarantee that. Let's be explained. Your browser is busy, the wind, different things at any given time, listening to mask Knicks, this plane, what you write on a keyboard, loading resources executive JavaScript and more while doing all of this. Your browser is also redrawing the screen at 60 frames per second, said Time Out doesn't take into account what is happening in the browser. So our animation code, my get, may get lost in the chaos. To avoid this and overcome other efficiency problems, we have the request animation friend function the way use this function is a little bit similar to set time out and said Interval, you may have noticed that you don't specify an interval, right? That all depends on the frame rate off your browser and computer, but typically it's 60 frame per second. The key difference here is that you are requesting the browser to draw your animation at the next available opportunity, not a predetermined interval based on load element visibility and Baker Status Browser can also choose to optimize their performance off request animation frame. Anyway, this is how you would use the request, animation frame and real life. Here we have a function called Drove Something Notice that our request animation frame calls the drought. Something function fully from within the world sent infection itself. You may be wondering why this doesn't create an infinite loop. That's because request animation friends Implementation avoids that. Instead, it insures the herself. Infection is called just right. Amount of times needed to control things get drawn to the screen. Joe creates mouth animations to stop a request animation for infection. You have the cancel animation frame function, just like we saw before. Cancel animation Frame takes the I D. Value off our request animation for infection that is returned when you call it 8. Variable Scope: toe work with JavaScript efficiently. One of the most important things you need to understand is the concept or variable scope. The scope of a variable is controlled by the location off the variable Declaration and defines the part of the program where a particular valuable is accessible. In other terms. Just because you declare a valuable does not mean that it can be accessed from anywhere in your code. We are going to start our exploration off scope with what is known as global school. Global valuables are defined outside off all factions, usually on top off the program. They hold their value throughout the entire lifetime off your program. Any function can access on Global Valuable that is a global valuable is available for use throughout your entire program. After its declaration in this example, the number valuable is declared outside of the return number affection. Despite that, the return number function has full access to the number valuable. Obviously, we've been using global variables all time without noticing, so I'm just making sure that you know what you are dealing with because this valuable school make a lot of beginners frustrated. Now let's take a look at valuables that are, for example, the cloud inside the function. Those are called local variables. Contrary toe global variables look of variables when network when access from outside of the function in this example that this valuable is declawed inside the scope test function . So if I try to access the desk valuable from outside the function, it will not work. The reason is that the scope off your desk variable is local to the scope test function. There is, however, an exception to this. If we declare our test valuable without the Vaki work, the scoping behavior will completely change in this case, even though our test valuable appears inside the scope dysfunction first, not including the VAR keyword makes this variable live globally. So here I'm going to change this to I live globally. So if Iran our script, it will display the message saying I left globally, which is the value off our test valuable. This is true for every valuable declared without using the var keywords. I hate to break it to you, but this is just one of many quarts of JavaScript. There are others which you need to be familiar with. Let's take a look at the father. One coat. First, let me on the script and see the result. Then I will come back and explain what happened here. We have the first message saying Welcome to adulthood. Then a second message saying the same thing. Welcome to adult. Now let's get back to our code. Here we have a function called life stage Inside the if statement, we have a valuable called message. When this code run, the other function directly below it displayed. Welcome to adulthood that makes sense. What might make less sense is that the second alert that is outside off the if statement also displayed welcome to adulthood and is what is going on. Our message variable is the cloud inside what we call look ah block is anything that appears within the open and close brackets. In many programming languages, variables declared inside a block are part of that blocks own scope. That means those variables are local and can be accessed outside of that block. But in JavaScript, things are different. JavaScript doesn't support to block scoping. So from Java scripts point of view, we might as well declared in a certain message variable at the top off our life state function itself as follows. So here I'm going to say message. Then I will delete this of our here. Now let's run us credit and see if there are some changes. The first message saying Welcome to adulthood and the second message saying, Welcome to adulthood. As you can see, the behavior is identical to what we saw earlier. Because JavaScript blacks look scope. Most developers coming from other languages such as C C plus plus or Java experience a lot of frustration and unexpected behavior. That's why the latest version of JavaScript introduces a new key word called Let If you use lead to define variables, their scope will be limited to the block in which they are declared. All right, let's say an example. I will delayed this. Here we have a function called block behavior. Inside this function, we have an if statement and inside this if statement I declared a valuable called number. He was in delight, keyword. Then I have a new alert function that displays the value off this variable outside. Off this block, I have another alert that displays the value of a variable called number, but this time. It's not. The valuable we declared here is in the let keyword. But it's the global variable that we declared above our function. So the first alert should display the number 20. And the second alert should display this value which is then let's save this and run off script. So the first value is 20. The second value is 10. All right, we got through this one. But wait, we didn't finish yet. Javascript still has surprises for us. Let me show you what I'm talking about. Let's see another example. So here I have a variable called text that that has a value off. Hello. And they have a function called greet everyone inside this section I have an alert function that said that this displayed the value our text valuable. We have our re declaration off our text valuable with the value. See you later. Then we have another alert displaying the value of text. What do you think will be the result off the other function calls? Given what is going on through my answer that the first alert will show hello on the second alert will show to you later. However, if I run this script. What we're going to see is undefined and see you later. So what is going on? When Javascript encounters a function, it searched the entire code looking for any of the cloud valuables. When it encounters them, it initialize is them by default, with a value off undefined. The great everyone function is declaring a variable cold text. So before the first alert even hits, an entry for text is created with a value off undefined. Eventually, when our code hits of our text equals seal later, the value of text is properly initialized. But that doesn't help our first alert function. But it does help the 2nd 1 that follows the re declaration off. Next. All of this has a name. It is known as host in or valuable hosting. So keep this in mind because believe me, tracking down while your valuables aren't behaving as expected is not fun. And hopefully this will help you know why 9. Closures: one of the most important things when working with functions in JavaScript. Disclosures, Closures allow JavaScript programmers to write better code, and now that we have variable scope under our built understand enclosures would be much easier. No more talking about closures as this will make your just confused. Instead, let's get our hand jury by manipulation actual code. This will help you understand better. First, let's see what happens when you have functions within functions. In this example, we have our announced winner function that contains an alert and another function called say winner name that also contains an alert. The interesting part is what the announced winner function returns. When it gets cold, it returns to say, Winner name function. Let's call this function by initializing avoidable that wins to announce Winner, I'm going to name my variable winner equals to announce winner. If we run our code, you will see a dialog box that says the winner is the important thing to note Is that the same winner? An infection does not get run yet because we haven't actually called it with simply return a reference to it because the winner, valuable now prince to a function you can invoke this function we're calling it using the open and close paren thesis like this when you do this, the returned intervention, a say winner name. We'll also get executed. Let's run our script and see. So the first message saying the winner is and the second message saying, Mohammed Ali. Okay, now we are getting closer and closer to know when what soldiers actually are. When you have functions with the infections, you're really run into cases like the one we just did. Instead, it will often have variables and data that is shared between the outer function and the intervention. To illustrate this, let's make some changes to this example. I'm going to delete this and replace it by declaring a valuable called were winner name and set its value. Two. Mohammad Ali on those the let also this alert Andi declare another variable called Winner in True and Sit. Its value to the winner is plus our variable winner name. This is a way off concoction ating this string with our variable. We will talk about this later. Here is the twist, the say winner named Function realized on the winner name Variable that lives in the scope off the outer announced winner function. We saw previously that when we hit the return key word, we exit the function. So when we run our announced winner function, it disappears once, say winner name is returned to the winner. Valuable. So what do you think? What happens when we hit this line? No logical assumption is that winner name Variable is actually on defined right? So let us alert the value off the winner andro and see what happens. Let's run our script. We have a message saying the winner is Mohammed Ali. So our script is actually working. Something is going on here, and that something is nothing else but our mysterious superhero closure. Here is a look at what, exactly or why exactly. Winner name wasn't undefined. The Java script runtime that gives truck off all your valuables, memory, usage references and so on is really clever. In this example, it detects that the inner function, say winter name is a reliant on variables from the after function, which is announced winner. When that happens, the runtime ensures that any variable in the outer function that are needed are still available to the Inter function even if the outer function goes away. So the winner Valuable is referring to this. A winner named Function. But the say winner name function also has access to the winner name Valuable that exists in the Outer announced winner function this inter faction because it in close, relevant valuables from the outer function in so its scope is known as a closure. 10. Where To Put JavaScript: So far, we've been writing our JavaScript code inside our HTML document. But this is not a no obligation. There is another option which involves right in your JavaScript code. In a separate file. Using this option will remove in JavaScript inside your HTML document. You will still have the strip tag, but its purpose would be pointing to the separate JavaScript file in state of containing JavaScript code. Keep in mind that you can still help lines of JavaScript code while using an external JavaScript file. None of these approaches are mutually exclusive. Now let's take a closer look at this approaches and see the pros and cons of each approach so that you can choose the right approach for your Web applications. The first approach we will look at is the one that we've been using so far. This approach is where all their JavaScript is contained inside the script tag side by side with the rest of the HTML code. When your browser loves the page, it goes through and parses every line off each channel from top to bottom. When it hits the script AG, it will go ahead and execute all the lines of JavaScript as well. Once it has finished it executing your code, it will continue to pass the rest off your document. The second approach is the one where no JavaScript is written in your HTML document. Instead, all of your javascript, it is contained in a separate file. This approach only work if you have a separate file to contain a JavaScript gold. But the extension of this file should be the GS. For example, here I have a file called Script RGs. The name doesn't matter. You can name it. Whatever you want. Inside this file, there is Onley Java script. You are not allowed to write any each Diana or CSS called here just JavaScript code that you would normally put inside the script tag. Once we create the JavaScript file, we need to revenge the reference it in the HTML page to do this. The script tag has an attribute called SRC. This attribute points to the location off the jobless. Great file. In this example, Jarvis, great file script as yes, is located in the same directory as our HTML documents. I can reference the file name directly by doing this inside the script tag. I will add the SRC attributes and say's equals to scrape the gs. If your file is located in another folder, for example, you have a fuller cold G s. And inside this folder you put your file. Then you should change the back a coddling. So here I will add the name off that folder. In this case, our script file starts looking at the root off our site and navigate through the GS folder . You can also specify the four path or what we call the absolute bath. For example. I can remove this and instead write the following before talking about which approach is better. Is it in line or external JavaScript? I want to discuss something first. So far, we've been put in our script time inside our body attack here. We're dealing with an empty HTML document, so that won't make any difference. But when you have a few 100 lines of gold, that's when the debate off where to put javascript begins. Some people consider place in JavaScript in the bottom of the page, a best practice when others sees the opposite. So who's right? Let's take a closer look at each case your browser passes your HTML page starting at the top and then moves down line by line. So when you point your JavaScript at the top of the page, the browser, we're start loading your GS files before the market images and text and says Browser. Though JavaScript synchronously nothing else will load while the JavaScript is loading, so the user will see a blank page for a few seconds while the JavaScript is loading. On the other hand, if you place your JavaScript at the bottom of the page, the user will say the page loading first, and after that, the JavaScript will load in the background. So if, for example, your CSS and HTML take five seconds to load and your JavaScript takes another five seconds , putting our JavaScript on the top of the page will give the user a perceived loading time off 10 seconds, and putting it on the bottom will give a perceived loading times off five seconds. I'm using the word perceived because in both cases, the page will be completely loaded in the same amount of time. By putting JavaScript at the bottom of the page, our pages will appear to be loading twice as fast But there is a catch. If we load our JavaScript at the bottom of the page, the user is left for a few seconds with a beautiful looking HTML page where nothing works. If the user tries to perform an action and finds out that it's not working, he will think that our obligation is broken. What's even worse is that we have no way off letting the years or no when the application will be fully functional. A few seconds to load. The APP is one of the most common thing. We all the weight for our computers to boat up for videos to load, unusual for, for the shop to open for almost everything. A couple more seconds off. Waiting won't drive anyone crazy, I hope. But there is nothing worse than a user clicking a button, which does not work because he may lose trust in the application. Even the slow loading experience can be eased using a simple loader like the one you see when you open your Gmail account, for example, it really depends on what you're making. If content is more important to you, then it's been best to place your javascript at the bottom of the page. But if you are making a Web application, you're a much better place in JavaScript at the top. Now we need to choose which one off the two approaches is better. Is it better? Try JavaScript insider HTML document Or put it in an external flight like here. Well, the decision depends on your answer to the following question. Are you going to use the same JavaScript code across multiple HTML documents? If the answer is yes, then you probably want to put the code in an external file and then reference it across all of the HTML pages in which you want executed. This will help you avoid duplication called across pages and make them and maintenance easier. Since you have a single place to make all the changes changes you want to your script. This will also save the users a lot of time because they don't have to download the script each time they load one of those HTML pages, especially when the script is more than a few hundreds off lines. The browser will don't know the coat only once and deliver the cash the person version off the file on demand if you answered no to the earlier question regarding with the record is going to be used in multiple HTML documents. Then you can do whatever you want. There won't be much difference. 11. Writing a Comment: If you're taking this course to become a JavaScript developer first you came to the right place. Second, you will probably work with other JavaScript developers. As a team. This means that you will often be looking at your teammates code, and they will often be looking at yours. So you need to make sure they can tell what you're code does or otherwise. It's useless. But even if you're working solo, you'd be surprised how fast it even becomes useless to you yourself because you're for gotten what the go off the program is. To avoid this unfortunate problem, one of the best way is by using something known as comments comenzar special lines of your program that are not written in code button in plain English or French or whatever language you speak. All right, it's an example here. The comment is marked by the double slash. The thing to keep in mind about comments is that they don't run and get executed like the rest of your code. JavaScript ignores them. The goal of comment is to help us understand what the code is the wind. Another purpose of comments is to mark lines of code that you don't want to execute. If I want to tell JavaScript to not show this alert message, I will simply comment it by putting the double slash character in front. Off the statement. There are many types of comments in JavaScript. One of these types, it is, think is the single line common, the one we just used. Right now, the single line common can be written in its own line, or we can write it on the same line as a statement. It's up to you to choose a location that seems appropriate for the come into our writing. If you want to write a long comment off multiple lines or you want to count out a large piece of code, then using the double slash will not be practical because you will need to add them in front of every line. Instead, we can use the following syntax slash, followed by and hysterics and to close this comment. But the aesthetics first, then felled by the slash character, you need to be familiar with single line and multiplying comments because in most applications you will use a combination off both off these commenting approaches. Now that we know different ways off commenting, Let's go through some best practices to follow. Wind coming junior code always come into your code as you're right in it. I know that writing comment may be boring, but believe me, you will be thankful when you can understand what what your code is doing. Just from reading the comment as opposite to going through 100 off lines off JavaScript. Second thing. Comment. Clearly, use more English or whatever language you prefer and less code. Don't complicate your Kamen's big, clear and concise. The last thing is, don't overcome and commenting obvious things will reduce readability. If you follow this best practices, you will be able to write better cannons, and that's going to make code easier for you and for your teammates to read. 12. Types: in the best few lessons with so different kinds of values with so billions, a true or false numbers strength and many different world and things that belong to JavaScript. This breath and things are formally known as types. Luckily, JavaScript is kind enough to let us use this types without planning ahead. Despite how simple it is to use this types, there is a lot going on behind the scenes. It is important to know what JAVASCRIPT is hiding from you because it will not on Lee help you understand your code more easily. It might even help you identify what went wrong. We knew Program is not working properly before discovering what JavaScript is hiding. Let's see some basic Java script types string. This is the basic structure for working with text number. It allows you to work with numbers bullion, take a true or false no represent the digital equivalent off. Nothing undefined. This is returned when a value should exist, but doesn't like when you declare a variable, but don't assign anything to it. Object. This acts as a container for other types, including other objects. Each of these types is unique, in which it does But there is a simple group in default under. These types can be either simple formerly known as primitives, or they can be complex, formerly known as Objects Primitives, Our Atomic. In other words, they cannot be deconstructed into simple types. In JavaScript, primitive types are string number Boolean No on undefined types. Objects, on the other hand, are a bit mysterious. So what exactly are they? In fact, we are surrounded by objects. Almost everything we know can be considered an object. A cell phone is an object. You can turn it on and off, make call, watch videos and do all kinds of things. Objects are on abstraction. You can use them easily without knowing what's happening behind the scene. For example, it doesn't matter what goes inside your phone, what type of materials or what electronique component are used. All that we care about is that the phone does what it is told. Basically think often object as a black box. You can see what's happening inside, but it does. It doesn't matter as long as it works. This will change when we learn to create. The insides often object for the moment. Let's keep it simple besides the Brault and types who so earlier we have also a bunch off pre defined objects in Javascript that we can use string acts as a rubber around the string . Primitive brilliant acts as a rapper around the bullion primitive number acts as a rubber around the number primitive array deals with collection of data date help you work with dates. My help you manipulate numbers. I will explain each object in great detail later. For now, let's see some snippet of code to give you an idea about them. Here we have different objects. We have a string object, a date, an array on the 1,000,000,000 object. Notice how we used the new key word followed by the name off the object to create each one off these objects. I know that you're probably confused about the purpose of having object form off the string bullion and number primitives. After all the object form and primitive form off these types look very similar. Let's see another example. So here we have a string primitive and a strange object both with the same value. So what we'll see you printed will be identical below the surface, though both Muppet on Muppet object are very different. We will sit difference gradually in the next lessons as we explore the built in types in more depth. 13. Strings: as human beings, we use words almost all the time to communicate. JavaScript also uses words or formerly known as strings, to communicate information between the program and the user. Off the program. Strings aren't like sentences. They are written in a code as a quoted sequence of characters, getting your single or double quotes. As you can see in this examples, in order to make our life easier when working with strings, there is an underlying string object implementation in JavaScript that contains a lot of properties. I'm not going to go over every existing property. That would be very boring, but I would focus on the most important ones. In JavaScript. You can concoct, innate or combine two strings together using the plus operator. Here I combine greeting and target together. But as you can see, I specify an empty space character between them to make sure there is a space between the world Hello and the world, everyone. So if I run this script, the result will be hello, everyone. We can also add the string objects to the mix, but we will have the same type at the end, which is a strength primitive. So here I'm going to change this from a primitive strength to a string object using new strike. There is another way to have an empty space between the words Hello and everyone. Instead, off this empty space here, I can simply remove it and addict here. So now if I run the script, you can see that we will get the same result. Another word to combine strikes in JavaScript is by using the concurred method. You called this method from in a string. Then you indicate the other strength, primitives and objects you want to join in. Personally, I prefer using the plus operator because it's faster. A string may look like a close knit unit, but it's in fact, made up off a Siri's off characters. Each character can be accessed by indicating the index position off the character inside brackets. What character do you think will be displayed? If your answer is s, then congratulations. You're right. If you were expecting another character, probably the last A in Javascript here, then you should know how the end exposition works in Javascript and many other languages. The index position start from zero and move up from there. That is why the index position is for but the count off. The element at that position is five another. Another were used. Way to access a character is by using the shark at method. So here I can remove the brackets and instead say, but shot at four, this method returns the character at the specified and exposition, so here the result will be similar. So what we saw before? If you want to access all the character in a strength, you can look through the index positions. The start point of your look will be zero on the end off your lope is actually the length off your string. Instead of counting the number of characters in your string, there is a very useful property to determine the length in JavaScript that property is Yep , you guessed length. Sometimes you are not interested in the whole string, but only a part of it. In order to extract the cocktails, you're interested. End in a string. We have two methods. Slice and sub str the slice method. Extract a section of a string dependent on the start and end positions. Your past do it so here, way sliced the pizza valuable we extract the cocktails between the index position six and 17. The result. The sub string is the best gets returned. The other method that help your splitter string is the subtext you are method. This method returns the characters in a string, beginning at the start position and all the way through the length off a substrate. In this example, we started from the first character, which has the end exposition off zero and counted five characters, so the result will be the word pizza getting returned. You can also call this method without specifying the length argument, in which case you will get the strength that goes from the start position to the end. So if I stopped from the index partisan six. What will it returned? Is the sub string is the best thing ever? One of the powerful things you can do when working with strings is looking for a character or characters inside the string. You can do this. He was in the index off last index off and match methods. Let's first see the index off method. This method ICS as an argument the character or characters you're looking for and returns the index off the first occurrence. If the specified characters are not found, it returns minus one. So here I'm trying to find the word dollar inside my strength. The index off method is kind enough to let us know that this word exists at the 11th in Exposition. It's trying to look for something that doesn't exist. For example, X. You can see that this method returns minus one. Now let's move on to the last index off method. As you can guess the its name. This method returns the last occurrence off the specified value if nothing was found later tunes Minds one index off. Last index off can take another argument. In addition to the characters you're looking for, this argument is the start position where you want to begin your surf. What think you should remember about the index off and less index off methods is that they don't make a distinction between whole words or what you're looking for. Being a part off a larger set of characters moving on, let's now see the match method. This method much is a string against a regular expression and return an array containing the in value much result regular expressions are special text strengths used to match combinations off characters in strengths. To construct a regular expression, you close your surf better between slashes. Here we will have a match on Lee if the captors E V. C. Occurred together in that order, which is the case here? So this will this light a message telling ABC, Because we have a match we saw earlier how to come, Captain. Eight strings together. Now we're going to do the opposite by splitting a string apart. To do this really was displayed method, which split the strength into an array of sub strings in order to determine where exactly. To make each split, we need to specify a separator. Let's say an example. Our months variable stores, a string off months separated by comma. We used this blood method to separate out each month. The separator character he's is Kama. As a result, we got an array off 12 months. The last thing we're going to see is how to convert a string to uppercase and lowercase. It's pretty straightforward. Nothing complicated The methods were going to use are uppercase and lowercase methods. Let's see how they work. So here we have a shift valuable that has a string in lower case. So if I want to convert this string toe uppercase, all I have to do is call the toe uppercase method on this valuable when the opposite. If I want to convert this drink toe, lower case I will do is the same by calling to lower case method on this valuable. So let's run this script and see what happens. The first thing is converted toe upper case, and the 2nd 1 is converted, converted to lower case. Before finishing this lesson, I want to point out something in a previous listen. I talked about primitives and objects, and I said that primitives are simple and straightforward. Unlike objects, they don't have properties or methods that allow us to play with their values. But in this lesson, we did many interesting things with our strength Primitives. So what's going on here without too much boring details? I want you to know that JavaScript will temporally convert your primitive tribe in tow on object whenever you want to access a property or a method. Once that object served its purpose, it vanishes, leaving you with the final result 14. Arrays: In this lesson, we will see a fundamental notion in JavaScript known as a race. An array stores a sequence of values that are all off the same time. One way to create an array is to use an open and close rocket. Then, inside the brackets, you can place your items and separate them by commas. Now, how do we access our items? Well, you already know how to do that. Remember how we access characters inside the string is the same way, with a raise inside an array, each item is assigned an index value, starting with zero. In our example, cookies and cream would have an index value or zero. So if I want to get the chocolate flavor, I will ride the following ice cream flavors. And inside the brackets, I will put the index off chocolate, which is here is number one. Then I can sign this to a variable, for example, flavor. And here you have it, just like we did before. You can look through your array using a for loop and the length property. The index values off our array, start from zero and end at oneness than your arrays link. That's because the length property returns account off. All the items in our array, which is in this example, is fine, but the index value should stop at four because we're starting from zero. If we try to access ice cream flying, for example. Okay, what we'll get is a message saying undefined. If you want to add items to array, you can use the push method. The push method is called on your array and takes the item you want to add. The new item will be add at end of your array. If you wanted to be ad at the beginning off, your array used the on shift method instead. The return value from call in both push and and shift methods is the new length off your rate to remove items from array used the shift and bob methods. The shift method removes the first item from an array and returns it while the pot method removes the last item from array and returns it. Keep in mind that whether you're adding items or removing them, the first item in array will always have an index value of zero. There is also a slice method for race. It allows you to copy some items from your array and Ritter a new array with just those copied items in this example, recapping all items between the first and the fourth items in our array and returned them to the new ray. Nothing happens to our original array because those items are just copied over. If you're looking for an item inside an array, you can use two methods index off and last index off the index off method returns the index value off the first occurrence off the item you're looking for and the last index off method returns the index value off the last occurrence of the item you're looking for. If no item was found both off, this method returns minus one. 15. Numbers: numbers are an essential part of JavaScript. You will work with them most of the time, especially when trying to count something. Declaring a number in JavaScript It's pretty straightforward. That's not the case in other programming languages like Java or C Plus Plus. Where do you have to declare a number as V enough type? Ain't double float, etcetera. JavaScript numbers are always 64 bit floating. Point numbers can also be written with decimals and with scientific imitation using exponents. You can also declare negative numbers about placing the minus character before the number. Sorry folds. It's time for some math. Don't worry. It's simple math. In JavaScript, you can do the basic mathematical operations that you learned in first grade, for example, addition, subtraction, multiplication and division something you will income for a lot when working with members is incremental or a decree mention a valuable just like we saw with the four. Here is an example off increments in a variable by one. We can simplify this line by doing the following X plus, plus more generally if you want to increment by s and certain number and you can do the following. This means exactly the following. There is no difference. This first syntax is just simpler than this one. You can do the same things with other operations. All you have to do is replace the plus sign with the operator off your choice. One thing you should keep in mind when using the double plus sign or the double minus sign is that whether they appear before after the valuable you are incremental or d'Yquem, Inter actually matters. An example would illustrate what I'm trying to say. So here we have a variable called X that has a value off five, and we are increment in this parable. So what do you think the result off this alert would be? Let's run the script in C. We have X Tickle six and Y equals five X equal. Six. This is expected because we increment and the value of X. But why? Why has a value of five and not six? The reason is because the double plus sign here appear after the X valuable. So we are assigning the value of X, the old value off X to the y variable before increment in it. If we place the double plus sign in front this time, what we will get is X equal six and y equals six 16. Objects: in a previous listen. We took a glimpse at objects, and I told you that you should think of them as black boxes. But now it's time to open those boxes and see what's inside. To create an object, use the follow in syntax, the var keyword, followed by the name off your object, then some opening and closing curly brackets. Simple is that this line? Create an object gold car. Our car object man look is late to the here, but in fact it is connected to the main object type. How is that? Well, why don't we haven't defined any properties for our car object? There is a special internal property that exist called proto. This property references what is known as a prototype object. A prototype object is deserves that another object is based on. We say that the car object inherits from the object type. That's why any properties the object contains can be accessed through our car object. Let's see an example here. I'm calling a method called to string on our car object. Despite our car object not having any property called the strain, we can see the result off calling this method instead of getting an error or undefined? No. Let's define some properties on our car object, for example, name and model. We can to find these two properties using three approaches. The first approach is by using the documentation. So here I have a name, property with that value or for all sores on the model property with a value of phantom. The second approach involves use in the square brackets, so I'm going to remove the documentation and instead, uh, some brackets and do the same for the muzzle property. The last approach involves extending our object initialize er's in tax like this. So here we want to say name is rolls, words comma, then model Phantom. Now I can remove this. Now let's have more fun and create a method called get model. This method will return the value off the model property to do this, uh, a coma here, then the name off your method followed by Cullen. Then the keyword function, just like you, would create a normal function, but without the name, because we already have it here. So we want our get model method to return the value off the model property, so I will say Return on, Let's add some text, for example. Model is and can caffeinated with this dot model. Don't worry about the disc E word. We will talk about it later. Now let's go our get model method using the documentation missile earlier. So I'm going to say other core but get mobile now. If I run this script, we'll get muzzle is phantom. Sometimes you need to create objects that are basically the same. So here we have three objects car, truck and fan. Each one of these objects have true properties. Name and model Onda method Get model. Notice how the get mobile method is the same for each one off these objects, so there is a duplication in our code. In order to fix this, we will use the inheritance principle that we saw before. We're going to create a parent object that contains the properties that are more generic and doesn't need to be on the child object itself because the name and motile are unique For each object we have, we will leave them as they are. But the get model method, on the other hand, can be put in apparent object that the rest of the objects can inherit from Let's call this object vehicle. So I was comes here on the Klauer a vehicle object. Now I will copy and passed this inside our vehicle object. But now I will remove all these objects we can't create in like this or otherwise. The prototype for these objects will be object and we don't want that. We want the vehicle object with the get model property to be the parent. So we have to make the prototype property on car, truck and van objects references vehicle. To do this, I will use the object that create meant it. This method creates a new object with the specified prototype object. In our case, it's vehicle and now we can add our properties just like before to create the other objects . Simply copy and fast this and make the changes you want. If you're following along and understand what's going on, you should give yourself a pat on the back. However, we're not done yet with Stillman. Need to see what the disc e word mean. Let's try to call the get met model method. So here I will say car that get model on. I will call the other function to see the result. So if I run this script, what I will get his model is phantom. No, if I do this to the then object So here I will replace car by then se on drugs the script again. What I will get this model is City Express depending on which object you called it from get model were returned The appropriate model Note that there is no model property in our vehicle. Object So how comes get model returns the right value The answer lies with Did this keyword the desk? You were the first the object that our get model method good called from In one case it was it was the car and van objects which both contained the model property before and in this lesson I want to say that javascript doesn't provide class implementation perceived, which may be a little bit confusing for developers who are used to work with class based languages like Java or C plus plus. But it does, however, use the prototype all inheritance model that we sell, which is in fact more powerful than the classic model 17. Immediately Invoked Function Expression: so far, we're being used in functions quite heavily. As you know by now. They are extremely helpful and allow us to write code that can be used over and over again . We saw how to create the function and call it using its name, but we can also create a function without giving it a name. These types of functions are called anonymous functions to create anonymous function. Simply remove the name from here. But now I have no way to call this function, so I need to assign it a variable. I will use just the same name using the variable name, followed by some pardon thesis. They can now call my anonymous function. Now it's time to look at another function variation, known as an immediately invoked function expression or I P. For short, I fee is a JavaScript function that runs a soon as it is defined. Instead of giving you directly the expression, often I fi, it's created step by step. First, let's create an anonymous faction like we learn to do next. Let's rob our function inside parenthesis to tell Javascript that it is an expression. Now we need this to be executed immediately so I will add another pair off. Parentis is at the end, father with by a some nickel. Congratulations. You've successfully written on immediately invoked function expression. It's quite tricky it right then, because of the many parenthesis, just like a normal function. If he also takes arguments, the only difference is how you pass in those arguments. So here I have an example off a function, the other the some off true variable we best the value five and seven to this function. Five on Miss Crate, the result of the 12 as expected. Now that we learned how to create a nice fee with and without argument, let's look at when we need to use them. I feel used afford polluting the global school in JavaScript. Variables defined inside the function are in local scope, while variables defined outside the function are in the global school. Because the knife, he is a function in a valuable to declare inside it. Our local to that function. This will help you avoid collisions between your valuables and other already in defined variables with the same name in the global scope. This technique is very popular among developers was called Will be used in someone else's application. I fees are also used enclosures. There's something that I didn't mention in the closure lesson. Closures, store references to the outer functions. Valuables. They don't not start the actual value mitts and examples. You can understand what I just said to make things interest in its use, what we learned about arrays and objects and create an array off objects called dogs. Each object contains the name and breed off a dog. Here I have a function called doggies. This function takes an array off dark objects, and Richard and Ray or functions that brings out the name and breathe went cold. Let me call this doggies function. First. I'm going to mix on space. They, I would say Sochi's Andi. I will pass our dogs array to it. So this function returns an array or functions some I'm going to declare a variable gold docks function on. We will get there returned function in this valuable. Now I will get the first function using the bracket notation we. So before I will assign this to a valuable Andi, I would name it broke in True. Now that they have the first function I will alert it before I run this script. What do you expect to see? Because we are getting the first item from the ray off functions. It sounds reasonable to expect. My name is Pickle and, um, a fuck, but what we will see is totally different. Here we got lining is Lulu and I'm a portal That's the last object in our array off dogs. So what is going on here? We are pushing dogs into a que And as you know, this dysfunction is taking valuable from outside and using it inside. That's what we call before closure. Our function is closing over dog, which means we have a reference to that variable. The problem here is that we've got a loop that is changing the value off this valuable. By the time our loop has for the reader and to completion, our closures will reference the last object with the name Lulu. When we execute the following line, what we will get is my name is Lou and a total okay. So far, we understand why our code is not working properly. To fix this, we're going to close over something that doesn't change. Instead of closing over something that changes. And our friend Ivy will help us achieve this. I'm going to make some changes. I'm going to put all of this inside a knife E. So here I would say function that has he for me, too. On the farm nature will be dogs going to say the for food. And here I'm going to change in the valuable name with the just to make things more play for you. I need another birth is here and that's it. Make sure you have all your parent pieces and curly brackets in the right places Here. The perimeter still change each time through the loop. But the function we add is executed immediately. It's running inside the loop as opposite toe after droop has already finished. Now our code will we work just as we expect. So we have a message saying my name is vehicle and I'm a buck 18. Document Object Model (DOM): when you open a Web page in your browser, what you see is a combination off HTML CSS and JavaScript. Working together to create would get displayed to make sense off this mixture, your browser follows a certain hierarchical structure. The structure is known as the document object model for the dunk on the left is an example off HTML. Bitch on the right is what the dump off this example looked like. The dung is made up from each channel elements, text attributes and many other things. All of these things are known as notes. Every HTML element is associated with a child. For example, a death element is on each general, the element all the tribes extend from the node object. The dunk doesn't Onley allow you to access each Jamel elements, but also modify those elements before learning how to do this. Let me first introduce to a special objects the window object represent the browser window . It's the road off your hierarchy. You can do many things with window object, like determining the size off the browser window. Manipulating frames playing with this scroll bar and much more document object represent your webpage. It's the starting point if you want to access any edge. Danielle Element in a page No, that any changes you make to the dome via JavaScript would be reflected in what gets displayed in your browser. This means you can do all kinds of changes, like adding an element, removing it style in your content Would CSS and much more? So you have all this HTML elements hanging in your page and you want to access those elements or modify them. In this lesson, we're going to learn how to use two methods called square selector and query selector, all to find elements in the dome. The query selector method takes as an argument a string containing a CSS selector. Queers Elector returns the first element that matches the specified selector, whereas Squares Selector all returns a list off the element that match the specified selector. Let's take a look at the following HTML code Here we have to death with an I D off menu and content, respectively, and then we have another two lives with a class value off item and adds each one of them contained to spend elements. Now let's see what happens when you use the choir selector and queer selector all methods on this HTML code. So if I want toe access, the death was idee is menu. All I have to do is call my queer selector method and pass the I D menu to it. Don't forget to put the number sign first because it's an I d. On the other hand, if I want to access the Dave Element who has a class called item, well, I have to do is call my queer selector and give it the aren't in class this time with a dot in front of it. If I want to select all this plan tax that are inside our class, that item are also contend in our death element. Win with an i d off menu. All I have to do is call my method query selector all cause we have multiple items and then thus the appropriate Sears A selector. So far, you have a general idea off what the dog is and you also know how to find elements whose inquiry selector and queer selector all what you will be. The wind the majority of time is modifying the dome. You're don't elements contain properties that allow you to get and set values and call methods the functionality each dumb elements provide a spread out across the nod element and HTML element based divers, just like we saw earlier with inheritance. Let's take a look at the following HTML code and try to modify things around here. You can see a paragraph, this plane some Laura MIPs indexed. For those of you who don't know what alarm Epsom is, it's a filler text used to demonstrate textual elements before the content itself has been produced. So we're going to change the law. Remit sent text. First, we need to get a reference toe, our paragraph using our old friend query selector. To do this, I'm going to declare a variable called then since its value to document don't query selector, then passed the I d paragraph to this method. Next we will use a property cold text content to replace the Lauren Ipsum by some really meaningful content. So using our paragraph variable going to say Bogra dot text content. Then I will set the text to rail meaningful content. So now if we were on our script, you can see that the text has changed all its Jamil elements can have attributes. They provide additional information about an element. For example, the ash riff attribute off on a tank to get the value off on a tribute, we will use the method. Get a tribute. So here, if I want to get the Ashraf attributes value all I have to do his first year squares elector to get a reference to the hour a tag then stored this reference toe a variable. I called it link. Then I recall my get attribute method on this valuable on. I re past the name off the attribute. If I run the script, I should get this value. If you want to sit a value for your attribute, you can use the method set attribute. For example, if I want to change this from my website dot com to another website dot com, what I have to do is use my link variable that has the reference to the eight tag Been using the sit attribute method. I can now specify the tribute on which I want to change the value, then the value, the new value I want. So here, if I run the script, I should get another website dot com 19. Styling Your Website: In the previous lesson, we learned how to modify the dawn elements using JavaScript, but HTML elements are not just X and attributes. There's also an aesthetic park to them. I'm talking about their study. The most common where used to sell each terminal elements is by creating a style sheet and put it and put in style rules inside of it. For example, this style rule would affect on element that looks like this. Aside from INL Einstein's, there is another approach that you can use to start things. This approach involves using the dumb and JavaScript. It's possible to use JavaScript to start elements, and that's what we're going to learn. You might ask, Why would I ever want to use JavaScript to style on Element? That's a good question when you use style sheets or in lines times the style in Texas effect as soon as the posh as the page is loaded. That would be your goal most of the time. But sometimes you want to make some changes dynamically, like hiding something when the user click on a button. In this case, style rules or in lines times won't help you, so the solution is to use JavaScript. There are two ways to style on element using JavaScript. One way is to set a CSS property directly on the element. The other way is to add or remove class values from an element in order to apply or ignore a certain side rules To set a CSS property directly on an element, you can use the Stein object. In this example, I have a diff element with a 90 off my death. I want to sit the background off this element to a blue color. First of all, I got my eye reference to my def element here. I didn't use square selector, but I used another method called get element by i. D. This is another very useful method to select an element by its I d notice how I didn't put any number sign. I give it directly the value off the I. D. Next, using my Dave valuable, I called the style object then the background color property and set its value to blue. Now, if I around this script, you can see that I get a blow background notice how I wrote the background color property normally in CNN s s you would write it with a dash between background and color if we did it here, however, JavaScript with complaints. So to specify a CSS property in JavaScript that contains a dash simply remove the dash and capitalize the first letter off the second word. The second way to style elements is by using the class list. AP on classless. FBI provides methods and properties to manipulate class values off dom elements like adding or removing classes. Let's see some of these methods here. I have a diff element that has an idea of container in the class value off description. If I want to add the class value brought that, for example, to the class attributes off our death element. First, I will start by getting a reference to the Dave Element. He was in the get element Why I d method. Then I will use the difficult trainer and call the admitted on on class list and fast the name off the new class I want. So this should under the different class values that we have. If I run this script, what we'll get is description and broke that if I want to relate a class value All I have to do is replace the admitted by the remove method. Now this should alert on Lee the description glass. Sometimes you want to remove a class value if it exists or do the opposite and at that class value to the element. If it doesn't exist to make this easy, there is a Tuggle method provided by the classless FBI. The last thing we did is removing the product class value. If I wanted, Toe added again, Well, I have to do is replace more. Nothing with struggle method. Now, if I want my script, the product class value would be at again. If I come back and copy and fast this line, the product class value should be removed again. So what we should get is on Lee the description class. I can keep doing this all day long, so if I can't be this line another trying and copy it. The protect class value should be at added another time. If I want to check to see if a class value exists on an element, I can use the contains method. This method returns true if the value exists or folds otherwise. The last thing we did is at in the product class value. So the contends netted should return true. In this case, I'm going to the to use an if statement and see if the product class value exist. I'm going to replace the jungle method with contains and say, if this equals equals two. True, then I wouldn't hurt a message saying that class value product exist. As you can see, that's the message we get. 20. Navigating The DOM: earlier we used query, selector, Queer Selector all and get element. Why I d toe access html elements. Once we do this, it responsible to move around more precisely using a bunch off methods and properties. Let's say, for example, we want to access on elements parent. To do this, we have a property called Parent Node. Here we have a paragraph with an i d off paragraph. I access this element using the method we saw before, which is square selector. For some reason. Let's say we need to access the death element, which is also the parent off our paragraph. The way to do that is by using the parent node property. I can call this property on my that paragraph variable. Then I can assign toe valuable. And now we have a knack, Sesto, our death element, which is the parent off our paragraph. If you want to access a parents first and last element, you can use first child and last child methods. In this example, the first child off our paragraph element is a text node represented by some text, and the last child is on a tag element. If you want to retrieve the Children that are element notes and not text nodes you can use to properties. First Element Child and Last Element child. Another useful property is child notes. This property returns an array that contains a list of Children, often element. If you want to access the next Devlin or brief your seven often element, you can use the next seven and previous seven properties. In this example, we find the blood court element using its I D. Then we access its next sibling, which is the a element. This a element has a child, and this child is a fixed. Know that say's and the think. So did this play the sticks? I use the property called data. The previous seven property is used in the same way. If we apply it here, we will get the paragraph element instead of the a element. If you're following along and copy in the code, make sure to not leave any space or line breaks between the street elements because in some browser spaces and line breaks are considered, text notes also make sure to use the latest version of Google chrome so you can get the same result as me 21. Creating and Inserting Elements: I didn't managed General Element with the dome text three steps. First we create the element, then we assign attributes to it. And finally we inserted in the document to create an element we used to create element method. This element is now created but not inserted in the document, so it's not visible, but we can already manipulated by adding some attribute. We saw Ho to add attributes. He was interested attributes method. But we can also define attributes directly using a D quit properties. For example, I can define an I d. Attribute directly by writing the following link Dodge I d. Then I will give the value I want, for example, my link. Now it's time to insert the creative element. To do this, we'll use the happen child method as you can get from its name. We need to know to which element we're going to add the creative element. We're going to add our a element inside our paragraph element, So we need to get this paragraph element first. To do this, I'm going to use the get element by I d method. Now I can use the weapon child method to add our a L image. Now that we have inserted our element, there is something missing the text content. Fortunately, we have a created text node method that help us do this. I'm going to declare a variable called Link Fixed. There's variable will hold the value or the text content that we want to add to our elements. It's a document that create decks. Don't let's say, for example, my Suker website. No, all we have to do is at dis text our newly inserted element using other child. So I'm going to call the link valuable. Um, he was in up in child length, fixed in JavaScript. Like many other languages, the content of variables is passed by value. This means, if a valuable name, one contain onyx and we assigned this value to another valuable. That value is copied in the new one. If we change the value off name too, the value off name one does not change that. Your variables are distinct. In addition to pass by value, JavaScript has a past by reference. This allows us to have to valuables that point to the same value. I'm telling you all of this because when we manipulate a page using the dumb we income to references a lot going back to our example. I'm going to access the newly inserted element years in the idea will give it to do this. I'm going to declare a variable called my link using document that get element why I d I will get my link using this idea just like my soul before I'm going to use the hash riff property to access directly my link. Then I'm going to change this website So another website so we haven't think valuable. That contains a reference to the created a element. And we have also my link variable that also contains a referent to that element. Here I use it the second valuable my link to access the H Rafe property and change the u R l. But if I come here and alert the value off the each ref property using the first valuable link, what I will get is not the first u l, but the new euro, which is another website dot com. The true valuables points to the same value. That's why when we use one of them to change this value, we can see that change we would use the other valuable as well. What if we want to duplicate an element? What should we do? Well, you have to clone it to clone an element used the clone. No method. This method takes a 1,000,000,000 either true or false. If you want to clone the node with its Children and eventually different attributes, use true otherwise. Use false. Note that the cloned element is not inserted until recall the weapon child method to replace an element with another used to replace child method. This method takes two arguments. The first argument is the new element. The second argument is the element to be replaced. Just like low note. This method can be used on all types of notes, elements, text notes, etcetera. In this example, the text content off the link, which is the first child off the a element, will be replaced Here. There. Vice child is executed on the a element, which is the parent off the element we want to replace. To remove an element, use the method. Remove child. This method takes as an argument that child elements you want your move. Here we use the pound note property with so before to get the parent node, which is the paragraph element, then a used remove child to remove the A element. No, that remove child returns the deleted element, which means it is totally possible to remove an element, then added Once again, As you can see, the dumb is something that we can modify according to our needs. So there is nothing holding you from creating all your elements using Java script. 22. Events: events are actions that occur when the user or the browser manipulates a page. An example of an event is a user clicking a button, closing a window or person a key. You can respond to events of you want. For example, you can display a dialog box in the years of try to close the window. Avoid boring you With all the existent events, Here is a list of the main events and actions that trigger them. Don't worry, I will include this power print presentation with the course so you can have this list and all the other slides as well. Let's learn how to actually use this events. We're going to start with something easy that doesn't involve the dome. We'll see how to use the events with them later. Here I have a span element within attributes called one click. This attribute has a JavaScript called as a value. This JavaScript code is the alert function, displaying a message off. Hello, Let's from descript and see what happens. As you can guess to this play the holo message. All we have to do is simply click on the text that says Quick, me So when we do this, you can see that a message saying hello appears another attribute. I want to show you his own focus here. I have any input element with a value off take here and here. I have the own focus attributes when we give this element the focus, its value change from click here to press the tab key. Now, when the focus goes off, the value become click here again. The element has also on home focus. Attribute. This time, when we give the element the focus, it changes the value off the import to you Now have the focus on the link. Let's run this script and see what happens. It's very have my import element with a value off click here, you factor the care. You can see that it's value changed to press the turkey. Now, if I president are key on my keyboard, the focus goes to the link and the value off the import changed. Do you know how the focus on the line Now that we saw how to use events without the dumb, it's time to get the time involved. You might ask why using the thumb Well, if we use the dumb. We will be able to create the same event multiple times, and we can also use the event object, which gives you a lot of information about the triggered events. Let's send example using the click event here we have a element with an i D off link. I start off by using the Queer Selector method to get a reference to that element. Then I use my element valuable and call the ad event listener method on it. The art event listener Method takes three arguments, although we only specified to here. The first argument is the event name. Without the onward, the second argument is the function to execute. The third argument, which is optional, has to do with event bubbling and capturing. We will talk about this later. Let's run this fruit and see what happens. As you can see, when I click on the element a message appear civilian, you click the link. As I said before, when he used the dumb, we can create multiple times the same event for the same element so I can do the following . I will copy this on Basij. Then I will change alert to, and you've got a second message. Now if I save this and drawn the switch, I can see that when I click here, I get the first message saying You clicked a link and I get also the second Mrs. Now let's see how to remove an event. This can be done. He was in the removed event listener method. To remove an event, you have to pass in the same arguments you used when creating that event. This can be a problem if you want to create an event with anonymous function because we don't have a reference to that function to use with the remove event listener. If I come in this line and drawing the script, you can see that I get the message when I click on the link. However, when I uncommon this and we're on the script, even though I click on the link, nothing happens. Remember when we first saw the ad event listener. I told you that this method extra arguments and that we're going to see the use of the third argument later. Well, I'm a man of my word. The third argument has to do with something called bottling and capturing, bubbling and capturing are too distant steps for the execution. Often event capturing is executed before triggering an event, whereas bubbling is executed after an event has been triggered. Both of these defined the propagation direction often. Event. What is an event? Propagation? Let's me use an example to explain. If we assign a click event our development and our P element and we click on the decks. Some text. Which events will be tricky at first? Good question. No, the answer lies down with capturing and bubbling. If you decide to use capturing, then the Dave event will be triggered first. Then the fee event comes after. On the other hand, if you years bubbling, that day event will be triggered first. Then the DIV one comes after it. Note that the default face is the bubbling face. Let's see an example to illustrate what I said here I have to the elements. The first step element has an idea off. Capture one inside this the element I have a paragraph element off I'd capture the second element has an I D off but one and inside off this Dave element, I have a paragraph with an i d off to the first thing I do is getting the references to my elements. Notice how I used on Lee one of our key word to define four variables. All I have to do is foot coma after each variable and a semi colon at the end. Next, I created my events, and this time I specified the third argument, which either takes true or false. If you specify true as the argument, this means you will be using the capture. If you use the capturing, then the death element will be triggered first. Then the event comes after it. So let's run our script and see what happens. If I click on Captain Face a message displayed, say. And if event is straight, then the P Event District. If you specify fools us, the argument. This means you will be juicing bubbling If you use bubbling, the B event will be triggered first, then did the div. One comes after it, So, as you can see when I click on bubbling face, the event is triggered first. Then the diff event is jaker second 23. The Event Object: previously, we saw how to create under move events. Let's move on and see the event object. First of all, what does this object do? Well, the event object gives you information about the currently triggered event. For example, you can know which element has triggered that event. The coordinates of the cursor which keys are your person, current thing and much more. This object can be accessed. Onley fn Event has a cured. It's access can only be done through a function that has been executed by the event. Let's say an example here. The event object is biased by a reference to the functions argument. I named the Argument E, but you can chose any name you want. Alert here will display the type off the event which in this case is a quick we saw the type property that tells us which event type has been triggered. Now it's time to see other properties and methods of the event object. One of the most important property off our event object is target. This property returns are referenced to the element whose event has been triggered. For example, I can change the content often element which has been clicked. No, it's another scenario when you apply some events like most over click etcetera. Apparent note. Those events can also spread among the Children. Notes. It's an example to understand what I just say here. I have a development when I did with an 80 off parent. This development has two Children child number one on child number two. I applied a mouse over event to this parent. When this most over event is triggered, the text content off our paragraph will change on display the i D off the triggering element. It's run the script and see what happens, as you can see when I put my moss over the pound element and message So you and the triggering element has an I. D off parent is displayed when I want to change one. The idea changed her child. One. The same thing happened when I move on to chime number two. The I D changed to Channel two, but what if we want to get the element in which we apply the event? In this case, it's the parent element. All we have to do is replaced the target property with current John get property after changing this line, the I t. Will always be a parent even when I put my mouse over the Children. Another very important information that the event object offer is the cursor position. This is widely used, especially in drag and drop script. Generally, we get the cursor position related to the apple left corner off the world page to get the position off our cursor to properties exist client eggs for the horizontal co ordinate and client. Why for the vertical co ordinate? Because the cursory visit position changes every time, the most move, the mouse move event is there for the most appropriate one to use in most cases to know which keys are pressed. We have three different properties. While that may seem too much, don't 40. It is very simple. We had the key up event, which is triggered when the user releases a key on the keyboard. The K don't event, which is triggered when the user presses a key. The third event escape Chris. This event is far when a key that produces a character valued s breast down. The real advantage off Cape Press is that it can detect K combinations. So if I press shift and a capers event will detect a capital A where are scaled and K down . Defense will be fired twice if I press shift and a once for the Shefki in the 2nd 1 For the A key to get the keyboard button that was pressed, win a key event. Occur. Use the key property. This property returns a string that don't thank you board buttons, district congee, a single character like F or T or four or multi character like enter or caps lock. Many HTML elements show a default behavior when you interact with them. For example, if you click on a link, it will redirect you to our webpage. It is possible to block this default behavior by using a method called Prevent Default. Let's run the script and see what happens here. I have my link. If I click on this link, nothing happened. Our prevent default method is working like a charm 24. Forms: working with forms is something you're going to do a lot in. JavaScript forms are simple to use, however, you need to get some properties under rebelled. First, we can access properties off form elements directly by using their names like value disabled, checked etcetera. Let's see an example here. I have an important element. Often I d. Next. The value off this element is I need your focus, please. I start by getting a reference to my element. He wasn't to get element my I D method. Then I had two events to this input element. The first event is the focus event. When the input element gets the focus, its value changed too. Great A. Have your focus. When the focus goes off its value. Come back to I need your focus, Please. Let's find the script and see what happens. Now our import intimate doesn't have to focus. When I click on it, the element gets the focus and it's that you changed too great. I have your focus when the focus goes off the value conduct to the old one, which is I need your focus, please. When you is in the properties disabled check and read only in HTML we would write something like this. Here I have a check box to pre select it. Use the checked property. You can see it doesn't. This property takes us drink as a value. But in JavaScript thes properties began actually billions. So if I want to select that checkbooks, you would write something like this the first start by getting a reference to do your element like we always do. Then you specify the checked property and give either true or false drop down lists have their own properties. We're going to learn on Lee to which are the most important one selected index who returns the index of the selected option and options who returns a list off all options element in our drop down list. As usual, let's say an example here I have a drop down list with different options. I start by getting a reference to this list using its I D. Then I add a change event to this list. This change event is triggered whenever I choose a different option. What I want to do is displayed the continent off the selected option element, so I used options and selected index together to get the option that I select, then using the text countin property, I can get the content of that selected option. Let's find the script and see what happens. As you can see when I select the option casual, it gets displayed. If I choose a different option, it gets also displayed. Forms don't have Onley properties. There are some really helpful methods. True, a form has two interesting methods. 1st 1 is submit that allows you to send the form without the intervention of the user. The 2nd 1 is reset who reset the form fields. If you have some experience with HTML forms, you probably know that these two methods have the same ruled as submit and reset in the import elements. 25. Developer Tools: contrary to what one might think browser don't just display with pages. They also provide a set off with the bug in tools for developers to access their Web application. This tools are known as developer tools or death tools for short. In this lesson, we're going to take a look at distance and learn how to fiddle with Overcoat. I will be using Google Chrome for my examples. I work in them to do the same so you can follow along with me. Other browses also provide similar functionalities to what I will be showing you, but the stairs to get there will be different. To open the death tolls, you have three ways. The first way is to go to the crumbs main menu. Select mortals and click on developer tools. Second Way is to right, click and select Inspect. The third way is depressed control. Shift our or command option. I If your own Mac, what you will see is a troll bar with a bunch of vitamin it. Each item literally do a specific test. The Elements panel gives you a view off your dumb and allows you to inspect the down elements and edit them as well. You will be visiting this panel quite often if you want to identify the HTML code for some part of your page, like seeing if an element has an idea, tribute and what value is assigned to it. Another powerful and very used functionality is the Council Council provides many functions for developers to test their Web application. Like Logan, diagnostic information during development process and interacting with the document and reptiles who is in a shell prompt the council. FBI provides a very powerful method alone. They noticed that information called council that log using council that law. I can see the value off, my result valuable. If I come back to the council under first stage, you can see that I get value for using the counsel to the bug is far more superior than yours and other sanction. If you use the council, you can check if your code is working without those annoying and interrupting dialogue boxes. The Council That log method is also very practical. Been trying to visualize the content, often object if I use the other function. All I get is a message discipline, object, object, which doesn't say much, but with the council that log, we can display the content off our object, as you can see here. If developers want to build a big, complex JavaScript application, they need an efficient and quick way to discover the cause behind an error and fix it. This is where the death tolls with his menu tools. Comes to the rescue and make the bug in a lot. Use it a lot easier in your developer tools. Click on the surface final. Make sure to select the distant each Daniel file on the left or whatever fine you are working with right now. This will make the content off this file appear on the right. Let's say that we want to see if our multiplication function is returning the correct value . To do this, I will turn the browser to stop at the return statement to see what the value off why is The way to do that is by sitting a break point to set a break point click on the left here . Once you do that, you can see the number getting highlighted. Now we need to refresh the page so that the browser hit the break point at the moment the pay the page is imposed mode. If I over over the valuable, you can see it's value. Shall we know you can remove a brook went by clicking on the line number. If I want to resume the execution off my cold, all I have to do is click on play. If there are some other break points in the code, they will also get hit. 26. Thanks For Watching: congratulations. You reach the end of this course. Give yourself a round of applause. You definitely deserve it. Thank you for learning JavaScript with me. They had so much fun during this course. And I hope you did, too. After following along with this course should now understand the essential butts off JavaScript. If you want to take your JavaScript skills to the next level, then you have to keep practicing. You know what they say? Practice makes perfect. So keep writing, quote, build your own applications and joined the broad community of JavaScript developers.