Building Websites JavaScript and the DOM | Laurence Svekis | Skillshare

Building Websites JavaScript and the DOM

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Lessons (3h 10m)
    • 1. Building Websites JavaScript and the DOM

      1:46
    • 2. 1 Introduction to JavaScript Course

      4:30
    • 3. 2 What is JavaScript

      2:22
    • 4. 3 How to add JavaScript in web pages

      5:17
    • 5. 4 Basics of JavaScript Dev Tools How to Comment and more

      10:55
    • 6. 5 Introduction to Variables within JavaScript

      11:05
    • 7. 6 Understanding Variables

      10:50
    • 8. 8 Arrays and Objects

      8:03
    • 9. 9 Working with Arrays and Objects

      9:25
    • 10. 10 Using and updating array values

      10:53
    • 11. 12 Introduction to Functions

      7:59
    • 12. 13 Local Global Variables in functions

      3:36
    • 13. 15 Ternary Comparison

      9:03
    • 14. 16 Conditional Statements

      5:54
    • 15. 17 Switch Statements

      4:55
    • 16. 19 Introduction to looping

      4:59
    • 17. 20 JavaScript For Loops

      6:43
    • 18. 22 Introduction to the Document Object Model

      6:13
    • 19. 23 Accessing Page Elements from JavaSCript

      4:29
    • 20. 24 Selecting Elements via JavaScript

      8:44
    • 21. 26 Updating CSS with JavaScript

      7:27
    • 22. 28 JavaScript Events

      5:06
    • 23. 29 Event Listeners selecting elements

      9:34
    • 24. 31 addEventListener More events trigger options

      7:00
    • 25. 33 What can you do with JavaScript

      3:57
    • 26. 34 Popup Images using JavaScript

      8:46
    • 27. 36 Mouse Event Listeners JavaScript

      10:32

About This Class

Learn how to create interactive, dynamic effects on your website with JavaScript using the DOM

Transcripts

