Web Development Fundamentals: Javascript | Christopher Dodd | Skillshare

Web Development Fundamentals: Javascript staff pick badge

Christopher Dodd, Web Developer / Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
28 Lessons (3h 32m)
    • 1. Introduction

      1:13
    • 2. What you'll need

      1:01
    • 3. Intro to Javascript

      5:14
    • 4. Getting Started with JS

      10:01
    • 5. JS Syntax and Statements

      14:37
    • 6. JS Output

      5:24
    • 7. JS Variables

      5:28
    • 8. JS Operators

      11:32
    • 9. JS Datatypes

      13:14
    • 10. JS Functions

      7:33
    • 11. JS Scope

      5:09
    • 12. JS Events

      2:54
    • 13. JS Arrays

      13:59
    • 14. JS Conditionals

      8:49
    • 15. JS Loops

      5:00
    • 16. JS HTML DOM Introduction

      5:22
    • 17. DOM Navigation

      10:48
    • 18. DOM Event Listeners

      3:58
    • 19. Intro to Ajax

      5:06
    • 20. Intro to jQuery

      5:36
    • 21. JQuery Effects & Events

      10:38
    • 22. jQuery Traversal

      11:26
    • 23. jQuery Manipulation

      8:18
    • 24. jQuery AJAX

      6:37
    • 25. Class Project - Intro

      2:05
    • 26. Class Project - Follow-along

      23:07
    • 27. Bonus: Debug with Console.log

      6:36
    • 28. Conclusion

      1:01
131 students are watching this class

About This Class

Hello and welcome to ‘Web Development Fundamentals: Javascript’

This class is the next step in our ‘Web Development Fundamentals’ series. In the last class, we covered how to create web pages with HTML and then style them with CSS. In this class, we’re gonna 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 World Wide Web. It’s said to be the most popular programming language in the world and has been the programming language for front-end 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 web page to create interactive web sites and web applications like many of the ones you use today.

