Web Development Fundamentals: Javascript

1. Introduction: Hello and welcome to Web Development Fundamentals: JavaScript. I'm Chris, I'm a self-taught web developer and creator three of the classes here on Skillshare, Understanding Web Development, How to Efficiently Build Wordpress Sites With Divi, and most recently, Web Development Fundamentals: HTML and CSS. This class is the next step in our Web Development Fundamentals series. In the previous class, we covered how to create webpages with HTML and then style them with CSS. In this class, we're going to learn how to add more interactive features to our websites and web applications with JavaScript. JavaScript, of course, is one of the three core technologies of the worldwide web. It's said to be the most popular programming language in the world and it is the programming language for front-end web development since the beginning of the web. So, regardless of which path you choose to follow, as a web developer, you're going to need some understanding of JavaScript and specifically, how it plugs into your webpages to create interactive websites and web applications like many of the ones you use today. So, if you're ready to dive in and learn the fundamentals of developing for the web with JavaScript, continue watching and I'll see you in the next video. 2. What you'll need: So, before we get started, it's important that we talk about required knowledge. As I mentioned in the last video, this course is the next step in our web development fundamentals series. So, if you're new to web development, I definitely recommend you go take my last class Web Development Fundamentals: HTML & CSS. Otherwise, if you know how to build web pages already, then you're in the right place to learn how to make them interactive. Now, for those of you who've taken my last class on HTML and CSS, I don't want to repeat myself too much in regards to the two essential tools, which are a web browser and a code editor. Chances are if you've already done some HTML and CSS before, you understand what these tools are and how to use them. If not, I recommend heading to the last class on HTML and CSS, and reviewing the "what you need" lesson on that class. Basically, apart from some knowledge of HTML and CSS, a web browser, and a code editor, you're ready to jump straight in to learning JavaScript. So, I'll see you on the next video. 3. Intro to Javascript: So, before we begin to work with some JavaScript, let's talk a little bit about what JavaScript is and how it fits into web development. First of all, JavaScript is simply a programming language. What is a programming language? Well, according to Wikipedia, a programming language is a formal language that specifies a set of instructions that can be used to produce various kinds of output. Why do I mention this? Well, it's important to differentiate a programming language from what the other two languages that make up the frontend are; HTML and CSS. HTML is a markup language, and CSS is a styling language. I know this might sound abstract but there are certain things that programming languages all do that HTML and CSS do not. I'm talking about explicit calculations, loops, and functions. For our purposes with web development, all you need to know about programming languages is that we need them in order to make our websites interactive. So, in order to share with you a few examples of what JavaScript can do, I've got a basic Web page open here, that we're actually going to be creating in a later video. But for now, we've just got a heading, we've got a button, and we've got an empty div. What I've got in my text file over here is some JavaScript statements that I prepared earlier that we can use to manipulate this page. So, if I go into the Console here, I can run these JavaScript statements right in the Console, and we can see these changes happening instantly. So, the first one is going to get the Pokemon button, which is this one, and it's going to hide it. So, I will put that in my Console, hit Enter, and you can see that it's gone. Another thing we can do is, change the inner HTML, which is just the content inside a particular element, so this one is going to actually give us some text to our empty div. As you can see, it now says, "Welcome to the class". If we go over to elements and look in our Inspector, it's updating there as well. The next one, we can also add any number of styling to that div. I'm going to add a 20 pixel margin. Now, you can see, we have a 20 pixel margin. Finally, I'm going to grab the heading tag, and I'm going to change it from Pokemon to Digimon. If I hit Enter on that, the change happens instantly. So, we will go into all of this in the class of how this is working but for now, this is some examples of things you can do with JavaScript. Now, the reason why we must use JavaScript to do this kind of stuff this is because the software we use to run JavaScript is our browsers. Remember, the browser is the program you're using right now to browse the Internet. Currently, there's a 90 percent chance that the browser you're using right now is either Firefox, Safari, Internet Explorer, or Edge. Therefore, if a website is going to work on all of these browsers, they all need to agree on which programming language they are going to run. This actually happened way back in the late '90s if you're interested in history. But really, why we must use JavaScript is not all that important. We just need to know that we have to use it for frontend web development. This is different to backend programming languages, as these are all run on the service side. Remember, HTML, CSS, and JavaScript run in your browser and the backend runs on a server. So, for our purposes, we just need to think of JavaScript as a programming language for the frontend. Anytime you want something to happen without reloading a whole new page, JavaScript is what you need to use. An example I like to use is the Web app Google Sheets. See as I click and drag across multiple columns here, there is feedback happening on the page without me reloading the page. I'm able to change the background color of the cells. I'm able to put in text into cells, and change the color of that text, all without reloading the page. Now, this is only possible using JavaScript. If I was to go over here to this plug-in I have, and disable JavaScript on the page, and then I reload this page, you will now see that Google won't allow me to use this application because it's simply cannot work without JavaScript. The only thing that really works on this page are links, which of course do not need JavaScript. But if I was to click on my homepage for sheets, it gives me this warning again. "JavaScript isn't enabled, so it can't be opened. Enable and reload." So, as you can see here, not much is possible on this page without JavaScript. So now, we've covered how JavaScript is a programming language, how it's predominantly a frontend programming language, and finally, that JavaScript is the only choice when building interactive websites. If you're still not crystal clear on what JavaScript does, don't worry we're going to be using this whole course to go through many of the things that you can achieve with JavaScript. So, without further ado, let's get started with JavaScript in the next video. 4. Getting Started with JS: So, seeming it served us so well in the previous class on HTML and CSS, I'm going to once again refer to w3schools.com as the curriculum for this class. So, what I'm going to do is open up a new window, and type in w3schools.com. Now that we're on w3schools.com, we can see menus down here and in here for HTML, CSS, JavaScript, Server Side. Remember in the last class, we covered HTML and CSS using this curriculum. But let's click to JavaScript and click Learn JavaScript. So, next, what I want you to do is open up your Developer Tools, and in the web browser that I'm currently using, which is Google Chrome on Mac OSX, I can press Option Command I to bring up the developer tools. That's a shortcut that helps me to open up the developer tools really quickly, but otherwise, I can find developer by going into View, Developer, and clicking Developer Tools. So, like I said in the last class, you might be using Firefox or you might be using Safari. It's a similar thing in each of those programs. In Firefox, I believe you go to Tools, then you go to Web Developer, then you press Web Console and you're able to get a pretty similar interface here. On Safari, you will just need to head to any page first. Once you are on a page, you can click Develop, and then you can click Show Web Inspector, and then you get a similar interface here as well. So, in this class we're going to be working with mainly the JavaScript console, so it's the final tab on Safari, but on Google Chrome it's actually the second tab. So, if I bring up the Developer Tools again, we've got Console here. If you remember from the last class, we worked a lot with this Elements tab to inspect our HTML and see what styles we're applying over here in our CSS rules. Now, the reason why I've jumped into the console straightaway is because it's very helpful in helping us run JavaScript and also debug the JavaScript that's running on our page. So, the console, basically, enables us to interact with a web page by, once again, either executing JavaScript expressions in the context of this page or having our JavaScript output something to this console so we can actually view it and figure out what's going on. That's probably hard to conceptualize right now if you don't have any experience with JavaScript, but you will see very soon as we start to build some JavaScript that you will start to use the console here. So, what I might do is break this off into a new window. So, I can do that by clicking on here and pressing Undock into a separate window, so now I have it off to the side. Now, what we can do in this JavaScript Console, just as an example, is we can run any JavaScript. So, say for instance we wanted 5 times 5, and we press Enter, it gives us 25. So that's a simple math problem. We can create a variable called x and call that 5, and then we can, times 5 by x, and see what happens, and we get the same result. So, we're able to run JavaScript right in here. As you'll see, we'll use some of the web page to actually affect it using this console as well. You can click here to clear and then you're back to where you started. Now, the console is great for figuring out things and testing things, but as soon as we reload the page, we lose everything that we've done here. So, if I was to set a variable of x and make it 10, as you saw before, we can use variables now to do any math for problems here. But if I reload the page and then go back to that window, first of all, I have to clear all this mess here. But if I type in x, it'll come up with an error, x is not defined. So, what we need is to have a JavaScript file where we can store all our JavaScript lines. Now, that will be a future thing that we will do once we start implementing in our project. If you've taken understanding web development, you would see how we can incorporate a JavaScript file into our project. If you took the last class on HTML and CSS, you would know how to bring in an external style sheet. It's basically the same concept as an external style sheet, we just put all of our code in another file and then bring it into our project. But again, for now, we're just going to be using what's in our browser. So, let's get straight into some examples right now. So, down here, it says Learn by Examples. So we can click on this link to see some Javascript examples, and we can click on Examples explained. So, here's some of the things that JavaScript can do. It can change HTML content. So, one of the many JavaScript methods in the context of HTML is getElementById(). What we're doing here is we're grabbing the document, we're finding an element by the id of demo, and we're changing this attribute here, which is innerHTML to Hello JavaScript. Okay? So, let's click on Try it Yourself to see the result. If I click on this button that says Click Me, suddenly, that has been changed. Now, if I go and click Run to refresh here, you will see that this paragraph tag has an id of demo. So, what I'm doing in this button, using this attribute, and don't worry we will cover what's going on here in a later video. But essentially, in the example here, we have this button triggering an onclick method of this, which will set any element that has an id of demo to have an innerHTML of Hello JavaScript, and innerHTML just basically means everything within these two tags. So, you can see, when we click the button, everything between these two tags now becomes Hello JavaScript, and you can see that happening live on the page. This is what's great about JavaScripts, the changes happen right away without you having to reload another page. So, going back to the examples, we can also change attribute values. Now, for this one, what I want you to do is bring up the developer console. We're going to clear, and I want you to inspect this image, and see what's going on here. This is the good thing about the Inspector, we can see which each attributes are changing when we are doing something. So, I will need to run these side by side so we can actually see what's going on. But just have a look at both the light and over here when I click these buttons. So, if I turn on the light, the light goes on. Turn off the light, the light goes off. But as you can see here, what's actually happening in the actual code is the pitches changing here. So, I want you to look over here when I click off Turn off light, there you go. Now, you can see that it's pic_ bulboff. So, it's completely swapping out the SRC field which tells you, sorry I have to click that, and then you can see the images completely changed. It's actually swapping out the SRC attribute here to put in another image. So, this is really cool. We can change attribute values as well. So, we can also change HTML style, so CSS basically. I'm going to expand for this example and click Try it Yourself. If I click here, you can see that the font size is changed, and we've done that by once again putting the id of demo onto a p tag and we're changing the attribute of style and the sub-attribute of font size to 35 pixels. That happens as soon as we click the Click Me button because of this onclick attribute. Again, we're going to cover this which is called an event handler in a later video. But now, just for the example, it's good to know what JavaScript can do. You can also hide and show elements, so this is pretty basic. You click on the button and it can hide certain elements, and that is just by setting the style display property to none. So, here's the example for show just to make it complete. There you go. That's the exact opposite. So, we set the display attribute to block instead of none. Now, if you remember back into the HTML and CSS class, I was talking about why we would set a certain element to display none, and this is the perfect situation why. So, we have this p, it's available, it's in the document, but it's not showing up. The reason why we'd want to do that is so that we have some situation in which we change its display style for it to show up. So, right here, when the page loads, it's not going to show up because the style is set to display none, but as soon as we click that button, the display has been changed to block. So, that is good tie-in to the last class. If you didn't know why we were doing that or you just need to see an example, there it is right there. Cool. So, those are the basic examples of JavaScript and I think that's a pretty good introduction into what JavaScript can do. In the next video, we're going to cover the important stuff. We're going to cover syntax and statements. Then, we're going to get into all the different things in this list, not necessarily all of these, but all the important ones to do with the basics of JavaScript. So, thanks for watching, I'll see you in the next video. 5. JS Syntax and Statements: In the last video, we covered an introduction to JavaScript. We also shared some common examples of what JavaScript can do. Now, in this video, we're going to cover is something that's very important when learning any programming language, and that is syntax. So, I'm going to click over on this menu item for JS syntax, and we're going to look at some of the syntax for JavaScript. If you're not familiar with the word syntax, it basically is the set of rules that determines how you write JavaScript code, or syntax in general, is basically the grammar of how you write code in a particular language. There's certain things that are common in every programming language like declaring variables, assigning values and computing values. Here's some examples of how it would look in JavaScript. But we'll get deeper into it right now. In terms of data types, we've got some common ones here, numbers and strings. Numbers, you don't have to put any single or double quotes. You just literally put in some digits and it doesn't matter if it's a decimal or a whole number which is also called integer. It's still considered a number in JavaScript. For strings, and strings, I guess as a programming term, but it's not that hard to understand. It's basically just text. Whenever you write a string, so that you can differentiate it from like keywords in your code, you always have either double quotes or single quotes surrounding it. So, scrolling down we can see variables, and we can see how to first of all, declare a variable and then also to assign a value to it. Usually, that's done in the one go. If I click, Try it Yourself, you can see here we've got declaring a variable here. So, we've got the keyword of var, space and then an X. So, we first declaring that we want to have a variable called X, and then we're taking that variable and we're assigning it a value of six in this operation. Then we're putting the value of X out into the screen through this element called demo. Now, usually this is done in a shorthand way, and we can just backspace there, click Run, and we can both declare and assign a variable in one line. That's enough often the case unless we wanted to declare it in a different scope and then assign it in a different scope, which I will show you later when we cover JavaScript scope. So, we've got operators which pretty common. You just got plus, minus the asterix for multiplication and you've got the slash for division. So, you can see here how you would write a math problem for the result of five plus six times by 10. Now, a thing that you could get confused with programming language, is this equal sign. It does not mean that X equals five. It means that five is assigned to the variable of X. Now, isn't that the same thing you might be asking? Well, no. If we were to write an if statement, which is basically just a statement that will execute code. If something is the case, we use double equals or triple equals. But we'll go into that in the lesson on comparison operators, but for now when you see this equals, it means that we are assigning a variable or a value to a variable. Here we're covering expressions. This is pretty self-explanatory. We're getting a five and we're timesing it by 10, we're taking the value of X and we're timesing it by 10. But here is maybe not so obvious, and that is how we can join together strings. So, if we wanted to construct a string, maybe we wanted to put a variable in here, we are able to use the plus operator. So, you can do a string of John plus a string of one whitespace plus a string of Doe, and that will evaluate to John space Doe. Right now this doesn't really make sense, but if we were to put in certain variables, this could be replaced with a certain variable. In fact, I might demonstrate that right now for you guys. As you can see here, John plus space plus Doe, evaluates to John Doe. But say for instance, I can go in here and do variable X equals, and I'm typing a string, so remember I got our opening and close quotes, and maybe it's a initial, so we put in J. So here, instead of a whitespace, we would put in X. Now, if we run that, you'll see that the value of X, and it should be a string because we're putting together strings, is J, and so it puts it in between those. That is a good example of when you want to put together like literal strings that you define here and other variables that contain strings. That's how you would do it. They're also talking about keywords that come up in this context as blue. We already looked at the var keyword, which tells the browser to create variables. What you do is put var, space and then the variable name to declare. Do you want to declare multiple variables at the same time? You can just use a comma and then put another variable in there. Then here, after we've declared it, we're now assigning values to these different variables. As you can see here, we're using one variable that we've already declared and assigned we're putting the result of that against 10 here, and we're getting a new variable which is Y. Another thing that you'll see quite often is comments. This is whether you're using HTML, CSS, JavaScript or any other language. Sometimes, you want to write stuff in the code that you don't want to be executed. For instance, you might want to explain what's going on in this line. You might want to say, this assigns five to the variable X. You wouldn't usually have to write a comment that basic, because this is such a basic function. Actually, there's an error here. I'm going to make sure that this semicolon is not in the comment. If I run that, nothing changes. Is just a comment in the code. As you can see here, we can also use comments to keep code that we've written but not have it execute. If I just remove that comment, and I stopped the comment from there, you'll see X becomes six now and it will take the last assigned value of X and put it there. But if we're to put in some comment marks there, it will go back to five. Now, just keep in mind that this will start the comment from right after it on a separate line. So, if we go to a new line and type in var y, you can see that it's not green now because we're starting a new line. But if you wanted to do a comment over multiple lines, what you can do is, open with a slash and an asterix and then close with asterix and a slash. So, we can write any number of code of a multiple lines and it'll all be a comment. So, it won't execute. If I say, Y equals seven and then, actually let's move that below here, and let's say that X equals seven. Let's run that. You'll see that it's not executing because it's inside a comment. Whereas if I remove these, and Run it, you'll see that x is now seven. Actually that's bad syntax because I'm re-declaring the variable. I can just put it like that and X will now be the value of seven. So, moving on, there are some other things in JavaScript that are really important. One is that JavaScript is case sensitive. As you can see here, lastName with the N capitalize is different to lastname, everything lowercase. If you were to write this variable in capitals completely, it would be a whole different variable. That might be confusing to some that have come from programming languages that aren't case sensitive. But in my opinion, it's a very good feature to have and that's because we can use something called Camel Case. So Camel Case, for those of you who may not have done a lot of programming before, is a great way for us to create variable names when we have multiple words in the one name. So, as you can see here we might be tempted to do first-name and we'll just split up the words but that's not allowed in JavaScript. One thing we can do is, use underscores to separate words, but a much cleaner way that a lot of developers prefer is Camel Case. So, that is capitalizing the first letter of one of the words or both of the words. So, in this example we're capitalizing all the first letters of each word, but more commonly is lower Camel Case which is starting off with lowercase and then once it gets to a new word the first letter of that word is uppercase. So that is Camel Case. So, now we've reached the end of the page and it's time to go to JavaScript statements. So, by just clicking JS statements, we can have a look at a JavaScript statement and we can break it down by the different parts that's composed of. So, we've got values operators, expressions, keywords, and comments. So down here, we can see that this particular statement tells the browser to write "Hello Dolly" inside a HTML element with the ID of demo. So, going through this statement, we start off with an object at the top which is document and that just targets the whole document then we can go a step deeper by getting an element by ID of demo within that document, then we can change an attribute based on that particular element. We are assigning a value, so we use an assignment operator and then we put in a value. So, going back the other way, we're taking a value, we are assigning it to an attribute which is on a particular element, which we use to find by taking the context of document and then digging deeper in. Again, we're going to go over this particular part of the code in later videos, so don't worry too much about understanding this. But essentially, we're just breaking down what's happening in a single statement right now. Very important part of statements is semicolons. So, semicolons are required to end an executable statement. So, if you are to say for instance, declare a bunch of variables and then assign some variables, once you've finished a statement, you have to put in a semicolon. So, with some languages if you put something on a new line, then the programming language knows that it's a new statement and it executes them separately. Because we have to use semicolons with JavaScript, we can actually put all these statements on the same line. Usually, that's not the best idea because we still want to lay out a code nicely, with nesting and new lines so that we can see different statements, but that is a option available to us. The other thing to note about JavaScript, is it ignores multiple spaces, so you can add as much white space as you want to your project or to your code in order to understand it better. So, these two lines are equivalent, but I think most of us will agree that this is a bit nicer because it gives us a bit more white space, a bit more breathing room around the assignment operator, the value and the variable. So as it says here, it's a good idea to put spaces around operators. But we could essentially remove all the spaces here, here, here, and here. We couldn't remove this space because this is a key word and needs to end with a white space, but in terms of this here, we could remove all the white space and it will still work, but it'll just looks ugly. So, it's recommended to put space around operators but not essential. So, again, each statement is ended by a semicolon and that means we can put multiple statements on the same line like we did here, or alternatively, we can break up a really long statement by placing it on multiple lines. As long as we break with a semicolon when it's done, it's okay to break it up over multiple lines. The next thing is code blocks, which if we're defining a function or a loop, we're going to start a block which executes as part of that function or part of that loop. We do that by using semicolons. So, in some programming languages, we just need a new line or we have a keyword that will say end at the end, but in JavaScript we start a curly bracket and then we end with a curly bracket. So, everything within these two curly brackets is part of this function. That being said, we can also use keywords as well to end a block. So, you don't have to use these curly brackets all the time, we can actually use keywords but we might see some examples of that in a later video. For now, the standard way to do it is just to add these curly brackets and then everything within the curly brackets is what is part of that code block. All right. So, we've covered a lot of stuff to do a syntax in this video. A lot of the stuff we're talking about here is lessons that we haven't learned yet in JavaScript, so don't be too worried if you don't understand everything that's going on here. It's important to cover those syntactical things straight up because say for instance you make a syntactical error further down the track maybe because you have experienced in a different programming language and it's not the same as in JavaScript, you could get frustrated in not knowing what you're talking about. So, when it comes to syntax, it's best to just follow the examples not try and change the system too much and that way you'll be less likely to have breakages in your code. So, that's syntax, in the next video we're going to cover output. 6. JS Output: So, in this video, we're going to cover the display possibilities with JavaScript. So, if I click on JS output in the menu here, we can see that JavaScript can "display" data in different ways. So, we've seen it with inner HTML, so we can write directly into HTML element using inner HTML. We can also write into a HTML output using document.write. So, as we saw before, this is an object called "document," which represents the whole document. Then we are calling a method on that of "write." Then in here, we can put in some output. We'll get to that example in just a sec, we can use alert and this is a really basic one that you see a lot in a JavaScript training, but if I go to my console and I just clear what's there, I can start an alert right now. So, I can go "Hello Skillshare!" Now, you can see, an alert pops up saying, "Hello Skillshare!" So, that's one way, alert is kind of outdated now, it's usually only used for if you're about to delete something, and it's really important to get your attention so you might have seen this before. If we run that, it might say, "Oh, are you sure you want to delete?" and then you press "OK," and you finished deleting. The common one that I'm using a lot to debug is console.log. That allows us to write to the browser console. Won't necessarily make sense right now. Doing it here because we're already in the console, but within the code that we create, I can have it log something to the console. So, let's just say, "Hello Console." If I run that, it'll come back with Hello Console. Not a very practical example because we're giving it import and we're getting it directly back. But what you can do within your code in your JavaScript that's actually running on the page, you can set a console.log and so that you can get feedback of what's going on, on your page to your console here. Then so you can see, "Oh, that's what that variable is, okay. I need to change that." But again, we'll go later into how to debug code later in this class. So, the first example is using innerHTML and I don't want to spend a long time on this because, we've already covered it in some of the basic examples. We can basically put in some HTML in between these two p tags. So, if I use the example here, JavaScript is actually quite clever, realizes that we're trying to put in a string here, but we have a operation with numbers here. It takes the result of the calculation here, converts it into a string so it displays as text in our p tag here. So, if we inspect here, I put this down so we can actually see. You can see that is our p id=demo and inside, we have the result of that equation which is 11. So, the next example is document.write. So, we can use it for testing purposes, I never find myself using document writes personally because I'm always using console.log, but we can try out the example here. You can see here, that we've already ran it. But you can see that we are now writing the results of five plus six to the page. So, the difference between this and the last one if I go in and inspect, put this down and inspect that 11, it's sitting just in the document. It doesn't have a p tag or anything because we're basically writing it in the section of the document where the code is specifically written if that makes sense. So, instead of in the previous example, finding a particular element, and then changing an attribute to put the result directly into a HTML element that exists wherever on the page, we are just simply saying, wherever this is executed, write it to the screen. Perhaps, we can maybe put this script tag in here. Again, this is not very clean code, but maybe it'll work. We can see here that if I'm inspect that, now you will see that 11 is written inside that p tag because we've got a script inside that p tag. But that's not very good code, that's not very clean, so I wouldn't recommend that if you wanted it to output to that p, we should use the previous example using inner HTML. In that case, that's why I never really find myself using document.write, but that is an option there. So, we've covered alert just before, and console.log is the one that I'm using so often to debug. As you see here, it says, "You will learn about debugging in a later chapter." Definitely for our purposes, we will be learning about debugging JavaScript later as well. All right. So, that covers output, this is the one that you'll use most often, or you'll be changing content on the page, don't worry too much about window alert or document.write. In the next video, we're going to be talking about variables. So, I look forward to seeing you in the next one. 7. JS Variables: In this video we're going to cover variables. If I go to JS variables here, we can see some examples of stuff we've already seen from the lessons on syntax. But let's scroll down and cover some of the things that we haven't seen already. I definitely recommend coming back to this page and reading it so that you understand everything that you really need to know about variables. But if you understood, when we went through variables in the introduction and video on syntax, then you should know enough to continue on. We covered how you can create many variables in one statement by using a comma, and that declaration can span multiple lines as long as we end that statement with a semicolon. Something that we haven't discussed yet is the value of undefined. If I declare a variable of carName here, and I don't actually assign it any value, what is the value of it? So that's a good question. If you don't actually define a value for something, it ends up having a value of undefined. To see that in our console, if I was to do var carName and then I just outputted carName, it comes up as undefined. If I was to assign a value of Mazda, which is the car I drive, it will resolve to Mazda there. But then if I type in my carName again and press Enter, it comes up with a string of Mazda. Before we assign a value to it, it is just undefined, and will see later why that actually is important. Another important thing to note here is if you re-declare a JavaScript variable, it will not lose its value. The variable carName, we'll still have the value of vulvar after the execution of the statements. By putting in this statement, after you've defined a value on a variable, it doesn't actually wipe it and set it back to undefined. As you can see here, we can do arithmetic. We can also add strings together. The technical term for this is called concatenation. I wouldn't go talking more about that because we already did that in the previous example, but you can also use these operators, not only to add numbers together, but also to add strings together. Now JavaScript is actually pretty clever and the fact that it won't error when you try and put a string and a variable together. If we scroll down from here, we can see that you can actually use the plus operator in a single statement with strings and numbers. Now some programming languages wouldn't allow you to do that because it would see that this is a data type of string and this is a data type of number, and it wouldn't know what to do. Maybe you want to add five and two together to make seven, in that case, you would treat this as a number, not a string,o r maybe you want to add the string of two to the string of five, and in which case you would get 52. In JavaScript, it will treat these as strings because the first value is a string. So if we click here and try it out, you can see that the result of adding five as a string and then two and three as a number is five, two, three. It's the same thing as if we went to here, and we explicitly called these strings by pointing double quoting where the actual value is being assigned to x, you'll get the same results because it is just taking these two numbers and actually changing them to strings based on the data type of the first number which is actually declared as a string. If I was to remove the double quotes from the first number, it would go back to being a data type number. If I run, then you get five plus two plus three, and the result of that is 10. That might take some time to wrap your head around and that's cool. Generally, you shouldn't mix data types for fewer operations. If you want to do an arithmetic operation with numbers, don't put the quotes in. If you want to add strings together, make sure you use double quotes. If you want to combine it like this, that's when it starts to get a little bit tricky, and oftentimes you won't find yourself doing this unless it is a mistake. You don't really need to worry. The flip side of this is by changing the order. If we try that out, we can see that the first two numbers added together, but then because it's adding a string on the end, it adds five as a string, if that makes sense. It's the same thing as if we put these in brackets and click Run. All we put the results of that explicitly as a five, we would get the same result. What it's doing is resolving these two numbers by adding them together in an arithmetic operation and then turning that into a string and concatenating it to that string. Again, this is stuff that I don't have to deal with on a regular basis because I just follow the general rule. If I'm doing arithmetic, I use numbers. If I'm concatenating strings, I use strings, simple as that. But if you do try and combine strings and numbers, that's when you start to see some of this funky behavior. Those are JavaScript variables. In the next video, we're going to talk a little bit more about operators. So I'll see you in the next one. 8. JS Operators: In this video we're going to cover JavaScript Operators. This is really important because like we mentioned here, this does not mean equals, it means assignment. That is one of the common mistakes with operators but let's dig deeper into it right now. This equal sign means assignment and that is the most common operator that you'll see in JavaScript or pretty much any programming language is we need to assign values to variables. The equal sign is the assignment operator and it assigns a value to a variable. The addition operator adds to given numbers, but it also as we saw before it can add to give a strings as well or a proper term would be concatenation. It combines strings together to form a larger string. The multiplication operator multiplies numbers, this is stuff you should know by taking any basic math class, addition, subtraction, multiplication, and division, you can also do something called a modulus, which gives you the remainder after dividing two numbers. There's two other operators here, the increment and decrement operator in JavaScript. As you can see here, this arithmetic operators are fully described in the chapter on JS Arithmetic, which we'll go into briefly at the end of this lesson. Going to JavaScript assignment operators, assignment operators assign values to JavaScript variables. The easy one is equals, but there's actually a few different ones. There's these shorthand operators that allow us to basically save space. They're obviously not that essential, I mean the difference between writing this and writing this isn't huge but if you wanted to save time and basically add y to x, you can do that with this. If you wanted to subtract y from x and then x be the difference between those you can use that operator. As we saw before, we've got JavaScript string operators as well. We can concatenate strings using the plus, and we can also use the shorthand plus equals to concatenate strings so what we can do is have a string here for text 1, and then we can add to it by using this concatenation assignment operator. Let's just show that as an example. We've got 'what's a very' space and then we're adding to that 'nice day.' When we output text 1, we get the full string. This is the equivalent of doing this, which is to put in text 1 again and then put in a plus so you'll get the exact same result, it's just shorthand. Going back to the page, we can add strings and numbers together like we saw before. These are examples that we covered in one of the previous lessons, I'm not going to go over it again but the important thing to note here is comparison operators. Like I said before, one of the things that even as a experienced programmer that you sometimes might forget and especially as a newbie, is that the assignment operator, the single equals, does not represent equal to and for that it's either double equals or triple equals. Double equals is the common one, but there's a slight difference between these two. This one will evaluate to true if the left side is equal value to the right side. This one will only evaluate to true if the left side is equal to the right side and they are of the same type. That is a bit more technical and we might get into that later but for now this should be enough for you to do comparison of whether two variables are equal. This one is not equal, so you just put an exclamation mark and an equal sign and this will evaluate to true if the left side is not the same as the right side, and this is the same as this but the opposite, we can also do greater than, less than, greater than or equal to, less than or equal to and then there's also this ternary operator. I don't know if we'll go into ternary operators in this particular class, but if you'd like to learn more about ternary operators, definitely look it up. It's just a shorter way of doing if-then statements basically. We also have logical operators. If we were to check if two statements were both true, we could do. Hopefully there is an example here. There isn't. Let's create our own example here. Let's test something out. Let's put in a statement, five equals five. It comes back true. Let's put in four equals five, false, that's what we expected. Using a not equals, if I do four not equals five, we should get true. That's the opposite. You might be thinking, Chris, it's obvious that five and five are the same and four and five aren't the same, why are we doing this? We can replace these explicit values with variables. If I was to declare a variable of x equals 10 and declare a variable of y equals 20. If I was to put in a statement like this, it comes back false. If I was to put in a statement like this, it comes back true because they aren't the same. Now where the logical operators come in is I can combine two statements. Let's combine the first two. We've got five equals five, which we know is going to be true but we want the statement to only be true if x is equal to y as well. If we put in x is equal to y, it'll come back false because the first part is true, but the second part is false. It's only if both of those is true, but we can also use pipes for all. If I was to do that same statement and put in pipes instead, it comes through as true because either one of those sides needs to be true in order for the whole thing to be true because it's O. This is true, that's not true, but only one of them needs to be true so the whole thing is true. We can also use logical knots, which is a exclamation mark. It might not be clear of what we would use that for right now, but if I was to put in exclamation mark true, it'll come back as false and if I put in exclamation mark false, it'll come back as true because it's basically saying the opposite. It's saying not true and here it's saying not false. If I go and put in brackets here, five equals five, that'll come up as false because that is true and this is asking if it's not true. It's basically the complete opposite. Down here we can see the type of operators and I only really use this, the most common example I can think of using this would be to check if something is undefined. Let's use a different variable names even we've used x before. I'm just going to call it probably not the best name, but variable. If I do a type of here and open brackets put in variable close brackets end the statement with the semicolon, you'll see it comes back as undefined. Whereas if I assigned to variable a value of one which is just a number and then we type in type of variable, comes back number and if we were to change that to a string, let's just say hello and we typed in type of variable, you would say that it's now a string because we assign a string to it. Type of operator is handy sometimes to figure out what data type your variable is. Down here we've got some Bitwise operator. Honestly, I pretty much never have to use these. I'm not going to cover them, if you want to know more about them there's a whole chapter on Bitwise. That is an overview of operators, there's also a few different menus here for arithmetic and assignment. Remember we talked about the increment and decrement. I'm just going to scroll down to that now. As you can see, as we get down to it, there's the remainder one which you can try, if you want to increment a number by just one, we don't have to write the long form x equals x plus 1. We can just do x plus plus. It's a very shorter way of doing it. For instance, if I was to remove this by putting in a comment, it will just be five and I can do the exact same as that by doing x equals x plus 1, and they'll come back as six. This x equals x plus 1 is the exact same as using this. It's just a shorthand. Let's just comment that out again and if I was to do a minus, now you'll see that it's 5 minus 1, but we can also use the shorthand for that as well, so I'll remove that. Instead of using plus plus on the x, I will do a minus minus and you'll see we get the exact same result. We often see this operator with loops as a shorthand we don't have to type in x equals x plus 1 when we can just put in this shorthand operator. Going back to the page, we can look at operator precedence but I'm quite sure that this follows the same order as standard mathematics. If you understand your mathematics then you should be okay with this. Here you can see some more technical mumbo-jumbo. Honestly, probably you don't need to look too far into that. The final menu item will go into is a summary of assignment operators. As you can see here, there are all these different ways to assign variables and they basically shorthands. Over here you can see that this is the same as this. These are probably more the common ones that you will use if at all and that is the exact same as what's in this column. We've covered assignment quite a bit already but if you want to see some of these shorthands you can go to this menu, honestly is not that important. If you put in your code this, it doesn't really matter. It's just if you want to be a little bit more tricky and save some space you can do it that way. That's all I wanted to talk about on operators. The biggest thing and the biggest beginner mistake is thinking that this is a comparison operator. It's not, it is assignment and you can see that it's being used for assignment very often but sometimes when it gets to creating an if then statement or a comparison statement, people are often tempted to say something like this, five equals five but then as you can see here, it thinks that you're assigning five to five and five is just a number you can't assign something to just an explicit number, it has to be a variable. If you wanted to compare those two, you would have to put in the extra equals sign and that's how you get equals comparison operator. That was the main thing I wanted to get across, you can see some other examples of operators here. This is all available on the Internet so you can come back and reference it if you own anything. In the next video we're going to cover more about data types. I'll see you in the next one. 9. JS Datatypes: In this video, we're going to talk more about data types. Again, we've already covered a little bit about data types in the introductory lessons but let's dive a little bit deeper. Let's go to the J, S data types menu item here and you can see here once we've talked about before, a number and a string, but it's also very common in JavaScript to have objects. Objects might be a hard thing to get your head around, but if we go down to here in the J, S objects menu item, we can see that objects mirror in real life. In real life, a car is an object and a car has properties like weight and color, and methods like start and stop. You can start to see here that in JavaScript we could have the same thing, we could have an object called car and within that we could have all these properties, and how we define or how we reference these properties is with a dot and then their name so we can assign a name of Fiat to a car, we can give a model of 500, so on, so on. Then we can also assign methods to an object as well, so we can have a function basically, on the car that when we call car.start something happens. But again, I'm jumping a little bit far, ahead of myself, let's go back to the menu on data types, how we define a object, I'm going to skip ahead of numbers and strings and go down to a few other ones code Booleans. Basically Booleans can only have two values, so remember before when we are evaluating these statements, like does five equal five? Yeah, that's true, true is a Boolean, so we can actually assign a Boolean as a value to a variable. Instead of just saying five equals five and putting that out and say that's true, we can actually assign a variable here and let's just say that the variable's code, is it true, we can actually assign the results of comparison operator here, so we can say is five the same as five, if so, assign true, is it true? If not assign false, is it true. Now when I type in, is it true, it'll come back as true. As you'll see, that probably, doesn't make a lot of sense now, but it actually helps me create a show ahead operation, we haven't gone into if then statements before, but essentially, if I want to create a logical statement here with if, I could just say, is it true and then execute some code rather than typing in the explicit comparison that we had before of five equals five. Now for this, it's very small, so it doesn't really matter, but maybe you have a huge statement and you want to save the big statement as another variable, you can do that and then that data type would be Boolean. If we check now, type of is it true, and it'll comeback Boolean. Number one is arrays, and arrays might take a little bit of time getting used to it but they are common in every programming language, we can assign a group of values to a variable and then call them based on indexes. To demonstrate that right now, we're going to clear my console and do the example here. Rather than reinvent what I've done here, I think this is a pretty good example. Now we have cars, if we have put cars, we will get how the console represents an array, it's like this and the first number actually tells us how many values are in the array or how many items are in there and then we can click this to see the different items in their index. This example is pretty simple, it's pretty easy to see that, that is the first, Saab is the first value, that is the second value, that is the third and actually one of the confusing things here is that the first is actually represented by zeros so don't get confused. If I type in cars with a square bracket, then zero, then end the square bracket and then put a semicolon in and hit enter, it will come up with Saab. That is a confusing one, you'd be developers as well, is that the first value in an array is zero, of course, if we wanted the next one, we just type in one and then we get Volvo. The powerful thing about this is if we have an a rifle values, we can actually loop through them and do similar things on all of the values and you'll see that in a later video, but an array is what we could give to a loop, to loop through all of these and create some HTML on the page. Arrays are very common and very powerful, so definitely a good thing to learn. Now we're getting back to our good friend, the JavaScript object. This one will probably take a little bit more time to explain because it's the most complex data type there is, and the reason why is because we have a name value pairs separated by commas, so was storing a lot of things in the one variable or the potential to store a lot of things in the one variable. Here we have an object and an object we can define with these curly brackets and as you can see here, we've got name value pairs or key value pairs, and semantically that's a lot nicer. If we go back to the example he and objects, you see here how we are able to grab the name of a car or assign the name of this car as Fiat. Well, if we go down here and we see the example, I'm just going to copy that into my console, clear this, if I run that, now I can call car.type and it comes up a Fiat. I can run car.color and it comes up with white, and this is much nicer than what we had before with using index numbers, because maybe there's a range of different properties and it doesn't make sense to line them up. You're not necessarily going to loop through them in an iterative way, you just want to be able to dig into a particular car and get certain attributes, that's where objects are very good. What we can do here without redefining the whole object is we can change the value of some of these, so I could go car.color equals, let's say black instead of white. Now if I output car again, you can see this is how your console will represent an object to you, and if I click this like how it did with arrays, instead of these index numbers, we have names. We've got color black, modal 500 type Fiat, and so that's a nice way what we can work with objects in JavaScript. I'm bouncing back between data types in objects, but objects is a very important data type so these go hand in hand and there's some information here on objects and then it goes further detail into that. We've got type of which we talked about undefined, which we talked about empty values so if we were to just put in a empty string, let's try that now. You may be thinking that it might be undefined because the string is empty but it's actually defined still as a string because we put in those quotation marks. It's an empty string all the same, but it's still a string. Another value is null, and null is basically nothing. As it says here, unfortunately in JavaScript the datatype of null is actually an object. It can be a bit confusing and you can consider even a bug in JavaScript that a type of null is an object, it should just be null, but basically you can empty an object by setting it to null. If we were to use this example, we have a person that's obviously a object because we've got curly brackets here and we've got name value pairs, but then we can assign a value of null to this object, and if we grab the type of it, it's still an object. This is just some quarks within JavaScript, this wouldn't be the same in most other programming languages, but it's just a little thing to cover with JavaScript. It's important to note that you can also empty an object by setting it to undefined, and the difference between undefined and null is a little bit nuanced, but basically, the type of undefined is going to be undefined, but the type of null is going to be an object, as we talked about up here. Down here remember we learned about using the comparison operators that have two equal signs in them and three equal signs in them. Now, if we look at them value against a value, it evaluates to true, but if we look at them, are they the same datatype? While they're definitely not because we've just checked the type up here and the different, so it will come out as false. This is getting into the nitty-gritty and honestly, you don't need to be too familiar with this, but it's just something to cover and there's some more complex examples here, but now it's starting to get into the more complex stuff. Basically, it's important to know what objects are and it's important to be able to call methods on objects and also understand the properties on objects and that's why we'll just dig a little bit deeper into objects here. As you can see, we have a decoration of the car here which we worked with before, we can also break that up over multiple lines like this, so instead of car, we've got person here and we can set attributes of that person. Again, like we showed before, we can use a dot and then the property name to access a property on that object, we can assign values to it or just output the results, we can also do it this way through a square bracket and then putting in the name in a string, that is also an option, so this is the same as this and also we can put in methods like this. We haven't covered functions yet, but this is how you would declare function, we can put it within an object and assign it to the name of something. I won't go deep into this because we haven't covered functions yet but that's what's going on here. Here's a common example that you'll find a lot in JavaScript trainings, is the full name example, this is just a simple function that will return the concatenation of two of the properties of the object. We've got first name and last name, and maybe we don't want to specify a full name because it's based on the values of these previous attributes. What we can do is define a method that takes the first name, adds a space in between, and then outputs the last name, and we can use this keyword to reference the current object that we are in. When we're inside this object, it hasn't been fully defined yet, so we don't want to use the word person right now, so while we are defining it, we refer to this object that we're currently in using the keyword, this. When we change the inner HTML of this P to the results of this method which we have defined here, we'll get first name with a space and then last name. Hopefully that's not too much information, again, we'll go into functions, I think it might even be the next video, but we'll definitely get into it very soon. Scrolling down to the end of the page, we can see some more complex stuff here, not all that important with covering the basics right now. Those are the major data types, again, we covered number and string in earlier lesson and Booleans shouldn't be too hard to understand, there's only two possible values, true or false, objects might take some time to get your head around and arrays are very common. If you need to, come back to this page or any other pages in here there is a whole menu on arrays here and we might go deeper into it in a later lesson. If you need to get clear on any of these, the main ones, of course, a number, string, object, and array. That's a little bit about data types, in the next video, we're actually going to dive right into functions, which is good because I threw you into the deep end with putting in a function here. In the next video, we're going to cover functions. We'll be explaining more about what's going on here and taking it outside the context of an object. I'll see you in the next video. 10. JS Functions: All right, so in this video we're going to cover something that's super important in JavaScript, and that is Functions. So if I click on the Menu item for Functions here, we can learn what a function is and what it does. So a Function is just a block of code designed to perform a particular class and it is executed when something invokes it. Basically, what we can do is put a bunch of code into a function and then we can code it in different places of our project. Now this is important if we need to reuse code, so we have a common function. There I go using the word naturally. But yeah, if we have a common thing that we need to execute regularly, doesn't make sense to write it out every single time we need to do it. It's better to define it once and then execute it multiple times by just calling that function. The other thing we can do is send things through to the function so we can put variables through like this. So here's a very basic example. Let's try it ourselves. We are basically taking what the first argument that we put through this function and the second argument that we put through this function, and we're returning the product of both of them, and the product means that we're multiplying them both together. So what does these two numbers come from? Well, when we actually call the function, we can put in what's called arguments in here. So the first argument, the four, will go right here, in the p1 and the second argument will be three and go right here. So basically what this function does is it takes the first number and the second number and times them together and outputs what the result of that is. So if we put in four and three, we get 12, because that's what we've defined this function to do. So it takes input here. So I'm going to put 10 there instead, run that, and now you'll see it's 30. But of course we're getting a little bit ahead of ourselves. Some of you may not have even seen a function before, and so let's just cover the syntax briefly. So we define a function by first stating the word function, and then we put the name of that function, if there's no arguments that are going in. So maybe we just explicitly state these numbers. It's always going to return 10 times three. Then we don't need these arguments, and so what we would do is we still need to have an open and close brackets, but we don't have to put anything in there. Then we have a curly brackets to open up the code block. Remembering the syntax lesson we were talking about code blocks. Everything within these two curly brackets will be part of the function. So you can put in as much complex stuff as you want here, define variables and all that stuff. But at the end, it will return a set of value and we can return that by using the Return keyword. So now we'll get the same result, but we can't put in dynamic arguments anymore. So if I put in five and 10, nothing will happen, and if we check our console, there might even be an error because we're not actually accepting any arguments here. So that is basically the syntax of a function, and if you want to learn more about the syntax here, you can see here is an example. You've got the keyword function, you've got the name of the function, you've got an open close and an ending close and you've got as many parameters as you want in here. You can put an infinite amount I'm pretty sure, you probably wouldn't want to put a 100 parameters in, but I think you can't do it if you really wanted to. Then of course this is the code to be executed between these curly brackets. We learnt about the return statement in that example, and right here it talks about why I use function. So as I mentioned before, we might want to reuse code. So we define code once and use it many times. In the example above, we could easily have just done this instead of having a function and we could have easily just done four times three, and the same result would come out. We don't have to write this whole thing, but maybe we're performing some sort of complex calculation. Maybe we're checking a database model when we need to make a database connection, maybe we can, but we don't want to put all of that in here. So maybe we just want to put, myFunction and put in some to variables and then whatever complex calculations happen in this function, all it does is return something and it'll go right into here. But again, it's hard to demonstrate that without a complicated example right now. But just know that these functions can get pretty big, and so it makes a lot of sense that we need to put all the code into one function and then we're able to reuse it a bunch of times and also use it much more easily, knowing what it's going to return to us. So here's another example. We can create a simple function called toCelsius, and when it does is, it'll take one parameter, one argument, which will be the temperature in Fahrenheit, and then it will take the Fahrenheit temperature and perform the calculation necessary to turn it into Celsius. So all we have to do here is call a function of Celsius run through a perimeter of the temperature in Fahrenheit and then it'll send back to us the equivalent temperature in Celsius. So that might be a more practical example for you guys, but it can get a lot more complex. It's important to note that the opening and closing bracket is essential for invoking the function. Right here, if I just put toCelsius without putting in the open and close, even if you're putting nothing inside it, you still need to put it in there because otherwise it's just going to return that the function definition rather than the function result. That's perhaps a bit of a nuance difference for beginner developers. But yeah, just know that it won't work unless you put in opening and closing brackets. You can also use functions to assign variables to values. So what we can actually do is we can take the results of this function or whatever this function returns and assign it directly into a variable right here. So this will take 77 degrees Fahrenheit and convert it to Celsius and then put it directly into this variable. Then we can put it into a string here and get the result, and we can also just skip this step where we assign it and just put it in line. That is also an option. That is basically functions. It does get a little bit more complex as you start to use callbacks and different things. But for now, that is the basic workings of a function. You have parameters or maybe not even parameters, and you have a reusable block of code in between, and then you call it by using that name again, but making sure to use those opening, closing brackets. So that's functions. In the next video, we're going to cover Scope, which now we know how functions work. It's important to look at what happens when we define variables, will declare variables rather outside of functions and inside of them, and not just functions but code blocks in general. So I'll see you in the next video. 11. JS Scope: So in this video we're going to cover something that maybe not so obvious while you are developing JavaScript, but very important and it might actually trip you up sometimes while you're developing for JavaScript, and that is the idea of scope. So let's go into the menu item for scope, and we'll see here in JavaScript there are two types of scope, Local and Global scope. Now none of these theories is going to make much sense without an example. So let's dive straight into an example right here. Local JavaScript variables are variables declared within a JavaScript function. So they become Local to that function and they have a local scope. So they can only be accessed within the function. S This is a pretty explicit example. If I put in a code to CarName up here, it won't work it's not declared in that scope. But I can use it here because it's in the scope of this code block. The alternative is global, and so right now I am making a variable. So I'm declaring and assigning a value to a variable rather of Volvo to car name, and then in my function, it's declared in the global Scope. So I can actually go into my function and change it, and that's going to change the variable in the global scope. So this might sound obvious right now, but once we start to use both in the same context, then you can start to see how it could trip you up. So down here, you can see that if you assign a value to a variable that has not been declared, it will automatically become a global variable. So this is an interesting one within JavaScript. If we don't actually declare this first with using the var keyword, this will actually be a global variable, even though we haven't actually declared it, even in the local scope or the global scope. Now, there's a mode that you can use in JavaScript called Strict Mode. In strict mode, you always need to declare your variables, but we don't need to fuss about that too much. It's always a good idea to declare your variables. So if you want something like this, the nicer way to do it would be to put in a declaration for the variable in the global scope already. That will save you for getting hit on strict, but also it's good to note, like it's a good opportunity to make your declaration and your scope explicit. So here it's obvious that were in our global scope, we're declaring that variable in the global scope. So now it's accessible globally but then we are assigning a value to it in this function, but we can also change that value and have that value come outside of this function as well because it is global. That is also a reason why, remember, we looked at how you can define a variable like this, and then in a new line, give it a value like this. Oftentimes you're always assigning a value to a new variable. So it oftentimes doesn't make sense as why you would declare it and assign it in a different step, but when you want to explicitly put something into the global scope like this, it makes a lot of sense. So if we were to declare it down here, it would be only available in the local scope, but if I take that off and put it up here, now, we are declaring it in the global scope and able to modify it in the function but it's still global. Hopefully that's starting to make sense again, as you gain more experience with this, it'll start to solidify a little bit more. This is something about the context of HTML. The Global Scope in HTML is the window object, not important that you need to understand that. But essentially the thing with scope is if, say for instance, you've got this example and only in the function are you assigning a value, but you wanted to use that value outside of that function. So say for instance, I wanted to, let's just do document. I know I said I don't use that very often, but in this context will allow us to get something out on the page straight away. If I do document right CarName, you'll see that nothing comes out, and the reason why is because it is in the local scope. So if I was to put that back in here and run the function, you'll see that the CarName gets output. If we put it back to here into our example that we had before, that didn't work, and instead of declaring the variable here, we just removed the declaration from that part of the assignment and we declared it outside the function in the global scope, now, we're able to do that. So it's a very small detail, I guess in JavaScript, but it's important to note because not knowing something like this and being stuck here with like, "Well, why can't I output this variable name?" It could trip you up if you don't understand scope. So it's important thing to know. That's pretty much it I will say on scope. In the next video, we're going to cover Events. So I'll see you on the next one. 12. JS Events: In this video, we're going to briefly introduce EventListeners. EventListeners is something we go into greater detail once we'll go into the HTML DOM section. This is the more common way of stating an EventListener. But you've already seen an example of an inline EventListener so I thought we'd just go in and introduce it right now. Now, if you're not clear on what events are, it's basically things that happen on the page and I know that's vague, but basically you need to set up an EventListener anytime you want something to happen, when something else happens. For an example here, when a web page has finished loading, you can have something happen. When an input field is changed, you can make something happen, and when an HTML button is clicked, you can execute some code as well. In HTML, you're actually allowed to put an EventHandler inline using an attribute. The syntax or the way you do this, is by putting the event name in as an attribute equals, and then you put in as a string the statement that you want to execute. Here's an example down here which we've seen something similar before, we're easily able to see that we want this line of code to execute on the onclick event on this particular button. It is very explicit because the code is stated right on the button. This is not always the best way to do things, as we saw in the previous class on HTML and CSS, there is a reason why you would want to put your code into another file rather than inline in your actual element, especially if you want it to execute certain JavaScript on multiple elements. Generally it's just cleaner to have a separate file and set up an EventListener. As we get into this video here, when we talk about EventListeners in the context of the DOM, you'll see that we are able to target a button or any number of elements and then run a statement based on certain events. So if we scroll down, we can see some common HTML events. Sometimes if you've got just one event on the page and maybe you don't want to write a whole JavaScript document, you can just have a button and click on it just to get a certain result. But as your code gets more complex, it's best to move it out into its own file. So brief little lesson here on JavaScript events, I wanted to quickly explain what we've seen earlier with this onclick method, but essentially, what you need to know is more in this section which we'll cover once we get into HTML DOM. That's all I wanted to cover in this particular video. In the next video, we're going to look deeper into arrays and how we can iterate through arrays, through loops. So I'll see you in the next video. 13. JS Arrays: In this lesson, we're going to dive deeper into one of the data types we discovered earlier, which was arrays. We're going to learn more about how arrays work, and also learn about looping as well because looping and arrays often go hand in hand. So to get started, let's click on the JS arrays menu item here. As you can see, we've already seen this example before. We can scroll down and we can see that we can define a new array not just by putting in the square brackets and the different values separated by commas, but we can also put it in as a new data type array and then as parameters within that function. Now if I go down, you can see here how we target the different items in an array, remember zero is the first one. If we wanted to put the first item of the cars array into the inner HTML of an element of the ID of demo, we would do it like this. Here it is again, zero is the first element in array, one is the second. Array indexes start at zero. That could trip you up a bit because it's not the most intuitive thing for somebody who's non-programmer. Down here, we can also access the full array and let's see how that would look. Right here you can see that JavaScript is smart enough to know that it's a set of three strings, and it just outputs all of the strings together as one string. It comes out as Saab comma Volvo comma BMW without any word space. The other thing that's interesting about JavaScript is arrays are objects. If we are to use the type of operator in JavaScript, it returns an object for arrays. That begs the question of, what's the difference between an array and an object? You should think of arrays as using numbers to access its elements. Person zero here will return John, person in square brackets one will return Doe, and person in square brackets two will return 46. Whereas objects use names to access its "members." In the case of arrays, what you're using it for is something that follows a linear flow. As we'll see, as we go further down and talk about looping, you wouldn't necessarily want to loop through all of this, maybe you just want to grab an edge, there's no particular linear order to these fields. But maybe with this there is, I know that probably sounds a bit abstract, but you'll see as we get into loops, it makes a lot more sense to loop through an array than it does an object. The other thing that's great about arrays in JavaScript, is that they are built in array properties and methods, so if we want to find the length of any array, we can use the property of length, and if we want to sort our array, we can do so by using the method of sort. Here we can see an example of the length property, and we've got an array with obviously four items here, we can just call dot length on that array and we get the length of that array. Like I said, we were going to talk about looping as it relates to arrays, and the best way to loop through an array is a "for" loop. I'm going to open this up, and you can see here, maybe we want to format this list as a HTML list, so we can use a "for" loop. Now what's going on here, I want to separate the loop here, what happens is the first statement in the "for" loop sets a starting point for this iterator, so zero, and then this is the Boolean statement, that as long as it holds true, the loop will continue, and this is what you want to happen every time the loop runs. It looks really complicated but really it's quite simple. It's just saying that start the marker at zero, increase the marker by one each time that the loop goes, and keep running as long as that number is less than fLen, and fLen up here is just the length of the array. Basically saying, without the Mumbo Jumbo, is add this list item for every fruit in this fruit array. Right here, you can see we can replace the index number with a variable that is looping through. In the first loop it's going to be zero, and outputs the value at position zero, which remember is the first position, and then it does a second loop and this number becomes one, so it outputs Orange, and then it becomes three, outputs Apple, and the reason why it increments by one each time is because we've used this operator here. The statement in here might be confusing for newbie programmers, but it's a similar convention every time you do it, it's basically start the marker off way you want it, this is pretty standard at the end, and just having a Boolean to determine how long you want to run it for. Here, if you remember, is the concatenation operator, so we're starting off an unordered list, and we're ending in an unordered list here, and in-between we're adding as many list items as we need to go through the entire list of fruits here in an array. Now you can see how arrays and loops work well together. Now if this was an object, maybe it wouldn't make sense to loop through an entire list, and that's perhaps where objects and arrays, the difference between them becomes a little bit more obvious. Going back to our page on JavaScripts arrays, we can use some methods to add array elements. One of the most common ones is push. We can add Lemon to this array, It'll just go right on the end. We can use the method of push, and then the value that we want to put in. If we just have a look here, we are adding Lemon to the array, and then we are outputting the whole array to the screen, I'll just run that again. As you can see here, we have a function linked to an event on a button, so whenever we click on this button it will run this function, and if we go down here, what happens with the function, it takes this array which we divide up here, which is fruits. It pushes an extra element on the end, and then it changes the inner HTML of our element with the ID of demo, which is right here, to the full array which has just been changed. A lot's going on there, but hopefully that makes sense. Going back here, we can see there's another way to do it, which is by using a dynamic value for the index. I would recommend that just keep it simple, and we can also state exactly which position in the array we want to place our element. For instance, if we wanted to change just Banana, we could do so by just putting in zero in here. Let's demonstrate that now. What we've got here, is we've got an array and if we count here as position 0, 1, 2, 3, and as I was saying in position 6, we want Lemon, and then we're calculating the length of that whole array, we're creating an empty text variable just to get started, and then we're cycling through the different fruits, putting them into text, and then adding a break tag after it. Then once that "for" loop is done, we are putting that text as the inner HTML of an element by the ID of demo which is right here. Now the interesting thing you'll see here, is that it creates these other two positions because basically like I've shown you just here, we're counting along to get the index number. If you start to put in at position 6, which is actually position 7, then there's an obvious gap here. That's position 0, 1, 2, 3, 4. Five and then six. What will happen is, you'll see that your array will be undefined in those two indexes that haven't been defined. I wouldn't worry too much about this though, because I don't often see this. If you wanted, just to add lemon to the end of an array, all you will do is just change this to push, get rid of the equals, and then whatever index comes next, it'll assign that element to it. If I run that, then you don't get the undefined. But if you want to specifically state where you want it to go in the array, then anything before it that hasn't been defined will show up as undefined. The other thing to demonstrate here is if you wanted to change any of these, you just need to know it's index number. Say for instance, we wanted to change orange to lemon. That is at position 1, and if I run that, now you'll see our orange has been changed a lemon before I start putting the array to the screen. Going back to the page, there's another thing called Associative Arrays. But in JavaScript, it does not support arrays with named indexes. If you do something like this where you put the name as the index, JavaScript will redefine the array to a standard object. This is not something that you should get hung up on if you're new to programming. Basically, another language is there's something called an Associative Array, and that associative array allows you to pick out items in an array by a name. Whereas in JavaScript, if you're doing an array, it's just by index, otherwise, you just use an object. Say for instance here, we've defined a person array and we've given it values at three different positions, and if we get the length, it'll return three, and if we look at position 0, it's obvious it'll be John because we defined it right here. But if we do the same thing and don't use numbered indexes, but names strings instead, then we can't use this numbered index, and it will actually end up being an object. Let's just demonstrate that in our console. I've got my console open here. If I was to define an array, and then give its values based on indexes that are based on a string, not a number, and I press that. Now if I type in Person, it will come up behaving as an object, and we can't actually target the first attribute by using zero. If I did that, and it'll come up as undefined. Basically, all you need to know with that is that JavaScript does not support arrays with named indexes. If you're trying to do that, what you're doing is an object. That of course begs the question of what's the difference between arrays and objects? Here's a really simple way to understand it or to summarize the difference, in JavaScript arrays use numbered indexes and objects use named indexes. In the car example before, the name, the make of the car, we targeted them by taking their name, and outputting that. I'm going back to that lesson, we are able to get the name of the car. But if you want it to loop through in a linear way using numbered indexes, then you would use an array. Here it's just saying the same thing in a different way. Here it talks about how you can use the new constructor to make an array, you should probably avoid doing that. Try and do it this way, not this way. If we go further down, we're getting into even more complicated territory. If the type of operator returns an object for an array, then how do you know it's an array? There's actually a method here that you can use to figure out whether an array is actually an array or an object. But again, you don't really need to use that very often. What I want you guys to understand is what an array is? How to update an array? How to output an array? How to loop through an array? What the difference between an array is and an object? Technically, arrays are objects, but the difference between what we showed before in this JavaScript Objects lesson, what we're doing now with arrays. Finally, before we wrap up on arrays, there are some other menu items that you might want to check out. On this page, you can find out about other methods that you can apply on arrays to string. You can pop rather than push, which removes an element, push we saw before. We can shift, which is the same as pop, that removes it from the front. There's unshift, and we saw how it changed elements. If you want to learn more about this, there's a lot of different ways we can affect arrays, but I'm afraid I'll spend too long on it if I go fully through this page, there's also the method of sorting arrays. If you want to know how to take your list here that you've stored in an array, and sort it in various ways, by numeric ways, by comparing it to a certain boolean, doing all sorts of complex calculations, definitely come back here and check out these menus. But for now, all I want you guys to know about arrays is, they're just a way to store multiple values in a single variable. You can access those different variables by using a numbered index. Guys, so that was all I wanted to talk about on arrays in terms of data types we have in JavaScript, we've got strings, numbers, objects, arrays, those are probably the most common ones, but we do have dates, math, booleans, which we covered earlier. I don't want to go into too much detail on those, you guys can check them out in the reference here. But basically, I feel like we're all good on the basics of the main datatypes, and in the next video, we're going to finally cover conditionals. I'll see you in that video. 14. JS Conditionals: In the last video, we finished talking about the major data types within JavaScript. Now in this video, we're going to talk about something that's really important in JavaScript and really common. You may have seen an "if then" statement, basically what that is, is a conditional. So we're going to go into this menu item here for JS conditions and learn about "if then else". Very often when you write code, you want to perform different actions based on different decisions. How you can do that is using conditional statements. Anytime there's something that you want to happen, if something is true, then you're going to use a conditional statement. It's like if you said to your friend, "I will go to the movies if we watch this movie. But if we don't, then I won't go." That is an "if then else" statement. So anytime you catch yourself wanting to do something in JavaScript or in programming in general, where you want something to happen only if something is true or false, then you're going to need a conditional statements. It should be pretty easy for us to understand what an "if" statement does. All that happens is we use the keyword of "if", we put in a condition in some brackets like this, and then we use the curly brackets, remember, as a code block to execute code based on whether that condition is true. Let's look at the example here. It says, "If hour is less than 18, then we want to assign the string of "Good day" to the variable of greeting." Let's try it out ourselves. As you can see, we've got a new date object which we didn't cover earlier because it's something that you don't use often, but date is another data type that you can use. We can use this part here to determine how many hours have passed in the day. So if the number of hours passed in the day is less than 18, then what we're going to do is put "Good day" into the inner HTML of the element with the ID of demo, which is right here. So instead of "Good evening" it's going to say "Good day" because right now it is 10:00 AM in my time zone, so that's a pretty simple example. Going down, we can see that we can also execute an alternative statement or block of code if that condition is actually false. In the case of whether the hour's less than 18, we can say "Good day", otherwise we can say "Good evening." I think that's pretty simple to understand, and we can also go one step further and in-between our "if" and our "else", we can put an "else if" and put another condition in. Let's have a look at this example. Basically, what we've got here, is we've got a time where we get the current hours passed in the day and we assign it to a variable of time, and then we change the greeting based on the time. If it's less than 10, it's going to be "Good morning" else, if the time is less than 20, so obviously if it's not less than 10, then it's going to be between 10 and 20. If that's the case, then we'll say "Good day." Then if that's not the case of either of these two, then we will say "Good evening." So essentially what we're saying here, if the time is equal than or greater to 20, then we'll say, "Good evening." The important thing to note here is this all happens in order, we first look whether the time is 10 and if not, then we move on to this one. So if this one triggers, it means that this is not true. It'll pass through over these "if" "else if" statements, and as soon as it's true, it will execute whatever code block is on that level, so it won't go to the next one. I'm just mentioning that to make sure that you know, these aren't in isolation. So if I was to move this off into its own "if" statement and get rid of the "else", and run that. Right now we get the same results because it just passed 10. But let's just say 11 instead, and I click "Run" on that and click "Try it" see how it says "Good day." That's because both of these are true and because this one happens second, it's going to overwrite the value that we set here. If we set this back to what it was before, and again, change this to 11, click "Run" and click "Try it". It'll say "Good Morning" because it hits this first, and then as soon as one of these conditions is true in this whole "i" statement, it'll execute that code and none of this will even get a look in. I hope I've made that really clear, the difference between putting in "else if" and a completely new "if" statement. If you start to put in a heap of different "else ifs", so if we did "else if" time is less than 25, and then we'd put in another "else if". That should be a sign that you need to change your code, and what you're probably looking to do is use a switch statement. Let's go back to this document here, and we'll go down to the next menu item for "Switch". As you can see here, the switch statement is used to perform different actions based on different conditions, and really it's the alternative to "if then" if you have a lot of different cases. Rather than write a really long "if this", "then this" "else if" "this then this" "else if", and just have a really long, "if" statement with lots of "else ifs", it's much more efficient to use this switch statement, and it also allows you to define a default. Here's how it works: you start with the keyword "Switch" and you put the variable or the thing that you want to check inside the first set of brackets. Then you open up curly brackets and do one code block, and then use the keyword "Case" to check whether this value here is equal to whatever is in your case. Then you execute your code, and then you use the keyword of "Break". A lot going on there. But basically, once you understand this, this is very simple. We're just looking at the day whether it's Sunday, Monday, Tuesday, and that is represented by these numbers. So Sunday is 0, Monday is 1. If we're saying case 0, we want the day to equal Sunday. If it's case 1, we want the day to equal Monday. You can see if we wrote this in an "if then" statement or an "if then else if" statement, we would have so many "else ifs" and it would just be messy. So this is a much cleaner way of doing a conditional where there's multiple cases that you need to check for. Down here, you can learn more about the break keyword. Basically, it just helps us exit out of a code block. Rather than have curly brackets for each case, we have a colon and then we use the keyword "Break" to end that particular code block. Scrolling down, there's also the default keyword. Basically if there's no match, it'll just default to what's in the default here. That's always a good one to have in the sense that maybe you have some code that's based on text later in your file. If the case wasn't six or zero, then you might have an undefined texts and that would cause problems later in your code. So it's always good to have a default in there, just on the fringe case or in the case that it doesn't match six or zero or whatever else you've defined in your switch statement. There's some more examples here. One thing to note is that switched cases use strict comparison. If you remember what this three equals sign means, the values must be of the same type and value to match. Remember, strict comparison is same value end type. Whereas if you remember, the double equals is just the same value, but not necessarily the same type. That's something important to note, but not necessarily something that won't come to mind until you actually start to have some issues with your code and want something changed. I think that's probably enough on conditionals. Conditionals are just like in real life, like if you were to give somebody an ultimatum, it's the exact same thing. It shouldn't take you too long to wrap your head around "if then" "if else" statements, very common in JavaScript and one of the more common code blocks you'll see when you're developing JavaScript. In the next video, we're going to go deeper into another common code block that you'll see and that is loops. If you remember in the video on arrays, we covered a little bit about a for loop, for looping through an array, but we're going to go deeper into loops and show you some other loops in the next video. I'll see you in that one. 15. JS Loops: All right guys, we are almost finished up with learning general JavaScript. Remember, JavaScript is a standalone programming language in its own right, but the way it interacts with the web is through the DOM. We're going to learn more about HTML DOM in the next section of the class. But to finish off our learning about general JavaScript and how the programming language works, I'm just going to talk a little bit more about loops. If you remember, when we talked about arrays, we covered a JavaScript for loop and here's a perfect example of what you would use a loop for. Remember we saw a for loop before, and this is the standard convention for it. Why would we need to use a loop? Well, maybe we don't want to write this. The problem with this actually is maybe the array is longer than six items and we want that to be dynamic. So we'd want to loop through the entire list of cars and we don't want to have to repeat the same code over and over again. Well, a for loop is perfect for that as we saw before. But there's also different kind of loops. If we learn more about the for loop here, this is a good reference for those of you who maybe got a bit lost with the for loop. This first statement is executed one time before the execution of the code block, and the second statement defines the condition for executing the code block, and statement 3 is executed every time the code block has been executed. A common example is setting an i marker, starting it at zero, and sending a condition that it should run until a certain number is reached, and increasing that number each time. It's a complicated way of looking at it, but it gives us a lot of control over how we want the loop to run. On this page you'll learn all about for loops, but we already covered this standard convention before. So what I want to show you guys was for in. We saw how with for loops, we were able to loop through an array, but we can also loop through an object by using this for in statement. If we wanted to loop through the properties of an object, like how we would loop through an array, we can use this statement here. As you can see, it takes out all the key names, all the named indexes, and outputs just the values. So it's a way for us to loop through an object as we would in an array. Let's go to the while loop, which is a different loop that's probably a little bit easier to understand. The while loop continues and so this statement is not true. Now this can be a bit of a hazard sometimes because you want to make sure that at some point this isn't true otherwise it's just going to keep looping in an infinite loop and it can sometimes crash your code. As it says here, if you forget to increase the value of the variable used in the condition, the loop will never end and it'll crash your browser. In the for loop example, you're always putting in a condition here to make it longer so you don't usually have this issue, but because while is simpler and it just uses a single condition, you have the chance that if you don't iterate your number or change that condition, it could go into an infinite loop. This is essentially a similar thing to the for loop, it's just structured a little bit differently. Instead of iterating it as an actual parameter in the statement, we're instead putting it in the code block. There's also the do while loop, which is actually quite similar. The difference between while and do while is, it will execute the code block once before checking if the condition is true. Then it will repeat as long as the condition is true. Do will always do, but it won't continue unless this condition is true. I don't find myself very often using do while, so I wouldn't worry too much about that. Here you can see a side-by-side comparison of for and while and that's about it. That was probably a brief little lesson on loops because we've already covered a bit about it in the arrays lesson. But loops allow us to repeat something over and over again and do it in more a dynamic way. As you can see here, perfect example. Instead of writing out that we wanted to add two cars for every index, we can write a loop instead. Also that allows us to check the length of the array and do this for as many items in the array as there are. That covers general JavaScript. In the next video, we're going to jump straight into how JavaScript works with the DOM. We've already seen it a little bit, but this is really where JavaScript plugs into your existing web page and does what it's known to do, create interactive web pages. I'll see you in the next video. 16. JS HTML DOM Introduction: Alright guys, I hope you're excited because in the next section, we're going to go into how JavaScript interacts with HTML and creates interactive Web pages. Let's scroll down to this menu here for JavaScript HTML DOM, and let's click the intro here. If you're not familiar of the document object's model, whenever a Web page is loaded, the browser creates a document object model of the page and it's created as a tree of objects, basically the HTML structure. If we go into "Developer tools" and go into "Elements", all these HTML, all these elements and how they're all structured becomes the document object model. As you can see, as I'm hovering over different elements, it highlights that element and then I can click in and go further down the tree. An easier way of seeing this, I found a great example online. If you just want to copy this address into your browser, otherwise you can just have a look on my screen. Basically, this is a simplified version of what we saw before with all the different details within these different elements. Here you can see that we start off with, at the top of the document object model is the body, and then we've got anything that we set up. This is going to be different depending on the page you have. But the great thing about this example is if I click on this, it'll highlight the corresponding part of the page. I don't know what div5 and div6 are, but nothing's really showing up. If I click on body, it takes the whole body of the page. If I go deeper into div, you can see it's highlighting a sub-div of that div. Then you can see the different elements directly within this. As you can see, there's a tree here, so we can have nesting all the way down the line. We can have at the very end, first header and second header for tables. As I click through these, you can see them highlighted on the page here. If we start at the very top, we've got the body and then we've got this div. Then we go into this smaller div, then we go into this div for other info and we can go into the list container, look at the paragraph on the top, and then the actual list, look at the individual list items and then that ends the tree. Or we can start from here again and go into this child of that element and then go into another child of that, which is a table tbody. Then we can look at the individual rows, and then within those rows we can see the table cells. Hopefully this visual representation makes it a little bit easier for you. But basically HTML that we set up on the page, if we look at this particular page, this creates a document object model. Now this is a really conceptual thing, but essentially what the document object model allows us to do is navigate through a HTML document by moving through this tree of objects. Perhaps this example is too complex, but if I bring up a simple Web page and click on this link here. This is a simple Web page which I literally just found then. If we go into our developer tools for this click "Inspect," we can see here a simpler example. You can see here we can collapse and expand the different parts of our document object model here. The great thing about using the elements section of your developer tools is you can also see the HTML tags and all of the information in them. We can see here we've got body and if we expand that and we go into this table, this is not the best example because this website is set up as just a table, which is not the modern way of doing it, but well, we can see here that all of this nesting going on in a tree-like structure. As we hover over these different elements, we can see the equivalent show up on the web page. Perhaps it's a tough thing to conceptualize, but basically, having this tree structure allows us to say, well, for instance, I want the first div that is a child of this td to have an attribute of something. Or I want to add an on-click method to the first child of this td, which is the first child of this. It allows you to write selectors that work all the way up the tree and down the tree. You'll start to see this a bit more once we start to use selectors. But if you want to learn more about the document object model and the theory behind it, you might want to read it here, but it's important just to introduce it. Anytime I'm talking about the document object model, this is what I'm talking about. It's the web page represented as a tree of objects that helps us to conceptualize our HTML page and also to target elements within that page. That is the introduction to HTML DOM. Again, if you want to read more about it, here's the page. In the next video, we're going to learn all about targeting with HTML DOM. I'll see you in the next video. 17. DOM Navigation: In the last video we introduced the Document Object Model and you might be wondering, well, that's all great in theory, but what does it actually do and why is the Document Object Model important? That's a good question and a question that we will hopefully answer in this lesson as we discuss how to actually target HTML elements and change different things on the page based on the Document Object Model. If I go to DOM elements menu item here, we can find HTML elements by ID, tag name, class name, CSS selectors, and object collections. If you remember in the last class on HTML and CSS, we can target HTML elements using a variety of means and some of these you would have seen before from that. So we can definitely target elements by there class and ID and the type of element they are, just like we can do with CSS. Here we can see an example which we discovered at the start of our class we're taking the document, remember that's at the top of the tree. Then we're putting in a dot to put a method on that and we're finding an element with the ID of intro. Just to demonstrate that again, this paragraph here is intro and we want to target that particular element by using its ID. So nothing new there. If we go down here, we can also target elements by their tag name. Just like when we did an element's level selector in CSS, we can do a similar thing in JavaScript to target all elements with a tag name of P. We can also find it by class. The method we use for that is getElementsByClassName. These all work in similar ways. I'm not spending a ton of time on them. Here's a way that we can string together different selectors like we would in CSS and put it into JavaScript. Using the query selector all, we can find all P's with the class of intro. Seeming you should have an understanding of CSS and CSS selectors already before taking this class, I won't dive deep into what's going on here. If you're about that, definitely go back and watch web development fundamentals, HTML and CSS. Those are different ways that you can target HTML elements. If I go into the next menu, we're going to take what we've selected and change content. A common way of doing that is with dot innerHTML. So that's changing a property on this particular element that we targeted by ID and giving it some new value. So we've seen that again before. That is just the extension of first selecting an element and then assigning a new value to it. If I scroll down, it's not just in a HTML that we can change. We can change an attribute like the SRC of an image. We can change basically what image shows up on a particular image tag. That's basically it for that lesson. Then if I go into CSS, we can also change styles using JavaScript. We can change the color of things. We can change font size, all that stuff. This would of course, be commonly used with events. If we click a button, we want something to become red. Let's have a look at the example. If I click the button, there heading becomes red. We're targeting that element by its ID, grabbing it style. Then within style, grabbing its color and changing it to red. So that should be pretty simple now if your understanding of JavaScript. Let's go a little bit deeper and look at navigation. All these different elements here can be considered nodes in the document object model. So the entire document is a document node. Every HTML element is an element node. The text inside HTML elements are text nodes. Every HTML attribute is an attribute node. Actually that's deprecated now. Just ignore that one. Comments are comment node. Basically there's all these nodes and they're all interrelated and we can use the Document Object Model and the relationship between these nodes to target different things and rearrange them. Just a warning, we're going to go a little bit theoretical again and cover a little bit about node relationships. If we look at this basic HTML, M one, two visualize the relationship between all of these elements which are nodes in the document object model. We can have a look at here. We've got the root element, which stands at the top, which is our HTML tag. Then we've got head, which is the first child. So it's the first element that's a sub-element of that. Then body is the second child. It's also the last child. We can target it at head as the first child. We can also target body as the last child because it's the child that is last, obviously. Conversely, the relationship of HTML to this first child node of head is a parent node, and then the relationship between head and body is a sibling. It's just like a family structure. If you've got this giving birth to these two, then these are children and as you should know, if you have two children with the same parents, then they are siblings. From the HTML above, you can read that HTML is the root node because it's at the top. It has no parents, but head and body have a parent of HTML. Head is the first child of HTML and body is the last child of HTML. Now you can see we can go another step deeper, and this is where we start to form complex trees within the Document Object Model. We can see that head has a child as well, just the one child and we can see this has two children. Why is this so important? Well, it's important for navigating between nodes. Let's have a look at an example here. We've done the example where we've change the inner HTML of an element, targeting it by its ID. But what if we wanted to target an element by its ID, find its first child, and then change its value. Well, you can step through the tree by using a property like first-child. You can also target the first child by explicitly stating the index that you want to target. That actually allows you to target the second child by putting in a one here. The third job by putting a two here. Remember, arrays indexes start at zero. You always have to subtract one in your mind just to bring it back to what you would think is the first index. Following this example, we can see here that we cannot only grab the inner HTML of an element with the ID of this and assign a value to it. But we can also assign a value that is based on another value within our DOM. So we're basically copying the inner HTML of the element with the ID of ID 01, which is right here into this. It should be pretty obvious what's going to go on here. But you can see here that we've copied the inner HTML of the H1 into this P tag. Going back to the page, we can see here how we can step through the Document Object Model. If we try this out, we can see we get the same result using the keyword of node value. Node value is not something I use often and we're going to talk about a more intuitive way of targeting elements using jQuery. So don't get too caught up on these keywords here. But the thing I want you to understand here is that we're able to target not only by providing in, say for instance, this example by providing an ID and targeting it there. But also we're able to target elements or nodes in relation to a particular element or node. Again, I won't demonstrate this in a later video, so don't get too concerned. One of the things you're seeing often over and over again is document. We're starting each selector with document because it is the root node. So we're starting at the very root. If we just type in documents. If I go into console and type in document, there's only one document in the HTML page and it's the whole document. So you don't need to specify where that document is because it's the root, if that makes sense. So the convention you would use is document which is the root element and then a sub-element of that. So essentially a child node. It's getting a bit complex now and I'm finding myself repeating myself often. But essentially what I want you to understand in this video is how we can target different elements within the tree. It doesn't have to be getElementById and we can only target that element, but we can target elements surrounding that. We can target a parent of that. We can target any number of children of that element. So we can move up and down a document object model. We will dive more into that in the jQuery lessons using what's called Vanilla JavaScript, which is what we're using now. We're using JavaScript without any framework. We can make this a lot simpler by using jQuery. Don't get too caught up. I just wanted to introduce you guys to the idea of DOM Navigation and let you know that we can target elements in any relationship to something we target with ID or class or whatever. Hopefully by the time we get to selection with jQuery, you guys have a pretty grounded knowledge of what's going on and we can basically just run with it and you guys will know what you're doing. That talks a little bit about navigation and finding how we can target. If we go back to here, how we can target different elements or different nodes by their tag name, ID, class name. In the next video, we're going to go into event listeners. Remember we did events earlier in a lesson when we were talking about general JavaScript. But in the next one we're going to learn how to set up an event listener in our JavaScript code. I will see you in the next video. 18. DOM Event Listeners: If you remember back here in the lesson on JavaScript events, we covered how to put a event listener directly onto an element by using an attribute. But there's actually a nicer way of doing this, and that's what we're going to learn in this video. Let's go to "DOM Events" first of all. As you can see here are some examples of events, the mouse over event, and the click event. As you can see, as I mouse over, something's happening as I clicked on this, a whole bunch of things happened. We saw before we could add an event attribute but another way we can do this is by assigning events using the HTML DOM. The HTML DOM allows us to assign elements to HTML using JavaScript and this is something we can put in a separate section of our document. It doesn't have to go in line. Basically, we can target the element how we would normally by ID or by a particular node and then we can set the on click to do a certain thing. It's basically just the same keyword as we use when we're using an attribute, but we're putting it on the chain here to select the element and then put the event on the on click event listener. There's also on load and on-change. I don't necessarily want to go over all the different events that you can do. You can definitely look them up through these examples and learn more about the specific ones. What I want to cover is how to set up these event listeners using the DOM. We saw the example up here, but there's another way to do it and if we go into DOM event listener, we can see the add event listener method. We can add an event listener on click, and when click is triggered, it'll do this function. Trying this out. We've got a function called display date, and now we're attaching what's called an event listener, which listens out for a certain event to happen. We're defining what event that is and we are defining the function that we want to happen when that event happens. If we tried up by clicking the button, we can see that the event listener that we attach to our button on click is doing what we intended to do by doing this function. That's nothing new we covered events in the earlier lesson, but this whole add event listener method is maybe a new concept. If we go down to here, we can see the syntax. We can just say on any particular element, set up an event listener to listen for I click and execute the code block here. The other thing you should note is that you can add many event handlers to the same element. We've got add event-listener twice here, and we're able to attach an event listener to the same element, but with different functions. There's a lot more things you can do here, including removing the event listener so you can use the same arguments or parameters as before, but this time you just use the method remove event listener and so you can remove the event listener that you added. There's more things that you can do with event listeners but essentially what I wanted to get across in this video is how to add an event listener, not necessarily in line like we saw before, but in a JavaScript on another page or even at the bottom of the page. I mentioned before that j-query allows us to put in event listeners in a more intuitive way. So it's not important too much to get caught up on this. We'll get into event listeners again once we get into JavaScript. I just wanted to take it that one step further and show you guys how we can attach event listeners to objects after targeting them through the document object model. 19. Intro to Ajax: At this point I feel like we have all the essential knowledge in place in terms of general JavaScript and how JavaScript relates to the DOM to get moving on to jQuery, which is up here, jQuery is a JavaScript library that we'll cover in just a sec. But before we do that, I think that there's one advanced level topic here that we have to at least introduce, and that is AJAX. If you click on "AJAX Intro" here, AJAX is a developers dream, according to W3Schools because it can read data from a web server after the page is loaded, update a web page without reloading the page, and send data to a web server in the background. Basically, AJAX allows us to work with data on an already loaded page without having to reload the page. In this short lesson, I just wanted to introduce the idea of AJAX to you guys because anytime you want to interact with data, using JavaScript, AJAX is really important. But in terms of the actual code implementation, jQuery helps us to streamline that a lot more. In the next video, when we get into jQuery and the remaining videos, we're going to learn how to actually do an AJAX call with jQuery. But for now, I just want to drew home what AJAX is and what you can use it for. Right here, if I click "Change Content", you'll see that the content of the page has been changed. But where did that come from? Actually, if we click "Try it Yourself", we will see here, and this looks just like a mess. That's why I'm telling you to wait until we get to jQuery because this is just a bit too messy for my liking, jQuery, I feel makes this a lot simpler. But essentially the point I want to get across here is when you click this "Change Content", you don't see any of this content in the actual code or on the page. What's happening is you're loading it from another file, and that file is here. It's ajax_info.txt. All of that information is stored there. What you're able to do with AJAX is bring in whether it's data, whether it's content from another page, you're able to open a request and grab in some other content that's not on this current page and bring it in without having to reload the page. Anytime you're on a web page, and you're submitting data or bringing in new data, and the web page doesn't have to reload, you're using AJAX because you're able to load data and submit data through JavaScript. Going back to here, we can see a function here called loadDoc. Here's the loadDoc function. This is not something that I'd get too caught up on as we're going to cover it in jQuery. But essentially, we can set an event listener to run this AJAX call when obviously the button is clicked. If we scroll down, we can learn more about the theory of AJAX. It's asynchronous JavaScript and XML. It's not a programming language. It just uses a combination of this XMLHttpRequest object and the HTML DOM, and JavaScript to display or use the data. Basically, it's a little bit technical, and you don't need to know all the inner workings of it. But usually when you're on a website, and you click something new, say, for instance, if we click a new menu item here, I'll just click on this, see how the whole web page reloads. Well, in the example we showed before, when we changed the content, it brought in content from another page or from another file without us having to reload the page. That is essentially what AJAX does. It also, as I mentioned before, if we were to submit some data rather than have new data appear on the page, we can also do that without reloading the page or loading a new page. Going back to the diagram, this is what happens in the background when you do an AJAX call. An event occurs, it creates an XMLHttpRequest object, and it sends it through the Internet to the server, and the server creates a response, sends it back and this all happens without you having to reload the page. Honestly, you don't need to know the inner workings of this just yet. But essentially I wanted to introduce you to AJAX before we get into jQuery because most websites these days use data and use a backend. Sometimes it's not best for the user experience to reload a whole new page every time you want to do something. AJAX is something I find myself commonly using, and you'll probably find yourself using as well. But again, we're going to cover how to do an AJAX query or AJAX call in the jQuery section. Without further ado, let's jump into jQuery in the next lesson. All of what you've learned here, all of the keywords, we're now just going to make that a lot easier with a really cool JavaScript framework. I'll see you in the next video. 20. Intro to jQuery: Welcome back guys. In this video, we're covering an introduction to jQuery. If all of these different commands that we learned earlier, seemed long and annoying, where are they? If all of these seem a bit long and annoying, well, you're in luck because in jQuery, we're going to learn a much easier way of doing some of the things we learned in what's called Vanilla JavaScript, which is JavaScript without any framework or library. To cover the basics, jQuery is a JavaScript library. It's basically just a set of code that we bring into our project, and then we're able to use these jQuery methods. It greatly simplifies JavaScript programming and it's easy to learn. Here is a classic example of jQuery. Basically, you select something and that grabs the object and you can run a method or you can find an attribute within that. Here you can see that we're able to target the document as a whole. But then also here you will see as a string we have p and what this does is it targets all p tags. Now, what's great about jQuery is it targets the exact same way as CSS. If we wanted to put in a descendant selector here, we could, if you remember from CSS. Let's try that right now. We've only got three paragraphs. But say for instance, if we had within that paragraph a span forward away, then we could use a descendant selector to target only the span. If we click away, it'll disappear. Whereas if we were to remove the span and go back to just p, you can click away the whole thing. The reason why it's the whole thing is because we're using the keyword "this". Sorry, I jumped ahead a little bit. In terms of selectors, jQuery is really good because you can select any number of ways just like you would using CSS. But let's have a look at what's going on here. First of all, we are selecting the "document" through this jQuery selector and using this method called ready. You will see this quite often in jQuery. We only run the code when the document is ready. Here we add a function and then inside this curly bracket is what we're going to be executing. Now, make sure because there's a opening bracket here that you close it as well. And then you end the statement like you would in JavaScript with a semi-colon. You'll see this very often in jQuery. You can see it there as well. We have waited until the page or the document is ready and then we're putting in an event listener. This is, like I said, in jQuery, there's a jQuery way of doing it in event listener and this is it. We can just put ".click" and then add a function, and we can also use the keyword of "this" to target whatever the thing that we selected is. If we have "p", "on click", "this".hide", this is whatever we're selecting, so to hide the p tag, and remember before when we had span and we put a span around the "away" and we click "Run". Now that's not going to hide, it's going to affect just the span that is a descendant of p. It doesn't have to be necessarily the first child. It could be a grandchild or further down the chain. In that example, I know we've thrown a ton of new stuff at you, but essentially what we have in jQuery is a selector and then a method and with the selector, it's super powerful because instead of writing a document.getElementsByTagName and then going 'p', like this, we can instead just do $('p'), and this won't work unless jQuery is on the page. It actually is, and so we can actually target the same thing. It comes up as a different output because this is going to grab us a HTMLCollection. This grabs us the actual HTML by default. But essentially you can see that this is a lot longer than this. So jQuery simplifies JavaScript programming for us and makes it a bit easier to learn. Actually, to finish off this introduction into jQuery because this was a pretty heavy example, I want to go through jQuery website. If you just such jQuery in Google, you can see some examples of what jQuery does really well. The main things that jQuery streamlines for us is DOM Traversal and Manipulation. We can use select as like we would in CSS, to choose a button with the clause of continue, and we can change its HTML to a certain string of text. You'll see this soon. We can use its own event listeners, and we can do Ajax in a lot nicer way. If you remember what we saw earlier with the Ajax call, it was a lot messier than the Ajax call here. Those are three of the main features of jQuery. You won't fully understand how much easier it is to use jQuery until you actually use it. But now that we've introduced jQuery to you, it's time to get into some of the features of jQuery and eventually gets you to do some of your own functions as well. I will see you in the next video. 21. JQuery Effects & Events: Welcome back guys. In this video, we're going to work with jQuery to produce effects and we're going to talk about events. Like I mentioned earlier when we first covered events and then we covered event listeners in regards to the DOM, I said that we would jump ahead to jQuery at some point and learn how to set up event listeners there. You guys already know what events are and you've seen in event listener before, but with jQuery, we can simply define an event listener through this syntax. Essentially, all you do is you put in the method of Click on the element or group of elements that you want the event listener to go on and then you insert a function as the first property of that event. Now, right here you'll see a very commonly used jQuery event method, and that is the document ready method. This allows us to execute a function when the document is fully loaded. If we go to the explanation in the JQuery syntax section, which we actually didn't go over but you can come back and refer to this. You might notice that a lot of the examples that you'll see online and including all the examples that you see on this website will start with document.ready. This is good to prevent any jQuery code from running before the document is finished loading. It's just best practice to wait for the document to finish loading and then run your code. Some examples of actions that would fail if trying to run before the document is fully loaded, trying to hide an element that's not created yet, or trying to get the size of an image that's not loaded yet, trying to do anything with any element that hasn't loaded yet will cause issues so you should use document.ready and then define a open function here and you can put all your jQuery in there. You'll see that time and time again so don't worry about memorizing that, you will learn that over time. As you can see, we can just substitute in the event that we're after, and as we saw before, we can use the this keyword within the jQuery selector to reference whatever it is that's being clicked on. In this instance, if we double-click on a certain p, the particular p that we double-clicked on is represented by this. We've got examples of more events, mouseenter, mouseleave, mousedown, mouseup, so on, so forth. We can also attach an event handler by using the on method. The on method attaches one or more event handlers for selected elements. It's basically just another way of putting on an event handler, and so using this particular method, it's just on, and then two parameters, the first parameter is the event name, which is Click in this case, and then the second parameter is the function in which you put your code block in. Pretty much the exact same thing, just slightly different method and properties. As you can see down here, what we can do is define multiple events on the same method call by using these curly brackets and dividing them up using commas. But I don't often see that most of the time. It's okay to just do this or do this. That's a little bit on syntax on how to define your event listeners in jQuery. Let's talk a little bit about what are some of the things you might do when something is clicked. As you can see here, there's an example, hide and show. Let's have a look at hide and show first of all. If I click this panel, it'll hide and show this part here. That is a really common jQuery method and it's pretty easy. All that's going on here is whenever you click on an element that has the ID of hide, it's going to hide all Ps, and whenever you click on an element that has the ID of show, it's going to show all Ps. Now what's going on behind the scenes here is the style of display is changing. Let's have a look at this right now. This is the part we're after. It is right here in the code but if we actually right-click on it and click "Inspect" to see it in our Inspector. Unfortunately, it's blocking now so I'll put it down here. But if we click on "Inspect" again, we can see here we've got a P. Let's see what happens. Actually, we're going to need to move our browser window over here. Let's have a look at what happens when we click "Hide". You can see here from the flash that something is changing and that's the style property. Now the style property has display none. If we click "Show", the display property of none goes away, so hide it adds a display property of none and show it removes that display property. There you can see how using one method we're able to change the property on that method, which would essentially be the same as if we specifically said to go to that style property, go to display and set it to none, but in jQuery, it's really easy, all you need to do is put the hide method in there. Show works about the same. Another thing you can do is add a parameter to hide and that will determine the speed that you want it to hide, so if you want a little bit of a delay, you can put in a speed, it's in milliseconds, so that would be 1 second. You can also use a toggle method which allows you to basically use the same button or use the same input for showing and hiding. We can click on the same button and it'll show or hide. If it's currently showing and you click on it, the toggle will kick in and hide it, and if it's currently showing and you click it, toggle will act as the equivalent of dot show. Hide and show is a common jQuery effect. We can also fade in and out in this example, the panel, but in any element for that matter, we can fade in and out and we can define how fast we want that to happen. Again, I don't want to go too long on all the different effects because you guys can just browse in your own time, but we can also slide like this. Whatever takes your have fancy, it all has the similar convention. You just need to look up the method name and you're able to have some animations with your hide and show. Let's see what animation does. If I click "Start Animation", you'll see that it animates and changes the style of this element. What is happening here is we have a method of animate and in that method we put in an object where we define all the styles that we want to take effect at the end of this animation. If we click and try it ourselves, this is going to animate this div so that it's left by 250 pixels, it is going to have an opacity of 50 percent at the end, it's going to change its height and width. If I click "Start Animation", suddenly it goes from what it originally was to this now. That's pretty cool. As you can see there's a range of effects you can do in jQuery. You can also interrupt animation as it's happening with this stop method. Never really used that one before. Another thing you can do is a callback. The deal with callbacks is that JavaScript statements are executed line by line, but with effects the next line of code can be run even though the effect is not finished. Essentially you can have multiple lines of code running at the same time. It's not always going to be linear with effects. One thing you can do, and this is not just with jQuery effects but programming concept in general, especially with JavaScript, is having a callback. Right here you can see that we've got hide and we've got the first parameter as slow but then we can also set a callback. This function is what's called a callback and it will only execute once this has finished. There's actually a few different situations in which you would use a callback but in this situation, it's obvious that we only want this alert saying the paragraph is now hidden to show up when the paragraph is finished hiding. If we run this, now you can see that this will only show up when the paragraph is hidden. We can actually attach what's called a callback on the end and it'll say when this has finished executing, execute this statement. That helps with timing in JavaScript. In this final menu item, we've got jQuery chaining and we can essentially chain a whole bunch of methods together, which is pretty cool. For example, this one would change the color of any element with a ID of p1 to red, then slide up, then slide down. If we have a look at this, if we click it, it'll slide up and slide down after it's changed the color red and one will happen after the other. Not a very practical example, but an example of how you can chain methods all the same. That's pretty much it for jQuery events and effects. I hope you can see here now how cool jQuery is and how we can combine event listeners and effects to get some interactivity going on our webpage and as I showed you when we went to the jQuery page, if I go back to the page here, event handling and affects is one of the most common things you can do with jQuery and one of its core features. In the next video we're going to talk about Traversal and Manipulation, and then in the video after that, we're going to talk about Ajax. That way we'll be covering the three main features of jQuery. I'll see you in the next video. 22. jQuery Traversal: All right guys, so in this video we're going to continue on learning about jQuery and we're going to cover the next set of important features in jQuery, which is traversing and manipulating. That sounds very fancy pants, but what is actually traversing? Well, it means moving through different HTML elements based on their relation to others. This is basically why I spent so much time talking about the DOM and talking about nodes and how it all works. Here you can see another illustration of the DOM tree and with jQuery traversing, we are easily able to move up, down and sideways, starting from a selected element and this is called traversing. Now I can't really explain to you how important this is to be able to do this until you actually get stuck in and try to set up a lot of these things with a live document. But sometimes you can't actually affect this span or you want to target all spans of a list class of something. You need to be able to be flexible in how you're able to target elements and collections of elements. If this illustration doesn't particularly made sense to you, you can read more here. For instance, the div elements is a parent of ul and it's the ancestor of everything inside it. All of these are descendants of this ul. How do we traverse the DOM? Well, we've got this whole menu here. Let's talk about ancestors. So the way we can traverse up the tree is by using parent or parents, or parentsUntil. A common one is parent and so what this will do is it'll start by selecting any span and it'll return any immediate parents of a span. Let's have a look at their example here. Now we're starting to get a little bit more complicated but essentially you will see that we have spans nested here inside a p in this instance and we have one nested inside an li tag here. What we can do is instead of targeting span for each of these, we can target the parent of any span. We can go span and then we can use the method parent and then any parents of span. We will now apply this style rule two. Have a look here. Here's a visual representation of what's going on. We've got these two spans that we're targeting through this and we're saying every immediate parent of a span, we want to apply the red border too. You can see here in this instance it's an li, in this instance it's a p. It doesn't matter what particular tag type it is just as long as it's the immediate parent of that element that we're targeting or group of elements in this case. We can also return parents, which returns all ancestor elements of a selector element all the way up to the document root element. It doesn't just select the immediate parent, it selects all ancestors. You can see here we're doing a similar thing. We are starting off with all spans and then we are targeting all parents of all spans. As you can see here, we've got a span and instead of applying a style directly onto that span, we are applying it onto all of its ancestors. You've got li, ul, div and body, all will have this red border. All right? Going back, we've got one other and that's parentsUntil, so with parentsUntil it will return all ancestor elements between two given arguments. What this allows us to do is give a cutoff point, so it doesn't go all the way up the tree because all the way up the tree, we could go as far as the whole body and oftentimes that's not too practical. What we are doing here is we're again selecting all spans and then we are applying whatever method we have here, which is in this case applying a red border, we want it to apply to all parents until it hits div. We're starting here and we're traversing up the DOM, remember the word traversal? and so we're looking at all parents. Here's the first parent. Yeah, we haven't hit div yet, so apply the red border. Next one, it's not a div applied a red border, and this one is also a parent's is also an ancestor but we don't want to apply the style because we have hit the until point which is div. Because this is a div, we are no longer reaching up through the ancestors. Pretty cool, right? The alternative is descendants and this is a bit more common. We can target all children, or we can use this really cool finds method to search through the children of a particular element based on a selector. Right here, we are able to target all children of div. Let's have a look at the example, here where using the starting point of all divs and then we're targeting all children of all divs. Here we've got a div and we're targeting all the direct children of this div. Using children, it's different to parents. We're targeting only the immediate children, not the grandchildren, or further down so it's not targeting all descendants. Alternatively, if we wanted to target all descendants and we can also filter all descendants by a particular selector like here, we can use the find method and so what this does is it starts with div and then it finds all spans within all divs and then we can apply a method on to that. So let's look at the example for that. Again, we are applying the red border of two pixels solid and so what we're doing here is we're finding all divs and then within divs where finding all spans. It'll affect all spans that are within a div, which is pretty common. Right now you can see all spans are within divs but if we were to put and now the span on the outside of a div. So as you can see, this span is not within a div and we click run. This will not have a border of red, two pixels solid. It has to be within a div. You can almost think of this as all spans with ancestors of div. Going back to here, we can also return all descendants of a div by using this asterisk. Trying that ourselves, if we wanted to target everything that is a descendant of a div, we can use this asterisk. Now I said I wanted to go back here and what we can do is use this little filter here that we've used in find and we can put it as a property in the children method as well and so what that does, very similar to find. It'll find descendants that are only immediate children of all divs and fit this particular selection rule. Remember from CSS, this will select all p's with a class of first. We have got a p with a class of first here and it has an immediate ancestor of div, basically div is its parent. We are applying that style whereas we can go down to here and we can see that this doesn't have the class of first, so it doesn't affect here. If I was to remove this part, which filters by class and run again, you will see every immediate child that is a p tag of a div will have this border. But if we were to remove this filter by class and we can't really put a p inside a p. Let's just say we're looking for div children of div and remember this is only immediate children. If I was to put in another div, let's say here and then this div, I'm going to say, "Hello." Let's run that and you can see here that we are now targeting immediate children divs of a div. So there we go, those are two methods we can use to target descendants and traverse down the DOM tree. We can also traverse sideways in the DOM tree using all these different sibling selectors. Again, I don't want to go into great detail here. If you understand ancestors and descendants, then you'll be able to understand siblings pretty easily. This is going to target all siblings of any h2's and this is going to target all siblings of h2's that have a tag of p. All right, so pretty much the same convention as before. Instead of children, we are now targeting siblings. So if you can understand these, you can understand these pretty well as well, I think. But it's all here for reference if you need to refer to it, we've got nextUntil just like the parentUntil, so very similar concepts. Finally, we've got jQuery filtering and we can use this to find the first child using the first method, the last child using the last method, and the eq method, which will select a child element with that index. I'll just show you that briefly. You can see here that we have a bunch of p tags and in this case, the first p would be the first child, second child, third child, fourth child and so in this instance we can take the second p. Remember we're using index numbers here, so one actually represents the second index. We can target the second index by using eq here. So if we wanted to target the first paragraph tag, just putting in a zero to target the third paragraph tag, put in the two and there you go. We can apply a background color to that. All right, we can also use this filter method which puts another condition on this selector so we want all p's, but then we only want to filter by p is that have the class of intro. Not sure why that one exists, because we could probably achieve the same thing by just putting it in the selector like this. Let's see if that works. Yeah, so that has the same effect not sure what the difference is there and we can also do the opposite which is target or p's and then filter out everything that's class of intro in our selection. That makes a lot more sense. All p's except those with the class of intro, we will apply this to. All right, so that pretty much covers a lot of the things you can do if traversing. In the case of manipulation, I mean, you've got a range of different options here. Let's have a look at jQuery get. There are so many different methods here that you can change, HTML is a common one. In terms of manipulation, I think that this video on traversal has already gone long enough. I'm going to cover manipulation in the next video, and we're going to go through this menu so I'll see you in the next one. 23. jQuery Manipulation: All right everyone. Remember in the last video, we just finished off traversing in jQuery. Now we know how to get a starting point, target a particular element or group of elements, and then traverse up and down the DOM tree. But now, once we are able to select any particular element of group of elements, what are some of the things we can do to manipulate them? In this menu for jQuery HTML, we've got some examples and information on DOM manipulation. Some common ones here, text, HTML, and val, these do different things depending on the context. In this particular context where we're trying to concatenate a string, and we're just putting text here with no argument, what we're doing is we're asking jQuery to give us the text of this particular element. So any element with the ID of test, we want to bring in the text of that, and here, just like text, there's another one called HTML, which includes the HTML markup not just text. For instance, if this element with an ID of test had nested elements, it would bring in that as well. Let's have a look at the example. As you can see here, we've got two event listeners set up button 1 on click we'll run this function which will give us an alert. It'll start with the string text and then add the text value of test, which in this case is this because this is the element with an ID of tests. Let's show text. There we go and we can see here text. This is some bold text in the paragraph which is exactly what we have here. If we were to click on show HTML, we can see the difference. We can see that it includes our HTML markup in there as well. So going back to here, down here, you can see that you can also grab the value. The value is often used with inputs. So when you're doing a form, you can see here we've got Mickey Mouse as the value, but we can change that, and when we click on this button, take the value of that input, and we can see here Mickey Mouse. If we were to change that to just Mickey and show value, it would come up with Mickey. Now remember, I said that it depends on the context. By putting it in here, in the context of an output alert, all it does is output some text on the screen by concatenating this string with the result of this, we are simply getting the text. But if we go into the setup menu here, we can say we can use the exact same method in a different context, and it'll actually set some text. Instead of receiving the text on an element that has an ID of test1, we can set the text on an element that has the ID of test1. Let's have a look at the example. Here we have three event listeners and three buttons. If we click the first button, it'll run this function which sets the text of this paragraph here that has an ID of test1 to "Hello world". If I click set text, there you'll see that we're able to manipulate the text in that one to be whatever we state it to be. Here we can insert some HTML into test2. Let's click on set HTML and see that we are able to put in that HTML, and you see that it already pauses the HTML for us. We don't actually see these tags, but we see the result of the HTML. Finally, we can set the value of this input field to Dolly Duck, as we've said it here, and wallah, there you go. That is an important lesson to note, these three methods will mean different things based on the context and this is something that you might see throughout jQuery getting and setting often have the same methods, but the context will change what they actually do. That's all for that, apart from the attr method. Attr will grab the value of a certain attribute, so we can grab the href attribute of a particular element. This will probably be a link in this case because it has href. Here you can see we have this a tag. What if we wanted to get the value of this attribute? Well, we can get it by using this method here, using A-T-T-R and then putting in the name of the attribute that we want to grab. If we click this, we can see that the href value is now outputted on our screen. If we go back and go to the set menu, you'll see that we can do the same thing with attribute but setting it. Instead of one parameter, we now have two, so we grab whatever the attribute name that we want to change, and we put in the value that we want it to be. We're going to also open up a curly brackets with attribute and define multiple ones at the same time. We can say href, we want to be this and title, we want to be this. Let's have a look at what that actually does. If we click this to change the href and title, we can't actually see anything changing on our page here, but if we click inspect it and have a look at the code, we can see the href is now what we set it to. If I move this over to the side, we can see that the href is now this because we've set that value here using attr, and we have also set the title attribute to W3schools jQuery Tutorial right here. If I was to change this to title an awesome link, let's run that, and then we will inspect that element. You'll see here that the title is some title until we click the button and then now it's an awesome link. We can both get and set with attr as well. Going down the menu, we can see add here. For adding elements and content, we have append, prepend, after, and before. The difference between all of these is append will insert content at the end of the selected elements. Prepend will put it at the beginning, after we'll put the content after the selected elements, and before we'll insert it before the selected elements. So have a look at this right here. We've got a p tag, and we're going to append some text to that p tag. If I go into the example here and click append text, we've got event listeners on this button and as soon as I click on this button1, it'll find all ps and append this particular string of HTML. We've got two ps here and now if we right click and inspect on this, we will see that we have a piece of appended text with the b tags in there to make it bold within that p. Again, there's a lot of ways we can do this. We can also prepend before and after. I encourage you to go and read this reference. Let's not go into all the examples right now, but you can also remove certain elements, empty the child elements of a selected element. You can also manipulate CSS by adding classes, by removing classes, toggling classes and you can use the CSS property to change the value of setting properties. As you can see, I'm just rushing through the end here. You've got the reference right here if you needed it. But essentially, what I wanted to show you was these common ones for getting and setting common things that you will need to do once you traverse through the DOM, select what you want to select, and then come here to manipulate. That pretty much covers the second core feature of jQuery, traversal, and manipulation. In the next video, we're going to cover the third biggest feature of jQuery and that is AJAX, and then after that will get you into your class projects. Not very long now until you're ready to go out into the world and do this yourself. I'm looking forward to catching you in the next video on AJAX. I'll see you then. 24. jQuery AJAX: All right guys, so in our final video on jQuery, we're going to cover AJAX. Let's just dive straight in and cover the introduction. As you can see here, it uses the same example before that we saw when we covered an introduction to AJAX and JavaScript, we've already covered what AJAX does. But in terms of jQuery, what we can do with AJAX is create an AJAX call using jQuery is methods, which down here you can see without jQuery, AJAX coding can be a bit tricky. It's tricky because as different browsers with different syntax, and as you saw before, if I just bring up that AJAX example from when we were doing vanilla JavaScript, this is what you are dealing with when you're doing an AJAX call using JavaScript without jQuery. Here in the next page, you can see how we are able to use jQuery to load in some content using AJAX. Right here, the most simple example is load. Dot load is simple but very powerful as it states here and allows us to load data from a server and puts that return data into a selected element. This is a godsend, so let's try it ourselves, and as you see here, we can simplify this whole complex AJAX call by just using.load, and that'll load whatever content is in this file into whatever is selected here. We're selecting all elements with an ID of div, which because we're using ID, should only be one on the page, and it's right here. Now if I click this button, now, you'll see that everything within this div has now changed because it's loaded in some external content. Really cool. You can also add a jQuery selector to the URL parameter. Here you will load content of the element with an ID of p inside the file demo test.txt into a div. It basically allows you to filter. I only want elements with an ID of p1 from this particular file to load into this particular element that's on our page. If we look and try it ourselves. Again, we can't see the content of this particular page, but we can imagine it. If I click on this, you can see that we are only going to get the part of the text file that is an element of the ID of p1. Here we only get the element with an ID of p1. Probably more common than load in my experience, is getting and posting AJAX. Again, you need a backend for this or some data source to plug into, so it's hard to show a concrete example, but we might get to that in the class project, the jQuery getMethod will request data from a server with a GET request. In web development and back-end programming, there's these requests, code, gets, and posts. This is talking more about backend web development. But essentially, what we're doing here is getting data when we do a get request. Right here, if I use this getMethod, I can target the specific address, then I start a function with two parameters, data and status, and I can get back the data and the status. Let's have a look at what that looks like. If I click this button, I will get an alert and it'll come back with the data that it comes back from this address, and it'll come back with a status as well. If I click this data, this is some texts from here to external ASP file, status, success. Obviously, the status is success because we got back the data. That's pretty good. If I go and inspect this and I go into network, hopefully I can show you what's going on here. Let's move this over to the side, and let's clear this console. If I click this, you'll see that we have made a call to demo underscore test.ASP, and now we can actually go in and inspect what happened. We made a get request to this particular URL, and the status code is 200, which is green and so good, and we get a bunch of other information all here. But I just wanted to demonstrate, you don't have to fully understand how to use this panel, but I'm just demonstrating that a request happened in the background, and we got back some data successfully. If I go back here, we can post data using the jQuery post method, so the parameters for this will be the place we want to send it, the data to send, and the callback parameter, what we want to happen at the end. We've got a similar thing here. It's going to confirm that we were able to send this data to this particular address. If I click on this, it says, Data: Dear Donald Duck. Hope you live well in Duckburg" and the status is successful. Instead of retrieving that information, we actually have the information here and we're sending it to that address. Again, doesn't make perfect sense, perfect practical sense until we have a backend or data point to send or get from, but that is AJAX. Essentially, this is JavaScript's interface with the backend., and so you'll need to understand what's going on in these particular addresses as well that will have to get passed on to you by either your own knowledge of the backend that you've dealt yourself or somebody who's a back-end developer or data source, or you're using an API, you might need to check their documentation and see what you need to make your request to. But of course, AJAX is probably one of the most complex topics in jQuery. You can read more about it. But really, you won't fully understand AJAX until you have an understanding of backend as well, because backend is where you're going to get the data from. That covers jQuery for us. I'm excited now guys, because it is time for your class project. We have covered all the bases you need to start getting to work with JavaScript. In the next video, we're going to start with the class project, and actually get you writing some code. I'm excited for that. I will see you in the next video. 25. Class Project - Intro: In the next few videos, we're going to be talking about your class projects. As JavaScript is quite broad in what it's able to achieve, your class project is quite broad as well. All I want you to do is to use your new knowledge of JavaScript to either create a new web project or improve upon an existing web project you have. If you're confident enough to run off and create your own project, then go right ahead. Otherwise, what I've done is I've created this example project, which we're going to go over in the next video. My idea for this simple little application is a page that provides a list of Pokemon. There's only really two steps to this. We're going to have a button that will load in a list of Pokemon from an external source, and then, we're going to allow the user to hide each of them with a click of a button. Honestly, there are so many different things that you can do with JavaScript and they rely on other elements and other data sources, so it kind of sits in the middle. It works best when you want to include features on an already existing app. This is quite a basic example, but even still, you're going to learn a lot from being able to do something like this. Again, you can just run with this little description here, create your new project, or improve upon an existing one. However, if you're clueless or you don't know what to do, you can follow along with our class project. Once we have this as a starting point, you may have more ideas about how to improve it, and it might give you a little bit of confidence to expand on this project, or bring that knowledge back to your own projects. Again, feel free to skip the next video if you just want to create your own project. After the next video, we're going to go into the conclusion. Feel free to skip ahead to that. Otherwise, if you want to join along with me as I build this little application, then stay tuned for the next video. I'll see you there. 26. Class Project - Follow-along: In this example class project, we're going to use some of the things we learnt in the previous lessons, such as Ajax, such as event listeners and a little bit of traversal of the DOM as well. The first step, loading a list of Pokemon from an external source. We're going to of course, use Ajax for that. And the external source is what's called an API. I don't want to go into a large amount of detail about APIs, because for me at least I find it much more easier to understand once I start using one rather than having it explained to me. We're just going to dive straight into that, and then the second part is we're going to allow the user to hide each of them with a click of a button. Honestly, we could add a list of ten different things in here, but this is just to get you started, and the first steps are going to be the same for any JavaScript project in terms of creating a web page, bringing in jQuery, and getting started with running some event listeners and different functions. The first thing I'm going to do is open up a finder window. I'm going to go to my desktop and create a new folder for our project. I'm just going to call it JS project, not the most inventive name, and just like I've done in the previous class on HTML and CSS, I'm going to just copy the example on W3 schools for the HTML. If you want to do the same thing and go to w3schools.com, just click HTML and they give you a basic example. I'm going to copy that. I'm going to then open up a code editor. Mine is atom, and I'm going to create a new file, paste in that code and save it straight away without changing anything. I'm going to go into my project and I'm going to call it Index.html, just like we did in the previous class. Going to do some indenting here, and what I'm going to do is change the page title to Pokemon, change the first heading to Pokemon, and instead of this paragraph tag with a random paragraph in there, I'm going to replace that with a div, which we will put the content in. I'm going to first open and close it, leave a space for the ID, and I'm going to call this the poke-list. Before that, I'm going to create a button that I can use to click on, and then I will bring in the list of Pokemon from the external source. I'm going to give this an ID of get Pokemon button, and then I'm going to write that text there, cool. I'll put that to the side. What you want to do now is load it into your browser. Going to grab this, drag it in here, and right now nothing will happen because we haven't got any JavaScript yet. Two things I want to get into the project before we actually start to write some code ourselves is Bootstrap and jQuery. You would have seen bootstrap in the previous class on HTML and CSS. If not, Bootstrap is just a CSS framework. It's the most popular HTML, CSS, and JavaScript library in the world according to their own website, what I'm going to do is just click download here, and it's going to give you all the different files within bootstrap, but we're just interested in the CSS files. I'm going to download that. It will download pretty quickly. Going to open up a new finder window to browse my download's. I'm going to expand that directory, delete the old directory to the trash, and I'm going to go into CSS and just grab bootstrap.css and then drag it in here. I'm not going to use any of the other stuff, so I'm happy to just delete that whole folder, and there you go. We've got bootstrap in our project. The next thing we have to download is jQuery. If we just search for jQuery and go to their website, we can again download jQuery here and we can get the compressed or the development, doesn't matter. I'm just going to get compressed because that was the first link. I'm going to go to our project again and I'll click Save. Cool. We've got the two files in there. The next stage is to link, and you should remember this from the previous class, or if you already know a little bit of HTML, we're going to do this in the head. I'm going to link the style sheet by saying link rel="stylesheet", and then I believe the attribute is href, and it's just bootstrap.css. Then I'm going to bring in the jQuery script. I'm going to create two script tags. I'm going to put in an address here. I'm just going to copy and paste the exact filename, put it in there. Now what I want to do while we're here is put in our own JavaScript file, which we haven't actually built yet, and a common name for that is app.js or index.js or main.js. I'm just going to call it app.js. It doesn't really matter what you call it. To check whether that's all working fine, I'm going to click new file, and I'm going to put in a console log of js file loaded. Then I'm going to save that and go into my project and use the exact same name that I put in the source attribute. That was app.js, as you can see here, app.js, app.js. We're going to put a semicolon on that to make sure that, that's the end of the statement, and now I can refresh the page. Now, one thing you'll notice is that the styling has completely changed and that's because we're using bootstrap. Just to bootstrap a file, HTML a little more before we continue, I'm going to give the button a class of BTN and then BTN primary, and that'll give us some styling from Bootstrap, and then the other thing is, I'm going to place this all in a div with the class container. That's going to make it a little bit more nicer. You'll see in just a sec what that does. Now when I refresh the page, it's in a container that's responsive. Cool. The final thing to check if it's all working is to go into my console. I'll do that with Alt command I on the Mac, and voila, it says here js file loaded, which means that we're loading in this. We can tell that it's loading in Bootstrap because we're getting these styles. We can tell that it's loading our app.js file because it's running that code we're not confirmed yet whether it's running jQuery. We can actually run something right within the browser using a jQuery selector. I'm going to select the document. I'm going to run that, and you can see that it's selecting the document. We know that we've got jQuery working. We know that we've got our JavaScript file linked, and we know that Bootstrap is linked as well. Now we're ready to start writing some code. Now, the API to get the Pokemon is @pokeyapi.co. I'm going to go to that web page, and as you can see here, you can put different things into this box, click "Submit", and it'll tell you what the response is. I've experimented with this beforehand, and to get the list of Pokemon, we just need to run that address, and you can literally just copy the whole, it doesn't actually let you copy from here. But if I was to go into a different spot in my browser and just copy that across, you will see here, it will come up as that. I actually I have a plug-in that will make the data look a bit nicer. Yours will look just like it had before, before it kicked in. So it'll just be a bunch of texts like it was for a splits second. The plug-in that I use for that if you are interested, is JSON view. Yeah, if you want your JSON to show up nicely like this, with the ability to expand and contract. Definitely check out JSON view. Anyway, enough of that tangent. I'm going to keep this exact address handy because in our Ajax call, we're going to call this particular API. Going back to here, what I'm going to do is remove this console log, and I'm going to get started with a jQuery Document, and it always starts with document ready function. Don't get caught up with what I'm doing right here. It's a pretty standard function, always going to look pretty much the same. It's just a matter of memorizing it, and within this function, you're going to put all the other functions that you want to run on the page. This just makes sure that the document is ready before you start running these functions. The first thing I want to do is set up an event listener, and the event listener I want to set up is to check whether this button is clicked, and on the click we're going to load in the Pokemon list. I'm going to start a jQuery selector. Remember we called the button, get Pokemon button. I'm going to open that up, put a # in because that's how we target IDs, and I'm going to use this method of creating an event listener. Function and then anything we put inside this code block will be what happens when we click on that Pokemon button. We could test this and put in console log button clicked, and now if I go back to this page with my console open, if I click the button, you can see and this number will go up. It won't actually repeat it. It'll just put a number next to it. If it's exactly the same, you'll see this number go up and the text come out, button clicked. We know that this event listener is working. But what I want to happen is I want to make an Ajax request to that API and bring in those Pokemon. What I'm going to do is do a get request using jQuery, and the first parameter is going to be the URL. This is the URL right here. The second parameter is going to be a function. Just to remember how we create this get function, I'm going to go back to W3 schools and go to the JQuery section and go to the jQuery get posts menu. As you can see here, the first parameter is the URL and the second parameter is the callback, and then the callback, we can put a function with two parameters. One will be the data and one will be the status. I'm going to put those parameters in, putting my curly brackets, and I always like to end each statement with a semicolon straightaway so I don't get confused. I'm going to create some spacing here just to give us some breathing room, make it easier to read. Now that we have this get function written, what we can do is grab the data. Again, this is something that I do quite often. I will just console log at various stages to see where we're at. If I click "Get Pokemon", and it'll take a little bit of time because it's grabbing it from an external source. You will see that we've got this object come into our console now. This is the data that is being returned from this URL. As you can see there's different items in this object. One of them is an array called results with all the different results in here. This is the list that we're looking for to put out onto the screen. What I'm going to do is use a loop to loop through all of these and build a string that will then put into that div that we created right here, but it has nothing in it. Bear with me as I do this. This will be a bit of code, but essentially what we're going to do is create the string first. I'm going to call it var string. To start it off, I'm going to open a UL, so an unordered list tag. You can see here the concatenation operator, this will add to the string. In fact, we should set this up with an empty string to begin with. I'm going to put in the UL because we want that before the loop. I'm going to put in something for after the loop, which will be the closing tag. Then I'm going to do the loop. We definitely covered how to do loops, but we didn't show you the jQuery way of doing a loop. The jQuery way of doing a loop is with this dot each method. Let's just go to the jQuery documentation and type in jQuery each. Here you can see a description. It can be used to iterate over both objects and arrays. Really cool little function. As you can see here, we put the object or the array as a first argument, and then we have the function or the call back as the second argument or parameter in this function. We can put parameters in here for index and value. With that in mind, I'm going to grab data results. Remember that was where the list of Pokemon was. Then I'm going to put in my callback index value. Going to put a semicolon in there. What I'm going to do here is add a list item to this list here that we've just created. I'm going to put in the LI tag. I'm going to close that LI tag and put in a semicolon just to be clear that we're done. Then I'm going to put in the value. The final step is to put this on the screen. Like I said, we're going to put it into this poke-list div. The first step is to select that div using a jQuery selector. I'm going to use the hash to select any element with an ID of poke list, which is just this one. Then I'm going to use the HTML method in the set context to put in the string that we just generated. If I press "Save" on that, go back to the project, click "Get Pokemon". You can see it come up with just object, object, object. The reason why it's doing that is because within each of these results, there is another object. You can see here on the first result, we've got a object with two attributes, one name and one URL. We need to actually break those out and use them separately. What I'm going to do is seemingly we got a link there, I'm going to set up a link tag. I'm going to put in a href here. This might be a bit confusing because I'm using string interpolation here. But what's happening here is we need to use quote marks to open up the string definition. Then here we're trying to actually put in a quote for the attribute. We just need to make sure that we're alternating between double quotes and single quotes, and we should be fine. This signifies that we're starting a string, then we're putting in a quotation mark that is going to be a part of the string. Then we're closing that string. Using pluses we can concatenate and then this will signify that we're reopening and then putting in and ending there. Actually we got to put in a closing tag there. In here, I'm going to put in the URL. It's actually a value within this value, which is a dot object. That'll be value.url. Then here it's going to be valued.name. I don't think value really makes sense in this context. We're able to change this parameter name. I'm going to go back and I'm going to call it item. I think that's a bit more descriptive. It's the item.url and the item.name. If I save that, refresh the page, click "Get Pokemon", you can see a list now appears. I can click on any of these and it'll take me to the more detailed API core for this particular Pokemon where you can look at their abilities, you can look at their stats and other bits of data related to this specific Pokemon. What you'd want to do is build a specific page for that, pulling in the data. In this video, we're not going to go into that second step, but feel free to do so. What I will do instead is demonstrate one more onclick EventListener, and using that onclick EventListener, we can hide different items of this list. If I go into here, I don't really want to list anymore. I want to turn this into a table. What I'm going to do is change UL to table. I'm going to change LI to TR for a table row. Of course, this is going to need to become a table cell, so I am going to put an open and close table cell there. Then I'm going to create another table cell. Within that TD, I'm going to put in another button so opening and closing tags. Within those the label for the button. Here so I can target it, I'm going to put in a class name of Hide button. Remember we're already using double-quotes to define the string, so we have to use single quotes here if we want these quotation marks to be part of the string. If I click save that and I run this, you can see that we've got a table now, or maybe it's not that obvious, but this is a table with Hide buttons. Again, we're using Bootstrap so we can make this look a lot nicer really quickly. What I'm going to do is put in some classes to make it look nicer. Primary and here I'm going to give the table a class of table. Now, if I click run Pokemon, you can see the style has changed a little bit. There's more spacing, there's lines between the rows and the buttons are a little bit nicer. Cool. The next and final step will be to hook up these Hide buttons and actually get them to hide the row that they're in. To do that, I'm going to set up another EventListener and I'm going to use the dot because I'm targeting a class. I'm going to find all hide buttons and put an EventListener on them. Hide button. I'm going to use the same convention as before. We've click, then function, opening code block. What I want to happen inside this EventListener, I'm just going to expand here so you can see the whole line on the page. Basically, I am able to find which button was clicked by using the selector of this. But then I don't want to hide just the button, I want to hide the whole row. If we use our knowledge of DOM Traversal to go up the tree, we've got this button and the parent of that button is a table cell. The parent of that table cell is the row. We're able to target the parent row of the button by first starting a jQuery selector using the keyword this, and then moving up the DOM by using parent once and then parent a second time to get it here. Then from that point, we can just run the function that we want to run on it. I'll click "Save" and we'll go back and we'll see if this works. I'm clicking it and it's not working. There's a clear reason why. I actually wanted to do it wrong to begin with, because I think this is the intuitive way to do it. Why aren't we able to hide the buttons? This is the thing that is a problem with JavaScript that you probably don't get in other programming languages, it's actually asynchronous. In JavaScript, this won't finish and then it will run this, this will start running and while that's running, this will go. Especially with getting data from external sources, that could take any number of time. While this is running, it doesn't want to delay the rest of the code. What that means for us is that we need to put this in a place where it's only going to run once this has finished. The way to do that is to use status here. I'm going to put in an if statement. If there's a status meaning if there's was a successful call, I'm going to go in and put in the EventListener here. Don't worry, we can nest EventListeners within each other, it's totally cool. Put some space in there. We'll click "Get Pokemon". Now, when we click the Hide button, it should hide. You can see it is. It's finding the parent of the button that we clicked, which is TD. Then it's finding the parent of that which is going to be the parent row and it's hiding it. I can do this for all of the Pokemon in the list. I can grab the full list again by clicking "Get Pokemon". You can see down here, we've still got our console log. I can just get rid of that now. Now we have a clean console and a clean working app. I hope that helps you to see in a practical setting how you would bring in your knowledge of Java scripts. I hope this wasn't too confusing for you guys. Again, you're going to learn by doing. What I'd suggest you do to learn this stuff is create your own projects, research how to do these things, and then go ahead and try them out. If it doesn't work, start debugging, which is actually what we are going to be covering in the next video, which is going to be our bonus lesson. We're going to learn how to debug stuff in the next lesson. If you're ever stuck and want to debug, check out that one or maybe you want to check it out right away. It's up to you. But that is basically the beginnings of our little example class project. I'm excited to see what you come up with and I'll see you in the next video. 27. Bonus: Debug with Console.log: Now we did see a bit of this in the previous lesson when we created this Pokemon app. But I wanted to go into a little bit more detail about how you would go about figuring out what the issues are with your code and then debugging them. Before hand, there was a good example where it didn't work if I had this event listener outside of this AJAX call. If I just move that out and I'll just delete that as well, just so it's not floating there empty. Go here, and this is where it was before, I think no, actually, it was here. Anyway. It doesn't matter, it's been the wrong place regardless. I'll click "Get Pokemon." Now as I see, it's not working, I might be thinking, well, why is that? I might go back and I might look at this code and I might see that, yeah, there's no typos. It should be triggering. This is not hiding that button. One thing I use quite often is console log, because in JavaScript, it's not going to arrow when it can't find this.parent. It's just going to do nothing. That's frustrating when you want to know what the issue is. A really handy tool is console.log. I'm going to comment this out so it doesn't run anymore, and I'm going to use a console.log to just check if the event listener is actually working. I'm going to just put the words button clicked in, press "Save", going to get Pokemon, and I'll click these buttons. The text is not coming out in our console, which means this is not actually running, there is something wrong with this part of the code. It's not necessarily this part of the code because it's still not happening even when we get rid of this. Then we have to think of what's wrong with this part and one of the things with JavaScript, like I said in the last video, that's an issue is timing. For this to actually work, there has to be a bunch of hide buttons on the page already. As soon as this code runs, the event listener is set up and it doesn't update when new elements arrive on the page with this class. You need to make sure that all of the hide-buttons that you want the event listener to apply to have already loaded on the page before you start to run this event listener. That's something that even trips up experienced developers. You have to take into consideration when the event listener is running because it doesn't take into account new elements as they arrive on the page. One of the ways we fix that was by making sure that we waited until the AJAX call was finished before we ran this. I will put that back into here and see if the button clicked comes up now, which it does. We can get rid of console log now, see if this line of code is working, which it should be. Yes, it is. The other area where I can see console.log helping here is to figure out what these different things are. You've got this API and you can see it here. This is the data but to navigate it, you might be targeting different parts of the response, which is a JSON response. You may be looking in the wrong places. Like we had before, maybe I'll just have item here and I won't go deeper into the item to pull out the URL and name. If I go into the app again and I click "Get Pokemon", it's going to have class object Object. If you look in the actual, I can't show you at the same time but just above the console here, if you look while I'm hovering over, the link address is object Object as well. If you click on that, that's obviously going to be a broken link. Getting Pokemon again. In this instance we're like, okay, that's not very descriptive. How do I get the actual name of that? One of the ways we might do it is to use console log. I'll go into console log and I will just output the item. So I'll click "Get Pokemon," and you can see here it outputs the item for every list item. As you can see here, we've got these objects. You should be able to understand that this is an object, it's a curly bracket with a name value pair. If I click on "Expand" that, I've got name and URL within that. At this point, you should be like, I see, I've got an object here. No wonder, as I'm putting it out as a string that is not working and it's just coming up with this random text. I need to actually go into the object, where there are strings, right here and right here. Going back to our project, I'm just going to reverse those two changes and we're back to where we started. We can also inspect index and maybe we want to use index in our project. I'm just going to use console log again. Now when I click "Get Pokemon," you can see it's got the index number, which is just zero to however many there are. Another thing we can do if we're a console logging multiple things, because maybe we want to check multiple things, is we can actually combine a string with a variable. I can put index, colon and then put in a comma, and then put in the actual index. We can see here that it tells us Index and it tells us the value that we're pulling. Those are a few examples of using console log to inspect things within your code and then figure out where issues are and troubleshoot a little bit, debug a little bit. As you build a more complex project, you're going to have to solve more complex problems and that's just the nature of the beast. I hope that this video though shares with you a full process in JavaScript when you have an issue and you're not getting any errors back, how you would actually figure out what's actually going on in the card and figure out what certain things are using console log. That was the bonus episode. I have that was valuable. In the next video, we're going to wrap up the class and you're going to get started on your class project if you haven't already. I will see you in the next video. 28. Conclusion: I hope you're now ready to start bringing in some JavaScript into your own web projects. Again, like I mentioned in this class, it's a little tricky to bring all of what we've learned here today into a single project, but I hope you'll take what we've learned here and build out some of your own Website ideas. Or maybe just add some interactivity to your existing website. Remember, if you need any tips or guidance, be sure to leave a comment in the discussion box, and I'll do my best to point you in the right direction. That concludes this class on JavaScript. As we have learnt in this class, JavaScript is one of the three main languages that we use to develop on the front end, now with this class and the previous class, you should be pretty comfortable with developing for the frontend. Of course, it gets more complicated as you bring in more complex JavaScript frameworks like React, Angular, or Backbone. But that is a whole other topic in itself and perhaps a topic for future classes. Anyway guys, thanks for watching, and I hope to see you again on some other classes.