1. Building Websites JavaScript and the DOM: JavaScript, HTML and CSS are the three core foundations of any website. Learn to use JavaScript and make some of your Web visitors very happy, adding JavaScript will allow you to create more interactive and mawr incredible dynamic Web content for your Web pages. JavaScript is super popular and use most water websites to create better user experiences. It's easy to get started with JavaScript as you don't need any special programs. It just runs within your grounds. JavaScript is designed for performing dynamic past within your Web pages. This force has everything you need to start feeding your own job script. This is a step by step guide explaining how and why Java script issues learning the core cold, fundamental concepts of Java script and how you can use them to connect to your HTML content. Explore what you could do with JavaScript. This course covers JavaScript, variables, arrays, objects working with JavaScript functions. How to use them, conditional statements learning about the document object model, the dorm connecting JavaScript, html Web pages, selecting elements, updating CSS via JavaScript events and listeners, and making your website more interactive. This course has everything you need. Learn about JavaScript. Get to know John HD quality videos from an instructor With over 18 years of real world Web experience, top links and resources source court is included, and much, much more. JavaScript is and demand learning. JavaScript can really set you apart. See what JAVASCRIPT do. Start creating your own code today. Let's begin. 2. 1 Introduction to JavaScript Course: welcome to our introductory course to JavaScript. In this course, we're gonna be looking at building websites and adding javascript to create a dynamic and interactive content. My name is Lawrence, and I'm gonna be your instructor for this course. I come to you with over 15 years of Web development experience. I really enjoy creating websites from scratch and seeing what we can do with websites when we apply coding languages such as JavaScript. So I've created this course to introduce you to JavaScript and help you learn how to use it . JavaScript opens a lot of doors, and knowing how to use JavaScript is one. JavaScript is one of the cornerstones of the Internet today, along with HTML and CSS. And knowing how to work with javascript will be really amazing experience and open up quite a lot of information that you can then utilize within your own web projects. So within this course, we're gonna be going through what javascript is. How to apply JavaScript. How javascript works different syntax within JavaScript. Applying comments using JavaScript semi Coghlan's white space is how to create alerts and also how to use your developer tools using console log to communicate information back and forth. And then when it comes to the data types, so these air the core essential parts of knowing to use JavaScript. And these are the first building blocks understanding variables, strings, numbers, boo leans and so on, and then also looking at a raise and objects toe hold multiple values within one variables . So you also look at what week should avoid when we're naming them and so on. And then we're gonna look at how we can use selection of our HTML code and interact it with JavaScript. So connecting our HTML pages to our JavaScript and then such things as core fundamental concepts like functions, how functions work, how we can return back data, looking at conditions. It's a number of different options with conditions and conditions is where you can really apply that logic into your JavaScript and really make things really happen within your courting. And then, of course, there's loops. The number of different loops and loops really do save you a lot of time. So it comes to looping through all the different content. It really there's a few different options, and we're gonna show you how to use those within this course. And then one of my favorite things about JavaScript is working with the dome because this is where you can really see some amazing things come to life, and you can really see the effects of JavaScript. So the Dom is the document object model, and this is what gets rendered out by the browser from your HTML code. And this is where all a lot of the power of JavaScript comes when we start accessing the dom and getting some information from the dom. So I'm gonna show you all the stuff that's available within the dawn, how to work with the document object and how to write actual HTML code using JavaScript so out putting HTML code using JavaScript and then also some of them worked advanced features of the dom, such as event listeners. Now, event listeners allow you to create that interaction for Web users. There's such things as clicks, mouth move, mouse movements, event listeners and a whole bunch more. They're going to go through how to add those in. And this is where we get dynamic content and interactive content using JavaScript. We're also gonna look at javascript operators all of the source code is included and everything you need to get started. Creating your own version of JavaScript and adding JavaScript in your webpages is included . So you've got all of this and a whole lot more. So when you're ready, let's start creating JavaScript. And just as a bonus, I have added in a few useful snippets within our JavaScript code. So I'm gonna show you how we can create thes clickable images that make the images with pop ups so we can have any image on her Web page be tied to a pop up. We're also going to look at how we can pick up X and Y coordinates. We're gonna look at mouse over mouse movements and so on. And all of this information is coming from the don't. So all of this and a whole lot more let's get started creating javascript 3. 2 What is JavaScript: welcome to our introduction to JavaScript. In the next set of lessons are going to be showing you how to use JavaScript, how toe added to Web page and also how to do some really nice and cool things. Nice cool effects on your Web pages. Just by adding and some really simple JavaScript. We're also gonna be covering off how javascript interacts with your Web elements. And this is where we're gonna bring in the Dom and we're gonna talk quite a bit about the dome. So that's a document object model. And this is how we can relate are JavaScript and create interactive elements using JavaScript, combining with our HTML pages some of the resources that we're gonna be using within this course. So we're gonna be using our editor, which the brackets editor, and we're also gonna be using code pen. So we see that code pen has html CSS and JavaScript. So these air the three foundations for Web development for front and Web development, and the good thing about code pen is whatever you type in anything here, it's automatically runs it, and it renders the date on the right hand side. So this is the same thing for CSS and the same thing for JavaScript. And I'm gonna be showing you how this Javascript works in real time. As we type in JavaScript, we're going to see that it's got the different effects and how it renders out we're also gonna be using Mozilla dot org's is a really good resource for JavaScript because there's quite a lot you can do with JavaScript. There's a lot of different syntax that you can add in and just a whole lot you could do with JavaScript. So there's a really good resource over here to find out more about JavaScript because this course could be more focused on JavaScript and Web pages. So just keeping in mind that JavaScript there's a lot to JavaScript, so get comfortable with outing it into your Web pages. You can take it a whole lot further, and we're gonna be representing the JavaScript syntax that's most commonly used to develop websites and again to create some really cool dynamic effects and interaction for your Web users. So the next lesson, let's begin writing some JavaScript 4. 3 How to add JavaScript in web pages: this lesson, we're going to start creating some JavaScript. So basically, javascript is an interpreted programming language, which means that all you need is a Web browser in order to run JavaScript so you can create some files and have them named as Extension Js, and they're going to run right on your computer, open them up in your browser, and you're gonna be able to see that you're able to write JavaScript and there's no compiling. And once you write the JavaScript, it's all ready to go. So let's open up our editors and create our first JavaScript file. Now, in order to render it out in a browser, we do need to give it the extension of HTML, or we can link to a Js file. So I'm gonna show you how to do that in the end of the lesson. But for now, let's straight up and create, So this is gonna be an html filed in in order to call JavaScript. We do it like we do with other HTML elements where we have an opening and closing tied, and then any content within here. So this is where the JavaScript is gonna live, and this is how the browser is going to know that this is JavaScript and we want to render the same. So simply, I've created a blank file called script dot html, and now I'm gonna open it up in my browser and we'll see what happens. So here I've got it within my browser, and when I refresh it, we get this pop up that says hello. And in order for me to continue, I need to actually click okay on here. And that's one of the simplest formats for JavaScript, where we've got a simple action with one line of code, and it actually renders out something so excited was actually to remove thes script tags. The browser actually wouldn't know what to do with this. So if we went out here and if we removed it and refreshed it, we can see that nothing happened. So if I look at the source of this, there's nothing. There's nothing happening now, and that's because this is not able to actually render out the JavaScript. So because we need, we're including those script tags were able to render that out. So I did say that there is another way to JavaScript into your web page. So I've got a website open here on HTML file. I've got some HTML here linking to a style sheet and the same way that we're linking toe a style sheet we can link to a JavaScript file so we can do the same thing as HTML file. And if we want to bring this JavaScript, we could easily bring the JavaScript into the page just by adding it as script tags. And then it renders it just like it did in the previous page on swell. But if we want to link out to an actual source file where we could house all of our JavaScript for a website like we do with CSS, then we can link out to a script dot Js files will give it the Js extension, and then we just need to make an update here. So I'm gonna open up and create that script dot gs. Now we've brought her javascript into our page, and I can link out to it by linking source. So I got the script dot Js down there and it's completely blank right now, and we're gonna link out to script dot Js and once I saved that. And if I refresh this, first of all, we're not gonna unless we actually are linking out to the page. So I just need to save that and just make sure that we don't have anything in their Refresh that, and we see that once the page loads, there's no JavaScript Right now that's rendering out so nothing in the source code and we're just linking out to the script Js file. So now let's adds that alert back into script Js and see what happens. So it's going to render it out as if it was on the page itself. So the effect is the same thing. But the benefit here is that when we're linking out to a script file or a Js file, then we can link out to that same file throughout our entire website. And this is going to really save us a lot of time because we're not gonna have to go onto every page ad in JavaScript as well as if we do some updates. We don't have to update it anymore on every single page. So the main benefit is that it's gonna be more versatile and easier to update when we link out to script file and you can just do it like this. Previously with job script, we had to specify that this is a JavaScript file. But now, with HTML five, we only have to open up script source and close off script. And then this is all we need to do in order to link out to our external file. And it's a Z Z is that toe add JavaScript, your Web pages and just a side note here if you're practicing JavaScript. And if you're using one of these online editors than this is gonna be the same format as linking. So we've got our HTML within our body area. We've got our CSS. So this is linking up to a CSS file, and then this is linking up to a JavaScript file. And that's why were able to just simply type in some JavaScript here and see it rendered out because it's treating it as if this was an external JavaScript file and it renders that out. So the next lesson we're gonna dive deeper into JavaScript and find out all the different, really amazing things we can do with it. So that's coming up 5. 4 Basics of JavaScript Dev Tools How to Comment and more: in the last lesson, we saw how we can add JavaScript into our HTML page and make something happen using that job script. Now, if you notice that I placed the JavaScript here just before the body is closing. And if you're wondering there's number different places where you can place JavaScript, you could actually place it within your HTML document so you could have it placed anywhere . And it will render out so you'll see that JavaScript. Sometimes it's added to the top of the page. Sometimes it's added to the bottom of the page, and this is all depending on how you want to use your JavaScript. So you see it. If it's added to the top of the page, it's still going to render out the same. If I had it underneath the body, same thing, it'll render out the same. But there is a reason why replacing JavaScript at the bottom and this is gonna become important when we look deeper into what's available with the dawn because the dawn is the document object model. And of course I'm going to go into this later on another upcoming lessons. But essentially, for now, it's just important to understand that the dom represents all of that HTML content that's rendered it so. The browser creates the dom when it reads the HTML file, and it ticks that takes a look at all these elements and renders and moat in a tree like fashion where you can traverse through them and using JavaScript. You can access any one of them, and the important thing to note here is that if you've got JavaScript at the top, then it doesn't necessarily have enough time to render, wrote the Dom. And if you're trying to interact with your elements within your HTML page, then it's not going to be able to access them at sometimes, because of the fact that the JavaScript is going to be called after after or pre rendering out the dawn. So this is why typically, you're going to see that JavaScript if you very dawn heavy. If you're interacting with a lot of the HTML elements, you're gonna place the JavaScript at the bottom of the page, and there's a few other reasons as well to do this. If you're linking to an external JavaScript file, if it's taking more time to load or if there's some issues with it. You don't want your visitors to come to your website and have some kind of JavaScript problems here loading external file and then not having the page be ableto load. So this is why it's important as well to keep it at the bottom, because this gives the ability to load out all that important content HTML content presented to the user and then provide that interactivity. And another important note to know about JavaScript is you should keep all of your javascript in one place. So when you decided where you want to place your javascript, whether it's in the head or whether it's just before the body closes. So depending on where you want to place it on, make sure that you're placing the rest of your job script below that. So if I had some actual on page script, I would place it just below calling in the library. And then I would add in the script there as well. And this goes the same thing for if you placing it in the head as well, though placing at the bottom best practices, and it also helps with load time as well So let's now take a look deeper into what we can do with some JavaScript. So we saw that JavaScript. We saw how we can link it to an external JavaScript file, and we saw how we can place it on the Web page. We looked at JavaScript syntax slightly. We created simple alert, and this actually runs within the windows object. So there's the document object in the windows object, and the window is just as indicated. That's entire window. And this is as this is something else that gets created when the website loads and we're gonna take a deeper look into the window as well, because it's important to understand all of the different functionality that's available to you. So, javascript, if you think about it, it's like having a whole bunch of resources ready to go. And JavaScript allows us to make those connections between the resources that are ready to go, make some cap calculations, some computations and presented back to the Web user. So when you're writing out your JavaScript, we're gonna look at how we cannot in comments semi Coghlan's and how white spaces treated within JavaScript. So when we are writing out our JavaScript. And let's say we do want to comment out some content. So looking at this alert Ah, and it is always a good idea to document your Web development. Eso when your JavaScript files get really large and as well as your HTML sometimes this good idea have some reference points while you're able to read through that code and quickly be able to figure out why you created that. So if I want to comment out this alert or comment this alert eso this is test example and so on. So this will give me a good idea of why I might have created this alert. You just do the to slash is there and not common, said the rest. So this part here, so anything within this line is part of that commented out area. But if you move to a next line, this is no longer commented out, and we see that we're gonna throw an error there for that. But with JavaScript, if you want to comment that out, you can do it that way. And there's also a way to commentate that entire function. So it's exactly what I'm gonna do. And there's also a way to me. Multiple line commenting. So if you had a block of code and you had maybe bunch of code here for Java script and I will show you how to work with variables later on as well. But if I had some code here that I didn't want rendering out, then we could very easily just commented that whole section and you'll see that these commenting outs get used in a number of different ways. And it really does help with Web developers because this gives you the ability to communicate back and find out exactly what's happening with your website. So another thing. Important thing to note. With JavaScript, you noticed that every time we've got a JavaScript statement, we're closing it off at the end with the semi colon. So looking at this every time we've got a new line and every new line, our every command or store set of instructions that we want to execute A s. Oh, this is gonna be all divided by semi Coghlan's. And so these are statements and we're dividing them via semi colon. And this helps javascript understand that this is something you So once we've completed it with a semi colon. JavaScript, No. Is that the next line or the next set of content is gonna be interpreted as a brand new statement. So brand new command and you can create javascript without any spacing at all. And it's completely valid, although setting why this many times you probably won't see this happening, but this is just a indication of how javascript works and how we consent multiple values here. We've also got ability to comma separate these out, and we can set multiple values and not format as well and spacing the way that spacing is handled within JavaScript. So I'm gonna add that semi colon back in Esso, we noticed that when I type this over here, I don't have a space. It's still equals one over here. I do have a space so white space is actually gonna be making it more readable. So that's why we're including the spacing here, because this is more readable, but the way that the white spaces handled So it doesn't even matter if we do it this way that it's still gonna render it out as a value of four. And lastly, the one other thing that I did want to cover off in this lesson is how javascript how we can air check and how we can use our deaf tools in order to get more information about what's happening with our JavaScript. So I'm gonna open up our editor here, and I'm gonna just So you one really nice little trick here with JavaScript is we've got communication that we can initiate between our script and not have it actually rendered out for the users consumption. But this is gives us some more information about what's happening with the script. So opening up that Web page now I can use deaf tools to find it, so we don't actually see anything happening. But if I go to inspect and I'm on a Windows machine, I'm using chrome. It's a number of the All the browsers will have the ability to see the console. So depending on which browser using, there's going to be different ways to access the deaf tools. And this is why I really like using chrome because the deaf tools air really easy, straightforward, and there's a whole bunch of information eso if you want to, you can also select anywhere. Inspect. So, control, shift I or you can go over here to the menu here, and you can open up Dev tools. So either way, it will open up this console here and we see that we've got a number of times here at the top, and we've got one called console, and this is where we're actually sending information and messages back. So if we did have something like we've got over here within the JavaScript And if I wanted to see the value of X and I wanted to see the value of why I can consul that information out and I could actually get a better idea of what those values are at that current state within my JavaScript source code. And this is how we use console. And we use it a lot as well, for for error checking. And we also can see that we've got some HTML errors here. So we see that within the source quote here online seven. We've got spelling mistakes so we can easily see communication from the console and we could see how useful it is within our editing process. And now I can update that. Refresh it and within the consul. Now that error is gone. So Consul is important part of developing websites and allows you have that communication back and forth and check any kind of issues that you might be having and gonna be using Consul quite a bit to communicate information that back and forth for my script out to our Web browser. And again, this isn't seen by the users simply used for the development process. So the next lesson we're gonna dive deeper into what you can do with JavaScript. 6. 5 Introduction to Variables within JavaScript: the previous lesson, we saw how we can create different statements to execute some JavaScript code. We saw how white space was treated, and we also saw how we can create comments and so on within our source code. So it's more readable, and mawr easily toe update as we go back to the script files at a later point. And we also saw how he can communicate with the console log. And we briefly talked a little bit about the Windows object and the document object. So there is actually a way to use the console to read out content from the windows object because, this says I said, does get created every time the Web page gets created and this is created within the browser so we can do console directory and we can take that window object and we see the window object represents the window containing the dawn or the document object model, and we're also going to console directory out the document object model. And when we do take a look at this in the console, you're gonna be amazed if you've never seen this before. All of the information that's contained within their so we do a console directory. This is used for objects where we've got this kind of tree like fashion, and we've got a bunch of objects within other objects, and all of this is available. So the 1st 1 that we're looking at. So we see that just like when we would put those variable values there in the console or consul logging out now the window and the document. Let's take a look at the window. And there really is a lot of different methods. Here s so these are all available and you can call to any one of these actually using your JavaScript. So all of this is available to access via javascript. And I know there's ah lot here, and it might look like it's overwhelming. But the fact of the matter is, you're not gonna be probably ever using 99% of these eso these air just these air there if you do need them. But for the most part we use some of them were common ones, and we see that the alert that we were using their before. So this is a function that's sitting within the windows object, and we can call to the Windows alert and as well, we've got a bunch of other options here as well within the window. We've got a whole bunch of these on click on clothes and so on so we can take all of the uses, actions, events. And we are gonna be looking at this because later on, because it's an important part of what's available within the dome. We can also see that we've got screen left screen tops. We know our screen position. We know where the scroll position is on the Web page and so on. So we've got all of this information that's ready to use an access, and we've got our window variable. So X and Y are within the window. Object eso they're contained within their. So we see X and Y is in there. And now back to the document object. So this is different that when windows object, because this actually sits inside of the windows object and just like the windows object, there's a whole lot of information here, and this is crucial to understand that this is all there on the ready, and you can access them at any point we see here that we've got the body. We've got a breakdown of all the different elements that are available to us within the Web page. We can access any one of these. We can see the head so we can see the content that's within the head and so on. A very important to understand that this is there and we can use it. We can also see when the file was last modified. So really good, important information. So let's create our first windows object, and we've already created a new alert. So should you have to do alert and then tweeting some content there, So whatever message you want output and this is essentially how we can access that windows object. We could do this as well to specify that this is a window alert eso. Either way, it's gonna produce the same results. But most of the time, you're not going to see that people are specifying the window, and the browsers are smart enough to understand that this alert is sitting within the window and is gonna try to run this alert function. So also as well as the alert, we have some other options as well So we've got one called Propped, and we've got We can keep that same thing or what is your name? And the reason IM four Mining as a question is because it's going to prompt where it's gonna have the same as that alert. But this time it's gotta have an input field there so we can just put something in there and we can send that data over, and then the JavaScript can actually interact with that data. But we need to create something else in order to hold the contents off that value that we've put in because right now, as we put something in, there's nothing that really can tie that information. So we're not really sure what the user has put in here and with JavaScript, there actually is a way that we can pick that information up. So let's set up are variable. So we saw quickly in the previous example how we created some variables and this lesson. I also want to go through what else we can do with variables and how we can name variables , so variables are created by indicating v A r and variables. Before we use them. We need to declare them so if I was to do something like X equals why it doesn't have any context to where access coming from. So even though it will still declare it it. So it's still gonna understand that while the value of X is equal toe one than it's still not the proper format, and in some browsers you're gonna throw errors. So it's always a good idea to declare your variables prior to using them. And there's different types of variables that were able to utilize s over here. We've got an example off a number of variable suit. This is just AmeriCorps, Inter jer. So these are all any kind of numbers. There's other types of variables that are more commonly used, so these would be a string, so we could indicate that a string and strings need to have quotes around them so you can do a single. Or you could do a double quote in order to contain all of the contents of the strings. So I'm gonna just do simple hello world and also have that same vehicle in there. It then, so that we know that that statement has come to an end eso Hello. World is now the contents of this string and we can actually output that within their So maybe even better than putting hello World is I'll just give a value for string. What is your name? Place it into the prompt and we're going to see that Now this s t r. Is gonna hold the value that we've allowed. We've told it to store. So this is a value, for example, of a string to know and refresh it. Well, you see that? Why is, actually it's not defined because I took it. Why? They're so I should actually remove that us. Welcome. So this is another good example off why you need to have console? Because it just told me I had an error there. So really good. Teoh, have that up and open as your testing out your Web pages and creating them eso here we've got what is your name? So it's actually using str contains the what is your name value and then we can utilize it within our script. We also have another type of variable. So we've got a bully. So the boolean type value, So I just call it boo and this is either true or false value. So for now, let's set this up as troop, and I'm gonna comment this out, and this is proving eso true or false. And this is another really useful one that's commonly used in the really useful type of variable, because this allows us to hold different types of values. And then we could check to see if boo is either true or false, and then we can take action on it within a JavaScript. So simple value of either zero or one. True or false. However you interpret it, you can see if there's a value set and you can apply conditions to this. And now, whenever we weaken, do some combinations of the prompt as well as variable setting. So now I can do something like this where I have variable response and equal that to the value of the prompt. And now you're going to see what happens when I place it within the console log and check this out now. So whenever we gotta cancel that and refresh it and we see that we got this prompt, So now when I type and test you get output here within our consul. So this just basically means that now response is holding the value that we had asked for within the prompt. And this is where we begin to see the real power of variables. And this is at the very core of what Javascript is. And what it does is that we can set these variables and they can represent values that we can then utilize within our JavaScript. And we saw how now we can create that simple interaction and we can hold the value, whatever the user put in. And this way we can We can access this value at any time within our script. And it really does give us a lot of power that we can do with JavaScript. And we can even do combinations of the variable, somewhere setting response. We can do something like quote so we can create a string so we could do something like question waas. We can attach that string. So can Katyn ate it together with the plus sign, and then we can output the value of so we're gonna have The question was and we've got that users response there. So now when ivory go in in one last time. It's type and test and we can see question was, what is your name? Because the value of str is what is your name and then test. So now the response is the value of both of these combined and the output from the user input. The next lesson we're gonna look Atmore ways that we can hold data within our JavaScript. 7. 6 Understanding Variables: in the last lesson, we were introduced to variables how he consent variables. Now, when we are sending variables, there are a few things to keep in mind. So typically, we do like to keep names short. So you don't wanna have a huge long name, so you don't want to have something like What is your name, question and so on, so actually can't have spaces in between there, either. That's another thing to keep in mind with when you're setting your variable, don't put any spaces. And if you do have something than typically we do camel case. So every time we have a new word in here, so we capitalize that so it makes it more readable when you're coming back into or if another Web developers looking at your code that they can better understand that this is what you're trying to look for him, what you're trying to set the variable name is, but still better yet, just keep it simple, straightforward, but also try to keep it relevant to what you're doing and what the value is that it's gonna be holding. Also, make sure that you're not starting with a number, so you can only start up with letters and you can also start it with a dollar sign. You can also start it with an underscore. But you can't start it with any other valid with any other characters. So just those two characters so it can start out with the dollar sign. I can start it with a number and it can start it with any letter. So you can't start with a numeric. You can also you've got to be wary of the fact that javascript is case sensitive. So str with an upper case is not the same with str with a lower case so case sensitive and also don't use reserved words such as eso. If you had something where a reserved name is, then keep mindful of the fact that javascript still does revert reserve some of the names so you don't want to be overriding any of the default values that might be sitting within JavaScript. So when you're doing your naming than make sure that you're not naming anything that you would see within JavaScript elsewhere and with numbers, you can actually place numbers within the string. But it just can't start with a number s o. Those are also available when you are creating your values for your variable names. So next we want to look at the operators. So there's different types of operators here and we see that in order to declare a value were just equaling it toe one. So this is the same thing that if we did declaring a value of five or something like that and we did one plus for so this would be equal to five. So this is another way that we can have on operator in there So we can do plus signs. We can also do minus signs so we could have variable six is equal to and see these variable names. You can call them whatever you want. That just makes sense. Eso I'm just doing something here where maybe we've got a value of nine minus three. So I'm going to keep that spacing in there and have that equal to six. And additionally, we can do mathematics. We can do a multiplication and so on. So all of these air valid operators, anyone's that you would typically see within the mass, so plus minus multiplication division and division is actually done with the slash like this. So now if we want to see the value of six within the console, I just put that in there and just show you how this is gonna work. So now when we refresh, it should get rid of this prompt. But we see that JavaScript can calculate out the mathematical value in it. It puts it there for us to be able to digest. Also, I'm gonna actually get rid of it's prompt. Here s so that we don't have that popping up every time. We're refreshing the page eso by default if we don't actually declare anything. So if I have a value of seven and if I just close off that statement So what do you think is gonna happen here? Because I haven't actually declared any value for seven. But I've set up that there is a variable named seven and as opposed to if I had console log and if I did something like eight, where I haven't actually declared anything, So what do you think is gonna happen at this point when we refresh it and we look in the console? So seven, I've declared, but have not given any value. Eight I haven't declared, and it doesn't have any value. So let's check this out and see what actually gets output in our console. So we see that because seven is declared, we get a return value of undefined. So basically that means that we haven't defined a value for this container for this variable. But when we try to reference eight, we see that it is not defined. So undefined and not defined are two different things because not defined is that we haven't defined eight as an actual variable. So JavaScript comes to eight that has no idea what it is. Has no idea toe handle. It throws this ex error, which is important error to make sure that you don't have any of these. But these ones up here, it's undefined. Um, these are not as severe of errors, and that's what's not there in red, because we have done the proper structure where we have created ah holder, a container for seven. We just haven't given anything to hold within their. So if you're looking to see if ah value is undefined, value comes back undefined, then you know that you need to have that. The variable is is there, but you haven't added any values into it. But you're probably wondering that. Okay, so we saw that we can add in the values together, but down here we looked at and we had the plus sign, and it was actually strings that we were adding together. So you might be wondering Well, what happens if I've got So I'm just going to do an X, Y and Z. So I've got accelerated over there. It's a variable. Why? And you're probably wondering Well, what if I have a string value here and if I add it to another string, another string, we see that what happens in this case is that we add them and can catnip to them together. So I'm gonna show you how the output for that looks. But what do you think happens if I do a string and let's say I do on integer a number here . So what do you think is gonna happen with why? And what do you think is gonna happen with Zet and let's open up our and actually there's gonna be one more that I want to take a look at eso what happens? What do you think of what happens if I do? X equals one and then equals plus one. So what do you think? The value of these are going to be within the console. So first of all, we've got X. They're going to just move a few things around to group these together a little bit better . Eso Now we can look at our values here. So we've got a string plus a number. And what do you think that output there is going to be for X? Do you think it's going to be to Do you think it's gonna be 11 or one and one? What do you think is gonna be here? String plus another. So this is gonna be the new string called String Another holding that value and this one string And then plus once, what do you think is gonna be here? Says this string space one? Or how do you think this is gonna get treated? So let's open up our browser. Refresh it and we see that the 1st 1 whenever we've got a string and a number, it doesn't actually add them together so it doesn't return back to, but it takes and converts it into a string, adding it contaminating both of those strings together. So returning 11 other thing over here as well. So we've got string. Another noticed the space in there, and it's could caffeinated those together. And then lastly, So we've got string Space one, and this is the value here that's being represented. So notice that I did out in the spacing here, and it is taking all of that spacing when it does add them together. It keeps both of those spaces as well. So do take some time and take a look at variables because this is at the very core of JavaScript. Understanding how we can hold values and then use these values within our script is essential and very, very important. Eso won last one here that I want to just illustrate so variable and I'm gonna do five plus the return value of three. So this should be eight. So now we're gonna have a value for eight s, so I can add five plus six. And do you think I'm going to get a value of eight here? So I know five plus six isn't eight. But remember again, we're using variables so variable is holding a value of five, and this value of six is actually holding a value of three eso. Let's see what happens now when we render this out. And let's Consul log out of value for eight. Yes, well, and let's refresh that. And now we see that we've got an integer value of eight eso because this is still numeric. All the values coming in there was in America. So it's state, as in America, and other ones are still the same there. And it is important to understand how all of these values work together. So do take some time and try it out. So if we had variable seven and equals plus X, why and then we can Consul Lock Zad And here you can try out different things on and see what the end result here is. So you've got Consul log five and now you can do a six that can do divided by five and so on. So say we got decimal places. There s So if this one is now four, we see that all the different values 1.24 and so on. So this quite a lot we can do. And it's definitely worth while playing around with this and getting yourself really familiar how variables work, because it's gonna be a crucial step in understanding JavaScript. 8. 8 Arrays and Objects: the previous lesson. We looked at variables and how we can hold content and information and assign it to a variable and then utilize it within our JavaScript. So let's go deeper into this. And there are actually other different ways. Toe hold multiple values with one variable and these air arrays and objects. And these are also very commonly used within JavaScript. So I'm going to remove out this and I actually how you can create an array. So honoree is essentially a collection of of values that are going to be assigned to one variable name. So if we had something called, we just call it a for now, and we're gonna equal it, too. And this is where we use the square brackets and then the contents within here is these are the values that we're gonna be held. Eso It's going to allow us to help Ah, whole bunch of different values and they're gonna be indexed within the array. So this isn't array and the same way that we set up variables where he had strings integers , boo leans. We can add these in the race. So if we had a value of one, let's do a value of two and we can also throw in on integer here. So a numeric value of three. We can also do a Boolean value of false on. Then we can also finish that off, maybe with a string and so on. So now we've got all of this content available in the variable A and I had a consul log this eight so you can get a better idea and see exactly what this looks like within the console. So let's update and refresh, and we see that now we've got a sign Index values 01234 and important to remember point to note here is that would start with the value of zero. And when we hover over it, chrome actually gives us a sample off bracketed zero with the index. So now we can actually have a better idea of Well, what if we want to return back and we want it to utilize one of these values? How would we do that? And they gave us a really good hit, their within chrome. So we know that we've got these bracketed values these air all indexed, starting with zero. So if we want to get this third item. What value could I put in there? I could return a to And we see that once we get that corresponding index value, we should return back value of three. In effect, we still return back of value of three exactly as expected within the array. And the ray essentially saves us the trouble of setting up multiple A B C D. E Equalling them toe 123 for five. And this allows us to group and create a collection of values that we can utilize really easily within our JavaScript. And we saw how really nice and neatly we can place these values into their rate. There is another way to hold essentially a list of multiple values, and this is using an object. So notice that we're declaring in the same way as any other variables or any other containers where we had a and this time we're going to create an object, and we're gonna create an object with the same type of values. And the difference really is between arrays and objects. Is that a raise? Already have it. Index, we have 123 with starting out with zero, so they're already indexed. But with objects, they're gonna be treated slightly different because we have the opportunity to create how we're going to recall and call back, return back that value. So if we had something like index of at first and we separated out by colon and then we were turned back one and then comma separated a vote and we could do something like second , it's probably not the best idea. So nice to f rt and see because we don't wanna be using, We want to keep it nice and short. There s o noticed that we don't need to have quotes around there either. So the second value is to and third and the third value is gonna be on integer so we don't need quote surrounded. And now let's take a look at B and how we're returning the be back. And then after, we're gonna take a look and we can see how we can get that item within, be how we can return back those values. So let's refresh it and take a look at our object. So we see that the structure is very similar to their rate where We've got the three different multiple items that are accessible via the variable. And we do have that we've got instead of the index, they're being assumed that it's numeric 0123 We've got these assigned values to it. So now let's say we want toe open up the value of two. How do you think that we would be able to access that and get access to that within the object? So let's open up our editor. And now we've got to be more specific with how we're accessing these objects is actually gonna be two ways that we can access objects. The one against could be very similar to the way that we access it within an array where we do the square brackets and we just need to specify the name that we want to utilize. And there's also another way to do it s so we can indicate the object that we want to use and we can separate it out by a dustman. So let's take a look at this. Open this up and you can see that we're returning back those same values. So two different ways to return back the same properties, so we can either use that property name could return back the values. We can either use it with a decimal property name or we could use it within the bracket. And it is important to understand that there is a difference when you are using these. So sometimes if you're setting it up as dynamically accessible, if you've got some numbers there, then you could use thes bracket of formats. What I mean by that is I'm going to do a quick update here. So sex and it's let's say we had a dynamic value here. So we have 012 on so on. And this makes it really easy toe loop through these values. And if we are looping through the values than this is gonna dynamically be changing, we're gonna be incremental yet. So going back over to here, if you want to call over to S C S, E. C, we could really easily do it by doing a plus one, and then this could be assumed that this would be a value that would be changing depending on what value are signing to it on then. Also, we would need to update that here, so this would be the equivalent to this. But if we did ah, plus one here. It wouldn't work really well because noticed that we're not quoting around it. Whereas over here we are, we're able to dynamically change that value. So let's take a look at this. Refresh it and we see that we get those values once again so important to keep in mind, depending on how you're accessing your object data, then this is how you need to look at putting that object information. And for the most part, you're not going to see it within this bracket format. Most of the time, people are just using the period and then accessing the main object and then the property value. I just specified there so indicated by the DOT. But if you are looking Teoh dynamically loop through a bunch of values within an object, then you could use this type of format as well 9. 9 Working with Arrays and Objects: in this lesson. I want to cover off how we can actually work with the value. So in the previous lesson, I showed you how we can set up in array how we can set up an object, how he can return back those values that are contained within here but within JavaScript most the time when we're creating dynamic JavaScript. The whole idea is that these values will be fluctuating. They're going to be changing dynamically as our code executes out. So the idea here is that we need to have a way to access update that information and be able to output it as needed. So let's take our object and let's add in another brand new object. And this is really easily done because we've already declared the object. So now we can do something like be dot and here we can come up with F O U for the fourth item within the object. And all I have to do is a sign of value. So maybe just do hello world here. And I could do be dot f i V or to change it up a little bit. So do you think that this is gonna work the same way. So if I do that five be. And if I equal it too five all caps there. So let's take a look and see what gets output within the consul now. So refreshing it. And we see that now within the console we've successfully added items into the into that object and we can make some calculations and treat them just as we would any other variable . So we had our four. We have our five and so on. So hello world and five. So that's all sitting in there. And now we have access just like we do the same way we're accessing the values down here we can access in interact with them. So we don't actually have to declare any other via ours because we've already got be as a container for all of this information. And similarly, if we want to update the value of b dot sec one, then we could update that value. So maybe I could do updated, and we do have an option to use single quotes, double quotes s I'm just giving you a sampling here. Just different variations of how to write out the code Let's go back into the at browser, refresh it and now we see that we've got the new value. So we've got that updated value because we did update it within this line. And JavaScript is just rendering out sequentially. So a B, B, B B. And then it renders it at the consulate in one of the things to keep in mind with JavaScript. I know I said it renders that it sequentially, but it actually does two passes through the script, so it doesn't initial one to see all of these variables and all of these values and then the next one. It actually places those values in. So we'll do a quick run through and see which variables air declared. And that's how whenever we declare value, we know that JavaScript will treat it as already being declared because it does do those two passes. But for now, just think of it as running through and reading the code from top down and executing, the court wrote. So now let's look at the arrays. So the rays are a little bit more complex because we do have thes indexes. Eso We've got five different values there, and Let's say we want to update one and we want to update the value that's contained in there. So in order to do that, we can specify the rename and then we have to specify it for you, that index so much the same way that we're calling it down here and out putting that content, we can do it the same way, same thing as the variable. So once we've got that value there that is contained in a zero index zero, we can work with that and we can update it and set it to whatever value we want to set it to. So let's just do update it and sort of be there. Or maybe I can add in A and B so you can get a better idea. And I had also added in before I updated. So we get to outputs of Ray. So the 1st 1 there, we see that we've got updated. The 2nd 1 is updated as well, so even though we've set the value there beforehand, we've gone in the console log and we've updated it. It's important to remember that there is a difference in the way that JavaScript renders it out because it's already rendering it out as the updated value. And this is gonna become important as we progress through the course. Eso also the objects here and notice that the object here is the original value. But now, after we're calling that object, we see the updated value. So there is a difference here on how things are being called Ah, and rendered out. And when we look through the object itself. So over here we have updated, but we don't have an updated here. So keeping all of this in mind, we see how these values are rendered out and treated within JavaScript. So you're probably thinking, Okay, well, what happens if I want to render out the value of B? And this is where it gets even more tricky? Because before I'm updating it, if I call the value of B S, E. C one, then we're actually going to see that value rendered out there so as to so as it is displayed here. But then it gets updated later on and gets displayed as the update of value. So over here we have SEC one is updated when we output in the Consul and also looking into our values here that were being returned back from the console. We see that within the object we have all of the items there that we've listed. But when we open up the ray, we've got another one here that sits at length. And this is also something that we can utilize because this is a value that sitting within our within our script. So if I want to know the length of the none of items within the array, I've got all of these default properties such as length. So now if I console log this out, we see that the length of the raves for life and this is very useful. It's very useful to understand that this is within our This is really easily accessible within our JavaScript. We're able to easily add and get the length value and when it would look out looping through all of the values within their A. It makes it really easy because we have this property that's accessible within our JavaScript. And also I wanted to show you one other thing I did want to cover off is how we can add to the array. So we saw that within our object, it was relatively easy. We could create brand new values here and assign values to the value value properties, name properties and assign values to them. So it was really easy toe work with objects and add in additional values in there. But with the rays, it gets a little bit more complicated. And the way that we do that is we use different built in methods that are available within the worry and in orderto add items into our array. We need to specify and use thes methods. So the one toe added in is push. And basically it mutates Andrea, pending the given elements and returning the new length of their rate. So basically what that means is that all we're doing this, we're giving the ability to add a brand new item into their A rape. And this is again with these because it's a method we're using the's rounded brackets, so not the square ones that we used to create their way. And we have to add our value as we do here with the quotes, So I'm gonna use double quotes this time. Usually it's better to keep its standard, but I just want to give some different sampling of just different ways of adding and content eso push, array and lost item. So now we have one last item added into the rate. We're going to see that our ray now contains six items so that value has increased. The length automatically increases as an ad in new items. And in the next lesson, we're gonna look at some other methods that are available within a raise, just different ways of working and sorting the different items that are contained within their EEZ. But it's important understand that differences between arrays and objects so a raise have numbered index is thus we see that over here were returned them via numbers and objects have named indexes. So these air, the name s Oh, this is just essentially the biggest difference between these, and they're both able to contain multiple values within that one one variable as we've created it. 10. 10 Using and updating array values: in the last lesson, we looked at how we can begin toe work with our raise and add in some values into a raise. So, unlike objects, we've got a lot of built in functionality that comes with an array. And this really allows us toe handle all of these items that are available in a re really easily eso I want to just Consul, log this out and Consul argued that array and I'm gonna commentate all of the stuff down here. These consul logs So that doesn't get too confusing with what we're trying to show you within this lesson. Eso this lesson. We're gonna be going over how to work with the Rays. So we've got our ray that we've created here a pushing in an item we're updating the first value or whatever one has the index of zero, and also sometimes it's occasionally want to remove stuff from the array. And this is where we use pop. So pop by default removes out the last item from the worry. So what's gonna happen here? Whenever I refresh it, we can see that I've got all of my items here within the array. Eso I've got the last item I've added that in and then Pop actually removes that. So that's an interesting effect with a raise that were able to push in items and pop items out as needed. So we also have different options, a swell where we can remove the first item from the race. I can remove this updated one, and I can use that removing it, selecting it out and removing that one. So show you how to do that s so this is a ray shift. So the ray value and shift and it's going to remove back with that first item from the array. So let's refresh. It s so it's now we've removed out, updated and just like what we were adding into the end of the aree with push, we also have another option to add in a value at the beginning of the array, so un shift. And so this is gonna added in the beginning of the ray. But we need to know the value that we wanted to add in so new item. So let's take a look at this now. So what we're doing here is now we're adding in a brand new item at the beginning of the ari. We can also delete out items from the array so we can use delete to remove those out best practices, usually to shift or to pop them out. S O that you don't have any undefined values within your array that are just sitting there as holes because the way that a raise work is they do reserve that spacing eso. This is usually best practices. Also, we can use displace to add in items within the array. So let's say that now we want to add in something after two. So we do have that option within JavaScript. And I know there's quite a lot here that we can do with the Rays, and this is really demonstrates the power that we've got available within their raise. So this one is called splice eso. Essentially, it changes the content of an array, adding new elements while removing older ones as well. So we do have the ability to update those and add in new ones. So maybe I'm just gonna do a new one and you to maybe change that toe lower case, and now we need to specify where we wanted to update them and which ones we want it to change. So we want to start it at position to and then how many elements we want to remove. So if we can, if we set it at zero and I'm also going to show you how if we set it at two, what's gonna happen? Maybe I could do three and four so that there is some difference there. So let's take a look at what happens now. So we see that the 1st 1 there this place were specifying in position to so 012 And this is where we're adding in those new values of new and two. So we're adding it in between here and now, the next less the next one. We're still looking at displacing at two. But we're removing the new one and then you two and essentially replacing those two items with these two new ones. And you're probably wondering Well, what happens if I don't actually specify what I want to do, what? Which ones I want to add in. But I just simply want to remove out two elements. So let's take a look at that, and we can also use place to remove out elements. So if we don't specify these, what do you think is gonna happen now? So when I refresh it, we see that this gives us ability tax to remove items depending on the index starting point . And we can specify how many items we want to remove out. And with the Rays, we just really have so much power of things that we can do with the Rays. We can also. So we saw how we can use place we saw we can use pop shift and we've got some. Or that we can look at eso. We've got slaves. So returns a shallow copy of a portion of Honore. So we slice out a and we need to specify where we want to slice a l dot and actually, we should call this clearly have value for B. So I'm gonna call it, See now, because what this is going to do is this is actually going to create a brand new array. So I'm gonna have now a and C and show you what's happening here. So now whenever I refresh it, si is not to find, so I do need to define the variable. See so good thing that we've got the console open there that were defining C. S O. C. Is so value for C is equal to see slice, So I can't actually just do it without setting that value. I need to specify that c is equal to and what C is gonna be equal to. So C is gonna be a splicing off a so that that way we're setting that value, See? And now we can see that once we slice it at this at this point, then we just returned back the remaining items within that a rate We can also add in two arguments if we want. So we can specify additional information of where we want this slicing Teoh return to start out. So let's say we're looking to slice at item number two and we were on a return back to items. Let's take a look at this. And now So it's returning back zero. So and I have to actually go back and update this because this is gonna be where we're starting and where we're ending. Slice. So let's show you how that works. So now we've got false and five. So we starting at our starting point of three and ending at the last point when you are selecting, make sure that your starting point is less than your ending point and a few other things that weaken dio with our raise. So actually, if I was to remove out this see entirely, let's see what happens now. So whenever I refresh it, we see that we don't We don't have any change in there because we're not specifying any new value toe hold the value that's contained within this place. So always make sure that you're prepared toe set up a brand Yuri toe. Hold that information. We also have the option to sort are a raise. So if you want to sort already a, we can sort it, and we also have the option to reverse order it. So let's reverse it first and then next, where we could sort it and then we can reverse it and I'll show you what's gonna happen now whenever we add in the reverse, so reverses their rate in place. The first Evelyn becomes the last element on in the sorting order, so let's just show you how that works. So now we've got numeric sor first and then it does it by the value of the string values so that we've got new items up. Her case comes before the Boolean value, and then we've got the lower case alphabetically. And then here it's inverted where we started with the lower case alphabetically, reverse, alphabetical. And then it goes to the Boolean value. Then it goes to upper case alphabetical reversed again. So said would be the starting point and then it ends up with in America. And that's how you can really would start working with the rays and you can see the real power between these arrays and so, keeping in mind that once you reversed and sorted them differently than all of these functions that we've been doing earlier, where we're slicing, displacing and setting index points and so on, all of this is gonna be different. Because now our order of the items is different and their indexes are all different and updated, and this is ah, rays are really do serve on extremely important purpose when you're writing out your javascript and applying your javascript logic, because it really does give you the opportunity to work with that data in place and make some dynamic returned values just by using by having those values within the array and then working with them and manipulating them, and all of this is going to become more evident. And the need and the usefulness of working with your data and these types of formats is gonna become more evident on when we start looking at conditional statements and loops and so on. So these air and functions as well that are built in and provide us a whole bunch more functionality within our JavaScript code, and all of that is coming up in the next set of lessons. 11. 12 Introduction to Functions: in this lesson, we're going to be looking at functions and functions are a crucial part of learning and understanding JavaScript. And what functions do is they allow you to execute a block of code or pre defined block of code, so essentially allows you to much like variables where we hold some information functions work similar to that which gives us a value that we can input. And then we could render out some pre defined set of coding. So it's kind of like a variable, but for coding. So we're gonna look at why we need functions, different types of functions, how functions work, differences between scope, global scope and local scope, passing arguments and returning values. So let's open up her editor and start creating some functions. So let's create a function so very sick. Function is defined by the word function, and this is one of those reserved words within javascript that you can't uses a variable name eso function, and then we need to give the function a name so much like what we're doing with variables. We need to give it some way toe, identify it within the rest of our code. So in this case, I'm just calling my fun and we do the rounded brackets and then we do curly brackets and then within the curly brackets, this is where we run an ad that execute herbal court. So within here we've been working with Console Log, and I'm just going to show you what happens when we run the function. So let's open up. Let's get out of the functions. So the function itself this is that self contained code within the function. And now I can initiate this code at any point within the rest of my JavaScript simply by calling over to my fund. And I can actually do it multiple times and have that code executed out multiple times. So let's take a look at our editor, and we see that console log is executing out. Hello, Hello, hello and we see the line of code is the second line of code, so it's surrendering all of those out within the function, so that's really nice and useful. But actually functions can extend quite a bit further, and they could do quite a bit more. So let's say, for instance, we wanted to set a value for the function. So this is probably the simplest example of a function. But let's take this one step further and we're gonna bring it down here, and I'm gonna create another function. But this function is actually gonna pass over some information. So if I've got a variable of X, I've got a value of five on it. Now I'm going to create a function. So I'm gonna call this one my fun to And then within those rounded brackets, I'm gonna pass over a parameter or value. So in this case, maybe I can pass over a value of hello. Or maybe we'll just do it numeric. So either or it could be an integer could be a string. So let's pass over a value of seven and see what happens now. So within the function, we no need to create a function. So my function and just got a name it the same as what I'm calling it. So my fund to and in this case, what I want to do is I want to pick up this value. It's being passed as the argument. So I need to define a variable that's gonna hold that value while it's being used within the function. So let's take variable container of A. So when we initiate the my fun two with the value argument of seven, we're gonna pick that up and a is now gonna hold the value of seven. And you're gonna be able to see that within the console log. We're gonna output the value of a and I'm actually going to do a few more of these functions just so that you can get a better idea of exactly what's happening. And maybe even this one can be a strength. So to do something even different. So let's take a look at this now, and we're gonna see what happens and what gets output. So we see that we get 7 17 Hello, world. And what's happening here is that my fund to is passing over this value and a now holds in that value that was passed through, and now we can do something with it. We can execute it out, and we can make something happen. So let's take a look at this a little bit more and create value for so let's create a variable in here, and we're going to give it a value variable. So variable b and we'll take the value of eight. And we're gonna add 100 or 1100 to it, and we're gonna console, log out the value of B. So now let's take a look at this. So what do you think is gonna happen here? We see that we've got taking the functions one step further where we're passing in all of this dynamic content Ides, depending on which line of code and all we have to do is create that variable value in there and within the function itself. We're picking up that argument, riding 100 to it, and we're out putting within that console. So we know that what happens is that it runs to that function. It treats it as a variable, and it puts the content that's being placed in there. And the really interesting thing about it is that we can have a number of different variables so I can pass over a number of values and I can pick up all of those values within my function. So now I've got a number of values. I can simply add those together and we can take another look at this. And now we see that we've got all of those values. Air added together, really, truly does become fairly powerful and gives us the ability to create some dynamic return values and dynamic capability. And also now we can also take this another step further. And I could go Variable d is equal to maybe the my fun too. And now, variable d console log that variable de out and we're going to show you that now we're gonna hold this value of what's being passed in here. So maybe what I can do is I'll add into strings and we'll see that what happens with strings. So what happens here is that we get a value of hello world. But we noticed that Number seven is logging out, its logging out a value of undefined. So this means that we're actually doing the calculation. But we're not returning back any value. And this is something else that we can do within functions is that we have to We have the ability to return to do some calculations. Teoh do some run through some code, and we also have the ability to return most values back out, so I'm gonna show you how that works. So now we're actually going to return the value, So watch the undefined there. And now it holds the value of hello world. So we're able to run a set of code here, passing some of values, do something with those values and return those values back, assign it to a variable. And then, of course, we can utilize this variable within our JavaScript. So we see the beginnings off quite a lot that we can do with functions, and we see that there's a lot of power to functions and there's quite a lot that we can do with, Um so the next lesson we're gonna look deeper into functions and I'm gonna show you some more really neat things that come along with functions and something that you can look at when you're creating your logic for your applications. So it's coming up in the next lesson. 12. 13 Local Global Variables in functions: in the previous lesson. We looked out quite a bit that we can do with functions, and we're also going to cover in this lesson variable scope and global and local scope of values and variables. So what does that mean? Let's open up our editor and let's take a look at the function and the way that's created, created in the way that's operating. So we see here that with within the function so we call over the function we've got a console log of because now D is holding the value that's being returned from the function. But the value that we're setting in here, we're setting a brand new variable called B, and we're making a calculation in there, and we're using this variable locally within this function. So what do you think happens if instead of consul log D I console log Be now. Now, notice that I'm not saying that value of be anywhere, but I am accessing it over here, and I'm actually gonna throw in one other thing into this. This formula here that we have I'm gonna throw in the value of X. So no, it's that the X is being defined outside of the function and two questions for you. Are we gonna be able to see the value of X within the function? And are we going to see the value of be outside of the function? So what do you think is gonna happen here? So let's take a look and refresh your browser and we see that we get this Hello, World five. And then when it comes to back toe line seven, what's trying to console log? It would be It's getting B is not defined because we haven't declared be. And this is how global and local scope work is that essentially, when we're creating ah, variable within a function, we have access to it on Lee within that function. But when we declare a variable outside of the functions such as over here, we've got hello world five being output within the console, we see that we actually have access toe acts. So these values here, outside of the function, these air globally available, so they're going to be available within the function. But of course, if I set a value of X within that function, so they declare a brain, you variable for X and I give it a value of 10 or something like that. We're going to see that now that is gonna take precedence over the global value because that one's contained within that function. So this is really something to consider and think about when you're doing your calculations within your functions to make sure that you're keeping your global values and any variables that are using within the function there contained Onley within that function so you can access them outside. Eso always keep that in mind. You're returning that value, you do your calculation. You returned the value back and you could utilise that returned value within the rest of your JavaScript. But you can't have access to the value of B because this is only locally within the function, and that's what the differences eso, if we were to go back over here, would technically have to declare be in order to be able to utilize it within our script. So let's take a look at that that should fix that error. So now we're out putting the local value of X within our function, and if I was to comment the suit, then we would again default back to the global value, and that's what would be output within the console, and we can see that within the outputs here. 13. 15 Ternary Comparison: this lesson. I want to look at JavaScript operators. So we had earlier looked at arithmetic Earth Matic JavaScript operators. So plus minus multiplication division. We've also looked briefly at adding, and I'm gonna show you this one here. So this is a short arithmetic s. So this is the same thing. If I was to go over and if I had a variable of X And if I did X plus plus so that essentially what that would do is that would advent one value two x And I'll show you how that looks when the consul logged out. And we can also do the in verse of that and do X minus minus and Consul log x once again. So So take a look at that when we refresh it. So X increments by one now is equal to six, and decreases by one is equal to five. So this is just a shorthand way of doing an increment and, uh, debt subtraction of one. That's a short arithmetic. So we also have what's known as comparison operators. So we are doing something where we've got this equal sign. So let's open that up and take a look at this. So we've got thes thes ones where it's an equal sign. So this is where we're assigning the values. But we can also do a comparison to check to see if the value is actually true. And this is the beginnings of thinking of what are conditional statements look like. So let's create another variable here, and I'm gonna do variable a and I'm gonna equal it too. And we're gonna have a condition here. So this is gonna be an example of Ah, Tirana re operator. So basically, this is where we've got a conditional operator that's lines a value based on a condition. So the very value of A is gonna be related to what the value of this condition is. So let's take a look at X, and we're going to check to see if X is less than 10 than so. If X is less than 10 then we'll say low number. And if it's not, then we're going to say by number. Well, uh, proc use that so that really stands out. So now we're just gonna do console log, and so your value of a let's take a look at this and see what output we get here. So what do you think is gonna happen here once the JavaScript hits? This statement is got this condition here. So it's setting the value of a and it's gonna equal this value depending on what happens with this condition. And then over here, it's got what it's going to return back according to that condition. So you see that low number is returned. So if we were to increment this to 55 run it again, we see we get high number returned. So this is a very basic weight of doing a conditional statement. And it's very straightforward and laid out in a way that just makes sense so you could have any number of different conditions. There's different comparison types. We can also do these comparison operators so we can see if X is equal to, and we use to equal signs to check to see if it's equal to the value. Sometimes you might see actually three equal signs And what three equal signs means Is that where checking that for the type as well, so that 3rd 1 there indicates that we're looking for the type, and when I say tight. Let me show you what what we mean by that. So I'm gonna set variable off. Why? And I'm going to give this Why value a string value of 55. So when it comes over here and we want to see if X is equal toe, why and eso We're gonna say same value if it is and just different if it isn't. And I'm also gonna do one for B and I'm gonna do the same thing here. But I'm going to say Look for the same type Amber, Consul aga the value be so same type and value. So then it's absolutely the scene eso we need can check to see if it's absolutely the same . So what do you think is gonna happen here s o the first value for a eyes. They're going to say same value is they're going to say different. And then the second value for B is it gonna say same valid type and value or is it gonna say different? What do you think is gonna happen when we look in the console? So we see that we've got same value and then we've got different because they are different types because this is America and this is string type. So the tight is the 3rd 1 there. We can also check to see if it's not equal to and the type is an equal to So this is the not equal to sign. So of course we have to change those cause that's the return. Values are gonna make a lot of sense. But we see that what's happening now is that this condition is being true. So this 1st 1 here So the 1st 1 is a true value, and then the 2nd 1 is if the value is false and this is what gets returned back on the condition. So if this statement here is true, then we get the first value. If it's false, we get the second value. So now that we've added in this this explanation mark, which is indicative of no equal to so we see X is not equal toe y eso, we're not looking at the type, So the value here is being returned as true eso. Maybe this would make more sense where we could just say true, true, and then this one would be false. And we just show you how this is gonna work. So now we're gonna get that X is not equal toe. Why? So that's gonna be returned back, as true or it's gonna actually be false. Sorry, s O X is not gonna be a goto. Why? But X type is not gonna be equal toe y type and then that's gonna return back. True. So let's check the sense we do get false. We get through there and then we also have that whole collection of equal to an equal to less than so I could do. X is greater than or equal to. We could do. X is less than or equal to and so on. And then depending on if the value of true or not is returned than this is what the other put for the variable that were adding this statement to is gonna be now assigned those new values too. Essentially, these comparison statements it's just a matter of applying logic, taking a look at the different values that you're working too with, and seeing what the result is going to be and even take this one step further and we can add in logical operators so we could add in something like and so this is gonna look for two statements. It's going to see if X is equal toe. Why? And it's also going to check to see if X is greater than Or maybe just leave it at greater than why. And this. In fact, this statement here could never be true, because the fact is that if X is equal to why it wouldn't be greater than why. Let's take a look at that, and we see that we're always returning back false no matter what, because these conditions can never be met. So also we can use. Or so now it's gonna look to see if X is equal toe. Why or effects is actually greater than why it's actually not looking at the type. So keep that in mind. Value is being returned back as true eso. Now, if we changed the value of X to be greater than why we're going to see once again, that turns back true. So this is the Terran Eri operator, so going to write that it and it returns back either the value untrue or the value on false . So let's look deeper into comparisons and look at conditions switches, so all of this is coming up in the next set of lessons. 14. 16 Conditional Statements: the comparisons in the last lesson are pretty good if you just want to return back string values depending on what happens with this condition if it gets met or not. But what if you wanted to go a little bit further and actually execute some code depending on a condition and this is where conditional statements come in and this gives you the ability to set a value so we could do a check of the condition by using if and we could do the same thing as we're doing? Appears the same type of condition, same type of idea. But we execute some code with that so we could do something where we've got a variable. So let's try a variable of see. It's just a clear see for now. And I could say something like, If X is equal toe, why C is equal to equal to true. I'm going to do it in that line. The same lines is what we've got up here. And then I'm gonna have a consul message out here of the value of C, and you're probably looking at this and saying OK, well, if it's true, that returns back this But what happens if this condition isn't true? Where do we find the false? So this is where we can add in else and we can save C is equal to false if it's not true, which makes sense when you read through it and we see that the value is false. So it's essentially doing the same thing that we've got over here. So if I removed attitude and if we refresh that, that's doing the same thing that we've got happening over here. But of course this is a lot longer, and typically, if you just walk for a term back a string value, if you want to update it, then you could do it this way. But let's take this now a little bit further and add something so we could do something like X and we can equal X plus 5000 and then maybe we can do that check again and really begin to build out all of these different conditions so we can have this condition now and now X is gonna equal acts plus five. Thousands were executing some code, and we're getting some more dynamic capabilities, depending on if a condition is met or not, so we can increase X and we can do any number of different functionalities here as well. So we can do our consul log and it can see wow, access is not through or exes true or equal to. So we could do something like that. We can output in the consul. Let's update X. They're rude goat and refresh it so we can see that we can do any number, execute any block of code, and we can get really complex with this as well. And there's also one other thing we can do as well. So we can say we can check to see if these values are true. And I can also add in another if condition here, so I can add in another one that will say else if and here we can do another check to see if a condition is being met. So just add in the condition there that's going to beautify that so we can see it a little bit better. And let's take this one. We're gonna see if X is greater than why. Then we're gonna say output something here and beautify that again, eh? So it's just a function within within brackets. And here we're going to update the console that to see X is for either of that. Why? So now we have some real logic that's being applied. We're going to run through, and we're going to see if X is equal to why it's absolutely even. The type is equivalent. Then we're going to run this. And if this condition isn't come doesn't come up true, then we're gonna move on to the next one, and it's gonna check to see if X is greater than why. And if it is, then it's gonna output. Whatever the value for this set of code is gets returned. And if none of these come out true, that's finally going to get to the last one. And if none of them are true that it's gonna come back as false. And let's refresh that and we see that we get returned back as false and this is because the types air different. So we're looking for the comparison of the types, and we're not matching that. So that's what's returning back false. So we could also see that if X was greater than why so if X was 5 75 Let's take a look now and see what happens. We see X is greater than why and we're actually not define anything for C. So we could add that in swell and have a definition for C. And we've got X is greater than why. So in the next lesson, we're gonna look at even more options here. If we've got multiple possibilities eso you could build out thes l l statements. But there's also an option to do a switch so we can look for a particular value in a variable and output conditions, depending on what the value is and these air what switches are. And I'm gonna look at those we're going, take a look at those within the next lesson, so that's coming up. 15. 17 Switch Statements: in this lesson, We're gonna look at switch statements. So previously we looked at conditions and we saw really how we can apply some really nice logic and gets the output that we're looking for. So this is gonna work similar, but it's going to give us if we've got a lot more options so initiated by switch. And here we add in what the expression is. So expression is going to be a value that we're gonna look for and we're gonna return content accordingly. So if the value of let's set a value for E equals five and we're gonna switch on E So we're gonna do case and we'll take a look to see if the value of E is equal to four than this is what gets output. And maybe we're going to say something like so declare variable f or maybe variable F. And it's equal to zero. So let's start out with that and hearing and declare a variable value for F, and this is gonna be for so just write it out in a string value there, and we also have to make sure that we add in the brakes otherwise that I'll just keep running through all the different cases. So case five colon and Remesy F is equal to five and break that and maybe you can even copy that. So if the value if case is six, they were turned back six and solar and also with cases we can set a default. So if none of them returned back matching, we can just have a default return value. So the default we could say something like F is equal to not found. So let's take a look and see what actually gets returned. And then over here I should Consul log the value of F so that we can see that I've put within the console. So it's open that up, refresh it, and we see Consul loft is not found, so that should be updated to console log. So let me refresh that and we see we get a value of five. So if I was to change this to eight and refresh it so it goes to not found. And the interesting thing here is that I can change this to a string as well. Eso Aiken, do something over here. We have got case and I could just identify it. So these were just being numerically identified, so I can identify it by case. Hello, World Colon. And here we just give a value for F. So I'm gonna type in string. So when it does return back if f If the case of the switch value that needle there of e is equal to hello world than we're gonna break it at this point. So let's check this out now and refresh it. So we see that now we've got the output of string eso because it matches e is equivalent to hello world, and we're looking through all these different needles and it's not equal to four. And these air just integer values from numeric value. So they're not. They don't have quotes around him. But when it hits the matching value four e of Hello World that it knows what to do and it runs through and renders out this chunk of code until it hits break. And then it stops rendering out that code and leaves the switch statement and over here goes to the consul log and outputs the value of F and such how you use switch statement and picking the correct one that you want to use is depending on the scenario, So this one would be the most simplest. If you've just got some simple string values that you want to return here, these conditional if statements if you've got if else if you've got I said a code to run through on. And if you've got a really complex set of possibilities here that gets returned back for those values and you're looking for a particular value that has a needle, that you could take a look at that and return them back via the case. So if you know what values you should be expecting, then you could use switches. So again, depending on what type of logic that you're applying within your JavaScript is would be the one that you'd use. 16. 19 Introduction to looping: in this lesson, We're gonna look at loops. We're gonna look at the different types of loops that are available within JavaScript. And essentially, what loops do is they allow you to run or execute a block of code and checking to see if a condition is true. So there's a combination here of checking to see a comparison to see if something is true. And if it is true than at that point, then we can break the loop. So we need tohave, a Siris of different values that will be showing up within this loop where first of all, we've got that condition waiting to see if that condition is met. And also we have to have something dynamic happening where maybe we're incrementally a number in order to reach that condition and be able to break out of the loop. So always make sure when you are creating loops that you do have a way that it can actually break out of the loop. So let's take a look at the first. We're gonna look at the wild statement and we're gonna look to see if X and loops really do save you a lot of time. So if, for instance, you want to write out a bunch of values onto your Web page or if you wanted to increment or do some arithmetic, then it can run through and it can execute all of that, all of that information. So I'm gonna set a at one, and then I'm gonna increment values of a all the way through the loop while X. So this is how many times we actually want a loop through. So if I wanted to loop through 20 different times and while X is less than 20 then we could loop through and we could wait to hit that number. So let's do an increment here because I did say that we need a way to break out of the loop . So I'm gonna eat increments X there, and we also need to set a default value for X. So essentially a starting point for X. So essentially, what's gonna happen here is X is gonna increment, and until it reaches 20 once it reaches 20 that will break out of the loop. So we need to also add in something toe happen. So right now we've been using console log so we're going to do that the same thing here. So we're going to say a and and we just leave a space there and we'll show you the value of X. That's incremental and so on. So we could if we're only using that one variable. We could have used a there to contain that Lupus Well, but for instance, if you want to do quite a bit more with A than we could do it this way as well. So we could also increment a Or we could multiply a equals eight times five and then we could increment A. It is a whole bunch of things that we can do here. So this is just so that we have something different happening and something going on within those values. So you see that in orderto work that out, we see that a continues to increase would continue to multiply it by five. And remember, a is global eso were containing that value globally. So that's why we've got these drastic increases because every time we're hitting that loop , it's incremental. A. Until we reach a fairly large number there and we see the value of X starts at zero loops all the way through till 19. And once it hits this condition, so once ex hits a value of 20 the loop stops and we break out of it and the script will continue that block a code gets executed, but we can also do a do wild statement. So this works in a similar fashion, so this would be a do. And essentially it can do all of this. And while you can place the while at the end So this this one really isn't really that commonly used. You don't really see users doing this one very often. But let's just reset those values there. And I should be in issuing these with v a r eso declaring them there. Let's open up our browser, take a look and see what happens. So we've got essentially, we did run through that first wild loop and then we run through the do wild loop and essentially getting that same result. Eso We do have that ability Teoh do it either way, but most commonly you don't really see do. And while being used with in this fashion, you do see while being used within this type of format more often. So in the next lesson, we're gonna look at probably the most common way of looping, and we're gonna look at the four loop, so that's coming up in the next lesson. 17. 20 JavaScript For Loops: in this lesson. I want to cover off the four loop. So this is gonna be a way to actually loop through. Probably one of the best ways toe loop through some data. And I've brought back an array of brought back an object, and we're going to see how useful it is when we're able toe loop through all of these values. And I would put them so we've got her array first. And if we want to look through all of these items in the array, we can really easily do that. So let's take a look at rating up this condition. So this is four and then within that four, this is where we've got our parameters and just like what we're setting over here, we need to set a value for X, so X is equal to zero. So that's essentially our starting point or a starting number. We have toe also make our check to make sure while X so the condition here while X is less than 20 then we're gonna loop through all these values and then lastly, we need tohave X incremental ing in order to have actually something happening and where we can break out of that loop eventually. So let's take a look at this now in the console log eso We can also include all of this stuff that we had earlier, and we need to also set a value for any. So let's take a look and see what our output is. So refreshing it We've got that exact same output and let's actually take this one step further and bring together the arrays, so actually have re declared a there. So let's see what we can do with a eso. We noticed that with the arrays that were actually able toe output, get a length value. So it puts that length object so a length and this eso we starting at zero while X is less than the length of a and we're gonna increment X. So now we can get rid of some of this stuff here, and we can output it within this type of format. So a X so X is going to represent the index number within the array. We're gonna increment it till we hit the end of the ray and then we're going to stop that loop. So how do you think that this is gonna work out. And if you said we're gonna list of all the different items in the rate according to the index, you are correct. So this is our way to loop through all the different items in that re and see actually what's in the array. And of course, you can use four loops for pretty much anything. The same purposes is down here where if you wanna have looping through serious off values, doing, executing some cold and returning back some of those values and initiating that coat. But what happens when you want output the values of an object, so so we can easily put a raise. But the objects work differently because these values here, these air named values here. So we have to actually identify this property before we can actually get the value that's attached to its leaves. Paired values. And it's just not gonna work within this type of format because we're not able toe loop through them easily. So we've got actually another solution within job script in order to do that. And it's actually a lot more straightforward and simple than what we're looking at for even the arrays so we can take a look. And we've got all of these values and be so we can set a value of X and play set from what we're returning and be. And now we can use console log and we can console log out, be, and so X essentially is gonna hold the key value the index value eso we can also Consul Log X so we can get a better idea of exactly what's happening here. Because although this looks very similar to what's happening over here, let's check this out first in our browser and see if it actually works and see what's being returned here. So we do see, that s so the first part here. This was that array the second part here. So we've got f i R one sec 12 and th I and three. So we see that we're getting those paired values were getting the actual First we're getting the actual key value, that index value of X and it's being held in B. And when we're calling B with the object key of X, then we're able to return back the value let's associated with it and Essentially, this is the way that we can loop through objects, and it does look the same as what we're doing in the arrays. But it is different, and the concept here is different because we're returning back these key values and utilizing those to return back that object information from the paired values as we normally would do. And this is another good example off why we have different ways of returning back object information so that we can actually return back them as dynamic values. Whereas if we said something like if we were just calling for a value and B, we could console log out value from B and we could say something like B and then with the paired value like this, and we could return those back. So this is one way of doing it. And then the other way, of course, was with the brackets, and we could call it over to think ive value there. And this is essentially what the same thing that's happening within this four x in B loop here. So these thes concepts, these loops This is definitely something that it takes a little bit time. Teoh, get the hang off. But once you do, you're gonna find its essential part of building out your JavaScript logic and guns really , really useful, especially when you're dealing with objects and arrays. And we saw earlier how much power and a re in an object ties where we can contain these multiple values within them. 18. 22 Introduction to the Document Object Model: This is the part of javascript that I think we've all been waiting for. And this is where the exciting part of JavaScript comes in because we're gonna be able to actually tie our JavaScript to our HTML content, bring it all together and were able to create some dynamic interaction and get some user input and have users actually be ableto change and update what's being presented to them. So this is where the dawn comes in, and in this lesson, we're going to introduce you to the dorm, and we're talk about how we can access elements using the dawn and accessing all of that information that's contained within the dawn is a really good example of what the document object model is. So essentially, we've got our document. So this is our HTML document, and within every each to go document, we've got our route element, and then next we've got head. We've got some content here in the head here than we've got the body, and then we've got all of our elements that are contained within the body. So essentially, what the Dom is going to give us the ability to do is to perform actions on any one of these HTML elements, but we're also able to see the values contained within them. So let's go open up our editor here and we're gonna console log or a consul directory out the document object, and this actually gets created by the browser. And it contains all of your HTML content here, so we don't have a lot of HTML content within this page, but we're gonna be able to see it when we look into the dog. So let's open up our editor, our browser here, and we're gonna look through the dawn. So essentially, we've got a value for Earl. So this is contained within the dom. And we can really I easily put this out so we could do something like Consul log document and going back over here. So we've got a reference for you Are l. So this is an object value, and this gives us ability to actually access and utilise that value. So we saw that we can either pull out values or we can trigger off actions within the dog. So this was actually being output where we picked up the value from the dorm, brought into our JavaScript and now we're out putting in the console. So it's just that easy to pick up information. I could just as easily pick up the base. You are I, which is actually the same value here. I could pick up the character set that's being used. Any one of these values that we see here I can pick up and I can bring into my JavaScript, and from them on I could utilize it within my coat. So if we want to figure out what you or I were on or what domain were on, it's really easy to do. And we can pick that up within our JavaScript value. We can also see when the file was last modified, the known, the note name and so on. And over here, we've got all of this on about Abort on change on Click. So these are all the events, and these are all the different actions that users could take and we can pick up via the dawn. So all of this stuff here we can set event listeners that can listen for any one of these triggers that could trigger, often event and create that interactive capability within our JavaScript. So here we've got some mawr information ready state information we've even got We can pick up the title of the Web page and all of this available within the dawn. Yes, you can dig deeper into the contents of your HTML page. So you've got all of our HTML elements here. So if we go to all we've got essentially an array of 19 different items here, and we've got all of the different the different elements that are available within our Web page, and we can really easily access thumb, starting with zero all the way down to 8 to 18. So if you want to loop out all of the values here. So we saw that within the document we had all of the elements listed under all Let's go take a look at that and see what gets listed it. So we see that it gets listed it in an array format, and we've got access to actually everything all the different elements on our page, including the JavaScript. Interestingly enough, the javascript that we're actually looking at it in, and we've got a length value there, and we saw earlier how we can utilize that within a four loop. So let's set that out and set that up and listed all the values available and document all so X. So while X is less than document all and we're gonna lose the value of length there. So that was represented there as well and increment X so we can loop through all of these values. And maybe for now, we're just gonna console like all of the return values. So we're gonna do document all, and I put the value as it increments. And this way, when I refresh it, we see that we've got all of the contents nicely broken up that now we can utilize them within our JavaScript. So, you see, everything is nicely broken up there. We see all the different elements, and then we see the contents of those elements and the values and so on. And this is where we can actually dig deeper into what's available within the dom and start utilizing some of this amazing information that now we have access to via our JavaScript. So I'm gonna show you some really needs need stuff that you can do with the Dom in the upcoming lessons, including Mawr. Access to these default values that are just sitting there ready to use, as well as some of the really amazing actions that you can have to create that interactivity that all of the Web users are looking for these days. So all of this is coming up in the next settle lessons. 19. 23 Accessing Page Elements from JavaSCript: in the last lesson. We saw how much amazing stuff there's available within the dome, and we have access to it all using JavaScript. And now we can begin to tie together our Web page or HTML page together with her JavaScript and really do some really cool stuff. So let's start by being able to select our JavaScript and Apple, output it within our JavaScript and actually make some changes to the Web content that's being presented to the user. So we saw in the last lesson how we can use document document all to pull back all of that amazing information. So let's do take this one step further and let's select some content. So one of these elements from our Web page and maybe update some of it in some of the cord . That's some of the HTML that's sitting with inside of there. So this is actually gonna be really easy to do. You're gonna be amazed at how easy it is to select different elements from our Web page, and this is gonna work in a similar fashion. Teoh, when you're using CSS where we're identifying elements via the I D or ah, via class and so on. So we have some built in methods. Eso document. We always have to identify the document Object. This is what we want to use And we've got some built in methods that are available There s so we can return reference to the i d. So here we need to specify what the i d is. So let's pick up the element with the i d output. And first of all, let's set up a variable and we'll call it output and will pick up and hold the cup the contents of output within their And let's also let's do the consul directory and output. Now what we've got contained within the object called output. So when we refresh the page, we see we've got all of this information sitting in that one element output. So you see that we've got the same thing here we can get base you are I. So some of this information is repetitive, but we can also see things like we can see the child nodes s so you can see any child notes that are available within there were able to see class list and so on. So this was all the different classes that air their class name and so on. Client heights. We've got some really good information here, but we also see that we've got something called inter html inner text, and these again are gonna be object values. So you've got an i. D. We've got inner HTML and Inter text, and we can really easily update and change these. So let's make a change to output. And we're just gonna call it again by the identify her here so that inner html so I can just copy that owed, or it could rate that it. And here we can set our inner HTML. So let's just set it to hello world. Go back out to our web page and take a look at where it says nothing yet. And when we refresh it now, we've got a new value in their dynamically added the, uh, the dawn using JJ JavaScript eso we see that we've got in our text for the real difference between inter text and in HTML is that inner HTML allows us to add our our content as HTML content and inter text what Allah would create inner I would I would put it as actual regular text. So that's the difference there so that we see those HTML tags that we would be placing within their. So that's that. The two options there that we have for out putting and updating the content and really easy and straightforward we see within the inner HTML. It's actually not writing out the HTML tags, but the inner text is writing a note as just regular text, and we've got a whole bunch more information that we're gonna be definitely getting to in the upcoming lessons is a lot of really exciting stuff within here. 20. 24 Selecting Elements via JavaScript: in the previous lesson, we saw how we can get elements from our HTML page and utilize them within our within our JavaScript. So we also have some more options. So not every element has an i. D. We can also pick up list items and so on. So let's do that within this lesson, actually, how you can pick up the list items, list of items and this is gonna be looks the same but there is a different method or would pick up the elements via either the tag name. So we're gonna pick it up via the tag name this time. So get so we see that we've got some options here. Get element by i d. We can get element by name and we've got get element by a given tag name. So get elements by tag name and we see that there's this is plural ized because we know that with tags, there's a good possibility it's being used more than once. So this is going to get returned back as an array, so a seat now that we're getting all the list items and what I'm going to do first is will console log out all of those list items. So again we can take a better look and see what's being returned here. So when we refresh it, we see we've got an HTML collection here. So you've got to list items. We've got a length here, and we know that once we've got this length, we can loop through them using a loop and it put that content. So just like what we did down here, we can just simply loop through the lip different list items, and we cannot put that content. So updating this for instead of all it's gonna be list items documents. So actually, we need to get rid of that because we all we need is list items eso list items X and now we need to be more specific with what we want to do with, um so maybe we want to just put that inner html and let's just take a look and see what actually gets returned here. So save that's and let's check it out within our browser. So when we refresh it, we see that we actually can return back both of those list items. So we've got home. We've got about both listed out there, and this is how we can work with the different elements within our Web page. Eso there's also classes. I've got a class of clear here, and I'm going to just update some of these. So we've got some other items here that contain that same class. So I'm gonna just create a diff here, and it will hold the same value that's contained within clear. So just space that age and another give Let's save that and it's gonna beautify. That's it's more readable and let's take a loop through. And so list items were gonna do listing up the classes. So let's do variable class list and documents. It's always have to access that document object. And this time, let's do get suicidal. We had get element by I d get element by name, and we're also let now we're looking forget element by class name. So this one, it's actually not being listed here, but we can do get elements by class name and here we need to specify just as we did the list items are class name, which is clear and let slip through those now. So we got a class list there and let's slip through that. And let's add that into the consul there at the end. Now let's take a look and see what we're returning, so we do see that we're listing it out. It's actually listing it out as the HTML because it's including all that spacing and so on . So maybe it's better to listed it as inner text to make sure that that's upper case because it is case sensitive. There s o now weaken listed out as another DIV copyright. And we know that these air the contents of those classes. So a lot of different options to make your selection and find out all the different elements. Make those selections access those elements on your Web page. And lastly, there's actually another way as well to select it different elements on the page on this is using the query selector. Let's do another one here and they will call it Custom Element or something like that, and we're gonna do document. And this time we're gonna use the query selector. So we've got query selector, all or query selector, So query selector is going to return the first element that is the descendant that invokes So something in return back the 1st 1 that's gonna match the criteria and then in here we need to just specify what we're looking for. Let's take a look at this and see what actually gets returned back here. And maybe we need to let stuff that inner for inner text. So let's let's check this out in a browser. So what do you think is going to get returned back there and we can't actually read the property of inner text? Let's take a look at what's actually being returned back there if we're actually picking up any of the elements and we see that we're getting a null value that's being returned there , and the reason is that we're actually not being specific enough onto what we're looking for . So if we're looking for a class we need to specify as such, so we see that it's a div clear or we could be even more specific and actually search for it. Give clear s. So we have to be specific, just as we would with see, assess and specifying returning back those elements. So query selector all so this is going to return back a number of elements. So maybe I just put it s there at the end, and we're going to search for the class of clear and see what we get returned back now. So I refresh it. I get back to notes. I've got the div. I've got the footer. So now I would have to loop through them, Just does what I did before and then return back those values. So let's update this US. We're gonna do X again. Class list in her text Should we don't have that spacing in there. And now let's check it and see what we gets returned back in our console. So again we get that another we get the copyright eso both of those air getting returned back in the node list. And this is how we make all of our selections picking out the different elements that now we want to utilize and have access to within our JavaScript. And this is a really important first step because being able to identify the elements and bring them into your JavaScript is the first step in making them functional, interactive, being ableto update them and so on. So we could just as easily just as we're consul logging this out, we could say something like in her text equals changed or something like that. And you just see really, how powerful this can be. So instead of actually out putting in our console, we can actually update the actual content on our Web page. And now, if I go to inspect that element, we see that element has actually been changed, even though if we go to the view source, we see that we'd still have our initial values there within the source. But when the browser renders that I would, it hits the JavaScript and the JavaScript interacts with the dom and makes all of those updates. So the next lesson we're gonna look at some really cool stuff that we could do with the Dom Eso. Now we've seen that there's it's very powerful, and there's a lot we can do with it, and there is even more we can do with it. So that's all coming up in the next set of lessons 21. 26 Updating CSS with JavaScript: in this lesson. I want to show you how we can use JavaScript to update our CSS on our HTML Web page. So we already have a Web page and we've got some basic elements here. And let's see, we want to update the footer, update that background color of the footer and make our selection and maybe change the font color as well. So let's take a look at JavaScript and see how we can accomplish that. So the first thing that we need to do is identify that element. So we're gonna do document and we have a number of different ways to access it. So we could give it a night D and so on. Or we could just use query selector. So again, depending on how your structuring your classes, your ideas and so on, sometimes it's easier to just add in that i d and get element by i d. But in this case, I think that we can go with query selector because this is probably gonna be one of the easiest ways would not have to do any updating to the HTML. So it's do query, selector and in this case, were doing footer footer is the tag and it's got the class of clear. So now that we've selected that element, so just take a quick look, make sure that we've selected the right element. We can update the style of that element s so we can actually return this value back. So, first of all, let's just go into the console log double check that we've picked up that correct element and see actually what's contained within the style. So when I refresh it into the console, so Footer is not actually defined. So let's go back into our code here and take a better look and see why we're not able to pick that up. Of course, I forgot the brackets there, so that was the reason that it's not able to identify it because we got a bracket around it . So now let's go back in here and we can see that we've picked up all of this information for styling eso. Quite a lot of information. There's a list over here at w three dot org's. It's the same thing here, the full list of all available styling values and how you can apply styling so we see that we've got really a lot of information here. We can set things like the background, color and salon. So maybe let's just take that one and update that background color. So a copy paste it and do some copy and pasting. Here s Oh, we've got that entire object I know it's a very long set of object values here, so we've got a document were doing query selector, and then we're settling the style value off that object that's being returned and now background color. And now, at the end of this, we can specify and we can say something like Yellow. And now let's open up our Web page and see what happens here to the footer, and we see that we got this style of yellow that's being added in when I open up my Web deaf tools, I say, I've got a background of yellow that's been added him. So it's is easy is that to make a selection and update any of the styling there, And as you can see once again, there's a whole bunch of stuff that we can do here. We can update the colors, the front, the font colors as well, we can add in margins, so anything you can think of using HTML we can add those in a swell. So if we want to do something like margin top or something, we can really easily do the same thing here where we document margin top. And here we can specify the number of picks that we want to move it. 25 picks margin top tobacco refreshed. The page we see now are element. Here are element here has a margin of 25 picks. It's been added him, and this is all dynamically done through JavaScript. And of course, we can really shorten this by creating a variable that holds that value there so we could do variable footer. I just do that lower case footer value. And let's just put this object in here. And then now all we need to do is do foot or value their foot or value there and foot or value there, and it's gonna be the same value, so it's gonna be the same thing. It's open up our browser, just a double check, and it is the same effect there. So there are also different ways to set thes thes properties of style properties. So we can also do something like so instead of adding it in there so that we have that same object that we can work with, So footer value s so this is the object, the basic object. And we also have another option here. We can set attributes so it adds, and you attributes or changes the value of an existing attributes by a specified value. And this actually gives us the ability to specify multiple values within style and, of course, other attributes as well. So it's going to make sure that we quote around it to be specific. Teoh what attributes we want to set. So that's the first property there. The 2nd 1 is, if you want to do something like fought size or something like that s so we can specify the font size and lets the color a swell so color and will change the color to be read. And to save that end of the statement there with the cold in. And now let's see what happens. So we see that now we've got access to color font size. We've updated those as well within that element and we could just as easily continue to add in additional ones as needed. So just separated by the semi colon so we could do something like background color and so on so I could add in the background color yellow here, and that would give us the ability to remove these ones out. Just cut those ones down there and we can add in that background color so we've got the background color there, but it's on undefined property name, so we need to make sure that we're defining our background color in the proper format. So jump back into her coat there, and actually, background color is gonna be dash color there like this. Let's take a look at this now, and this time we got that rate. So the background color is a dash color there, so there are different ways to access it, using the attributes, setting the different style attributes or just accessing the style directly. So either way, this gives you options to update your CSS. As long as you pick out the correct element, add in the correct styling options on and make those updates within what the content that's being presented to your user. So the next several lessons we're gonna show you some even mawr. Cool stuff you can do with the dome, and that's all coming up. 22. 28 JavaScript Events: in this lesson, I'm gonna show you how we can listen for events. So this basically means when the user takes some kind of action on our website, the website can respond. So you might have seen before that within html weaken set within any element, we can set attributes such as on Click. So an event listener and we can specify some kind of event toe happen. So let's let's just update the current inner HTML of this s o. There's a number of different ways that we can do this and we're gonna tie it into our JavaScript. So let's fire off a function, whatever this gets clicked. And then within this function, then we're going to do something to that inner each to Mel of the element that was currently activated and currently clicked. So let's create a function, and we're gonna call the function change, change me and pass over the object of this s O. This is referring to the current element on the contents contained within it. And I can also do the same thing here for this list item. And of course, we're gonna be updating this a swell. So currently there are different ways to add these event listeners, and this isn't probably the best way to do it. But this is just a quickly illustrate that we can add this functionality within this type of format as well. So now we just need to create that function, and here we're gonna pass over that object information, and we can console log out whatever is contained within E. So whenever it gets clicked, we can console, log that out, and we can also change that inner HTML to clicked. Let's take a look and see what happens now. So these are our list items will see when we click it. We get the the value there of this get passed over, and we can immediately change an update that styling whenever it gets clicked and actually should Mrs Styling. I should said the inner HTML. But yes, we can, of course, update the styling as well because we've got all of that object information so we could do something like e style and do background color. So we've got a background color there, and maybe whenever they get clicked, we want to shift them over to read and so on. So let's check this out. Now, whenever it gets clicked, it goes red. And now let's take this one step further and just do a conditional statement. So if this one is equal to read than maybe we're gonna change it to something else. So if it's equal to read, then we're gonna change this one too blue a blue and otherwise we're gonna do else. And then this is where we're actually unchanging Tourette. So just update that just beautify it since a little bit easier to read. So what you think is gonna happen here? Eso We're doing quite a few things here where we're taking in that element. Information s over, Consul. Logging it out so we don't really need to utilize that. We're checking to see the inner HTML when it got clicked. Eso we're updating that and we're also updating that background color to read or to blue, depending on what happened so we could even do something like switching it to click and unclipped or something like that. So let's see what happens now. So we're gonna be ableto actually toggle these buttons and you can see that now we've created some really nice user interaction and user functionality. Whatever the users clicking on, these were changing the color or changing inter text and so on. So quite a lot that we can do just by adding in some of this JavaScript functionality and combining what we can information that we can get from the Dom and then access saying that those elements and updating their values and their properties. So in the next lesson, I'm gonna show you some additional ways that we can add in click events on by also signing different event listeners onto our elements within a Web page s so that we don't actually have to do it within our HTML because usually the best practices to try to keep everything separated. So to keep the event listeners that are set up within JavaScript all within JavaScript and as well. If you're using an external javascript file, then this could be functional across your entire website instead of just on that one Web page. So that's coming up in the next lesson. 23. 29 Event Listeners selecting elements: in this lesson. We wanted to remove out these event listeners from being within in line within the HTML and move it right within our JavaScript. So this is going to make those event listers a whole lot more functional and give us the ability to really utilise thes these different elements. Eso here we're looking at because we've got a list item so we can attach ideas to them as well, or could make that whole get element by i d and attach those event listeners in that type of format. Let's first start out by creating our selection here, and we're going to use the query selector to select it. That list item, Let's go ahead and create that one. So this is the list item, and we're going to create it using documents. So that's query selector. And from here, we're gonna pick out. So we've got an I d of nav. We've got on a Nord Erred list underneath there, and so we don't have any classes there. So this potentially could be an issue here making our selection. So maybe a better one for now might be. Get elements by Tag Ning and we're going to collect all the list items. So we're turning all of those back eso now we've we've been we've got essentially an object here with list item or which may be called list items containing all those list items. Eso Typically, if we only had one, we could add in that listener to it so we could do something like list items and we could pick up the 1st 1 in the list and we could add on click events to it. And this would be the same thing if we did get element by idea if we only had one. We get attached, the on click to it and fire off change me function, and immediately there might be some issues. Here s so let's take a look at this. And first I'm gonna remove this when I would over here off of the home. And let's see if this fires off. Now we click it and we still have functionality in that 2nd 1 But in the 1st 1 we actually don't see anything happening. So what do you think is happening here and why do you think it's not working? So we identify that list item we can also Consul, log this out to take a better look and make sure that we are actually passing a value. We can add in something in here as well to console, log out the value of E. So maybe that's a hint there as to what is the problem? Here s so let's see what happens now whenever we click that item. So we are clicking it. We are being able to pick it up, but we see it as a mouse event. So we're not actually getting that object information as we wanted to set the background property s o much like this one here. We still can do this because we're passing over that element information. So we're gonna make sure that we're also passing over that element information. And in order to do this, we can pass this over. But we have to set the function here, and we have to pass that information over. So we could. Typically, you might think that you could do something like this, but right now this isn't contained as anything. We don't have any value within this quite yet, So let's update this to work. So creating a function and wrapping that other function that gets called within this function. And so the idea is that now we've created an object that contains this, and now we can pass it over into the function as we were previously. So now when we click it, everything's working. So there's a roundabout way of getting around this and setting that up. And now all we would have to do is loop through all the different list items to make sure that we can pick them all up, and we can add all of that functionality. So let's take a look at that. Remove out these console logs and create our loop of all of our items are list items. So let's do a four loop here and we'll do X equals zero, and we're gonna do this while X is so you got value there for list items. So list items thought length, while the value of list items dot length is still greater than X, and then we're going to continue the loop and looping around and make sure that we add in this function within it. And now all we need to do is update this and let's check this out and see if this is actually gonna work. So now we've added in that one and this one, and we've looked through all the all the different items in our list we've added in this event, listener to them. Eso we've got ability to remove it out of our HTML code. And this was the real objective here that we wanted to remove this out event listener, pass it into our JavaScript and utilize it within our job script and operated within that same functionality that we had. We had them in line the JavaScript in line with in our HTML code. So now we've got everything working the same way as before. And the really neat thing about it is if we add in a bunch of other list items, they're going to get that same built in functionality, so they're already ready to go on and doesn't matter how many we add in if we update our HTML are actual functionality is not going to get into interfered with. And that's a really good thing about adding it in with the JavaScript because it really makes it dynamic and makes your code a whole lot more flexible. So we're also gonna look at in the next lesson. So we looked at how we can add the's on clicks and it's a lot simpler if you've just got one list item here. So if I've got get element by i d So just gonna show you that as an example it's a variable output. And if we used document yet element by I d, this is gonna be a whole lot simpler. So I think I started out with a more complex version and work down from there. But that's okay, So get element by i d. And here all we have to do is add that on click event. So maybe for this one, we're gonna do a different event here. And as you can see, we've got a whole bunch of them here. So maybe as we move mouse over, then we're gonna fire off that function s so we can really do that Same functionality. Here s so we've got the on mouse over and we can fire off an event there within that object so we don't actually even have to include a variable there. Eso we've got that on mouse over and we can fire off a function here for that. So every time it we mouse over. So we're just Consul. Log out just to make sure that we're getting some content here and we've got some information here, so let's check this out. And now whenever we're moving over it, we're actually getting that value there. So everything looks pretty good and ready to go. Eso now we can do this. Maybe something similar to what we did down here, where we check to see what the value of this is so we can do this style. And if it's read and we change it to blue and we don't need these ones here just quickly beautify this, make it look a little bit more readable and presentable. And let's check this out now and see if this works. So now, whenever we hover over it, we get this blinking effect and definitely a whole lot easier to add these event listeners . If I'm only dealing with one element as opposed to multiple elements that could dynamically change. So those air that just the two ways on. Of course, you've got a lot of options here as event listeners here you can see a full list of them Whenever you open up, you're dawn on any element and you can find it. More information about the different options here, the mouse over on so on and click and the most movements are probably some of the more common ones that are used within Web page development. So the next lesson we're gonna look at even more options here with event listeners and so on, so it's coming up. 24. 31 addEventListener More events trigger options: in the previous lesson, we looked at how we can add event listeners into our JavaScript. So there is actually other ways as well. So the on click method is limited in a way that you can only add one event listener per element eso you're not able to add additional ones. And there is a different needs for adding event listeners. So if you want a really simple event listener, you could always use these on clicks. But if you want to get more sophisticated in the event listeners, then you can add them as event listeners as well. Eso I'm gonna show you to do that in this lesson. Us. We've got our list items here so we can go ahead and keep that that source code there. And we've got our output as I d. So I'm gonna set that up as an object and get element by i D. So now I've selected both of those elements and hide hide this code here because we're not going to really need to use it. We're gonna use some of that stuff so we don't have to re type. It s So now let's add in event listeners we've got an element here. So I'm gonna start with the simple one first and select Element and do ad event listener. And what this does is it registers an event listener to a single target. And you also have the option to remove that listeners and so on. So you could also remove event listeners. Eso remove event listeners. We've also have the option to remove them so we can add them and remove them. So that's one of the good options of adding event listeners in this type of format because you can add and remove them eso the functioning event. They're not gonna be on clicks. They're just gonna be indicated as clicks. And then from here we would specify the function that we want to fire off. So in this case, let's copy at this function and maybe reuse the same function. So click and we just have that changed me value there and passing that over eso we've got our output at event listener, click and change me. So it's gonna fire off this function, and we're going to see that there is a problem here as well. So let's, uh, let's just take a look at this and see what happens. So what do you think the issue is gonna be here whenever I click on it. We still don't have that value off this, just like in the last lesson were limited. Teoh, how much information we can pass within the functions within this type of format. Eso we do have options to add them in in as a function directly within Here s o this way. We don't have to specify that we're listening at this week it just to function. Or we could fire off another function and tie that function together so we could do something like this. So function and then have the function actually fire off the value of this passing it in. And so I asked him to beautify that just to make sure that I got this correct. So the same thing that we had to do here earlier were we had to build out of function with the on click. We've got to do the same thing here If we want to pass the argument and past those values through. If you're not worried about passing through the values, then that's okay. You don't you don't need to worry about. You can just list of that function name. But because I am passing through an argument of this, then I want to make sure that I've got all of my bases covered here and that I'm able to utilize. It s so just out of. So just in case you're curious what actually is sitting in this? We see that it's the window object. So we've got all of the window information that actually gets passed in as this because it's the window that is the current object. Unless we're actually passing it through on the click event and the really nice thing about doing it in this way as well we can change it to mouse over, and we can have that same functionality for the mouse over. Same element there. So now whenever we're hovering over, we can see that that is firing off those that same that so just like what we did earlier. We need to loop through all the different events to be able to pick them up. Eso if we want to do the same thing where we've got a bunch of list items here and loop through them we could do the same thing and utilize that same functionality s. Oh, this is the list items going through the link on here. We would just need to add in as event listener. So the format is slightly different, but the idea is the same thing where we've got adding event listener, and then we've got our function there. So let's copy this suit and as we looped through them, probably should keep that part there, get rid of output. So add event listener and on mouse over, we're gonna fire off. That changed me function. And let's refresh that. So we do have an error there within code. So let's take a look at that. Beautify it and see what has happened here. So it looks like closing off this event listener properly. So just gonna make sure that I've got that rounded bracket in, there s So that was what was throwing it off. So now everything is working as before, so never were hovering over were able to toggle those colors and so on. So that's there's kind of annoying, so just remove that out. So this was the other option for event listeners and same thing with the previous option is that you've got so much capability of all these all this information on these on these different elements. And we can see here within the the actual deaf tools here that we've got our list items here and we can see that we've got some all of the different available event listeners that we can ads. We have mouse leave, mouse move, play on click and so on on wheel and just a whole bunch of information here that we can set any one of these event listeners onto any one of these elements and get that dynamic interactive effect. And we see that's well within the source code that those backgrounds are updating, as were hovering over them. 25. 33 What can you do with JavaScript: in the previous lessons, we've seen how much you can do with JavaScript and then bring in the dome how much power that adds into what's available with JavaScript. So combining all of that stuff together allowed us to do some really incredible things and pretty much anything that you can imagine. Applying the right logic, you're able to accomplish it with JavaScript and HTML and really making those dynamic interactive Web pages for users that are coming in. And now a lot of users are expecting toe, have that input and be able to interact with Web pages and Web content and getting that dynamic output come and break back to them as they interact with your Web page. And this is all accomplished and can be accomplished via JavaScript. Eso What I would advise for the next steps is to open up your editor and try out all the different variations of the source code. Check it out and see what you can make happen with your HTML and with your with your JavaScript. So open up something like code pen I owe. So I'm just adding in that html there, and I believe I have a little bit of CSS there, so I can add that in as well as we have it styled exactly as we have it within our Web page . Tidy that up, and now it's add in our JavaScript, our event, listeners, and tidy that up, and we can see that now we've got that exact same functionality. Everything's working as before within our JavaScript. Eso try a day to check it out and try out all the different event listeners so you can see here within our deaf tools so you can open up your death tools and go to any element, and you can see all of the different available, available event listeners. So there's ones like mouse down eso. You could just make sure that our mouths out most move, and so on. Eso some of these air relevant Teoh different elements as well. Eso it is worth while taking a look through and trying it out and seeing what you can make happen with their eso. A lot of them are, Ah, a lot of times were using these on clicks and so on. Also take the time to familiarize yourself with what's available within the dawn itself. So that you've got these different variables and methods that are sitting in here and accessing those and really beginning Teoh get a good feel for how to access all the different elements on your Web page and create that interaction, get value back from them and update that content and really make a dynamic and user friendly. And then bring in all of that JavaScript functionality that we had looked at earlier, where we had looked at how we can store object information. A raise really utilized that using functions and using conditions, applying some logic to your applications as you build them out and to scale them up, adding in additional pieces of logic and challenging yourself over and over again to see what you can make happen within your Web pages. And that's what Javascript is all about. It's about creating those really nice neat effects and updating your code and building on the code some base code starting out with some basic JavaScript code and then continued to build up on that until you've got a really nice, fine tuned application that's performing and doing all the amazing things that you wanted to do within your website, 26. 34 Popup Images using JavaScript: in this lesson. I want to show you some of the really neat things you can do with JavaScript. So we've got an example website here and within this website we noticed that we do have a few images and sometimes you might see that these images get resized really small. And if you want to make them clickable, for instance, and have them pop up on a larger on a larger area within your Web page, this is really easy to use. This type of functionality is really easy to create using JavaScript. So let's go ahead and open up our editor and scroll down. So I do have the images. I've got the images output here. I've added in class to some of these images eso I've added in a Lauren pixel, and I've got the class indicating where the image is positioned. So in order to make our selection of our content from her HTML page, we're gonna need a way to isolate out these images. So for this lesson, what I'm gonna do is I'm just gonna create and select on all the AMG times within the document. And if you are looking to be more specific. We can do it via class as well. But for now, we're going to set it up as working with all of the image tags. So this is gonna work on EMI any image. And if I add any additional images within my website, this is gonna work as well. So let's go ahead and go down to our JavaScript here at the bottom. And I'm gonna open up the display area here on the right hand side. Eso We cannot easily refresh it, and we can see the code as well as the content that's being output being displayed. So first thing that we need to do is create a list. So list of items are going to call this list items and it's what it's gonna contain. So I'm gonna use document, get elements by tag names. Let's get elements by tightening because there's a possibility that you've got more than one element that has that same tag name. So it's get elements by tag name. And here we need to specify what element or what tags we want to get. And we want to get content of these elements that have I am G as the tag. So what we can do now? At this point, we can console, log out all of the items within list items and just to show you that what we're able to return. So you have to go to the bigger one for this, and we'll just end to an inspect here, Consul. And we see we've got a collection of three images that are being returned because I've got three images on this particular Web page, so we are able to select the items properly. Now let's go back into our editor and we're gonna do a loop where we're gonna add in an event listener that's gonna listen on click. So let's do that. So four x equals zero X, while X is less than one. So within the list items we did have a numeric link there which told us how many items are within list items that ray list items. So now we know that whenever at while X is less than the value of the length of list items that we've got to continue through our loop, we gotta increment X and let's create some spacing there for this. So now what we can do is attach those event listeners. So this is list items and we have to list out items. So we're using X as our needle for the index. They're so list items X and I'm gonna set it for on click. So whenever anybody clicks, any of these list items were going to run this function, and we're going to specify the function. Here s we're not looking a link to an external function. We're just gonna write all of the function functionality within the list. Items on click event listener. So first of all, I'm gonna just put it into the console and it's gonna be really used to get that source information from the dorm again. So let's check this out now. Eso going back into our web page, we got some images here. Whenever we click on, the images were actually getting the path of those images. Some getting Loren pixel images. Eso They might vary these ones the place, hold it. They're not gonna vary. They're always gonna be the value that dimensions. So the with by the height. So that would see that we are getting those images here and now always to do is pop that up in a new window. It's a number of different options here, but I'm going to do a window open in order to pop up that information in a brand new window . And of course, we could do it within a div as well and so on. So if we wanted to, we could update particular div on her Web page. So maybe we can do that as well. Eso Let's open up and create a holder for that image. So going over here, maybe we want to put it under Hello world, the number of different spots that we can put it so we can put a holder there and Div and then we can write out that content holder. And now that we're getting all of that, that image path information, we can easily add that inter html Teoh coincide with the image values so we could do something like documents get element by i d. Select that element. Add the inner HTML and here we can specify what our inner HTML is, so we can really easily just kind of grabbed that and be specific there with it and we don't need the class. There's specifically and within here we just need to update that value that we're picking up so that this source so break out of our string. Copy this source. Place it in there. And now let's just see how this works out. So now whenever I click, we can see that now, this image is going to get whatever images being click here s O this is the way to do that . You can also do a pop up window. So, as I said, we can set it within our document here. Or I'm gonna just comment this one out and also police. I'm gonna dio the window object, so window open. And then we've got this as the source of the value of this source. We're going to open it as my image, so we need to give it a name. And then we've got some parameters here that we can set so we can set it as re sizable equal to yes, we can set a scroll bars, scroll bars. So, yes, that we can specify a width and a height. Let's pick a width of 800 pics, fight off 600 and there's a number of different parameters here that we can add in. But just let's let's check this out and see how this works now. So opening up our display area here somewhat probably need to refresh that. So now when I click it, we see that we got a brand new window that's opening up. And as I said with when we're using Loren Pixel, we're not always getting the exact same image, so they do very. And that's why they are varying. They're picking different images. But if I use this one, then we're going to get the exact same one. So we are just passing through that image path, placing it into the open window where over here we're placing into our holder HTML. It's a number of different options here, picking up that image and updating it and utilizing it in the way that we want to use it. So there are other. Option two is to get elements by class name and then loop through those in that way, we're not defining all of our images to have a click. This is the number of different customization is that you can add to this to really get the effects that you're looking for 27. 36 Mouse Event Listeners JavaScript: in the previous lessons, we have looked at what we can do with the dome. So this lesson we want to look at, how we can get that are actual X and Y coordinates. So whenever our mouse is actually moving over a particular section of our website or particular element, we want to be able to pick up the coordinates of the mouse. So I've created an element here called it output and also just below that. So I've got an X and A Y coordinate. So it's all ready to go to output some content using our output here. So here's the container. We've got a role here. So we've got some output here, and then I've got another div here with the value of X. So we want to actually place a value into why are coordinates here and get a new output value of where our mouse is located whenever we're over this element called output. So let's take a look at our JavaScript and scroll down to there and then down here is where we're gonna add that in so going to keep that one from the previous lesson where were re sizing images and this one. We're going to just set up a brand new value here, so put and equal it to documents. And this is just one element. So get element by I d the i d is output so picked out up into that container of output and also we're gonna need to also get elements. So let's take another look at this over here. And the challenge here is what I want to do is I actually want to output values in this blank div here. So what? The way that I want to do it is I don't want to add in any identify IRS here within this div. So it's going to make it a little bit more challenging within the JavaScript. So the challenge here is whenever we're moving over output, we want to detect it, and maybe we can update the background color and so on us. Whenever we're on top of it, maybe we can update the output background color, and whenever we're off of it, we can update that as well so that we know that there's some interaction and we know at that point that we're tracking, and then we also want to place a value within the DIV here of X and a value of the mouse. Coordinate why within that wife section, So we need to be able to identify those classes. So over here we're going to set an output for our value for the diff classes so we could just call it It's gonna call it Empty Div. But maybe let's just call it E Div And from here, we're gonna do it, Get elements by class name. So again, we need to specify document get. And so this time we want to select all of those elements, remember that it's elements by class name. So I got tied game there, so get elements by and we're going for class name and we need to specify the class name. So seal l dash excess dash six. So that picks up all of those elements that have that class name. And now we can identify those when we wanna output our coordinates of X and y. So let's add an event listener for on output. So any time the mouse is over output, this is what we want our function to fire off. So this is gonna be mouse move and skin equal to function. And then here we need to specify the function value. So we want to run. We want to run. Ah, function there whenever it fires off s. Oh, this one is gonna be We need to identify the particular coordinates here so we can do that by So we need to log the event information. So we're gonna just Consul, log it for now. Outs. Object called event. So this is all of the event information whenever it gets fired off. Remember, this is gonna be different than using this where we can use the value of this as well. And this is gonna be the current page X and PGE Y locations. So we can do this as well within the consul log, and we can do this and then we can select it. Our page X. We've got some values there that we can utilize. Teoh output are value within that inner HTML as well. So we've got Page X and page why and event information and I should actually just update this to the event information. So the event is gonna be event in face eso. It's basically it's an event that's an object that gets passed through whenever an event fires off. So let's let's take a look at this and we'll see how that turns out. So now we see that whenever we're moving over the mouse there, we see that were firing off the mouse event and we see that we've got a value for screen X screen. Why client? Ex client? Why? And so once you've got quite a lot of positioning information that comes along with every one of these most triggers. And we see if we open this up, you can see that we're looking at a position of X and we're looking at a position of why. And we've got screen X screen. Why page X page? Why? It's a lot of different values there. If we're looking for a value on Lee contained within this particular element, then we can use the X and the Y. If we want to use the page as entirety than we can use the page X page. Why so a number of different values here that we can return and utilize, So let's just work with the current page accent page. Why value and this is including wherever the scroll er is ending up. So now what we need to do is actually write those values into acts and rental. Why? So it's open up her editor and select eight those elements. So remember again, we don't have any identifies here for these elements. So we need to identify them within our JavaScript whenever we move around. Eso we've already given it. So we've got an object, he div and there's a number of items within E div. So we know that we've got two of them. So the 1st 1 is identified with zero and the 2nd 1 is gonna be identified with one and we know that each one of these objects, it's gonna have Children. So we're going to specify the Children of that object and we're not gonna look at the 1st 1 because the 1st 1 we look at is going to contain this value. So we're gonna have to Children the H one and the dibs and the same pattern here, each one and dibs. So we want to look at the second child which will have an index of one, and then we can specify that inner HTML and equal that inner html it to that event information. And we're going to do the same thing for that second div. Their child. One indicating that we want to index the second child items so that zero and one. So this is why we've got a 01 there and we want to specify this value, so these could be pretty much any value we want Eso This doesn't just currently just makes the most sense. So now when I refresh it, we can see whenever we're traveling over that particular element, we're updating the coordinates for X and Y simply by hovering over it. So we see that we've got our X value. Here's because we're pretty much over to the side of the screen. But remember, this is varying on the page X and page wine. So that's why whenever we're hitting pretty much close to just moving off of that that output area, we're getting about 18. And with why we're starting at such a large number because it's a scroll down value from the talk of the page. So one of the other things, too, that I wanted to add in here. So also on, instead of mouse move. I wanted to listen to output and have on Mohs. So when you see that we've got a number of different options here s so let's do on most believe eso This will fire off every time the user leaves the mouse where leaves the output area. And let's just simply update the background color too. This backgrounds color and let's set a background color off red. Every time it leaves, it'll go red. And I'm just looking at this and I did forget style there. So we're gonna do most leave. It's gonna go red. And how about when we're on top of it? So on mouse enters whenever we enter, so mouse enter, and we're going to style, background, color and do blue. So let's refresh this. So now whenever we're on top of it, it's blue. We see that we're doing the X and Y coordinates, and whenever we leave, it goes right. You can use this type of code functionality in a number of different ways. Eso whenever you've got those coordinates of X and y, you know roughly where the users positioned on this particular element. So let's say if you had an image I would know where the roughly positioned and you can also update the styles of the current element. You could update anything that you want within the page listening on these event listeners . That's how you work with most event listeners within using JavaScript.