Transcripts

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. So we covered how you can create many variables in one statement by using a comma and that declaration conspirator multiple lines as long as we end that statement with a semi colon, something that we haven't discussed yet is the value of undefined. So if I declare a variable of con name here and I don't actually assign it any value, what is the value of it? So that's a good question. And if you don't actually define a value for something, it ends up having a value of undefined. So to see that in our console, if I was to Duva kind name and then I just output it kind name. It comes up as undefined. If I was to a sign of value off Mazda, which is the car I drive, it'll resolved to master their. But then if I type in car name again presente it comes up with the string of Mazda. So before we assign a value to it, it is just undefined and we'll see later. Why about actually is important? Another important thing to note here is if you re declare a javascript variable, it will not lose its value. So the variable car name will still have the value of over after the execution of the statements. So by putting in this statement after you've defined a value on a variable, it doesn't actually wipe it and set it back toe undefined. So as you can see here, we can do arithmetic. We can also add strings together. The technical term for this is called concatenation. I won't go talking more about that because we already did that in the previous example that you can also use these operators not only to add numbers together, but also to add strings together. Now JavaScript is actually pretty clever in the fact that it won't era 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. Or maybe you want to add the string of to to the string of five and in which case you would get 52 in JavaScript. It'll 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 results of adding five as a string and then two and three as a number is 5 to 3. So it's the same thing as if we went to here, and we explicitly called these strings by putting double quotes in 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 two strings based on the data type off the first number, which has 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. And if I run, then you get five plus two plus three, and the result of that is 10. So that might take some time to wrap your head around. And that's cool. Generally you shouldn't mix died a types with your operations. If you want to do an arrhythmic operation with numbers, don't put the quotes in. And if you want to add strings together, make sure you use double quotes. So if you want to combine it like this, that's when it starts toe, you know, get a little bit tricky and often times you won't find yourself doing this unless it is a mistake. So you don't really need to worry. The flip side of this is by changing the order, and if we try that out, we can see that the 1st 2 numbers are added together, but then because it's adding a string on the end, it adds five as a string. If that makes sense, so it's the same thing as if we put these in brackets and click run or we put the result of that explicitly as a five, we would get the same result. So 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 can captain ating it to that string again? This is stuff that I don't have to deal with on a regular basis, because I just followed the general rule. If I'm doing arithmetic, I used numbers. If I'm concoct in aiding strings, you strings. Simple is that. But if you do try and combine strings and numbers, that's when you start to see some of this funky behavior. So 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: So in this video we're gonna cover JavaScript operators. And this is really important because, like we mentioned here, this does not mean equals. It means assignment. That is one of the coming mistakes with operators. But let's dig deeper into it right now, sir, again, this equal sign means assignment, and that is the most common operated that you'll see in JavaScript or pretty much any programming language is. We need to assign values to variables, so the equal sign is the assignment operator, and in the signs of value to a variable. The addition operator adds two given numbers, but it also, as we saw before, can add together strings as well, or the proper term would be concatenation, so it combines strings together to form a larger string. The multiplication operator multiplies numbers, and this is stuff you should know by taking any basic math class addition, subtraction, multiplication and division. You can also do something called a module ISS, which gives you the remainder after divine ing two numbers. There's two other operators here, the increment and D crimen operator in Javascript. And as you can see here, these arrhythmic operators are fully described in the chapter on Js arithmetic, which will go into briefly at the end of this lesson. So going to JavaScript Assignment operators Assignment operators assign values to JavaScript Variables, sir, the easy one is equals, but there's actually a few different ones. So there's these shorthand operators that allow us to basically save space. They 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 why two X, you can do that with this. If you wanted to subtract why 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, so we can can captain eight strings using the plus. And we can also use the shorthand plus equals to concoct innate strings. So what we can do is have a string here for text one, and then we can add to it by using this concatenation assignment operator. So let's just show that as an example. So we've got what a very space and then we're adding to that nice day. And so when we output text one we get the full strength. This is the equivalent off course off doing this, which is to put in text one again and then put in a plus so you'll get the exact same result. It's just short hand. Okay, I'm going back to the page. We can add strings and numbers together like we saw before these examples that we covered in one of the previous lessons, so I'm not going to go over it again. But the important thing to note here is comparison operators. And like I said before, one of the one of the things that even as an 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 Ivor double equals or triple equals, so 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 off the same type, that is a bit more technical and we might get into that later. But just for now this should be enough for you to do in comparison off whether two variables are equal This one is not eagle. So you just put an exclamation mark in 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 turn Eri operator don't know if we're going to turn eri operators in this particular class but if you'd like to learn more about turn Eri operators definitely look it up It's just a short away off doing if then statements Basically we also have logical operators. If we were to check if two statements were both true, we could do. And sir, hopefully there is an example here Now there isn't Okay, let's create our own example here sir, Let's just test something out. Let's put in a statement five equals five comes back true. All right, let's put in for equals five False. OK, That's what we expected using and not equals. If I do four nots equals five, we should get true. So that's the opposite. Now you might be thinking or Chris, why it's obvious that five and five the same and four and five aren't the same. Why are we doing this? Well, we can replace thes explicit values with variables. So if I was to declare a variable off X equals 10 and declare variable off, why 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. So let's combine the 1st 2 So I've got five equals five, which we know is gonna be true. But we want this statement to only be true if X is equal to why as well. So if we put in X is equal to why it'll come back false because the first part is true. But the second part is false, so it's only if both of those is true, But we can also use pipes for or so if I was to do that same statement and putting pipes instead, it comes through as true because evil one of those sides needs to be true in order for the whole thing to be true because it's or so. 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 just 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 will come back. It's false. And if I put in exclamation mark false, it will come back as true because it's basically saying the opposite. So 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 is false because that is true and this is asking if it's not true. So it's basically the complete opposite. Down here we can see the type off operators, and I only really use this. The most common example like and think of using this would be the check if something is undefined. So let's use a different variable names, and we've used X before. I'm just gonna call it probably not the best name but variable. And if I do a type off here and open brackets, put invariable close brackets and the statement with the semi colon you'll see it comes back is undefined. Whereas if I assigned to variable a value of one, which is just a number and then we type in type off variable comes back number. And if we were to change that to a string, let's just say hello and we typed in type off variable. You would see that it's now a string because we assigned a string to it. So type of of Barreda is handy sometimes to figure out what died a type your variable is down here. We've got some bit wise operator. Honestly, I pretty much never have to use these, so I'm not going to cover them. If you want to know more about them, there's a whole chapter on bit wise, so that is an overview off operators. There's also a few different menus here for arithmetic and assignment. Remember, we talked about the increments and the day Clement's sir. I'm just going to scroll down to that now. And 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 one. We can just do X plus. Plus, it's a very shorter way of doing it. So, 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. Is that by doing X equals X Plus one and they'll come back is six. So this X equals X plus one is the exact same as using this, so it's just a short hand. Let's just comment that out again, and if I was to do a minus now, you'll see that it's five minus one. 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. So we often see this operator with loops as a short hand, we don't have to type in X equals X plus one when we can just put in this shorthand operator. All right, 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. So if you understand your mathematics, then you should be okay with this. Here, you can see some more technical mumbo jumbo. Honestly, probably don't need to look too far into that. The final menu I don't want just go into is a summary of assignment operators. As you can see here, there are a lot these different ways to assign variables, and they're basically short hands. So over here you can see that this is the same as this. These are probably more that come ones that you will use if edl and that is the exact same as what's in this column. So we've covered assignment quite a bit already. But if you wanna see some of these short hands, you can go to this menu Honestly, is not that important. If you put in your card 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. All right, so that's what I want to talk about on operators again. The biggest thing and the biggest beginning 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. And then, as you can see here, it thinks that you're assigning 5 to 5, and five is just a number you can't assign something to. Just an explicit number has to be a variable. So if you wanted to compare those two, you would have to put in the extra equal sign. And that's how you get a Eagles comparison operator. That was the main thing I wanted to get across, and you can see some other examples of operators here again, This is all available on the Internet so you can come back and reference it. If you're iffy on anything in the next video, we're gonna cover more about data types, so 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. So let's go to the Js. Died a types menu item here, and you can see here ones we've talked about before, a number and a string. But it's also a 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 Js Objects menu item, we can see that objects mirror objects in real life. So in real life a car is an object and a car has properties like weight and color and methods like start and stop. Sir, you can start to see here that in Javascript we could have the same thing. We could have an object called Khar and within that we could have all these properties and how we define or how we reference these properties but 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 someone so on. And 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 card dot start, something happens. Right. 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 off numbers and strings and go down to a few other ones called Boolean. Basically, billions could only have two values. So remember before when we're evaluating these statements like does five equal five? Well, yeah, that's true. True is a Boolean, so we can actually a sign a Boolean as a value to a variable. So instead of just saying five equals five and putting that at and say OK, that's true, we can actually assign a variable here. And let's just say that the variable is called is it's true. We can actually assign the results off comparison operator here. So we can say, is five the Samos five, if so assigned true to Is it true if not a sign false to? Is it true? So now when I type in, is it true it'll come back is true. And as you'll see, that probably doesn't make a lot of sense now. But it actually helps me create a short hand operation. We haven't gone into if then statements before. But essentially, if I wanted 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 off five equals five Now for this. It's very small, sir. 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 bullion. So if we check now, type off. Is it true? You know, come back, Boolean. Another one is a raise and a raise might take a little bit of time getting used to, but they ah, comment In every programming language, we can assign a group of values to a variable and then call them based on indexes. So to demonstrate that right now, we're gonna clear in my console and do the example here. So rather than reinvent what they've done here, I think this is a pretty good example. Now we have cars. If we output cars, we will get how the console represents an array. It's like this and the first number actually tells us how many values in the array or how many items are in there. And then we can click this to see the different items and the index. So 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 zero. 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 semi colon in and hit enter, it will come up with sob. So that is a confusing one for and you be developers as well Is that the first value in an array is zero OK, sir, Of course, if we wanted the next one, we just type in one and then we get Volver and the powerful thing about this is if we have an array full of 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 in the ray is what we could give to a loop to loop through all of these and create some hate email on the page. So a raise very common and very powerful, so definitely a good thing to learn. Now we're getting back to our good friend, the JavaScript object, and 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 name value pairs separated by comments. So we're storing a lot of things in the one variable or the potential to store a lot of things in the one variable. So here we have an object and 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. So if we go back to the example he and objects you see here how we're able to grab the name of car or a sign the name off this car. As for yet. Well, if we go down here, we see the example. I'm just gonna copy that into my console. Clear this. If I run that now, I can call car dot type and it comes up a Fiat. I can run car dark 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. Tow. Line them up. You're not necessarily going toe loop through them in a iterative way. You just want to be able to dig into a particular car and get certain attributes. That's where objects very good. And 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 kind of like how it did with a raise instead of these index numbers, we have names. So we've got color black model 500 type Fiat. And so that's a nice way. What we can work with objects in JavaScript. So I'm bouncing back between died a types and objects. But objects is a very important data types, so these kind of 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. And we got the type of you. Maybe think 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 no, and now is basically nothing. So it as it says here. Unfortunately in JavaScript, the data type of now is actually an object, sir. It could be a bit confusing, and you could consider it even a bug in Javascript. That a type of now is an object. It should just be no, but basically you can empty an object by setting it to know. So if we were to use this example, we have a fire of person. That's obviously a object because we've got curly brackets here. You've got name value Pez. But then we can assign a value of now to this object, and if we grab the type of it, it's still in object. So this is just some quirks within JavaScript. This is 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 toe undefined. And the difference between undefined and now is a little bit nuanced. But basically the type of undefined is gonna be undefined. But the type of now is gonna be an object. As we talked about up here down here, remember, we learnt about using the comparison operators that have to equal signs in them and three equal signs in them. Now, if we look at them value against value, it evaluates to true. But if we look at them, are they the same data type? While they're definitely not because we've just checked the type up here and the difference so it will come out. It's false. This is kind of getting into the nitty gritty and, honestly, you don't need to be too familiar of this. But it's just something to cover, and there's some more complex examples here. But now we're starting to get into the more complex stuff. Basically, it's important to know what objects are, and it's important to be aval 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 declaration off 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, too. 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. So we haven't covered functions yet. But this is how you would declare a function. We can put it within an object and assign it to the name of something. So I won't go deep into this because we haven't covered functions yet. But that's what's going on here. He is a common example that you'll find a lot in JavaScript. Trainings is thief. Full name example. This is just a simple function that will return the concatenation off to off the properties of the object. So 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. So 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 the this keyword to reference the current object that we are in. So 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're defining it, we refer to this object that we're currently in using the keyword this. And so when we change the inner hedged email off this P to the result off this method which we've defined here we will get first name with a space and then last name. So hopefully that's not too much information again. We'll go into functions, and I think it might even be the next video, but we'll definitely get into it very soon. Okay, 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. Yeah, those are the major data types of game we covered number and string in earlier in earlier lesson and boo Leon's 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. So if you need to come back to this page or any other pages in here, there's a whole menu on a raise. He and we might go deeper into it in the later lesson. If you need to get clear on any of these, the main ones of course, a number, string, object and array. So that's a little bit about Dina types in the next video actually gonna dive right into functions, which is good, because I kind of threw you in the deep end here with Where is it if we go into the objects menu, which is good because I kind of threw you into the deep end with putting in a function here in the next video, we're gonna cover functions. So we'll be explaining more about what's going on here and taking it outside the context off an object. So I'll see you in the next video. 10. JS Functions: All right, So in this video, we're gonna cover something that's super super important in JavaScript, and that is functions. So if I click on the menu item for functions here, we can learn what I function is and what it does. So a function is just a block of curd designed to perform a particular class, and it is executed when something invokes it. So basically, what we can do is put ah, bunch occurred into a function, and then we can call it in different places off our project. Now, this is important if we need to re use 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 ride it out every single time we need to do it. It's better to define it once and then executed 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. Sir, he is a very basic example. So let's try it ourselves. We're 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 off both of them. And the product means that where 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 M b p. One 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 results of that is. So if we put in four and three, we get 12 because that's what we've just find this function to do. So it takes input here. So I'm gonna put 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 it going in. So maybe we just explicitly state these numbers. So it's always gonna 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 co block. Remember, In the syntax lesson, we were talking about code blocks. Everything within these two curly brackets will be part off the function, so you can put in as much complex stuff is you want here defined variables and all that stuff. But at the end, it'll return a certain value, and we can return that by using the return key word. 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 out console, that might even be an era, because when not actually accepting any arguments here, so that is basically the syntax of a function. Um, and if you want to learn more about this 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 clothes, and you've got as many parameters is you want in here, you can put an infinite amount. I'm pretty sure like you probably wouldn't want to put 100 parameters in, But I think you can do it if you really wanted to. And then, of course, this is the code to be executed between these curly brackets. So we learned about the return statement in that example, and right here, it talks about why use functions. So, as I mentioned before, we might want to re use code. So we define code once and use it many times. So in the example above, Yeah, we could easily have just done this instead of having a function we could have easily just done four times three and the same result would come up. We don't have to write this whole thing, but maybe we're performing some sort of complex calculation. Maybe where checking a data base model when we need to make a database connection, we can't. Well, we don't Maybe we can, but we don't want to put all of that in here. So maybe we just want to put, you know, my function and put in some to valuables. And then whatever complex calculations happen in this function, all that 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, sir, it makes a lot of sense that we need to put all the curd 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 gonna return. Tow us. So here's another example. We can create a simple function called two Celsius, and when it does, is it 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 we have to do here is called a function of Celsius, run through a parameter off 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. So right here, if I just put two Celsius without putting in the opening 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 the function definition rather than the function result. And that's perhaps a bit of a nuance difference for beginning 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 old tank, 77 F and convert it to Celsius and then put it directly into this variable, and 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. So 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 on. Maybe not even prominence, 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 defined variables or declare variables rather outside of functions and inside of them on not just functions but co blocks in general, So I'll see you in the next video. 11. JS Scope: So in this video, we're gonna cover something that maybe not so obvious while you're developing JavaScript, but very important. And it might actually tribute 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, sir. Let's dive straight into an example right here, sir. Local JavaScript variables are variables declared within a JavaScript function, so they become local to that function, and they have a local scope so there can only be accessed within the function. So this is a pretty explicit example. If I put in a call to car name 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 off 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 off 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 kind of 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, and in strict murdered, 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, sir, if you want something like this, the nice a way to do it with me 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 notes like it's a good opportunity to make your declaration and your scope explicit. So here it's obvious that we're in our global scope, were declaring that variable in the global scope. So now it's accessible globally that 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 and that it was 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 often times doesn't make sense is 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 hate email. The global scope in haste to mount is the window object not important that you need to understand that? But essentially, the thing was scope is if, say, for instance, you've got this example, right, 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 right? I know, I said, I don't use that very often, but in this context will allowed us to get something out in the page straight away. If I do document right car name, you'll see that nothing comes out. And the reason why is because it is in the local Skype. So if I was to put that back in here and run the function, you'll see that the card name gets output. If we put it back to here into our example that we have before that hopes that didn't work . And instead of declaring the variable here, we just remove the declaration from that part off 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, you know, 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 all I'll 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 gonna briefly introduce event listeners. Event listeners is something we go into greater detail once will go into the HTML Dom section. This is the more common way of stating an event listener, but you have already seen an example off an in line event listener. 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 event listener any time you want something to happen when something else happens. So for an example here, when a Web pages finished loading, you can have something happen when an input field has changed. You can make something happen, and when in haste email button is clicked, you can execute some code as well and inhe HTML. You're actually allowed to put an event handler in line using an attribute, so the syntax, or the way you do this, is by putting the event name in as an attributes eagles. And then you put in as a string the statement that you want to execute. So here's an example down here, which we've seen something similar before, where easily able to see that we want this line of code to execute on the on click event on this particular button. It's very explicit because the Curtis stated right on the button. This is not always the best way to do things, as we saw in the previous class on Hasty Mounsey Assess. There is a reason why you would want to put your code into another file rather than in line in your actual element, especially if you wanted to execute certain JavaScript on multiple elements. And generally it's just clean a toe, have a separate file and set up an event listener. And as we get into this video here, when we talk about event listeners in the context of the D. O. M, 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 hasty male events. Sometimes if you've got, like 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 put on click on it just to get a certain result. But as your CO 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 on click Method, but essentially, what you need to know is more in this section, which will cover once we get into html. Dumb. So that's what I wanted to cover in this particular video. In the next video, we're gonna look deeper into a raise and how we can iterated through a raise 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 a raise. We're gonna learn more about how arrays work and also learn about looping as well, because looping and a raise often go hand in hand. So to get started, let's click on the Js raise menu item here. And as you can see, we've already seen this example before. Sir, 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 comments. But we can also put it in as a new data type array and then as parameters within that function. If I go down, you can see here how we target the different items in the ray. Remember, Zero is the 1st 1 So if we wanted to put the first item off the cars array into the inner hey html off an element with the i d of demo, we would do it like this. So here it is again. Zero is the first element in array. One is the second array indexes started zero. So that could trip you up a bit because it really yeah, 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. So 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. So it comes out a sub come of ovo comma BMW without any white space. And the other thing that's interesting about JavaScript is a raise our objects. So if we are to use the type off operator in JavaScript, it returns an object for a raise. So that begs the question of what's the difference between the ray and an object? Well, you should think of a raise as using numbers to access its elements. So person zero here will return John Person in square brackets. One will return dough and person in square brackets to will return 46 whereas objects use names, toe access, its quote unquote members. So in the case of a raise, what you're using it for is something that Fuller's a kind of linear flow so as we'll see as we go further down and talk about looping, you wouldn't necessarily want toe loop through all of this. Maybe you just want to grab an age. 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 toe loop through an array than it does an object. The other thing that's great about a raise in JavaScript is that there 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 way, we can do so by using the method off sort. So here we can see an example of the length property. 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. So, like I said, we were going to talk about looping as it relates to a raise, and the best way to loop through an array is a four loop So I'm going to open this up and you can see here. Maybe we want to format this list as hate email list so we can use a for loop. Now. What's going on here now? Just separate the loop here. What happens is the first statement in the four loop sets a starting point for this Irureta . 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, so it looks really complicated. But really, it's quite simple. It's just saying that start the marker at zero increased the marker by one each time that the loop goes and keep running. As long as that number is less than F, Len and F land up here is just the length off the array. So it's basically saying, without the mumbo jumbo is add this list item for every fruit in this fruit array. Okay? And right here you can see we can replace the index number with a variable that is looping through. So in the first loop, it's gonna 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 . So the statement and 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 where 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. And here, if you remember, is that concatenation operator. So we're starting off on a Norden list and we're ending and an ordered list here and in between, where adding as many list items as we need to go through the entire list of fruits here in the ray. So now you can see how a raise and loops work well together Now. If this was an object, maybe it wouldn't make sense to looped through an entire list. And that's perhaps where objects and arrays, the difference between them becomes a little bit more obvious. So going back to our page on JavaScript to raise. We can use some methods to add array elements. One of the most common ones is pushed so we can add lemon to this array. It will just go right on the end. We can use the method off push and then the value that we want to put in. Sir, if we just have a look here, we ah, adding lemon to the array. And then we are out putting the whole array to the screen. Just run that again. So, as you can see here, we have a function linked to an event on a button. Sir, 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 defined up here, which is fruits. It pushes an extra element on the end. And then it changes the inner hey html off our element with the idea of demo, which is right here to the full array, which has just been changed. So a lot going on there. But hopefully that makes sense. So going back here, we can see there's another way to do it, which is Ah, By using a dynamic kind of value for the index, I wouldn't recommend that. Just keep it simple. And we can also state exactly where we want. Like which position in the array we want to place our element. So, for instance, if we wanted to change just banana, we could do so by just putting in zero in here. So let's demonstrate that now What we've got here is we've gotten array and if we can hear that position 0123 And so we're saying in position six, 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. And then once that full loop is done, we putting that text as the HTML off an element by the idea 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 lemon at Position six, which is actually position seven. Then there's an obvious gap here, right? So that's position zero 123 So there's 45 and then six. So 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, cause I don't often see this if you wanted just to add lemon to the end of it array or you would do is just change this to push, get rid of the Eagles, and then whatever index comes next, it'll assign that element to it. So 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 than any thing before it that hasn't been defined. Will. Shop is undefined. Everything that demonstrate. Here's If you wanted to change any of these, you just need to know its index number, sir. Say, for instance, we wanted to change orange toe lemon that is at position one, and if I run that now you see orange has been changed a lemon before I start out putting the array to the screen all right, going back to the page. There's another thing called associative arrays, but in Javascript it does not support a raise with named indexes. So if you do something like this where you put the name as the index, JavaScript will redefine the array to withstand an object. So this is not something that you should get hung up on if you're new to programming. Basically, in other languages, there's something called an associative array, and that associative array allows you to pick out items in the ray by a name, whereas in Javascript, if you're doing an array, it's just buy index. Otherwise, you just use an object. So 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 in return, three. And if we look at position zero while 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 sort of strings instead, then we can't use this numbered index, and it actually end up being an object. So let's just demonstrate that in our consul. So I got my console weapon here If I was to define an array and then give it values based on indexes that are based on a string, not a number. And I press that now if I type in person, it'll come up behaving as an object. And we can't actually target the first attributes by using zero. If I did that, it would come up is undefined, sir. Basically all you need to know if that is that JavaScript does not support a raise with names indexes. So if you're trying to do that, what you're doing is an object. So that, of course, begs the question. What's the difference between arrays and objects? He has a really simple way to understanding or two summarized the difference in JavaScript arrays, used number indexes and objects used named indexes. So in the car example, before the name, the make of the car, we targeted them by taking their name and out putting that so going back to that lesson, we are able to get the name of the car. But if you wanted to loop through in a kind of linea away using numbered index is, then you would use an array. So 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. So 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 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 that very often. What I want you guys to understand is one of the ray is how to update and the ray How to Output in. The Ray had a loop through an array and what the difference between an array is and an object technically, arrays objects. But the difference between what we showed before in this JavaScript objects lesson what we're doing now with a raise. Finally, before we wrap up on a raise, there are some of the menu items that you might want to check out on this page, you can find out about other methods that you can apply on a raise 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 but removes it from the front. There's unsure ift We saw how to change elements. Yet if you want to learn more about this, there's a lot of different ways we can affect a raise. But I'm afraid I will spend too long on if I go fully through this page. There's also the method of sorting arrays. So 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 numerous 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 a raise. Is there just a way to store multiple values in a single variable and you can access those different variables by using a numbered index? Alright, guys, So that was all I wanted to talk about on a raise In terms of data types we have in JavaScript. We've got strings, numbers, objects, a raise. Those are probably the most common ones. But we do have dates. Math. Boolean is 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 data types. And in the next video, we're gonna finally cover condition ALS, so I'll see you in that video. 14. JS Conditionals: All right. So in the last video, we finished talking about the major data types of in JavaScript. And now in this video, we're going to talk about something that's really important in JavaScript and really common . You may have seen if then statement. Basically what that is is a conditional. So we're going to go into this menu item here for J s conditions and learn about if then else. So very often when you write code, you want to perform different actions based on different decisions. So how you can do that is using conditional statements, sir, any time there's ah, 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 sort of statement. So any time you catch yourself wanting to do something in JavaScript er, in programming in general way, you want something to happen Only if something is true or false, then you're gonna need a conditional statement. So should be pretty easy for us to understand what an if statement does. All that happens is we used the key word of if we put in a condition in some brackets like this, and then we use the curly brackets remember as a co block to execute curd based on whether that condition is true. So let's look at the example here. It says If our is less than 18 then we want to assign the string off Good day to the variable of greeting. So 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 diver type that you can use. We can use this part here to determine how many hours have passed in the day. And so if the number of hours passed in the day is less than 18 then what we're gonna do is put good day into thean html off the element with the idea of demo, which is right here. So instead of good evening, it's going to say good day because right now it is 10 a.m. in my time zone, so that's a pretty simple example going down. We can see that we could also execute an alternative statement or block of code if that condition is actually false. So in the case of whether the hours less than 18 we can say good day. Otherwise we can say good evening. I think that's pretty simple to understand. We can also go one step further and in between our if and are else we can put it else if and put another condition in. Sir, 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. So if it's less than 10 it's gonna be good morning else. If the time is less than 20. So obviously, if it's not less than 10 then it's gonna be between 10 and 20. And if that's the case, then we'll say good day. And 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 then or greater to 20 them will say good evening. So the important thing to note here is this all happens in order, sir. 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. So it'll pass through all of these, if else if statements and as soon as it's true, it'll execute whatever code block is on that level, so it won't go to the next one. So I'm just mentioned that to make sure that you know these on 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's just past 10. But let's just say 11 instead and I click Run on that and click, Try it, see how it says Good day. And that's because both of these are true. And because this one happened second, it's going to overwrite the value that we set here. If we set this back to what it was before and again changed this to 11. Click, run and click. Try it. It will say good morning because it hits this first. And then as soon as one of these conditions is true in this whole If statement, it will execute that code, and none of this will even get a look in. So I hope I've made that really clear the difference between putting in else if and a completely new if statement and you start to put in a heap of different else. If so, if we did else, if time is less than 25 then we put in another else, if that should be a sign that you need to change your curd and what you're probably looking to do is use a switch statement. So let's go back to this document here and will go down to the next menu item for switch. So, 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, right, rather than write a really long if this, then this else if this, then this else if and just have a really long you know, if statement with lots of elf is's, it's much more efficient to use this switch statement, and it also allows you to define a default. So here's how it works. You start with the keywords which 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 used the key word case to check whether this value here is equal to whatever is in your case. So then you execute your code, and then you use the key word of break, sir. 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, a zero Monday is one. So we're saying K's zero. We want the day to equal Sunday if its case one. We want the data equal Monday, and you can see if we wrote this in an if then statement or if if then else. If statement we would have so many else ifs and it would just be messy. So this is a much clean away of doing a conditional wet as multiple cases that you need to check for. So down here can learn more about the break keyword. Basically, it just helps us exit out of a co block. So 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, so scrolling down there's also the default keyword. And basically, if there's no match, it'll just default to what's in the default here. So that's always a good one toe 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 text, 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. Cool, sir, there's some more examples here. One thing to note is that switched cases use strict comparison, So if you remember what this three eagle sign means the values must be of the same type and value to match. Remember, strict comparison is same value and type, whereas if you remember, the double eagles is just the same value, but not necessarily the same type. So that's something important to note, but not necessarily something that will come to mind until you actually start to have some issues with your code and want something changed. Cool. So I think that's probably enough on condition als conditional that just like in real life , like if you were to give somebody an ultimatum, it's the exact same thing. So shouldn't take you too long to wrap your head around. If then, if else statements very common and JavaScript and one of the more common core blocks you'll see when you're developing JavaScript. So in the next video, we're going to go deeper into another common core block that you'll see and that is loops. So if you remember in the video on a raise, we covered a little bit about a four 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, so 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 d o m. So we're gonna learn more about HTML dumb in the next section of the class. But to finish off how learnings about general JavaScript and how the programming language works, I'm just going to talk a little bit more about loops. So if you remember, when we talked about a raise, we covered a JavaScript four loop. And here's a perfect example of what you would use a loop for. So remember, we saw a four loop before, and this is the Senate convention for it. Why would we need to use a loop? Well, maybe we don't want to write this. And the problem with this actually is maybe the array is longer than six items, and we want that to be dynamic. So we 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 four loop is perfect for that as we saw before, but There's also a different kind of loops. If we learn more about the four loop here, this is a good reference for those of you who maybe got a bit lost with the four loop. This first statement is executed one time before the execution of the co block, and the second statement defines the condition for executing the chi block and statement. Three is executed every time the co block has been executed. So a common example is setting an eye Marca starting it at zero and sending a condition that it should run until a certain number is reached and increasing that number each time. So 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. So on this page you'll learn all about four loops. But we already covered this kind of standard convention before, So when I want to show you guys was for in. So we saw how with four loops, we were able to loop through an array. But we can also loop through an object by using this four in a statement. And so if we wanted to look through the properties of an object, kind of like how we would live through an array. We can use this statement here, and, as you can see, it takes out or the key names or the names, indexes and outputs just the values. So it's a way for us to loop through an object as we would an array. Let's go to the wild Loop, which is a different kind of loop. That's probably a little bit easier to understand. The wild loop continues until this statement is not true Now, this could be a bit of a hazard sometimes, because you want to make sure that at some point this isn't true. Otherwise, this is gonna keep looping in an infinite loop, and it can sometimes crash your code, sir, as it says here, if you forget to increase the value value of the variable used in the condition, the loop will never end in a crash, your browser. So in the for loop example, you always putting in a condition here to make it longer so you don't usually have this issue, but because while its simple and it just uses a single condition, you have the chance that if you don't iterated your number or change that condition, it could go in an infinite loop. So this is essentially a similar thing to the Fuller. It's just structured a little bit differently. So instead of iterating it as an actual parameter in the statement where instead putting it in the code block there's also the do wild loop, which is actually quite similar. And 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, so 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. So here you can see a side by side comparison off for him while and that's about it. So that was probably a brief little lesson on loops because we already covered a bit about it in the year raise lesson. But, um, Loops allows to repeat something over and over again and do it in more a dynamic way. So, as you can see here, perfect example instead of riding out that we wanted to add to cause for every index. We can write a loop instead, and also that allows us to check the length off the array and do this for as many items in the array as there are. All right, so that covers General JavaScript. In the next video, we're going to jump stripe into how JavaScript works with the D. O. M. 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, so 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 ah creates interactive Web pages. So let's scroll down to this menu here for JavaScript html dumb and let's click the intro here. So if you're not familiar with the double document object model, whenever Web pages loaded the Browns, it creates a document object model of the page, and it's created as a tree of objects. So basically, the HTML structure. So if we go into developer tools and go into elements, all this hate HTML, all these elements and how they're all structured becomes the document object model. And 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 could 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 ah 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. So this is gonna be different depending on the page you have. But the great thing about this example is if I click on this, it will highlight the corresponding part of the page. So I don't know what did five and give six up. But nothing is 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 subject of that Div. And then you can see the different elements directly within this. And so 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 head of her tables. Ondas! I click through these. You can see them highlighted on the page here sir, 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 in for 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. All we can start from here again and go into this child off that element and then go into another child of that which is a table t body. And then we can look at the individual rose and then within those roads, we can see the table sells. So hopefully this visual representation makes it a little bit easier for you. But basically Ah, hey, 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 hate to mount document by moving through these tree of objects. So 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. So if we go into our developer tools for this click inspect, we can see here a simpler example. So you can see here we can collapse and expand. The difference parts off our document object model here. And the great thing about using the elements section of your developer tools is you can also see the hate TML tags and all the information in them so 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, oh, well, we can see here that all of this nesting going on in a tree like structure and as we hover over these different elements, we can see the equivalent show up on the Web page. So 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 off this TD to have an attributes of something. Or I want to add an on click method to the first child off this Tedy, which is the first child of this. So it allows you to write selectors that work all the way up the tree and down the tree, sir. 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. And any time 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, and that helps us to conceptualize our HTML page and also to target elements within that page. So that is the introduction to Hates to Melt dumb again. If you want to read more about it, here's the page. In the next video, we're gonna learn all about targeting with hate, TML dumb. So I'll see you in the next video. 17. DOM Navigation: So 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? And 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. So if I go to D. O M Elements menu item here, we can find hey html elements by i d. Tag, name, class name, CSS selectors and object collections. So if you remember in the last class on hey, 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 he can definitely target elements by that class and I d and the type of element they are just like we can do with CSS. So 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 and then where putting in a dot to put a method on that and we're finding an element with the i d of interest. So just to demonstrate that again, this paragraph here is intra and we want to target that particular element by using its i. D. So nothing new there. If we go down here, we can also target elements by their tag name, sir. Just like when we did an elements level selector in CSS, we can do a similar thing in JavaScript to target all elements with the tag name of pee. We can also find it by class. And the method we use for that is get elements by class, name these or 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 wouldn't CSS and put it into JavaScript. So using the query selector, all we can find all peas with the class of intro and seeming, you should have an understanding of CSS and CSS selectors already before taking this class , I want dive deep into what's going on here. So if you're iffy about that, definitely go back and watch Web development fundamentals. Html and CSS, right? So there's a different ways that you can target page two Mile elements. If I go into the next menu, we're gonna take what we've selected and change content. So a common way of doing that is with dot in a hey HTML. So that's changing a property on this particular element that we targeted by i d and giving it some new value. So we've seen that again before. That is just the extension off, first selecting an element and then assigning a new value to it. So if I scroll down, it's not just in a hedge female that we can change. We can change and attributes like the SRC often image we can change. Basically, what image shows up on a particular image tag, and that's basically it for that lesson. Then, if I go into CSS, we can also change styles using JavaScript so we can change the color of things. We can change font size, all that stuff, and this would, of course, be commonly used with events. So if we click a button, we want something to become red. So let's have a look at the example. If I click the button the heading becomes red. So what? Targeting that element by its i d. Grabbing its style and then within style, grabbing its color and changing it to read. That should be pretty simple. Now, if your understanding of JavaScript So let's go a little bit deeper and look at navigation So all these different elements here can be considered nodes in the document object model. Okay, so the entire document is a document node. Every HTML element is an element node. The text inside Hey, HTML elements a text nodes. Every hate email attribute is an attribute node. Actually, that's deprecating now, So it's just ignore that one comment, a comment node. So basically, there's a lot 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. So 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 and want to kind of visualize the relationship between all of these elements which are nodes in the document object model, we can have a look at here sir, we've got the root element which stands at the top, which is our HTML tag. And then we have cut head, which is the first child. So it's the first element. That's a sub element of that, and then body is the second child. It's also the last child, so we can target it as the the head. As the first child, we can also target body as the last child because it's the child that is last. Obviously, sir. So conversely, the relationship of Haiti Mel to this first child node of head is a parent node, and then the relationship between head and body is a sibling, so it's just like a family structure. If you've got this giving birth to these two, then these Children and as you should know, if you have two Children with the same parents than they are siblings. So from the hasty male above, you can read that hate email is the root. No, because it's dead. It's at the top. It has no parents, but head and body have a parent off. Hasty Male Head is the first child of hate email 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. Sir, Why is this so important? Well, it's important for navigating between nodes. So let's have a look at an example here. We've done the example where we've changed the html oven element targeting it by its i d. But what if we wanted to target an element by its I d find its first child and then change its value? Well, you can step through the tree by using a property leg first child, you can also target the first child by explicitly stating the index that you want to target and that actually allows you to set target the second child by putting in a one here, the third child by putting in a two here, remember, a raise Indexes start at zero, so you always have to subtract one in your mind just to bring it back toe. So what you would think is the first index so following this example, we can see here that we can not only grab thean it html off an element with the idea of this and a sign of value to it. But we can also assign a value that is based on enough of value within our dumb. So we're basically copying the in haste email off the element with the idea of I d 01 which is right here into this, and it should be pretty obvious what's going to go on here. But you can see here that we've copied thean html off the Hetch one into this p tag going back to the page. We can see here how we can step through the document object, Munnell. And if we try this out, we can see we get the same results using the keyword off nerd value. No value is not something I used often, and we're gonna actually going to talk about a more intuitive way of targeting elements using Jake weary. So don't get too caught up on these key words here. But the thing I want you to understand here is that we able to target not only by providing in, say, for instance, this example by providing an i d and targeting it there, but also were 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, and 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. So if I go into console and type in documents, there's only one document in ah hey html page, and it's the whole document. So you don't need to specify where that document is because it's the route, if that makes sense. So the convention you would use is document, which is the root element and then a sub element off that so essentially a child node. So 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 so it doesn't have to be get element by I D. And we can only target that element but we can target elements surrounding that. We can target a parent of that weaken, target any number of Children of that element so we can move up and down a document object model. And we will dive more into that in the Jake weary 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 Jake weary, so don't get too caught up. I just wanted to introduce you guys to the idea of dumb navigation and let you know that we can target elements in any relationship to something we target with I D or class or whatever. So hopefully, by the time we get Teoh selection with Jake Weary, you guys have a pretty grounded knowledge off what's going on, and we can basically just run with it, and you guys will know what you're doing. So that talks a little bit about navigation and finding how we can target if we go back to hear how we can target different elements or different nodes by their tag name. I D class name. In the next video, we're going to go into event listeners. Remember, We did events earlier in an lesson when we're talking about General JavaScript. But in the next one, we're gonna learn how to set up an event listener in our JavaScript code. So I will see you in the next video. 18. DOM Event Listeners: So if you remember back here in, ah, the lesson on JavaScript events we covered how to put a event listener directly onto an element by using an attributes. But there's actually a nicer way of doing this, and that's what we're gonna learn in this video. So let's go to Dumb Events Festival. And, as you can see here, some resent examples of events the mouse over event and the click event. So as you can see as I'm mouse over, something's happening. As I clicked on this, a whole bunch of things happened. So we saw before we could add an event attributes. But another way we can do this is by assigning events using the hay HTML dumb. So the HTML dumb allows us to assign elements to hedge, to melt using JavaScript. And this is something we can put in a separate section about document. It doesn't have to go in line. Basically, we can target the element how we would normally buy I D or by a particular node, and then we can set the on click to do a certain thing. So it's basically just the same keyword as we use when we 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 is 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 When I want to cover is how to set up these event listeners using the dumb. So he saw the example up here. But there's another way to do it. And if we go into dumb event listener, we can see the ad event. Listen a method, sir. We can add an event listener on Click, and when Click is triggered, it'll do this function So 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're defining the function that we want to happen when that event happens, So if we try it up by clicking the button, we can see that the event listener that we attached to a button on Click is doing what we intended to do by doing this function. So that's nothing new. We covered events in an earlier lesson, but this whole ad event listener method is maybe a new concept. So if we go down to here, we can see the syntax so we can just say on any particular element. Set up an event listener toe, listen for a click and execute the code. Look here. Everything you should note is that you can add many event handlers to the same element. So we've got Add event listener twice here, and we're able to attach an event listener to the same element. Ah, but with different functions. So there's a lot more things you can do here, including removing the event listener so you can use the same arguments poor parameters as before. But this time you just used the method remove event listener and so you can remove the event listener that you added. Yeah, there's more things that you can do if event listeners. But essentially when 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 our JavaScript on another page or even at the bottom of the page. So I think I mentioned before that Jake Weary allows us to put in event listeners in Amore 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. But I just wanted to take it that one step further. And sure, you guys, how we can attach event listeners two objects after targeting them through the document object model. 19. Intro to Ajax: all right. At this point, I feel like we have all the essential knowledge in place. I'm in terms of general JavaScript and how JavaScript relates to the dumb to get moving on to Jake Riri, which is up here. Jake Weary is a JavaScript library that will 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. So if you click on Ajax intro here, a. Drax is Hey, developers Dream, according to W three schools, because it can read data from a Web server after the pages 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. So in this short lesson, I just wanted to introduce the idea of Ajax to you guys because any time you want to interact with data using JavaScript, Ajax is really important. But in terms of the actual code, implementation J queries helps us to streamline that a lot more so in the next video. When we get into Jake Weary and the remaining videos, we're gonna learn how to actually do in Ajax. Cool with Jake Riri. But for now, I just want to drill home what Ajax is and what you can use it for. So 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 is looks just like a mess. That's why I'm telling you to wait until we get to Jake weary, because this is just a bit too messy for my liking. Jake weary, I feel, makes this a lot simpler. But essentially what? 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 on the page. What's happening is you're loading it from another file, and that file is here. It's Ajax. Underscore info dot text So all of that information is stored there, and what you're able to do with Ajax is bringing in whether it's Donna, 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. So any time you're on a Web page and your submitting data or bringing in new Dina and the Web page doesn't have to reload, you're using Ajax because you're able to load Donna and submit data fruit JavaScript. All right, so going back to here, we can see a function here called Load Doc. Here's the load, doc function. This is not something that I get too caught up on as we're going to cover it in Jay Query. But essentially, we can set an event listener to run this Ajax coal when obviously the button is clicked. So 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 off this XML. Hey, http, request object and the HTML dumb and JavaScript to display or used the data. So basically it's a little bit technical, and you don't need to know. You know, all the inner workings of it, but usually when you're on a website and you click something you like. 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. So 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. So going back to the diagram, this is what happens in the background. When you doing Ajax Coal, an event occurs, it creates an XML. Htp requests 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 off this just yet, but essentially, I wanted to introduce you to Ajax before we get into Jake weary because most websites these days used data and use a back end, and sometimes it's not best for the user experience to reload a whole new page every time you want to do something. So 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 Age X query or Ajax cool in the Jake weary section. Sir, without further ado, let's jump into Jake Weary and the next lesson and all of what you've learned here, all of the key words were now just gonna make that a lot easier with a really cool JavaScript framework, so I'll see you in the next video. 20. Intro to jQuery: All right. Welcome back, guys. In this video, we're covering an introduction to Jake Weary. So if all of these different commands that we learned earlier seem long and annoying, where are they? If all of these kind of seem a bit long and annoying, well, you're in luck, because in Jake Weary, we're gonna 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. So to cover the basics, Jake Weary is a JavaScript library. It's basically just a set of curd that we bring into our project and then were able to use these Jake weary methods. It greatly simplifies JavaScript programming, and it's easy to learn. So here is a classic example of Jake weary. So basically, you select something and that grabs the object, and you can run a method, or you can find an attribute within that. So here you can see that we're able to target the document as a whole. But then also here you'll see as a string we have P. And what this does is it targets old P tax. Now what's great about J query is, it targets the exact same way as CSS. So if we wanted to put in a descendant selector here, we could if you remember from CSS. So let's try that right now we've only got three paragraphs, but say, for instance, if we had within that paragraph a span for away, then we could use a descendant selector to target only the span. So 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. And the reason why it's the whole thing is because we're using the keyword. This so sorry I jumped ahead a little bit. In terms of selectors, J Crew is really good because you can select, you know, any number of ways, just like you would using CSS. But let's have a look at what's going on here. So, first of all, we are selecting the document through this Jake Riri selector and using this method called Ready so you'll see this quite often in Jake Weary. We only run the code when the document is ready. So here we add a function and an inside this curly bracket is what we're gonna be executing now. Make sure cause 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. So you'll see this very often in J. Crew so you can see it there as well. So we have waited until the page or the document is ready, and then we're putting in an event listener. So this is like I said in Jake, Weary, There's it is there's a Jake weary way of doing an event listener, and this is it. So we can just put dot click and then at a function. And we can also use the keyword off this to target. Whatever the thing that we selected is, sir, if we have p on click this hide, this is whatever we're selecting. Sodo hide the pea tag. And remember before when we had spend and we put a span around the away and we click Run now that's not gonna hide. It's going to effect just the span that is a descendant off P. So it doesn't have to be necessarily the first child. It could be a grandchild or further down the chain. All right, so in that example, I know we've thrown a ton of new stuff at you, but essentially, the what we have in J query is a selector. And then I method and with the selectors super powerful because instead of riding, you know, documents, dots gets element by tag name and then going pee, like this week and instead, just your dull a sign, p. And this won't work unless J Query is on the page. It actually is. And so we can actually target the same thing. It comes up is a different output because this is going to grab us a hate email collection . This grabs us the actual hate email by default. But essentially, you can see that this is a lot longer than this. So Jake weary simplifies JavaScript programming for us and makes it a bit easier toe loan. Actually, to finish off this introduction into J career because this was a pretty heavy example. I want to go to J queries own website. So if you just such Jake Riri in Google, you can see some examples of what Jake Weary does really well, the main things that Jake weary streamlines for us is Dom traverse allow and manipulation so we can use ah selectors like we would in CSS to choose a button with the claws of continue. And we can change its hate TML to a certain string of text weekend and you'll see that soon we can use its own event listeners, and we can do Ajax in a lot. Nice away. So if you remember what we saw earlier with the Ajax core, it was a lot messier than the Ajax court here. So those are three of the main features of J Crew. You won't fully understand how much easier it is to use Jake weary until you actually use it. But now that we've introduced J. Curry to you, it's time to get into some of the features of J. Kareri and, um, eventually gets you to do some of your own functions as well. So I will see you in the next video 21. JQuery Effects & Events: Welcome back, guys. In this video, we're gonna work with Jake weary to produce effects, and we're going to talk about events. So, like I mentioned earlier when we first covered events and then we covered event listeners in regards to the dumb, I said that we would jump ahead to Jake weary at some point and learn how to set up event listeners there. So you guys already know what events are and you've seen in the vent. Listen it before, but with Jake Riri weaken Simply define an event listener through this syntax. So essentially all you do is you put in the method of click on the element or group of elements that you want the event. Listen it to go on. And then you insert a function as the first property off that event. Now, right here, you'll see a very commonly used J query event method, and that is the document ready method. And this allows us to execute a function when the document is fully loaded. If we go to the explanation in the J query 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 will see online and including all the examples that you see on this website will start with document dot ready. And this is good to prevent any Jake Ruriko from running before the document is finished loading. So it's just best practice to wait for the document to finish loading and then run your code. So some elements are 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 that 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 dot ready and then define a open function here. And you can put all your Jake weary and there you'll see that time and time again. So don't worry about memorizing that you will learn that over time. So 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 Jake weary selector to reference whatever it is that's being clicked on. So in this instance, if we double click on a certain P, the particular P that we double clicked on is represented by this. So I've got examples of more events. Mouths, anti mouse leave, mouse down, mouse up so on so forth. We can also attach an event handler by using the on method, and the on method attach is 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 comments. But I don't often see that most of the time it's OK to just do this or do this, so that's a little bit on syntax on how to define your event, listeners in J Query. Let's talk a little bit about what is some of the things you might do when something is clicked and as you can see here, there is an example hide and show. So let's have a look at hide and show. First of all, if I click this panel, it'll hide and show this pot here, and that is a really common, Jake weary method, and it's pretty easy. All that's going on here is whenever you click on an element that has the idea of hide, it's going to hide old piece. Whenever you click on an element that has the idea of show, it's going to show all peace. Now what's going on behind the scenes here is the style of display is changing. So let's have a look at this right now. So this is the part where after it is right here in the Kurd. But if we actually right, click on it and click inspect to see it in our Inspector. Unfortunately, it's blocking now, so I put it down here. But if we click on inspect again, we can see here. We've got a P. So let's see what happens. Actually, we're going to need to move off L ah browser window over here and 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. And 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. So there you can see how using one method where 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 J query, it's really easy or we need to do is put the hide method in there, so show works about the same. Another thing you can do is add a parameter to hide, and that will determine the speed that you wanted to hide. So if you want a little bit of a delay, you can put in a speed. It's in mili seconds, so that would be one second. You can also use a toggle method, which allows you to basically use the same button or use the same import for showing and hiding so we can click on the same button and it'll show or hide. So if it's currently showing and you click on it on, the toggle will kick in and hide it. And if it's currently showing and you click it, Tuggle will act as the equivalent of don't show. So Hide and Show is a comment Jake Weary 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. Um, but we can also slide like this. Whatever takes your fancy, it'll has the similar sort of 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 off this element, and 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 off this animation. So if we click and try it ourselves, this is gonna animate this div so that it's left by 250 pixels. It is going to have a capacity of 50%. At the end, it's going to change its height and width. So if I click start animation, suddenly it goes from what it originally was to this now. So that's pretty cool. As you can see, there's a range of effects you can do in Jake Weary. You can also interrupt a animation, as it's happening with this stop method. Never really used that one before, and another thing you can do is a callback. So the deal with callbacks is that JavaScript statements executed line by line, but with effects. The next line of code can be run even though the effect is not finished, so essentially you could have multiple lines of code running at the same time. It's not always gonna be linear with effects. So one thing you can do and this is not just with Jake Riri effects, but programming concept in general, especially with JavaScript, is having a callback. So 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. So this function is what's called a callback, and it'll only execute once this has finished. There's actually a few different situations in which you would use a cool back. But in this situation, it's kind of obvious that we only want this alert saying the paragraph is now hidden to show up when the paragraph is finished hiding. So if we run this now, you can see that this will only show up when the paragraph is hidden so we can actually attach what's called a cool back on the end. And it will say when this has finished executing execute this statement. So that helps with timing in JavaScript. In this final menu item, we've got Jake weary chaining, and we can essentially change ah, whole bunch of methods together, which is pretty cool. So, for example, this one would change the color of any element with a idea of P one to read, then slide up, then slide down. So if we have a look at this, we click it. It will slide up and side down after it's changed the color red and one will happen after the other. So not a very practical example, but an example of how you can chain methods all the same. And that's pretty much it for Jay Curry. Events and effects We can see here now how cool J. Curry is and how, ah, we can combine event listeners and effects to get some interactivity going on our Web page . And as I showed you when we went to the Jake Weary page, they go back to the page here. Event handling and effects is one of the most common things you can do with Jake weary and one of its core features. So in the next video, we're gonna talk about traverse, allow and manipulation and then in the video. After that, we're going to talk about Ajax, and that way we'll be covering the three main features of Jake Weary. So I'll see you in the next video 22. jQuery Traversal: Alright, guys. So in this video, we're going to continue on learning about Jay Curry and we're going to cover the next set off important features in J coury, which is traversing and manipulating. So it sounds very fancy pants, But what is actually traversing well, it means moving through different HTML elements based on their relation to others. Sir, this is basically why I spent so much time talking about the d. O. M and talking about nodes and how it all works. Here you can see another illustration off the D O M tree and with Jake weary traversing were 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 tried to set up a lot of these things with a live document. But sometimes you can actually affect this span, or you want to target all spans off a list class of something, so you need to be able to be flexible and how you're able to target elements and collections of elements. Sir, if this illustration doesn't particularly make sense to you. You can read more here, for instance. The DIV element is a parent of you. Well, and it's the ancestor of everything inside it. So all of these are descendants off this you well, so how do we traverse the dumb? But 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 parents until so common one is parent. And so what this will do is it'll start by selecting any span, and it will return any immediate parents off a span. So let's have a look at their example here. Now we're starting to get a little bit more complicated, but essentially, you'll see that we have spans nested here inside a P in this instance, and we have one nested inside an ally tag Here, sir, what we can do is instead of targeting span for each of these, we can target the parents off any span so we can go spared and then we can use the Method parent and then any parents of span. We will now apply this style rule too so 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 off a span we want to apply the red border to So you can see here in this instance, it's an ally in this instance is a P. It doesn't matter what particular tag type it is just as long as it's the immediate parent off that element that we're targeting no group of elements. In this case, we can also return parents, which returns all ancestor elements off a selector element all the way up to the document root element. So it doesn't just select the immediate parent, it's elects all ancestors. So you can see here we're doing a similar thing. We are starting off with all spends and then we are targeting all parents of all spans. So, 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. So we've got Ally ul Div and body. All will have this red border. All right, going back. We've got one other and that's parents until so with parents until it will return all ancestor elements between two given arguments. So what this allows us to do is give a cut off 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. So 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. So we're starting here and we're traversing up the dumb. Remember the words reversal. And so we're looking at all parents. He is the first parent yet We haven't hit div yet, so apply the red border Next one. It's not a div. Apply the red border and this one is also a parent. It's also an ancestor, but we don't want to apply the style because we have hit the until point, which is Div. So because this is a div, we're 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. So right here we are able to target all Children of Div. Let's have a look at the example here we're using the starting point of old dibs and then we're targeting all Children off old dibs. So here we've got a div. And where targeting or the direct Children off this div. So using Children it's different to parents were 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 fine method. And so what this does is it starts with Div, and then it finds all spans within all dibs. And then we can apply a method onto 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 dibs and then within Tibbs. We're finding all spans, so it will affect all spans that a with in a diff, which is pretty common, sir. Right now you can see all spans within dibs. But if we were to put another 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 off red, Two pixels solid. It has to be within a div. So you can almost think of this as all spans with ancestors of Div going back to here. We can also return all descendants off a Div by using this Asterix! So trying that ourselves! If we wanted to target everything that is a descendant off a div, we can use this Asterix Now! I said I wanted to go back here, and what we can do is used 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 will find descendants that are only immediate Children off all dibs and fit this particular selection rule. So remember, from CSS this will select all peas with a class of first. Sir, we've got a P with a class of first here and it has an immediate ancestor off Div. Basically, Div is its parent. Sir, 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 pot which filters by class and run again you will see every immediate child That is a P tag off. 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 api So let's just say we're looking for Div Children off 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. Dibs off a div. So there we go those air two methods we can use to target descendants and traverse down the d o m tree. We can also Travis sideways in the deal entry using all these different siblings electors 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 hate twos, and this is going to target or siblings off. Hey, choose that. Have a tag off p. All right, say pretty much. The same convention is before, instead of Children were 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 next until just like the parent until so very similar concepts. Finally, we've got Jake weary filtering, and we can use this to find the first child using the first method, the last child using the last method and the e que method, which will select a child element with that index. So 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 people 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 this second index. We can talk with second Index by using e que here. So if we wanted to target the first paragraph tag, just put in the zero to target the third paragraph tag putting 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 peas, but then we only want to filter by piece that have the class of intra Not sure why that one exists, because we could probably achieve the same thing by just putting it in the selector like this. So let's see if that works. Yeah, so that has the same effect. Not sure what the difference is there. We can also do the opposite, which is target or peas, and then filter out everything. That's a class of intro in our selection. So that makes a lot more sense. Or peas 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 of traversing in the case of manipulation. I mean, you've got a range of different options here. Let's have a look at Jake weary. 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 entre vessel has already going long enough, sir. I'm gonna 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. So remember, in the last video, we just finished off traversing in J Query. So now we know how to get a starting point, target a particular elemental group of elements and then traverse up and down the d o M tree. But now, once we able to select any particular element of group of elements, what are some of the things we can do to manipulate them? So in this menu for Jake weary Hey, HTML, we have got some examples and information on dumb manipulation. So some common ones here text html and vow. These do different things, depending on the context. So in this particular context, where we're trying to concoct innate a string and we're just putting text here with no argument, what we're doing is we're asking Jay Query to give us the text off this particular element . So any element with the idea of test, we want to bring in the text of that. And here, just like text, there's another one called Hey HTML, which includes the hay html markup, not just text. So, for instance, if this element with an I d of test had vested elements, it would bring in that as well. So let's have a look at the example. As you can see here, we've got to event listeners set up button one on Click will run this function which will give us an alert. It'll start with the string text and then add the text of value off test which in this case , is this because this is the element with an idea of test. So let's show you 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 Shohei html, we can see the difference. We can see that it includes out html markup in there as well. Get so going back to here. Down here, you can see that you can also grab the value and 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 making 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. So by putting it in here in the context of an output alert, all it does is output. Some text on the screen by Can Katyn ating this string with the result of this were simply getting the text. But if we go into the set menu here, we can see we can use the exact same method in a different context, and it will actually set some text. So instead of receiving the text on an element that has an idea of test one, we can set the text on an element that has the i. D. Of test one. So let's have a look at the example. Here we have three event listeners and three buttons. If we click the first button, it will run this function, which sets the text of this paragraph here that has an idea of test one to hello world. So if I click set text there, you'll see that were able to manipulate the text in that one to be whatever we stayed it to be. Here we can insert some hey html into test, too. So let's click on set hate email and see that we are able to put in that hasty Mel and you see that it already pauses the hate email for us and we don't actually see these tags, but we see the result of the hate email. Finally, we can set the value of this import field to Dolly Duck as we've said it here and while that There you go. So 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 Jake Riri. Getting and setting often have the same methods, but the context will change what they actually do. So that's all for that. Apart from the Atta method, Atta will grab the value of a certain attributes so we can grab the H breath attributes off a particular element. So this will probably be a link in this case because it has a hatred. So here you can see, we have this a tag. What if we wanted to get the value of this attributes? Well, we can get it by using this method here using a t t ah, and then putting in the name of the attributes that we want to grab. So if we click this, we can see that the hey treff value is now out. Put it on our screen. So if we go back and go to the set menu, you'll see that we can do the same thing with attributes but setting it. So instead of one parameter, we now have two. So we grab whatever the attributes name that we want to change. And we put in the value that we wanted to be. And we can also open up a curly brackets with attributes and define multiple ones at the same time. So we can say Hate riff. We want to be this and title. We want to be this And so let's have a look at what that actually does. If we click this to change the hatred and title, we can actually see anything changing on a page here. But if we click inspector and have a look at the code, we can see the hatred is now what? We said it too. So if I move this over to the side, we can see that the hatred is now this because we've set that value here using adder, and we have also set the title attribute to W three schools J Crew tutorial right here. If I was to change this to title and 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 so we can both get inset with Adul Aziz. Well, going down the menu, we can see adhere and for adding elements and content We have upend pre penned after em before. So the difference between all of these is upend will insert content at the end off the selected elements. Pre pen will put it at the beginning, after will put the content after the selected elements and before will insert it before the selected elements. So have a look at this right here. We've got a P tag and we're gonna upend some text to that p tag. So if I go into the example here and click upend text, we've got event listeners on this button, and as soon as I click on this button one. It'll find all peas and upend this particular string of hay. HTML. So we've got two peas here and now if we right click and inspect on this, we will see that we have and a piece of upended text with the be tags in there to make it bold within that p. Again, there's a lot of ways we can do this. We can also pre penned 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 seven properties. So, as as you can see, I'm just rushing through the end here. You've got the reference right here if you need 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 dumb, select what you want to select and then come here to manipulate so that pretty much covers the second core feature of Jake Weary Traverse Allow and manipulation. In the next video, we're going to cover the third biggest feature of J Curry and that is Ajax. And then after that will get you into your class project. So not very long now, until you're ready to go out into the wild and do this yourself. So I'm looking forward to catching you in the next video on Ajax. So see you then. 24. jQuery AJAX: All right, guys, on our final video on Jake Weary, 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 Jake Weary, what we can do if Ajax is create an Ajax cool using J Crew's methods, which down here you can see without J. Curry. Ajax coding can be a bit tricky. It's tricky because there's different browsers with different syntax. And as you saw before, if I just bring up that age X example from when we were doing vanilla JavaScript. This is what you're dealing with when you're doing an Ajax Coal using JavaScript without Jake weary. So here in the next page, you can see how we are able to use Jake Riri to load in some content using Ajax. So right here. The most simple example is dot load dot Leard 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 Cool by just using dot Leard and that old Leard, whatever content is in this file into whatever is selected here. So we're selecting all elements with an idea of div which cause we're using I d should only be one on the page. And it's right here, sir. 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. So you can also add a J curry selected to the U R l parameter. So here you will learn content off the element with an idea of pee inside the file demo test dot txt into a div. So it basically allows you to filter. I only want elements with an idea of p one from this particular file toe load into this particular element that's on our page. So if we have looking, tried ourselves again, we can't see the content of this particular page. But we can kind of imagine it. If I click on this, you can see that we are only going to get the pot of the text file. That is an element off the I. D of P one. See here we only get the element with an idea of P one, Probably more common than load in my experience is getting and posting Ajax. So again you need a backend for this or some sort of data source to plug into. So it's hard to kind of show a concrete example. But we might get to that in the class project. The Jake weary get method will request data from a server with a get request in Web development and back end programming. There's these requests called Get and Post. This is kind of talking more about back in Web development, but essentially what we're doing here is getting data when we do a get request. So right here, if I use this get method, I can target this specific address. Then I started function with two parameters, Datta and Status, and I can get back the daughter and the status. So let's have a look at what that looks like. So if I click this button, I will get in a Lut and it will come back with the data that it comes back from this address and it will come back with a status as well if I click this Donna, this is some text feminist external A S P file status success. So obviously the stuff the statuses success because we got back the data. So 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 dot sp and now we can actually go in and inspect what happened. So we made a get request to this particular you Earl. And the status code is 200 which is green. It's all good, and we get a bunch of other information or 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 for go back here. We can post data using the J query post method so the parameters for this will be the place we want to send it. The data to send ends, the callback parameter. So what we want to happen at the end. And so we got a similar thing here. It's going to confirm that we were able to send this donna to this particular address. So if I click on this, says Datta, do Donald Duck, hope you live will induct Berg and the status is successful. So instead of retrieving that information, were actually have the information here and was sending it to that address again. Doesn't make perfect sense Perfect practical sense until we have a back end or data point to send or get from. But that is Ajax. Essentially, this is JavaScript interface with the back end, and so you need to understand what's going on in these particular addresses as well. That will have to get passed on to you by even your own knowledge off the back end that you've dealt yourself or somebody who's back in developer or data source or you're using an A P I. 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 more complex topics in Jake Weary. You can read more about it, but really, you weren't fully understand Ajax until you have an understanding of back end as well. Because back end is where you're going to get the daughter from. So that covers Jake Riri 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 toe work with JavaScript. Sir, In the next video, we're going to start with the class project and actually get you riding some code. So I'm excited for that. I will see you in the next video. 25. Class Project - Intro: in the next few videos, we're gonna be talking about your class project. And as JavaScript is quite broad and 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 even create a new Web project or improve upon an existing Web project you have. So 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. So my idea for this simple little application is a page that provides a list off Pokemon. So it is only really two steps to this. We're gonna have a button that will load in a list of Pokemon from an external source, and then we're gonna 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, sir, it kind of sits in the middle, and so it works best when you want to include features on an already existing app. Sir, this is quite a basic example, but even still, you're gonna learn a lot from being able to do something like this. So again, you can just run with this little description, he 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 projects. And once we have, this is 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. So 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. So 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: So in this example class project, we're going to use some of the things we learned in the previous lessons, such as Ajax, such as event listeners and a little bit off traverse ALOF the dumb as well. So the first step loaded and list of Pokemon from an external source We're going, of course, use Ajax for that, and the external source is what's called an a P I. I don't want to go into a large amount of detail about AP eyes, 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. So I'm just gonna dive straight into that. And then the second pot 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 10 different things in here, but this is just to get you started. And the first steps are gonna be the same for any JavaScript project in terms of creating a Web page, bringing in Jake weary and getting started with running some event listeners and different functions. So the first thing I'm gonna do is open up a find a window, and I'm going to go to my desktop and create a new folder for a project. I'm just gonna call it Js Project. Not the most inventive name. And just like I've done in the previous class on Hasty Mount CSS, I'm going to just copy the example on W three schools for the hay HTML. So if you want to do the same thing and go to W three schools dot com, just click learned html and they give you a basic example. So I'm going to copy that. I'm going to then open up a curd editor. Mine is Adam, and I'm going to create a new file paste in that curd and save it straightaway without changing anything. So I'm gonna go into my project, and I'm gonna call it index dot html just like we did in the previous class. Gonna do Cem in denting here, and what I'm gonna do is change the page title to Pokemon, change the first heading to Pokemon, and instead of this paragraph tag with Iran and paragraph in there, I'm going to replace that with a div, which we will put ah the content in. So I'm going to first open and close it. Leave a space for the I d. And I'm going to call this the pokey list. Okay, 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 Perk Iman from the external source. So I'm going to give this an I d off yet perky mon button and then I'm going to write that text there. Cool. So I put that to the side. What you want to do now is loaded into your browser, so going to grab this, track 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 J Query. Sir, you would have seen bootstrap in the previous class onhe html and CSS, If not bootstrap is just a CSS framework. It's the most popular Hey html CSS and JavaScript Library in the world. According to their own website, what I'm gonna do is just click download here, and it's going to give you all the different files within bootstrap, but we just interested in the CSS files. So I'm gonna download that ill download pretty quickly. Gonna open up and you find a window to browse my downloads, going to expand that directory, delete the own directory to the trash, and I'm going to go into CSS and just grab bootstrap, don't see assess 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 health phoner. And there you go. We've got bootstrap in our project. Next thing we have to download is J Query. Sir, we just search for Jake weary and go to their website. We can again download Jake, We're here and we can get the compressed or the development doesn't matter. I'm just gonna get the compress because that was the first link. I'm going to go to our project again and I'll click save Cool. So I'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 hate email. We're going to do this in the head. So I'm going to link the style sheet by saying link Rehl style sheet. And then I believe the attribute is hate riff, and it's just bootstrapped out CSS boot strap. Don't CSS. Then I'm going to bring in the J Coury script, So I'm going to create to script tags. I am going to put in an address here, so I'm just gonna copy in Pace the exact file name. 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 dot Js or index dot Js or main dot Js. I'm just gonna call it app dot Js It doesn't really matter what you call it, so 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 used the exact same name that I put in the source attributes. So that was app dot Js as you can see here app dot Js app dot Js Gonna put a semi colon 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 styling has completely changed, and that's because we're using bootstrap. So just to bootstrap, if I are hedge to mail a little more before we continue, I'm going to give the button a class off BT end and then be tiene primary. And that will give us some styling from Bootstrap. And then the other thing is, I'm going to place this bowl in a did with the class container, and that's going to make it a little bit more nicer. You'll see in just a sec what that does. So now when I refresh the page, it's in a container that's responsive. Cool. So the final thing, the check of its or working, is to go into my console. So I do that with all to command. I on the Mac and Walla, it says here Js file loaded, which means that we're loading in this so we can tell that it's loading in bootstrap because we're getting these styles. We can tell that it's loading. How ap dot Js file Because it's running that code. We're not confirmed yet whether it's running Jake weary so we can actually run something right within the browser using a J crew selector. So I'm going to select the document, gonna run that and you can see that it's selecting the documents. So we know that we've got Jake reworking. We know that we've got now JavaScript file linked, and we know that bootstrap is linked as well. So now we're ready to start writing some code. Now, the a p I to get the Pokemon is at pokey ap i dot co. So 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 responses. So 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, he found 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 actually have am 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 text, like like it was for a split cess. Second, um, the plug in that I used for that, if you are interested, is Jason View. Yeah. If you want your Jace on the shop nicely like this with the ability to expand and contract , definitely check out Jason View. All right. Anyway, enough of that tangent. I'm going to keep this exact address handy because Ajax Cool. We're gonna call this particular AP I so going back to here when I'm going to do is remove this console log and I'm going to get started with a J query 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 functions always gonna look pretty much the same. So, system, matter of memorizing it. And within this function, you're gonna put all the other functions that you want to run on the page. This Just make sure that the document is ready before you start running these functions. So 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 gonna learn in the Pokemon list. So I'm going to start a J query selector. Remember, we called the button, get Pokemon button. So I'm going to open that up, put a hash in because that's how we target I ds. And I am going to use this method of creating an event listener. So function. And then anything we put inside this code block will be what happens when we click on that Pokemon button so 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. So we know that this event listener is working. But what I want to happen is I want to make an Ajax request to that a p I and bring in those Pokemon. So what I'm gonna do is to a get request using Jake weary and the first parameter is going to be the u R l. So this is the girl right here. The second parameter is going to be a function. So just to remember how we create this get function, I'm gonna go back to W three schools and go to the J Query section and go to the Jake weary get post menu says you can see here. The first parameter is the euro, and the second perimeter is the cool back. And in the cool back, we can put a function with two parameters, one will be the Datta and one will be the status. So I'm going to put those parameters in putting my curly brackets, and I always like to end each statement with a semi colon straight away. 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. And now that we have this get function written, what we can do is grab the data. And again, this is something that I do quite often I will just console log at various stages to see where we're at. So if I click, get Pokemon. Now you will see and I'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 consul now. And this is the data that is being returned from this, you Earl. All right, So 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. So this is the list that we're looking for to put out onto the screen. So what I'm gonna do is use a loop toe 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. So bear with me as I do this. This will be a bit of card, but essentially what we're gonna do is create the string first. So I'm going to call it Var String and to start it off I'm going to open a you. Well, so in a non ordered list tag and 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. So I'm gonna put in the u L. Because we want that before the loop. I'm going to put in something for after the loop, which will be the closing tag, and then I'm going to do the loop. One thing we didn't cover in the class was we definitely covered how to do loops. But we didn't show you the Jake weary way of doing a loop. And the Jake weary way of doing a loop is with this dot each method. So let's just go to the Jake weary documentation and type in Jake weary each. Okay, so here you can see a description it could be used to generate over both objects and arrays . Really cool little function. So, as you can see here, we put the object or the array as the first argument, and then we have the function or the core back as the second argument or parameter in this function and we can put parameters in here. Index and value. Okay, so if that in mind, I'm going to grab data results. Remember, that was where the list of polka mom was. And then I'm going to put in my cool back, so index value going to put the semi colon in there. So what I'm gonna do here is add a list item to this list here that we've just created. So I'm going to put in the ally tag. I'm gonna close that ally tag and put in the semi colon just to be clear that we're done, and then I'm going to put in the value. So the final step is to put this on the screen. And like I said, we're going to put it into this poky list, Div. So the first step is to select that div using a J coury selector. So I'm going to use the hash to select any element with an I d. Of populist, which is just this one. And then I'm going to use the hasty male method in the set context to put in the string that we just generated. So if my press save on that go back to the project. Click get polka Mine. You can see it come up with just object, object, object, Object. Now the reason why it's doing that is because within each of these results, there is another object. So you can see here on the first result, we've got a object with two attributes one name and one You are l So we need to actually break those out and use them separately. So what? I'm gonna do you see me? We got a link there. I'm going to set up a link tag. So I'm gonna put in a hay treff here. And this might be a bit confusing cause I'm using string interpolation here. But what's happening here is we need to use quote marks to open up the string definition and then here we're trying to actually put in a quote for the attributes. We just need to make sure that we're alternating between double quotes and single quotes, and we should be fine. So 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 can captain eight and then this will signify that we're reopening and then putting in an ending there. So, actually, we gotta put in a closing tag there and in here I'm gonna put in the u R l So it's actually a value within this value, which is a dark object. So that will be value taught you are l. And then here it's gonna be value dot name. And I don't think value really makes sense in this context. So we're able to change this parameter name, so I'm going to go back and I'm going to call it Itim, So I think that's a bit more descriptive. It's the item. You're l and the item name. So if I save that, refresh the page, click get Pokemon, you can see a list now appears and I can click on any of these, and it will take me to the more detailed AP. I call for this particular Pokemon where you can look at their abilities. You can look at the stats and ah, other bits of data related to this specific Pokemon. So what you'd want to do is build a specific page for that pulling in the data in this video. We're not gonna go into that second step, but feel free to do so. What I will do instead is demonstrate one more on click event listener and using that own click event listener, we can hide different items off this list. So if I go into here, I don't really want a list anymore. I want to turn this into a table. So what I'm gonna do is change UL to table. I'm gonna change l i to tr for a table row. And of course, this is gonna need to become a table cell. So I'm going to put an opening close table cell there, and then I'm going to create another table cell. And then within that TD, I'm going to put in another button. So opening closing tags within those the label for the button and here so I can target it. I'm going to put in a class name off 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. So if I click, save that and I ran this. You can see that we've got a table now. Or maybe it's not that obvious, but this is a table with high buttons. So again, we using bootstraps so we can make this look a lot nicer Really quickly. So what I'm gonna 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, a little bit nicer. Cool. So the next and final step will be to hook up these high buttons and actually get them to hide the row that they're in. So to do that, I'm going to set up another event, listener, 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 event listener on them. So, high button, I'm going to use the same convention as before, with click, then function, opening code block and what I want to happen inside this event. Listener. I'm just gonna 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 off this. But then I don't want to hide just the button. I want to hide the whole row. So if we use our knowledge off Dom Traverse alert to go up the tree, we've got this button, and the parent of that button is a table cell, and the parent of that table cell is the row. So we're able to target the parent row off the button by first starting a J. Coury selector using the keyword this and then moving up the dumb by using parent once and then parent a second time to get to TR. And then from that point, we can just run the function that we want to run on it and I'll click, save and we'll go back and we'll see if this works. All right, so I'm clicking that and it's not working, and there's a clear reason why I actually wanted to do it wrong to begin with, because I think this is the intrude of way to do it. Why aren't we able to hide the buttons. Now this is the thing that is a problem with Javascript that you probably don't get another programming languages. It's actually a synchronous so in JavaScript this won't finish, and then it will run this. This will start running, and while that's running, this will go. So especially with getting data from external sources that could take any number of time. So while this is running, it doesn't want to delay the rest off the code. And what that means for us is that we need to put this in a place where it's only gonna run once this has finished, and the way to do that is to use status here. So I'm going to put in an if statement. And if there's a status meaning, if there's a successful cool, I'm going to go in and put in the event listener here. And don't worry, we can nest event listeners within each other. It's totally cool, so I put some space in there. We'll click, get Pojaman, and now when we click the high button, it should hide and you can see it is so It's finding the parent off the button that we clicked, which is Tedy. And then it's finding the parent of that which is gonna be the parent row, and it's hiding it so I can do this for all off the Pokemon in the list. And I can grab the full list again by clicking. Get Pokemon and you can see down here we've still got our console long, so I could just get rid of that now and now we have a clean consul and a clean working app . So I hope that helps you to see, in a practical setting how you would bring in your knowledge of JavaScript. I hope this wasn't too confusing for you guys again, like you're gonna learn by doing so, What I'd suggest you do toe learn this stuff is create your own projects, research how to do these things and then go ahead and try them out. And if it doesn't work, stop debugging, which is actually what we're gonna be covering in the next video, which is gonna be out bonus lesson. So we're gonna learn how to debug stuff in the next lesson. Sir, if you ever stuck and wanted to bug, 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 off 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 didn't 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 so beforehand. There's a good example where it didn't work if I had this event listener outside off this Ajax school. So if I just moved that out and I'll just delete that as well, just so it's not floating there empty. So go here. And this is where it was before, I think. No, actually, it was here, anyway. Doesn't matter. It's been the wrong place regardless. So I'll click, get polka mine. And now, as I see it's not working, I might be thinking, Well, why is that? And 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 business, not hiding that button. So one thing I use quite often is console log, because in JavaScript it's not gonna era when it can't find this dot parent dot parent. It's just gonna do nothing and That's kind of frustrating when you want to know what the issue is. So I really handy toe is consul dot lug. So I'm gonna comment this out so it doesn't run anymore, and I'm going to use a console dot log to just check if the event listener is actually working. Sir, I'm going to just put the words button clicked in Press Save going to get Pokemon and I click these buttons. All right, so the text is not coming out in a console, which means this is not actually running. There's something wrong with this part of the code. It's not necessarily this part of the Kurd because it's still not happening even when we get rid of this. So then we have to think of what's wrong with this pot and one of the things with JavaScript. Like I said in the last video, that's an issue is timing. So for this to actually work, there has to be a bunch of high buttons on the page or ready. So as soon as this curd runs, the event listener is set up, and it doesn't update when new elements arrive on the page. With this class So 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. So 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. So one of the ways we fix that was by making sure that we waited until the Ajax Cole was finished before we ran this. So I will put that back into here and see if the button clicked comes up now, which it does so we can get rid of console log now see if this line of code is working, which it should be. And yes, it is the other area where I can see console dot log Helping here is to figure out what these different things are. So you've got this a p I and you can see it here. This is the data. But to navigate it, you might be targeting different parts off the response, which is a J. Some response. You may be looking in the wrong places. So 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 gonna have class, object, object. And 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. So if you click on that, that's obviously going to be a broken link. So getting Pokemon again So in this instance were 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 look, So I'm going to console log and I will just output the item. So get Pokemon and you can see here outputs the item for every list item. And as you can see here, we've got these objects. You should be able to understand that this is an object is a curly bracket with a name value pair. So if I click on expands that I've got name and you are a within that. So at this point, you should be like, Ah, I see I've got an object here. No wonder as I'm putting it out as a string that it's not working. And this is coming up with this random text. I need to actually go into the object where there are strings right here and right here. So going back to our project, I'm just going to reverse those two changes and we're back to where we started. So we can also inspect index. And maybe we want to use index in our project. So I'm just going to use console log again. And now when I click, get Pokemon, you can see it's got the index number, which is just zero to however many there are. So another thing we can do if we're console logging multiple things because maybe we want to check multiple things is we can actually combine a string with a variable so I can put Index colon and then put in a comma and then put in the actual index so we can see here that it tells us index and it tells us the value that were pulling. So those are a few examples of using console logs to inspect things within your curd and then figure out where issues are in trouble. Shoot a little bit, debug a little bit. As you build a more complex project, you're gonna have to solve more complex problems. And that's just the nature of the beast. I hope that this video shares a few kind of a thought 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 curd and, ah, figure out what certain things are using console log. So that was the bonus episode I have that was valuable. And 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, so I will see you in the next video 28. Conclusion: all right, so 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. So that concludes this class on JavaScript. As we have learned in this class, JavaScript is one of the three main languages that we used to develop on the front end. So now, with this class and the previous class, you should be pretty comfortable with developing for the front end. Of course, it gets more complicated as you bring in more complex JavaScript frameworks like react, angular or backbone. But that is a whole nother topic in itself and perhaps a topic for future classes. Anyway, guys, thanks for watching, and I hope to see you again on some of my other classes