Learn to Code JavaScript web designers and developers quick | Laurence Svekis | Skillshare

Learn to Code JavaScript web designers and developers quick

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
34 Lessons (3h 12m)
    • 1. Promo Video JavaScript Complete

      2:03
    • 2. 1 JavaScript Introduction Quick

      4:53
    • 3. 2 JavaScript Course Introduction to Resources

      2:53
    • 4. 3 How to use your Browser as an editor

      2:22
    • 5. 4 JavaScript How to add it to your website

      8:24
    • 6. 6 Customized User expereince with JavaScript

      5:09
    • 7. 8 JavaScript Variables and Debugging

      7:02
    • 8. 10 JavaScript how to create an array

      4:02
    • 9. 11 Working with JavaScript Arrays

      8:23
    • 10. 12 JavaScript Array functions

      8:39
    • 11. 14 JavaScript Objects in Action

      10:23
    • 12. 16 Introduction to JavaScript Functions

      8:34
    • 13. 18 JavaScript Document Object Model

      5:40
    • 14. 19 JavaScript accessing the DOM info

      9:30
    • 15. 20 JavaScript update element styling

      8:07
    • 16. 21 JavaScript DOM event listeners

      7:30
    • 17. 23 JavaScript Element selection plus

      7:33
    • 18. 25 How to create new elements using JavaScript

      3:52
    • 19. 26 JavaScript element children

      3:22
    • 20. 28 JavaScript operators dynamic updates

      5:57
    • 21. 29 JavaScript Operators ternary and logical

      6:30
    • 22. 31 Conditional Statements

      9:48
    • 23. 33 JavaScript Looping

      6:28
    • 24. 35 JavaScript Methods Math

      6:53
    • 25. 36 JavaScript parseInt

      4:18
    • 26. 38 JavaScript Date and Time

      4:36
    • 27. 39 Intro to JavaScript Objects

      2:37
    • 28. 40 JSON object Aray multiple items

      4:57
    • 29. 42 Create JSON

      2:01
    • 30. 43 JavaScript make AJAX call

      6:10
    • 31. 44 JavaScript AJAX parse as JavaScript Objects

      2:51
    • 32. 46 JavaScript For in Loop

      3:03
    • 33. 48 POST to Server AJAX

      4:03
    • 34. 49 Send data via AJAX to server

      3:33

About This Class

Learn to Code JavaScript web designers and developers quick
Quick Guide to learning JavaScript create more dynamic and interactive web content
JavaScript is the best starting point to learning how code works. Its in demand and the most popular programming language available today. With JavaScript you can jump write in and start creating right away. This course is designed to allow you to quickly start writing your own JavaScript code. No wasted time see how you can start with some simple code and develop really great projects.

JavaScript is everywhere, open the doors to the possibilities. It gives you the freedom to create and let your creations come to life. There is nothing better than seeing your ideas brought to life on your computer screen.

JavaScript is popular and also one of the easiest languages to start learning. There is nothing to install and no complex environments to configure. You already have the tools you need right on your computer to start creating JavaScript. Just a simple text editor and a browser, that's all you need to write JavaScript. JavaScript runs within you web browser, any browser!

JavaScript is powerful and you can really do a lot with a little bit of code. Its easy to add to your web pages.

This course is taught by an instructor with over 15 years of real world experience. Using JavaScript on a daily basis let us introduce you to the magic of JavaScript.

JavaScript allows you to create dynamic web interactions by selecting and manipulating elements on the page. You can customize the user experience with JavaScript. Other programming languages many times depend on JavaScript to deliver content to the user.

JavaScript is at the center of all things web, you will find that time and time again its comes back to knowing JavaScript.

Start exploring what you can do with JavaScript.

By the end of the course you will have the skills and know how to add JavaScript within you website.

I am here to help you learn how to create your own websites and ready to answer any questions you may have.

JavaScript is the most in demand skills, and learning how to use JavaScript will help to separate you from the crowd.

Want to know more, what are you waiting for take the first step. Join now to start learning how you too can create DYNAMIC and INTERACTIVE pages with JavaScript today.

Transcripts

1. Promo Video JavaScript Complete: JavaScript is the best starting point toe learning how code works. It's an in demand skill in the most popular programming language available today. With JavaScript, you can jump in right code and start creating things right away with JavaScript. This course is designed to allow you to quickly start writing your own jobs from no waste of time. See how you can start with some simple code and developed really green projects. JavaScript is everywhere. Opened the doors for the possibilities. It gives you the freedom to create and let your creations come to life. There's nothing better than seeing their ideas brought to light. JavaScript is popular and also one of the easiest languages to start learning. There's nothing to install, no complex environments to configure. You already have all the tools you need right on your computer to start creating jobs. Just a simple text entered our browser. That's all you need to write Java script. JavaScript runs within your Web browser. Any Web JavaScript is powerful, and you can really do a lot a little bit of cool. It's easy to add your Web pages. This course is taught by an instructor with over 15 years of real world Web development spirits using JavaScript on a daily basis. Let us introduce you to the magic of Java. JavaScript allows you to create dynamic Web interactions by selecting and manipulating elements on your page. You can customize the user experience with jobs. Other programming language is may depend on JavaScript to deliver content, so JavaScript is at the heart of it all. Job script of the center of all things. Well, you'll find that time and time again, it comes back to knowing and understanding how to utilize JavaScript. Start exploring what you could do with JavaScript. By the end of the course, you'll have the skills and know how. How toe JavaScript within your website. I'm here to help you learn to create your own websites and ready to answer any questions you may have. JavaScript is the most in demand. Skill and learning how to use JavaScript will have separate you from the crowd. Want to know more? What are you waiting for? Take the first step. Joined now to start learning how you too can create dynamic and interactive Web pages with Javascript today 2. 1 JavaScript Introduction Quick: welcome to our introduction to JavaScript course. Within this course, I'm going to be introducing you to how to write JavaScript code in order to make your websites dynamic and interactive. JavaScript is a really straightforward programming language. It's interpreted programming language, so that just means that all you need to run JavaScript is a browser because the browns were takes care of the rendering out of the JavaScript. So you don't need any complicated compilers or anything else. You can simply open a text editor, write some JavaScript open up in a browser, and it's ready to go and it gets rendered out within the Web page. My name is Lawrence, and I've been a Web developer for over 15 years, and I really enjoy working with JavaScript. And I want to also share my knowledge with you about JavaScript. Within this course, I've created this course to introduce students to JavaScript and help you use javascript more effectively within your Web projects. A lot of amazing things you can do with JavaScript, and I'm going to be introducing you how to use JavaScript within this course. Some of the crop ICS that we're going to cover our how to add JavaScript How to link to JavaScript files. Also policing JavaScript within your Web projects and overall, JavaScript, syntax How to do comments and JavaScript Semi Coghlan's White Space. We're also gonna look at communication. So, using things like alerts, console dialogue boxes and deaf tools in order to communicate back and forth between the source code and the developer, we're also gonna look at strings numbers. Boo leans so all kinds of different data types also how to store variables within a raise within objects and also just regular variables. So integers strings when it comes to a raise. There's a lot of things you can do with the rays, So we're gonna look at some built in functionality that's pre built within javascript that you can utilize when you're sorting your A raise and you're working with your raise. Now functions are right. The very heart of JavaScript. They allow you to write out and execute blocks of code simply by calling over to the function name were also able to pass arguments, return values. There's also gonna be global scope, local scope and overall, how functions work and how you need need them and how you can utilize them within your code . Also, another really important part of JavaScript is understanding how the document object model works how the Dom works. So the dorm is essentially the HDL HTML elements within the Web page, and you can access any one of these elements using JavaScript and utilize them within your code. We're also going to look at just different ways of making selections of these elements. So either classes I DS also how to output JavaScript and how to update your HTML code via JavaScript, looking at forms and how forms are going to interact. And then there's also javascript operators. So these air these calculations, comparisons and logical operators that help you apply a logic and provide additional added functionality within JavaScript when it comes to conditions. This gives you another capability within JavaScript in order plight logic and so you can set up different types of statements. There's if statements else statements switch case. We're going to be covering all of these within this course. Then we're looking back at the Dom and Dom's events because the Dom is just so powerful and so exciting to use because it allows you to create all of this dynamic, amazing content for your users. You can attach event listeners such as on click mouse movement and a whole lot more. We're also gonna be covering loops now. Loops allow you to loop through blocks of code and apply conditions to those blocks of codes. Will be bringing together some of the earlier parts of this course together to start talking about some of the more advanced features within Java script. Also, we're gonna be looking at date math length and a whole lot more so all of this is going to be covered within this course. I've also included source code through it the course so that you, too, can take a look at the code added into your own browser and try it out for yourself and see what you can do with JavaScript. 3. 2 JavaScript Course Introduction to Resources: in this lesson, I'm going to be going over all the different tools that I'm gonna be using within this course in order to write JavaScript code. So one of the first things that you need to do is find an editor. If you already have an editor, then you can go ahead and open that up and use that throughout the lessons of the course. If you don't have an editor or if you're looking for a new editor, I'm gonna be using brackets within this course. So this is a free downloadable editor for brackets I Oh, it's an adobe product, and it's actually a pretty good editor. So if you are looking for something, then I do advice to check that out. If you're not looking too right within an editor than you can always go over to sites like Code Pen, I'll and this is just a website where you can type HTML code. You type CSS and you can type javascript and actually have it rendered. Oh, so whatever you're typing in here, we can see that immediately. On the right hand side, we get our preview rendered out, and this goes for CSS as well, so you can see whenever I make some changes here on the left hand side within this within the files, I get it propagated over here in the display area. And the good thing about it really neat thing about it is that works for JavaScript as well . So here we've got our JavaScript alert. And of course, we're gonna be looking at these in more detail. So another tool that I'm gonna be using within this course is the browser itself. And because JavaScript is an interpreted language, basically what that means is that you don't need to compile JavaScript in order to get it going, and all the tools that you need are based within the browser. So as long as you've got in html file that you've got some JavaScript in or if you've got a Js file, that's all you really need to get going. And the really good thing and really neat thing about chrome is it's got this Dev console, which is really gives you a lot of functionality where you can actually see content being output. You can see your HTML elements. We've got our console log, which we're gonna be using within our JavaScript communications also really powerful for debugging. And then we've got our sources here as well. And the really neat thing about sources here is you can actually hook up your files and you can start working on them. So if I wanted to open up this file here might just my index file and let's say I wanted to start typing into it. All I need to do is map that file system resource, and then I can set up and use that file and actually use the browser as an editor. So if you're interested in that, I'm gonna be doing a quick lesson in the next one, and then we're going to get started with writing or JavaScript. So it's coming up in the next lesson. 4. 3 How to use your Browser as an editor: this is going to be a quick lesson on how to actually use your chrome browser as an editor . And of course, this is a necessary in order to be able to write JavaScript. But I just want to demonstrate how I'm going to set this up. And as I'm gonna be using this throughout the course as well. So first thing that we do is open up our website in chrome and we see that we've got our website here. So all we need to do is open up her deaf tools. So, on a windows machine, you can do stew control shift. I you can right click anywhere you can do. Inspect. You also have the option here in the drop down menu to access the tools as well. The number of different ways to get to your Web Deaf Tools s. The first thing I want to do is I want to add my folder to the workspace s. We need to just select. And now we need to navigate to where our folder is on our computer. And once you've navigated to where this file is being held, so the main route root folder I just need to hit, allow, and then I can see I've got actually access to the file so I can make some changes to it. So I'm just going to write that typical hello world. And now I can actually save this document. And when I refresh it, we see that now we've got the changes. So it's just that easy to begin to start writing and creating some code within your browser . And that's how you set that up. Of course, we're gonna be using the browser for console, log and communication back and forth, and we can actually close off a lot of this. But this is gonna be useful as well when we're looking at the dawn. So essentially what the dawn is. So this is the document object model. And again, this is done through the browsers of what happens when the browser reads through the source court of your HTML and your CSS. And from that source court, it renders out your web page. But it also creates this document object model, which is essentially a tree. And within this tree, that's a tree of all the elements. And then within this tree of elements, you can use JavaScript in order to meet, manipulate, thes, interact with them and so on. And we're gonna be looking at how to do this in the upcoming lessons as well. That's all coming up in the next set of lessons. 5. 4 JavaScript How to add it to your website: There are a number of different ways that we can bring javascript into our web content. So one of the ways that I gonna illustrate is that we could actually bring JavaScript as essentially an attribute within our HTML page. So I'm going to just create Brand you div here, and so did is just gonna be our container here. So maybe I'll just call it my button or something like that. And we can add in JavaScript functionality to elements. So we've we want to create an on click listener and we want to show the alert. And of course, we're going to be looking at how on Click works later on in more detail eso Right now I'm typing out a typical javascript function, which is an alert. So these air, those pop up box is where it's gonna ask you to confirm it to continue with the script. So the idea here is that whenever this particular div gets clicked, so I'm just gonna put click me. So whenever this gets clicked than what's gonna happen is we're going to fire off this JavaScript function, and it's going to show up this alert box. So let's try the same. So when we refresh it, we click and we see that we're getting some errors. So it's a good thing that we do have our console open. So just initially, looking at this, can you see where the error is? And I can tell you it's actually gonna be right here, so we need to actually close off whatever. We're opening quotes and closing. We need to close those off. So that's what the error is gonna be. And the good thing about Chrome is that we've got this console log where we've got a list of all the errors and the line, though. The site, that's the file that's making the error. And we've got a listing there so we can always access them and start to work with them. So we know that that error happened in Line one of our hte index dot html, and that's correct. It happened within that on click there. So that's so. We work with debugging and detecting errors and issues, and one other thing to note here is the way that I'm doing the quotes here. So we see that within our HTML amusing double quotes on outside and I'm using single quotes on the inside here within JavaScript. And that's because if I used to double quote here than it would actually break out of this function and it would cause an error as well. So we need to make sure that we are alternating the quotes around and not breaking out of our default quotes. So the single quotes for one item and then the double quotes for the parent let's check this out and see if this one works. So now when we click it, we do see the hello. So this is just that built in functionality that's built right within JavaScript. And it allows us to call over this alert functionality and show a pop up window whenever we click this Div. So besides bringing in JavaScript right within the page, we can also bring javascript in similar to, as we do other elements in HTML. Let's create another HTML buttons so going to give a dead I d. And this time I'm gonna call it my button one. And I'm not gonna add in any JavaScript within the attributes of the element, and I'll do the same thing where we're gonna just right click me and it's also going to be a diff. And now I need to bring javascript into that it into this element and the way that we do that is through the script tags. So that's opening and closing script tags. So just like any other element in HTML and then the content within here, this could be javascript. Now, we wanna have that same functionality. We would get this alert popping up. So what I'm gonna do is I'm actually gonna attach what's called an event listener. And of course, we're gonna look at this in more detail as we go through the lesson. But essentially, what I'm doing here by typing and get element by I d. I'm looking through the dawn and I'm seeing if there's any elements that have the i. D my button one. And if they do, then I'm gonna touch on event to it. So it's gonna be event listener, and then I've got some property said I've got include here. So the listening that I'm gonna be doing is for Click, and if the click is activated, I'm gonna fire off a function. And of course, we're gonna look at this in upcoming lessons as well in more details, because functions air one of those core pieces of code that you need to be able to utilize when you're typing your JavaScript. Eso. Then within this function, we're going to fire off that alot, and maybe this time we'll do hello again. So once we save that, we're going to refresh the page. We've got our second click me button, and now when we click that, we fire off the JavaScript and notice that we don't have it within our HTML. And yet we still can produce that same functionality. And in addition to these two ways of bringing JavaScript, we've got another another way to bring JavaScript in. And that's just used in the script tag. But here replace a source, and now, within HTML five, we don't need to specify what type of source it is. Previously, we would have to indicate that it's JavaScript, but we don't need to specify that anymore. So if you are working with older browsers, you might need to specify. But with the newer browsers, you can just do it like this where we're linking over to script dot Js. So this is our JavaScript file and within here I can use that same functionality as I would within the script tags. So let's try this out, and I'm gonna just to button too, and copy this over, create an additional button. So I'm going to give it button to save that. And maybe so I can distinguish between all these buttons. I'm gonna have button click me one click me to click Me three So it's saved that and refresh the page. And one of the things with JavaScript Teoh to take note of is that JavaScript is rendered by the browser, which means that every time you make some changes to your JavaScript, you need to refresh the page in order for the browser toe. Have an opportunity to reload all of that code. So let's check this out and see what happens. And we see that this time it's firing off the JavaScript, and I should put something else in here so that we can distinguish it. So hello again. Again. Refresh the page. Click it and we see that now we're activating and we're getting our JavaScript from the script Js file. So those are the three ways that you can add JavaScript into your code. And when it comes to script tags, uh, whenever you're placing your script, So if you've got your script or you're linking to a script Js file did take into consideration the Lord order. And if you need to access any of thes dom so any of these HTML elements that are above if we need to make access to them, we need tohave them load into the dom first and document Over here is where we're accessing at via the Dom. So that means that these script these script commands need to go after the HTML has been rendered out. And so that way the browser understands what my button one is and what my button to ISS and essentially script within the page script within an outside file. These are gonna work within that same that the same way when it comes to javascript. So the next lesson we're gonna be looking at variables and variables are the core of javascript. You need to have be able to understand how to use variables and use them effectively in order to start building out your javascript cold. So we're gonna be looking at that in the upcoming lesson 6. 6 Customized User expereince with JavaScript: so there are a few things to note about JavaScript. So whenever we type a command, we always finish it off with the semi colon attend. And that helps. JavaScript understands that this is one command and we could literally add in additional commands afterwards as well. And also, when it comes to white space, notice that the white space here it doesn't matter. The only part where the white space matters is if it's within our commands. So if I've got some white space between alert, we don't want to do that. We're gonna have an issue calling into that function. We can add in white space here we cannot in multiple lines. Also, when it comes to white space here, we notice that as soon as I started with new lines are red quoted content actually goes black here. So what's gonna happen here? It's gonna throw an error because it's reading this, and it's not understanding how this part is actually connected to here. So always be really careful with your white space. Make sure that you're adding in the semi Coghlan's at the end of each statement. So let's check this out and refresh it and We'll see what happens. We get our prompt one, and then we get our prompt to So you notice this well, that JavaScript renders out within when it's presented within the script. So we first we hit this one and then we hit this one and again that white space doesn't really matter. Here I can add in white space I can bring it to new lines. And this is just more for readability when you see it structured within these kind of tabbed ways where we can better understand better read that JavaScript. But of course, if you were to go into men, if I this, then this would just simply it would just simply remove at all the white space and unnecessary spacing within their So, besides an alert, we also have the ability to do a prompt. So maybe this one I'm gonna change into a prompt and a prompt gives us the option to ask a question so I can set a variable and I can see my prom and we can equal it to prompt. So let's see what happens now. So when I refresh it, we get this prompt firing off, And if I put something in there essentially gives us stability. Teoh, hold some content within this value. So what's happened here is if I did the prompt on its own, it would just simply ask for that input from the user. But we wouldn't have any idea where that's being contained, and we wouldn't be able to make use of it. But when we set up a variable and a variable essentially is a container of some kind of content. So it's a named way that we can contain some information, and this way we can pull back that information that's being entered in there and we can do something like this and I'll show you how this is gonna work out so quick. Take a quick look at this code and what do you think is gonna happen here? We noticed that the first time we ran it, we got this prompt showing up and simply it said Hello. So maybe I'm gonna update this and say, Enter your name and save that. So now what do you think is gonna happen here? And maybe I need to remove that, too. So what do you think is gonna happen here? We've got our prompt. Enter your name and then next, we're going to do a hello. But we're actually trying toe access that contained value that's being held in the variable called my prompt. So let's check this out and see what happens. So enter your name and then when you hit, okay, we notice here that it has that value. So it's brought that over into the alert, and it's generated the value back you'd to us. So this is whatever we put in and that first prompt. Now we see it being returned back to us in the alert, so much like the alerts that we're looking at previously. But now we've got the ability to create some kind of user interaction where the user comes in and is asked something they enter something in, and they get this customized message going back to them. And this is essentially why we use JavaScript. Because we wanna have that ability to make this customized experience for users so that users can interact with our code and receive something back. That two way communication. And this is what javascript allows us to do. So we're gonna look at in more detail how variables work. And as you can see that variables come in very useful. They allow us to hold that information and make use of it within our code, So all of that is coming up in the next lesson. 7. 8 JavaScript Variables and Debugging: in the previous lesson, we had looked at variables, and we saw how useful variables could be in order. Hold information. So essentially, there are three main types of variables that you'd be using in JavaScript, and one of them are strings. So we could set something like my var one, and I'm gonna equal that. Two pulled a value of a strength. And that's what we did essentially before where we had my prompt was containing information from the actual pop up prompt that was picked up from the user and then placed into that value. So it was being held as a string so we could have a string where it's gone. A combination of numbers, letters in any type of characters and notice what I've done here, where I've done these kind of double slashes and this is actually commenting within JavaScript, and it gives me the ability to essentially make some readable notes that I can reference as I'm going through the code later on, or if somebody else is reading through my code that maybe they want to understand. Well, why would I set up this my var one and call it string and so Maybe I've got a brief description in here to document what I'm doing, what I'm thinking and why I'm doing certain things within the coat. So this gives us the ability to communicate that information. And besides doing these one line comments, we can also do these comment blocks where we can block out a whole bunch of the whole multiple lines. Or we could even block out one line if that's what we wanted to do. And in that way we can if we have some problems with the code. If we've got some bugs, were tryingto troubleshoot it. We're trying to make some updates to it. Using commenting is another great way to do some trouble shooting and Teoh check out your code bug fixing and see if there's any issues with it. The next type of variable and I'm gonna call this my bar is gonna be a number, and notice that within here we don't actually have the quote surrounded and one other thing to note about quotes weaken, do double or we could do single. So I think chrome here is by default. It's adding me that second quote, so that's why I'm getting the whole bunch of them. They're showing up, but we can also do single quotes and double quotes. So there are is a difference when it comes to processing values within the quotes. But for now, we just need to understand that with single and with double that we can use either one. If we're just held in that one value within the variable, give this one a value of two. And then lastly, another type of variable is gonna be the bullying and Julin essentially conf. Think of it like a switch so it could be either true or it can be false. And it gives us the ability when we do conditional statements to really to be built, better understand and make really simple, straightforward, readable, conditional statements because we can check if something is true or and if it's not true that it's going to be false. So it's an either or type scenario. So one other quick note you do have the ability to set multiple values. So if I want to set a as equal to a, I can comment separate them, and I don't need to declare them again, as I've been doing up here we're setting up var. I can do this short for poor declaration where I could set a bunch of variables in this type of format. So this is the same thing that I've done up here. We've got bar 123 and said, I'm using ABC and I'm just simply declaring them within this way. And with JavaScript, you do need to declare about variables before you try to use them. Eso that this gives the browser's ability to understand that now this my bar one or A or B is actually going to be attached to a contained value, which is a variable. So we do need to have that understanding within our coat. Now, another thing that we need to look at within this lesson is so we've already looked at how we can pass messages back. We've looked at some of what we can do within our deaf tools for our some debugging. Now, another thing that we can do within our JavaScript is actually passed messages over. So in what console log does is it gives us the ability to send messages over into the console. So this thes air messages that are not necessarily meant for the user, but help us when we're debugging our code and what we want to see some information. So if I want to see what's contained value of my var one. If I want to make sure that string has been picked up, we need to refresh here and go over to the console. And now we should see that my my var one is equal to string. So let's see what's happened here. So we do see that we've got this value out here. And the really neat thing about Console log is that we also have the ability to type in and access variables in this type of format as well. So we can type in these same JavaScript commands and have them rendered a wood. And what's got here has got that call back. So it's undefined because we haven't set that yet. So we're just simply doing that console log, and there's no value attached to it because we know that when we console log out, then we see the value here so similarly to that, we can also type in built in JavaScript functions. And, of course, if we had functions, we could add those as well. So if I was to type in that Hello? We see that the holo now gets picked up there and it gets rendered out there and then again are called back is gonna be undefined. So we don't have to worry about that right now, because within here were simply typing in these commands. And it's the same thing, is going into the source code. But it's saving us, that ability, that trip, and it's allowing us to start our debugging process within JavaScript. So in the next lesson, we're going to dive deeper into variables and just look at all the different, really neat things that we can do with variables, including how we can set up objects and arrays which give us the ability to hold multiple values within a variable. So we're gonna look at that in the upcoming lessons 8. 10 JavaScript how to create an array: in the last lesson, we looked at how we can use assignment operators. Essentially, that's that equal sign to assign values to our variables, which would then be able to contain whatever values were assigning to them. We've got a few things that we need to make note off when it comes to variables, so it has to begin with either a letter or it 10. Begin with an underlying or it can begin with the dollar sign. We can't begin with a number when we can't begin with any other type of character s. So these are the three different ways that you can set up a variable. There's also reserved words. So if I tried to call this something like alert or something like that, that wouldn't wouldn't necessarily be a good idea because of the some of the wording is reserved within JavaScript. Eso also, when we're doing our naming, there's a common naming convention. So we noticed that whenever we've got more than one word we started with, the 1st 1 is lower case and then we've got up her case because one thing to note about variables and values is that the lower case is not that serve the same thing as the upper case, so always be mindful of that when you are creating your variables. So one of the other ways Teoh hold content within a variable is to create an array. So an array is simply like this, and maybe I can call it my variable four so that we've got that same naming convention as we've been doing earlier. And we simply add in some multiple values that can be contained within the array. So in a race can hold combinations of anyone different types of data types. So we've got strings numeric where bullying, and they can hold variations of that so they can hold a string and they can hold a number. So I can't obviously type out number. But maybe we'll use five or something like that. And then it can also hold Boolean values. So true. And then, of course, we can add in multiple values and continue to build out all the different, really wonderful options here with the Rays because we can hold so much content and we can then have access to all of that content and in order to update. So if we want to actually see that content that's contained within that value. What we can do is console. Log that out and just to show you that it is actually being held within that my bar for and now, in order to access that, we just need to give it the number that it falls within that order within the array. So essentially there index numbers starting at zero. Being the 1st 1 So by default, this would be zero. This would return back string. This would return back five. This would return back true. And this would return back string, too. So it's check that it, save it, refresh and go into the consul. And we see that in fact, we are returning back the actually the fourth item. But it's gonna be indexed as three. So 0123 So make sure you know what? That arrays. The rate index starts with zero. And just say that in the next lesson we're gonna look at working with theories. And when it comes to raves, we've got a lot of really cool functionality weaken do built right into Aries so we can do anything from sorting to updating to looping through them. And all of this we're gonna look at in the upcoming lesson 9. 11 Working with JavaScript Arrays: One of the main reasons that we love to work with the Rays is because it gives us all of this built in functionality. So let's say you actually want to add something to that a race. So maybe I wasn't happy with just this four items in here, and I wanted to add 1/5 item. So in order to do that, and it's gonna be really easy to do so, all we have to do is identify our container. So are variable Some I've are four. So this is identified as all the data within the array. And here we do a built in function that's built in within JavaScript specifically for a raise giving this the ability to push additional content. So maybe I want to push string three and then I'm just gonna console log that a re information out so that we can take a look out and see what's happened. So I receive it. Refresher. Go to console. We see now we've added in that third value within the array. So besides being ableto add in items into the ray, we've got quite a lot of interesting things we can do. We can also remove out items from the rate so we can actually remove out items from the front of the ring. So the reason I'm copying this is because we always have to identify it, and then we add in that functionality. So what this is going to do is this is actually gonna remove out the last item in the array , do something interesting here where we're actually going out, put the array. But maybe we want to only output that last item. So of course, we could count how many items there are, and we could do something like four. This is kind of hard coded. And if we have this function where we're at removing that last item in the array, well, you know this longer is gonna be the last item in their worries. That presents a problem for us. The good thing about javascript there's always a solution. Soto. Every problem there is a solution, and the way that we can do it is we've got this calculation where we can actually get the length of their reigns. So instead of returning that number of four and that being hard coded, I could do something like length And what this does is this calculates that I'm gonna fight items in my array. So just to show you what this is going to do, maybe we have to console log that out in order to better demonstrate what that does. So I should just copied that soul. I need to just redo that there. So when I type in length, I'll show you what gets returned there. And then, of course, mathematically. So if I was to do something like length, But I subtract one because remember again, we're starting with zero arrays started. Zero. So what do you think I'm gonna end up with here? So let's take a quick look at this. Go refresh, go to the consul. We see that we've got a value of five. And then within that calculation here, when we're taking five, we're subtracting one from it is returning the value of four. So five minus one, of course, is four. And instead of actually hard coating that four, we're getting this dynamic value returned. So essentially, what that means is, even when we remove that last item from the array, it actually doesn't matter because we're calculating that value and instead of relying on whatever that perceived last index value is gonna be, we dynamically. Now pull it out. So now string to is gonna be the last item in there, Ray. So see how that works. And we can also do things like if weaken wanted to. We could remove things from the front of array, so I can do that as well. And the way that we removed from the front of the rate is shift. And maybe I could just console log out that entire array and we're counseling liking out quite a bit of information here. But now we see that this, in fact, was the last time in the rate. And now we've dropped whatever was in there in the beginning. So whatever value we had set their of string, we dropped that off. We can also pick up items according to, uh, their index value. So if we want to find out what it's going back to hear, if you want to find out, string to what the position of string to is. So obviously, of course, when we look at it, we can see that string to is gonna be index off too because we've got 012 here. But what if we couldn't look at that and we needed to be able to determine what that indexes eso If we knew it was the last one, we could take the length minus one. But what if we don't even know that we've put it somewhere in our ray? We have no idea. We've mixed up jumbled around our way, and we have no idea. Well, there is a way to find that out as well. So if I wanted to find out where a particular item was located within their E, we can use index off, and I believe that was string too. So we do, instead of by the index, were returning back that value. And then we're returning back the value of the index instead of actual value. So we see that we can get back that to finding out that string to is in index of two. And it's just as the word implies that we're able to find it where it's located. So there are some really cool built and functionalities as well for a raise. Eso we looked at quite a few another one that we use fairly often is if you want to look through each item in the hurry. So this is again really easy to do eso First we could list out the indexed and then the value or the key. Eso maybe we just do an eye and a key. And if you're not familiar with functions, we are going to be definite looking at these in the upcoming lessons. So just for now, all we're doing is a function essentially allows us to contain a set of commands. We've seen that within the alerts, as we've done before, so those were built in functions. And now we're setting back and doing our own set of commands. And that's where we've got these functions. And then over here we're just setting up values to contain the values that are built in within the function. So essentially, what we're doing is now we can console, log out each item if we want. So if I wanted to log it the value for I and I want to log out the value for E or for K, we could do it this way. And so just to show you what happens now, eso essentially what this is doing. This is looping through all the items in the artery, and we're just going to simply log them out. So we see that five is in position zero True is in position one string two is in position to, so maybe I should remove that two because this may be a little bit confusing, but either way we can see that as we looped through them, we get all of that array information output. And just as we've gone through all of this stuff within a raise, well, there's a whole lot more. So raise conduce really quite a bit more. And we're gonna be looking at more advanced functionality within a raise in the upcoming lesson and show you some really cool things that you can do a raise. And this is another reason why everybody loves a raise because of the amazing built in functionality that you can do with the Rays so you don't have to actually write it any additional code. It's already built in to JavaScript, so that's coming up in the next lesson. 10. 12 JavaScript Array functions: in the last two lessons. We've been looking at a raise, and I want to actually add one more lesson in regards to raise because a raise really do have a lot of functionality and so many really neat things you can do with them. So I promise I am going to run through this relatively quickly and provide the source code so that you could check that out as well for yourself. So again, we need to identify the variable. We've got this built in functionality with injuries. So just like what we're doing before, where we're removing the last two items, we can splice items from the array. Essentially, this basically removes the last two items starting at this position and then removing the number of items that we want to remove. So let's take a look at what a real looks like. And I know we're probably running short on values that are contained within the every. So all add in some new values, so new value on maybe I want to just create a whole bunch of them so nuts again with the Rays, you can really hold a lot of information. So I'm gonna make them so that they're all slightly different and save that refresh. Go to the console. And now we see that we've got a lot more values. They're being contained here. So let's look at space and see what's happened here. So between here's where we've actually done our spice. So it can you see what happened. You see what happened? What difference? What's the difference between the two arrays and notice that when we type tense place we started with a two and we had a one is essentially What has happened here is we've removed to values, so it started with our start position. So let's go back to our code and take a look at that. And what we've done is our starting position, and then the number that we wanted to remove out. Let's take a look at that. So 1012 So this is where we started and the number that we want to remove out. We want to remove out one item. So we moved out string to let's do a quick update on this, and let's say we want to remove out three items. Let's refresh that and see what happens now So you can you see what happened? We've removed out 123 items starting at index of two. That's essentially have splice works. And of course, once you start making these values dynamic, you really begin to see that there's so much functionality that's created within here also , for a raise, we have the ability to sort them. So if I want to sort an array, So let's say want to sort it alphabetically. We could see what this looks like now, And, of course, with we sorted it than our index values air different and so on, So to see what's happened now. So after here, this is where I've entered in that sort after line 29 we see that we've got the Boolean values go last. There the numeric values go first, and then we've got our strings here. And if we had upper case, there would be a shift in that order as well. Essentially, these ones were the same and then this one had a value of five. So it came after new value, for we can also sort of backwards if we please eso that is done with reverse. So I'm gonna just type in reverse here instead of sort. And I'm not going to do another console log because we are getting fairly busy in that console, like so we can see that when we reverse it. All it is is the reverse order of the sort. And also we have the ability Teoh doing strings together. And we can also output content from the strings Or that from the arrays, I should say. So let's say we hade my var four and then my var five and we wanted to actually bring these two together. So there is a function for that where we can output so we can essentially create a brand. You, my bar six. So setting a variable to contain the new data. Essentially, what this is gonna be this is going to be a combination of the current my var for array, and we're gonna join. We're gonna join it together or concoct needed couldn't cat. Because, of course, join is actually going to be a different type of method. So we don't want to confuse that, and we want to cat need it with my var five and then it's, um, out putting my for four. Let's put my bar six refresh, go to the console and now we see we've got a really big Guerry. They're both of them combined. Eso, as I mentioned, there's also joined eso. Join is actually going to be something different. So my far seven because join does something entirely different and it allows us to actually output the contents of the ARY into a string format. So let's see what this looks like and out put it here, refresh console. And now we see that we've actually got all of these values. They've been placed in a string by default. We've got these comments here and let's say I'm not happy with the commas. I want something else within here, and that's really doable within JavaScript. So let's say I want to separate a note with smiley faces, So let's instead of the Commons now, we're gonna have smiley faces there to see we've got Essentially, it's the separator that we can customize here using joint. We can also change our array over to a string if want to. We could just do to string so we could do something like maybe do another my var eight and I can't take this value and I'm gonna do to strength and update this constant log. Refresh it. And now again, we've got that brought over to a string. So I guess the number of different ways to do the same thing essentially does similar to what join did. But by default, it sent it over to a za comma as well. We can also slice out a part of the string s That's another functionality that we can do. So maybe my var nine and I want it instead of to string. I'm gonna update this to slice and essentially what slices. It gives us the ability to return part of the string. Remember all the way up here where we did spice while slice sounds the same and it's going to return back only a piece of the array. So instead of eight. And maybe I need to get a really long one. So I'm gonna use var six every and refresh it and hopefully this'll makes sense. Essentially, what we're doing here is we're pulling out one two values from that a rate and we're out putting them there. So we see that I should actually output that a race so we can actually see what it looks like. So refresh it. So now we're gonna work with this array. We see that we've got it at starting position to and were returning back this value and were returning back the next value. So that's how we work with slicing. Were able to return back part of their array. The next lesson we're gonna look at another way to contain multiple values within one variable. And that's going to be objects. Eso that's gonna be coming up in the next lesson. 11. 14 JavaScript Objects in Action: in this lesson. We're gonna be looking at objects now. Objects allow us another option in order to contain multiple pieces of information within one variable and the main difference between objects and a raises that allows us to store them with named values and then, of course, access them with those same name values. So let's take a look at how we can build an object. So again we start out with that familiar V a r. And I'm gonna call it my object. So maybe I'll do it my ob one, because I know I'm gonna be creating quite a few more. So we do this where we declare brand new object, and now we can add in content into my ob one. And let's see, we wanted to have some information about a car. So we've got our car and it's got a Ford there and my object to So this is gonna be the year of the car. And of course, we can maybe put a value in there since 2010 and my object three. So maybe the make or the model. So do a Mustang there and my object for and maybe you could do something like cost, so we'll put that at $50,000. So now we've created an object, and I got a consul log data that I'd so you can take a look and we can see how this is going to show up and how we're going to see it. And I believe I just made a big mistake here. So this should be my ob one, essentially still putting it within that same first object. That was my mistake with that. But of course, when if we're working with multiple objects, we head. There's quite a few things we could do with the way that we're holding those variables, which we're gonna be looking at that coming up. But for now, we're just working with that single object. So my ob one, let's refresh open up the console and we can see that, just like with their ease, we've got all of that information contained within one object within one value, and now we can have access to it. So you see that we've got all of the information and it's really neatly laid out in this really neat, object oriented format. And of course, there's the named value and then the value that's attached to that name and then the same way that we've created them, we can also update them. So if I wanted to change the model, or maybe let's just change the year. So if I wanted to update the year and if I want to make it a newer model, 2015 and refresh and we can see that we can really easily update that information that's contained within that value, just like what we did with a raise, there's actually different ways that we can set up these objects. It's another way to set up objects. So I'm gonna set this up and let's see you had all of that information on hand when you're creating your object. So what I'm gonna do is I'm gonna simply do this kind of bracket format. I'm not going to declare that I'm setting up a new object and I'm gonna enter in all of those paired values in here. So the 1st 1 that we had there was a car, so I should actually be company. But let's do something like Honda or something like that, and then we comma separated out. So we've got the next one is gonna be a year and uses a newer Honda and model, so make it a civic. And of course, we do need to quote around there because this is that return value. So much like the variables were working cost. So cost of the Honda, let's say $30,000. And so this is our our other object that we've created. And just like that first object we can console logged out at Take a look at that. So it's refresh. Go to the console and we can see that essentially the same thing those two different ways that we can create on. We can construct these objects. And speaking of constructing, there's actually going to be 1/3 way that we can construct our cars. And this might what might be easier if you're constructing multiple values. Eso Let's take my my objects and will create 1/3 my object. And we'll do something like this so new. And here we're gonna have a built in function. So we'll just call it my fine or something like that. And then what we're gonna do here is we're gonna pass over some values, so we're gonna do Tioga and 2015 on. And so that's spelt that one rates Toyota Corolla and then our last one was gonna be our cost. So 40,000. So forgive me if I'm placing in the wrong numbers there, so I'm just kind of doing this off hand. Here s so we're gonna create a brand, you object here eso object three. And we've got this new my funds. So now, of course, we need to identify what this my fund is. And the way that we do that is we declare a function, and then we're gonna pass over all these values so we can pass over them as arguments within our function and hear these functions again. And, of course, I promise you were going to be getting to this in upcoming lesson. And as you can see, that functions air this core integral part of javascript. So within the function and what we're gonna essentially using this function to create our object. So when we use this, this is referring to that active item. So we're calling over this My object three were setting. It has a value of a brand new my fund declaring it that we're setting this brand new piece of content up, and here is where we specify all of these names. So just like before where we had a car. So there should be a period in between there. And this should be a capital to keep that naming convention proper s. We're gonna just return back that first value. So this year is going to be equal to the second value. This model is gonna be equal to the third value. And of course, I'm gonna be explaining this and more detail as we progress to the course. And then this is gonna be that 4th 1 And so what happens now when we console log out my ob three. Let's take a look at this when I refresh the page. So what do you think is gonna happen here just quickly looking at how we're creating all these objects, how do you think that we're out putting this content? Let's take a look at the console and we see that everything is output within that same format, although the one that we constructed here, this is my fun instead of an object, but it essentially is the same way in a confection within that same format. And now, of course, if we want to update some of our content within the objects, there's actually several ways to call over that content on. We can actually see that content. So I'm gonna quickly run through those and you can see how really easy it is gonna be to utilize any piece of this this content that we're using. So we're gonna access my obs one and essentially access it via the name. And I should just Consul, log this out so that we can see that So my obs one and because we're using named values so we can access it with that named value of car. And so, of course, there are other ways to access it. So doing it this way as well and just show you what happens. So now refresh it and we see that we're getting access to that first item there in that first object, and this will work for all of them. So refresh console and we can see now we've got Honda and we've got Toyota coming out. Eso we're getting all of that information on we can access the information in the same way . So essentially building out objects really helps you utilize and really brings you a lot of power with what you can do when it comes to storing data and then working within with that data as you build out your JavaScript code. Next lesson, as promised, we're gonna look at functions because we have gone kind of in and out of some of the functions, and we're going to get into those in a lot more detail in the upcoming lesson. 12. 16 Introduction to JavaScript Functions: So now the lesson that you've all been waiting for. We've been talking about functions in the previous lessons, and what functions are. Is there one of the fundamental building blocks of JavaScript? A function is JavaScript procedure. It's a set of statements that performs tasks, calculates a value, and there's a lot you can do with functions. So one of the things that we need to do with functions is we need to define them so in order to define our function. So I just call it my fun. And as we mentioned, it's actually something that's gonna have hold of set of commands. So whatever we want to run through and be able to call through in the rest of our script, we can do that within functions. So now if I want to console, log out Hello world. All I need to do is call to my fun and we'll see how that works out. And of course, with functions you can use them over and over again as much as you want, and also you can perform calculations past values through and a whole lot more. So let's take a look at the console and see where we're at with that. So we see that essentially, what's happened here is we've gone over to this index three. So that's the third line in the index and it's output it five times because we've got five functions listed here and notice how it's not out putting it within the line of the code because it's actually calling over. And it's just like going over to this set a code and running through it. And this gives us a lot of capability because if we simply update this function, maybe add in something new, we can see that immediately. We get that same bit of code run through every single time we access that function. So next to just running out some code, there's even more we can do. And we had briefly looked at this earlier where we can pass over some value. So let's say I've got a string value and I've got something like hello here and I can pass that into the function as an argument. And what happens is that the function can actually pick that up so I can pick that up as an argument. So argument a and now argument a I sick of that variable that's gonna actually contain that bit of information that we've just passed through. So you passed. And now let's see what happens. Let's refresh it and we see that you passed. Hello. But these other ones went to you passed undefined because, as we can see here, it's actually expecting an argument if nothing got passed through, but we're trying to output it. Well, then we have a problem here, But one of the things that is ni things here is that we can update it and we can actually pass through multiple values. And so it's not going to do all of them. But just so you get an idea that we have the ability to really make this JavaScript function dynamic, and as we update, whatever we're passing in through here, then we see it gets updated. They're a swell. And another thing that we can do with functions is we have the ability to pass multiple arguments. So let's see, we had something like, Are you be, or something like that? So we can pass over one, and this one is I'm gonna make this one numeric, and maybe I can just do for 455 and show you how this turns out. Refresh it. And now we see that we're actually passing over all those values, so that's a good sign. But maybe we want to return something back. So if we want to do something like return instead of Consul logging this out all the time, maybe we'll want to just return that value so you can just issue that return and what's gonna happen now? What do you think is gonna happen now that we're returning back that argument, we see that actually, nothing happens because we don't have any way that we're actually printing anything out. And this is where console log can come in useful again. So if I want to actually print out this value that's being returned, we can see that now we can see it back in the console so effectively, what we're doing here, and I don't think I need all of this information. But what we're doing here is we're calling over. So we're consul logging out, and this is the value that were Consul logging out. And we're using my fund. We're sending over two arguments, So argument won an argument be that air received over here within the function and what the function is doing is it says Return, and it's telling us what it wants to return. So essentially, it's taking in that argument and returning some kind of calculation and some kind of built in functionality back so that now, instead of just having my fun, Hello, we're actually making some kind of use of these values there passed through. There is some kind of processing being done here, and we're out putting it. So if I want to do something like declaring my for return and I want to do argument, Hey, and I did some space there and I gotta do you d and then we're just gonna add this in like this and send not over refresh and take a look at it. And now we're seeing we're making use of both those arguments, but with functions, we can either return back values, weaken, do some kind of calculations, and we can make some kind of updates. And with functions, there's also what's known as a global scope and a local and just a demonstration of that. So if we set a variable of a five and I want to pick up and use a year. So I want to use it within my calculation and add dot in I'm gonna refresh. We see that we get that value of five. But what happens if we do what we did over here? Where I declare variable a and I give it a value of 10 But then down here, I say, Ok, well, wait a minute. I want to know what a is equal to. So let's refresh that and take a look. So what do you think is gonna happen here? What do you think? The first value of a what he thinks gonna be returned back here. And then what do you think That console log online nine is gonna return. So it's refresh it and we see that this value of a within the function remained at 10. But when we looked at the new value of a within the function within the global scope of things outside of the function, it remained at five. So even though we have access to it if we want, If we go ahead, if we declare it locally within the function, we only can make use of it within that function itself. And once we leave that function, we don't have that same access and ability to access that seem value. Be careful when you are naming values within the function that you're not naming them the same as the global value here that you're not overriding and that you're not having any conflicts with your values. And just like what we did with a where we picked it up. So now have changed it to A this time we're pulling in a as a five. I'm still seeing it as a five. I'm actually gonna add it. I'm gonna increment it by one. So now return will be, uh, six, and we're gonna console log. It would as of six. Let's see what happens when we refresh it. And in fact, we do have access to that global variable off A, and we are able to manipulate it within the function and perform some kind of calculation. And of course, as long as we're not re declaring it within the function itself, 13. 18 JavaScript Document Object Model: in the next set of lessons were going to be looking at the dawn. So that's the document object model. And what happens when a Web pages loaded? The browser actually creates what's known as the document object model of the page, and the dom is actually constructed as a tree of objects. So you have a hierarchy of all the different elements that are contained within the Web page, and then hence you be able to get access to them via JavaScript, so able to access any one of the each to my elements as objects, set their properties, update them at events and generally add interaction and triggers to any one of those elements. So I've updated some of the source code that we've been working with, and I've added in Mawr elements within our HTML page. So now we've got a fully structured HTML page, so we've got our HTML here. We've got her head and we've got some body content and so on. So now when I refresh it, we've got some more things within the Web page, and now we can actually look at some of these elements, so I'm still within the deaf tools here and I've just gone in tow elements and looking under properties, I can see I've got body and I've got a whole bunch of information here within just the properties just rate within the deaf tools. And similarly, I can select any one of the elements. So I just selected that that image. So you've got an image with an i d of my image, and we see that each one of these elements has a whole bunch of information attached to it so we can see the i d and we can see all of this information, and if we can see it, we can access it. If we can access it, we can update it, and we can do all of that within JavaScript. So I'm gonna close this down, and we're gonna look deeper into how we're gonna be looking at this within our structure. So when we go open up our page, actually just opened it up within brackets so that we get a better view point because I think now, with all these new elements here, we need to start using our editor in order to be able to better see and look at the code and update the code. So I've split this off into two separate two separate files. So I've got my index dot html and it's linking over. So I've got my script dot Js linking over to script Js over here and script Js still has that original one where we had get element by i d we added an event listener and so on to it, So I just need to make a quick update to that. So if I want to get button one working, I just need to update that selector here because again, this is how we're selecting these events. And once I save this and if I save that and refresh it now when I click, we're fight still firing off died event And this is what we had set up in one of the earlier lessons back to elements to sources we can see this is our same html page and all we've done is linked it over to script Js So we can either work with this or we can work with it within our brackets. But I do want to add in a way to kind of take a look and see all of the directory information that's contained within the dong so we can do console D I R. And simply do document and what this is going to give us. It's going to give us a full listing of all the available items that are all available elements and content that's available within the document. Now, when we talk about the dom, we're also looking at the window because the windows object is the top container. So that's the parent of the document. So the windows is where we're running like the alerts. So this alert by default. So this is the same as doing window alert, but we don't need to include the window in that alert. So if I do refresh it and if I click on it will see that it still does the same thing. So the alert is by default, running in the windows object and as inside of the window object, we have the document object, and then this is where all of that output content that we can look at within the Web page is output as well as some additional information. So when we open up our console, we see that we've got our document object here, and we can really easily see all of that information contained in there. So as we can see, we can see the URL. We can see all of the different child nodes that are available. The HTML. So if we were to click through this, we could see that we've got doc type there. We've got HTML element, and then we can dig down deeper into there and see head text, body. And of course, this gives us access to any piece of content that's available here. And as you can see, there really truly is Ah, lot of information contained within the dawn, which means that we have a lot of information that we can access a lot of built in functionality that we can utilize when we're trying to access and work within the dawn. So this is just a small sampling of what's available to us, and we're gonna work through a lot of the stuff within the next few lessons. Ah, lot of the more popular ways of interacting with the dumb. So that's all coming up in the next set of lessons 14. 19 JavaScript accessing the DOM info: the previous lesson. We had looked at the dawn and all of this information contained within the dog. So because we've got access to all of these elements from the Web page within the DOM, that means that we can access them by selecting them and in order to select elements. There are several ways to make your selection of the elements. So I'm gonna open up my editor, and I'm gonna focus more on the Js file that I am on HTML. But we do need to have that as a reference to see all of the different accessible elements on our web page. So we've already has an example down here where we've got the button one we're doing ah, method called get element by I. D. So, basically, what this is saying is this is just saying document using the document object. So just like we looked at objects before within javascript, where objects can contain named values and they can contain additional properties within there as well. So let's open up and select another element within our page. So maybe let's check out, check out this output element and make some updates to it. So what I want to do is actually want a place output as a variable. So just like what we did with before with objects, we can set a container there, a variable toe hold that object information. So we're gonna take my output and create that object and the away that we create our object within there is that we equal it too. Making our selections were gonna select the document object, and we're going to be more specific because we're going to get element by i d. And this helps us locate and make our selection of our element. So where element has an idea of output, so that's what we need to place in there. And then we can just simply close that off and I'm gonna actually console Log de ir. So this gives us the ability to open it up as a directory. And now we just need Teoh identify that variable. So it's my my output element and go to the page and refresh it and check out what we see within the console. So in the console here, I've got a div with an i d of output. And when I opened that up, I can see I've got access to all of this wonderful information. So one of the things that we want to look at in this lesson is that inter html and Inter text. So we noticed that when we look at this element, it's got inner. Basically, it does say nothing, and that's the same thing that was over here. We've got our enter HTML and Inter text. So now what we can do, and this is gonna be really neat functionality where we can simply update that object so we could update the inner HTML and set a new value. So I'm gonna show you what happens when you do that. So again, remember that we've set our variable here. That's gonna contain all of this object information from that element on her web page. So all of it is contained in my output, as we can see here when we output into the console. So now we're gonna take my output, and we're gonna update that inner html. And I gotta write something like new content or something like that and say that do you think is gonna happen here thinking back to how we were able to set object information earlier. We're now sitting new object information, my output objects. So when I refresh it, we see that now we have new content written there, and we see that it's actually updated on the Web page for the user as well. So if we were to simply close this off and we reload the page, we briefly see that there's that no content or whatever it was saying before, nothing I believe on. We see that we're now we're getting that update. So this is how we can create and manipulate elements within our Web page via JavaScript and working within the dawn. And as we see here, we've got a lot of access to functionality, really looking at this and saying, Okay, well, you've got ideas on all those elements. But what if I wanted to use class? So I've got two elements here with the same class BT end. So what if I wanted to update that? How does that work? And essentially, it's gonna work fairly similar. But we need to find a different way to select classes because obviously they're not elements by i d. So I need to select them by class. So We're going to do the same thing where we've got my BT n for the buttons and we're gonna create that object that's going to contain all of the information for the for the ones with the class of button and the way that we make a selection of these. We do get elements so noticed that it's actually not element but its elements by class, and that's actually get elements by class name. And then here is where we enter in the class and notice also that we're not any We don't have any prefixes to it. So we're just simply selecting the actual name. Whereas with CSS and with Jake weary, you're going to see that you're actually selecting it with the hash in front of it or the period for classes. So we don't have to worry about that within just plain JavaScript because these methods here they understand that this is the class name that we're looking for, so you don't need to be any more specific beyond that, So what if we actually want to update that in our HTML? So of course we can do something like this. But there is one problem here and I'm just going to show you. Actually, what happens when we So maybe you want to see new button for something like that. So let's take a look and see what happens. So do you think that this will work, or do you think we're gonna have problems figuring out where that element is? Because if you do notice, we do have more than one. So let's check this out and see what happens. And we see that actually, nothing happens to the buttons anyway, because the thing is that we're not able to be specific enough with their selection process in order to identify them properly. Because looking at this song on a console, log out my BT N and we're gonna be able to see what the problem is when we log that out into the console. So when I console log it out, it's got HTML collection. But then Scott, this bracketed to because it does understand that actually, there's a button one and a button to and possibility toe have a whole lot more. So we have several options at this point where we could loop through all of those different elements and as well we can be more specific in our selection process. So maybe if we want to be more specific and we only want to select my Bt end one now we'll see what happens when we refresh it and now we see that we are able to select that specific one. It's got the inner HTML there, so now we can go back into our code and we can do it the same way here, going back out and refreshing it. And we see that only the 2nd 1 now got updated to new button because we were able to make that selection process and be really specific to what element we wanted to select to make our update to. And we've been working with that inner HTML. But we also have inner text and just quickly to show you the difference between the two. So if we do inner HTML, we'll see that it actually gets treated as HTML. So the new button actually gets that line break there. But if we change this to inner text, even see that there is a difference to how its output I need to get rid of that. So now when we write in her text. It's not gonna treat it as an HTML piece of code and it's gonna actually output whatever the text is that's being contained within their. So that's the difference between inner each to melt and inner text. In the next lessons, we're gonna look at this in more detail, so we're gonna look at actually looping through all the different elements. We're also gonna be looking at how we can change our background color, how we cannot apply styling and then also how we can have event triggers. And that's gonna be a really interesting part of JavaScript when we start applying all these event triggers to our elements within our Web page, and that's all coming up in the next set of lessons. 15. 20 JavaScript update element styling: the previous lesson we looked at how we can select elements, classes and even update what's being displayed it on our Web page, dynamically just through the JavaScript and utilizing that dom information. So if you thought that was impressive to be really impressed with, what what's coming up next and all of the different functionality that you can have within the dawn. So notice that when we open this up, we've got access to all of this information so we can get the URL. If we want, we can get the title of the Web page so we can actually access any piece of content here and pull that out. We can get the ready state, and all we have to do is do something like So if I want to console, log out, for example, documents and if you want to see maybe the URL so I can output that within the console, and I could also update it should I close that off? So I'm gonna put a space there, and maybe I want to see the documents and I want to see the title. So just gonna take a look and see that we're able to actually access those. So let's refresh our page. Open up our console. We see that we've got Are you, Earl? We've got the title there, and this is just information that we can select. So let's take this one step further and actually see if we can update some styling. Of course, styling is what really sets a Web page content and allows you to create your own spin and styling on the Web page using CSS. And we can do the same thing dynamically in JavaScript by accessing it within the dawn. So here we have the my output. We've updated the content already, and we don't actually have to make another selection of it because remember, here it's being contained within that same object. So every time I want to access that same object, it access the properties contained within that object. I could do something like style, and I can select and update the color. And as you can see, this is gonna be that should be an equal sign. And maybe I want to sit the color to blue or something like that. Let's go out and refresh the page and see what happens. So you see that we're able to access style, update the actual styling, and we can continue with this a swell so we can update the background color as well. So again, style, instead of doing color, let's do background color. And we see that brackets here is nice enough to present us with some options here. So maybe we wanna have a background color of purple or something like that. So see how that looks. So now we've got our purple background are blue text and all of this being dynamically done via JavaScript. So I'm gonna just beautify this brackets has this feature to make it more readable. Eso it actually, in dense indents content here within the job script file eso didn't really actually do very much there, I think in the indented that part there. So besides being able to select as we looked at over here, where you can get the URL and the title, let's take a look at I've got an image here and I've got an attribute with an image, so I've got a source of that image. So what would happen if I actually make a selection of that image? So I'm gonna do my image and document so documents and get element by I d. I usually find that doing get element by i d is the easiest way to make access to those elements as probably one of the more common ones that you get used. We're also going to be looking at some more advanced ways of making selections as we progress through this course as well. So now we've set that my image as an object contained within my I am G. Now we can take a look at and we can see things like the source. We can even update the source if we want it to. So let's add some functionality here. And instead of simply updating and having that alert, maybe let's update the source of the image. Actually, So my I am G because we remember we've got it contained within that object and for images. We do have another property here for source, and I'm gonna update it. Teoh trying to think of a path for an image. So maybe I'm gonna use that same Loren pixel. So I use Lauren pixel for placeholder images on I'm gonna make it a small one. There So whenever the button gets clicked, then we're gonna update the source with this new, smaller image and let's see what happens. Remember, we're clicking button one. We're accessing it by get element by I d. And of course, we're gonna look at adding event listener as well as we progress through the course. But for now, we're just gonna look at ID event listener click and then the function, my image source and we're updating the source. Let's try the suit, refresh the page and we click it. And now watch the image. We see that the image automatically updated were not automatically, but it updated as soon as we triggered that click here on the button up here. The really neat thing is that we can add multiple functions here. So if we want to update the actual inter html of what was clicked, so we can really easily do that by simply making a selection of it and doing an update of the inter html And as we saw previously, when we're working with an object, we can select the current active object by doing this, and this allows us to update that current objects. So if we want to something like Click. There's something like That's assumes it gets clicked. We're gonna update it to clicked. And also maybe we can update that style. So do style and background image or background color. I should say this is one of one of the more effective ones that we can see that as soon as this button gets clicked. So there's a number of things that are gonna happen here. When the button gets clicked, we're going to see that we update the image. We get the inner in each team. L of the current active object is going to change to clicked, and also the background is going to change to yellow. So let's try the suit. Refresh, Click. So you get clicked background yellow and the image updates. Lesson. We're gonna look deeper into event listeners because thes are what caused what creates that interaction for the user and event listeners we can see when we list it within the document . We have a whole listing off event listeners, and for the most part right now we've been using bliss on click. But we also have on Blur, which would be more for forms We have drag were able to drag elements we've listened to key presses were listen to the load of the page. So if we put our JavaScript at the top, we could listen and make sure that dot the document has loaded and then fire off some JavaScript. We can do mouse over most movements on paste. And we see we've got a lot of functionality here, so we're gonna be looking through some of the more popular ones in the upcoming lesson. 16. 21 JavaScript DOM event listeners: in this lesson. We're gonna look at some of the really cool functionality that javascript hands when we access Dawn triggers an event, listeners. So we had a list here of all these different event listeners, and we have been working with the on click. But we've been adding event listeners. So there actually is another way, because looking at it as an object, we see that we're able to update that inter html and were able to access any one of these objects here within the object. Eso able to get the title and so on. So we can actually also access anyone of these event listeners show you how to do that. So if we open up our page, we've got a button to so I'm gonna set. So I'm gonna set a a new object here and contain button to some just looking at a good spot here. So maybe just gonna move everything down and we're gonna comment all of this out because we're no longer going to need to have access to it. So just have it there for reference sake, and we're gonna start completely fresh with setting up and accessing that first button object. Or maybe we can start with the button to So first thing that we want to do is set up a container there for the button to we can. Of course, we can call it whatever we want to call it. So we're just gonna call it my Bt n two and then do the document and get element by I d. Because we do have an i d for that one and b t end to so placing in that element information into the my BT end to object. And now we can really easily add an event listener to that. So just as we update the inner HTML and so on, we can do something like this and we just simply select on click. So this is that property that returns the on click event handler from the element from the selected element. And here we can, either odd in a function here because it's it is expecting method. So as we saw down here, we did build out. We had the event listener here and we had to add in a function So this is gonna work the same way where we've got a function here or a method, and this is gonna be fired off whenever we click. So maybe for now what we're gonna lick to is our function that we had looked at earlier. So we just called it my fun. And we'll recreate my fund because, of course, functions can be a lot of fun. So this is a pretty good name for that s O. If we want to update the inner HTML of that, we're gonna update the background color. So first of all, maybe what we're gonna do is select its the output here, and we're going to simply update the output off that current or that selected inner HTML. And we're gonna and we're gonna update it to you clicked it and also also gonna add in that style background. And maybe this time we can turn the background color, update the background color and turn it to something like green. So let's see what happens now. So it's refresh our code when we click the it's button to we see that it says you clicked it and we fire off that event just as we did before, with the event listener probably looking at this and saying Okay, Well, this looked a lot easier than having to add event listener now one of the things to keep in mind here. When you're using the object event listeners, they don't work across all the browsers. So some of the older browsers might not be able tow have this type of functionality and as well. When you're adding in event listeners, you cannot multiple event listeners on that particular element, whereas if you do it this way, you're limited to the number that you can add so believe you can only add on one. You can't remove them. You can't overwrite them. So you do have some limited functionality with doing it this way, although it works and works really well within chrome. Also, be mindful of the fact that you want to try to avoid it for older browsers. Having said all of that, let's update this and get it to work with the ad event listener instead. And it's just important to be aware that you can do it this way and it is optional. So instead of doing it, the on click I'm gonna do this type of event listener were add in the click event So let's take that my Bt and to and I'd event listener And the event that we're gonna listen for is click, so notice that it's not on click. Sometimes that does get confusing, but it should be click and then here we need to specify a function. So let's just try to put my fun there and we'll see how this turns out. So do you think this is gonna work? Do you think we need to sell updates? Something? What do you think is gonna happen here? Do you think we've added that event listener successfully And if you said yes, you're correct. We did add that event listener successfully. So it's not really a whole lot more code, just simply formatted slightly different with the event listener. And then, of course, with these types of event listeners here, you can update these so I can do mouse over as well on. Of course, you can do the object event as well with mouse over if you wanted to, or should be on mouse over on as it's being displayed here as the dawn, what we're looking at before. So now, whenever we moved the most over, we see that we get this clicked it, uh, even though we're not clicking it as long as we're moving it over, it's firing and triggering off that event. So in the next lesson, we're gonna go back, Teoh these classes and we're gonna look at when we have multiple elements that we want apply some kind of triggers to event listeners when updates some of the backgrounds. And we're going to be showing you how to do that in the upcoming lesson. And in addition to that, we're also gonna be looking at how to create brand new elements. And again, the dawn gives us this capability of adding and creating elements. And just like what we did with the inter HTML when we updated and created that we have the same capabilities within the dom where we can upend and add in brand new elements. So all of this is coming up in the next set of lessons 17. 23 JavaScript Element selection plus: So this lesson I've removed out our source code from the process lesson and we're start fresh with brand new script file. The only one that I've actually linked to is that my output? Because, of course, this comes in useful, so I don't always have to send over output data into the console. I can actually display it on the Web page, and we're gonna make use of that within this lesson. So let's open up her editors and start interacting with our elements on our page. So just as we did before with the get elements by class, we've got a few options here. We can do a query selector, weaken, do a query selector All So we do have some more capabilities here. More advanced capabilities of making selections of the elements within our Web page. Take a look at that so we're not going to use get element by i d to select the buttons. Let's say we have buttons, but in classes, but we don't really know how many we have, but we know that we want apply that same functionality to all of them. So I'm gonna open this up and set up a container for its, um my e l for element and we're gonna do document and query, selector and query selector is quite a bit more powerful. Essentially what the difference between query, selector and query selector all is that with query selector were only returning the 1st 1 that's relevant to the query. So if we do a query selector and I'm gonna shoot Cory selector all next us, we select our button because and also notice here or the b TN class notice here that if we want to specify by class, we have to do it within the same format as we do in CSS. We're doing the period and then the class name. If it was an I d that we're using query selector, we'd have to use the hash in front and so on. So now maybe just console log out that my e l and just see what this looks like. So when we refresh it, we see that we get that first element there that's being returned. So what happens if we change this to query selector all And the difference now is going to be that now we've got both buttons have been selected or BT ends have been selected, and we cannot even take this one step further where if we want to select some additional elements here on our page, so maybe a try to quickly create some list items and I'm not going to do a lot of them. So let's item to and this is brackets that's doing this auto close on this. So sometimes sometimes it works well, and sometimes it's a little bit more frustrating when it's trying to auto close itself. So that's the case in this time that it's actually being more frustrating than it is helpful. Eso just gonna align them with the beautify. And now we've got to list items there. So what happens if I also want to select all the list items show you what happens now and again? I think it's his brackets. I'm not sure where it's what it's doing here, but it looks like it dropped the rest of this selection value here, so let's see what happens. So we've got our list items here. We've got both of those classes. Essentially. Now we've got four items here within our container, and if we want to actually move through them. You have to create a simple loop so we could loop through all the different objects here that are contained. So and we are gonna look at loops in the upcoming lessons as well. So essentially, this is gonna finding a starting point. So I is equal to zero we're going to do while I is less than my e my l length and notice that within the object here we do have a length of four. So we do have that value and we have access to that. So that's all we're doing is accessing their and then we'd have to increment our loop so that we actually looked through every single item that's available. And now we can make our selection here so we can do something like my l and we could do my e l I, which is gonna select that specific element because remember, before how we were able to specify which which value here within the object that we want to select by the index here. So we had 0123 by default. So we have the same way where we can select it and and pick through them and Maybe what I wanted to do now is just a style and do background color and I think a background color. Maybe we haven't picked before. So maybe something like pink or something like that and see what happens now. So when I refresh it, we see that all of our elements that we had selected now get a pink background. We can also output that inner HTML. We can do a whole lot of interesting things here. We can even add in event listeners if we wanted to. So if you want toe loop through all of those, we can add in an event listener. So I just show you how we can do that and build out of function for this. So bringing back that function that we had looked at earlier, So my fun and it's gonna use this instead of that selector. So whatever it gets clicked. And I'm not sure what's happening here, uh, with my brackets. So it seems to be causing me some, uh, problems here where it's not inserting properly, so it may have to reload, but either way, so this is the function is built, it's gonna update the style. Teoh pink eso No need to add in our event, listeners. So as we look through them, we can do my e l selective high. And then here we're gonna add that, listeners. So add event listener and they would just do it simple. And we're going to do Click is the event listener and then the function that's gonna fire off. And so let's see how this works it. So now we refresh it. And every one of these ones now has that event listener where we can click it and update and run the selected function. So, in the next lesson, we're gonna look at how we can create elements on the fly via JavaScript and accessing the dome so it's coming up in the next lesson. 18. 25 How to create new elements using JavaScript: So in this lesson, I'm gonna show you how to create brand new elements within your Web page. Start by setting up a variable, and maybe we can just call it my e l e. And so notice that this one actually doesn't exist yet because we're using Create element. And this is a built in method within javascript allows us to create that specified element So it actually doesn't exist yet on the page. And I'm gonna put some each one tags around that element. And now I want to add in some content. So I'm gonna do variable and my content, and they're gonna equal that to document. And this time we're gonna do create text node. So this basically creates a text node for us, which essentially allows us to place some text within container there. Container element, uh, so new element. And now we just need some javascript functionality, and we need to figure out where we want to output it and where we want to place it. So let's take a look at our Web page, and maybe if we want to play set just underneath that output there, we need to make a selection of that output. So this is the one where we're gonna actually do get element by i d going to do that same my output document, get element by i d selected that I d which is just output. And this is going to give us the ability to pinpoint where we want to actually add the's brand new elements that were creating. So first thing that we want to do is actually add a new element into Theis created Element or the text node into that newly created element. And the way that we do that is we do So this is the container, and we do upend child. So it adds a note to the end of the list of Children. So basically, it allows us to police the each to the content there. The new element in those h one tags so upend child. And now we need to specify what that content is that we're placing in there. So I place my content in there, and then now we need to specify where we're gonna out put it on the page. So same thing, my output and we're gonna append a child. And this time we're just placing that newly created element. So let's take a look on our page and see what happens. So we refresh it. We see that in fact, we did get a brand new element created whenever we go over to our HTML page. There's a brand new element that we've just created within JavaScript, and the whole idea here is that we're able to create elements. So we created this each one inside of the diff because we've upended it within it. And it worked the same way where we added in that text within that H one tag. So what happened here in the code we started? We started by creating that H one tag. And then we added in that content within their So you create an ad elements. And the next lesson we're gonna look at how we can traverse through and actually get some more information on the contents that contained within our elements. That's coming up in the next lesson. 19. 26 JavaScript element children: this lesson. We're gonna look at how we can actually selected some of the child nodes. So we're looking at rapper here and maybe want to pick out all the child nodes in Rapper. There is an easy way to do that. So it's set up our container first, so my maybe just call it my nodes, do a document, and we're gonna do get element by i d. And we're gonna select that rapper diff. And then from here, we're actually going to do the method here. We're gonna do child nodes, so we can I actually get the number of child notes with account. Here we can return the collection of child notes as well. We can do check collection of child elements from the guilt given. So if we do something like Children and I'll show you what the output here is gonna be, maybe just console log, that it's that's the mind nodes and we'll open that. The consul Take a look at that. Open up the browser, refresh it, and we see that we get a full listing of all the available elements. So we've got our button one button to output on ordered list. we've got the my image and then we've got some additional ones here. So we've got button one and bun to that. We can access a swell. Essentially, there's five different elements here that's able to detect because, of course, button one and button to are accounted within this list here, and we're also able to break them out. According Teoh. What their ideas are S O. That's what that's what's going on over here. We've got the i DS of button one button to and my image, and we're also able to make our selections within that format as well. And then, of course, who put is there s Owen ordered list. Didn't have an I. D. So it's not being listed down there. Eso this gives us a full listing of all these child nodes. And if we want to look through them, maybe if you want to pull out that inner html weaken do that really easily now because we've got the contents of this of this object also, alternatively, if want to list it all. So that was the Children. And this time, if Wallace took the child nodes, see what the difference here is and we see there is a difference because it is breaking it down. So it's got these text in between eso depending again, how specific and what you want to select. Here we see that we do have this text in between. No name is text. We have some really basic information. But generally, if you want to get a full list and only access the elements, then you should just go ahead and use Children and so child nodes. But it's always good to know that that option is there again as well. So let's just refresh it, and from now we want to list out and loop through them. All were able to do so as well. You can really fine tune your selection process and selected all of these elements and specify the elements that you want to work with within your HTML page. 20. 28 JavaScript operators dynamic updates: this lesson. We want to go over operators so already have covered off certain operators, such as when we set something like variable A and equal it to value, or we can equal it to a numeric value. So this is what's called an assignment operator and we've already been going over them and using them through it the previous lessons. So there's other things that you can do as well. So if I want to set a variable of B, I can use something like a and then add in 10 if I wanted to, and then we can also put place that output. So another thing that I want to set up within this lesson is ability to output and update that inter html. So right now we have nothing there cut being output. And I wanna have this more dynamic. So this is output I d output, and this is what we're going to use as our containers. So I'm gonna set up another variable, and I'm gonna set up output and use the document object and get element get element by I d selected that would put I d and then contain that into the output object. So now if I wanted to, I could do output Inter html and I can maybe said it as a value of B or something like that . Let's try the same when we refresh it. Now we see that output is being output as 15. Just as we're able to add through and update the values of B, using the variables that we've set up want to take it a few steps further and apply some of the other things that we've learned in the previous lessons. So I want to make thes clickable buttons. So click me, add one student America and click Subtract one that we could work out thes operators weaken set up some event listeners for those. So first thing that we want to do is identify the different buttons. So I'm gonna just to be TN one and again. Do the documents get element by i d. And just pick up each one of those. So we've got button one and button, too. So I'm gonna pick those objects up as well so that we can utilize them and said it also up for button to And then we can attach some event listeners to these as well, Bt at two. So that creates the connections there to you the content within our HTML page. And now I'm just gonna add in the on click So VT and one and I'm gonna use the on click event listener. And we just put the function here so we're not going to use the name function. There s just gonna use whatever it gets clicked. We're going to do something, Teoh the value off of a and we're gonna increment a So there's different ways to do on increments so we can do a equals a plus one. So essentially, what this is doing is keeping that retained value of a and just simply adding one into it. We can also use a short form for this, and all it is is just doing too, plus signs there. And of course, we want output the value of B as well. So he could just as easily place this into ah function. And maybe we can just do B plus a. So you see some kind of increment there, and I'm going to copy this and I'm gonna use the exact same one. But for button to instead of adding I'm gonna subtract one when it gets clicked. So let's see what's happened here. So whenever we refresh it, we can see that when we click the buttons that we do get some response here and we're able to increment and decrease the value that's being contained here in the output. I want to actually add in some styling as well so that these do stand out a little bit better. Here s Oh, this is just some standard CSS there. I'm gonna out put it. And I got update the fought size to make it much bigger and had some potting around it and maybe even a border around it. Let's take a look and see how that looks. So when we refresh it now, we've got our output there, and we should also maybe add in, maybe get rid of that, and I'm gonna update and create some classes for the buttons are ready to have classes. So I'm just gonna update the styling to that to make them look a little bit more like buttons and refresh that, and I'm also going to update that display and change that 10 in line block so it's not going all the way across and refresh it again quickly. So now we have more of a button looking content here within our HTML. The next lesson we're gonna be looking at operators a little bit deeper, and we're gonna be looking at comparison operators, logical operators, and this is gonna be in preparation for using different conditions. So that's coming up in the next settle essence. 21. 29 JavaScript Operators ternary and logical: this lesson, we're gonna be going over logical operators. So what logical operators do is they typically are used within a Boolean fashion and they return a Boolean value and Boolean is either true or false. So if I have set values for it's gonna move this one down So if I have variable c equals false and a variable de some sitting some boolean values for these variables So if I have variable d equals true when we console, I gotta console, log the sites console log And when we do see and D So what do you think that result here is gonna be when we're out putting this into the console and it just save that and refresh it and we see that we get returned false? Because when we compare both of them together than it's going to return, they both need to be true in order for to return back. True. If one of the miss false it's going to return back false. So if I was to update this one too true, refresh it. We can see that now we get a response back of true if we actually set string values, so you won't see this a lot. But if we do have a string value of cat and if we have a string value off dog and refresh that we see that we get returned back that last value So the D actually overwrites the sea when we combine both those values. And if we were to keep it one boolean So show you what happens now. So if one is bowling, that stays bowling because dog actually is going to come out false. So it's going to stay as false because this isn't a true Boolean value. And this is gonna be the same thing if either one of them is Boolean than the other one is gonna be expected to be a Boolean as well. And besides, using and we can also use or so what's gonna happen now if we've got false and we're doing returning a value of C or D, So when we refresh that, we're actually going to be looking for the one that actually contains the value. So this, in this case D is the one that actually contains the value because C is just false. That's doing the opposite as the end where it's actually returning out of value. That's gonna being contained within their. And there's quite a few things you can do here as well. So you could do something like true or false and keep in Boolean eso If you've got either one of them, it comes back as true. It's going to return back true. So essentially, it's the opposite as and where if you've got one of the values is true. So if either one of these is true than this statement is gonna be true, So this is the gonna be the same thing if I do something like he is equal to see or D just to illustrate that this is gonna be the same result here. So when I actually log this out and if I refresh it, we're still going to get that same value. And so we can actually attach values into additional variables doing this type of format so we can come up with formulas and use those to display the values. So we've also got a few other ones as well that we can use. So if we do something where we can do a negative, there s so now that it's true. If I put the explanation mark in front of it, we see that it gets returned back false. And what this does is this is the not operator, so it's a logical not operator. So essentially what it's doing is flipping the true toe a false and it's just checking to see if either one of these are not true. Then it's gonna come back as false. So it does get a little bit confusing there when we start adding in the's double negatives . So just show you that works with and will refresh this. And now it comes back true, because remember, without the explanation Mark, it would have been false. Now it's coming back true, and we can continue to build this out a little bit further as well. So instead of using operators in this type of fashion, use a conditional Terran Eri operator. So whatever the value here is returned from the statement. So if we want it to equal out as true, so if it comes out, we can add in a string value there and then we have one. If it comes back false as well and misspoke. False there. So now, when we refresh it, we see that we're actually getting back. That value was false. And we've got this ability now to start returning back values depending on what this condition comes out. As so if C and D if it comes back true, then it's gonna output the true. If it comes back false, it's gonna put the false. We can build out statements as well like this. So this way it comes out true. So if c and D if either one of them is false, we're gonna flip it and we're gonna turn it out to be true. This is a really good precursor to what? We're gonna talk about it in the next upcoming lesson where we're going to start looking at conditional statements. So this is kind of a short form for a conditional statement, and it's an easier way to you. Apply your logic, and in the next lesson, we're gonna show you how to apply even more conditions and return back different types of results, depending on what happens with the condition that's coming up in the next lesson. 22. 31 Conditional Statements: in this lesson. We're gonna talk about conditional statements. Conditional statements are used in order to perform different actions, depending on what conditions you're looking at. So basically, what I've done here is I've set up an input area here where I can input something, and I've got a button that I've hooked up to an event listener. So on click event listener make that a little bit bigger. So it's a little bit easier to see there. And whatever we click the button, this one is just firing off. And within here is where I'm actually gonna add in the condition, so I gotta check. Maybe. First of all, we're just going to do a quick check to see if so, want to actually get the value that's contained within that input. So we're gonna use variable my value. So that's a variable that we're gonna be setting. And we're gonna do document, get element by I d again. And the element that we're selecting is gonna be no a and a sock, that value. And then next I also wanna set up. Maybe what I want to do over here is all set up variable for output. So just like what we've done in the previous lessons. So again, that document get elements by I d and that identify it as output. And that should be an equal son. Not sure what happened there, but this is the way they were just hooking up to that inner HTML. And now I can do output inner HTML and equal it too. My value. So whenever the button gets clicked, just gonna save that. So whenever this button gets clicked, whatever we've got within the button, we're putting in our output area. And maybe I want to make that output area again a little bit more identifiable. So just do a fault size make it really, really big. They're also add in some potting around it. So maybe an ad in 15 picks of padding Just save that, that it really, really stands out there. So whenever we're typing anything there and we press update, we can actually see it down here below. So now we can look at looking at and bringing in a condition. So what if we were looking for a particular value here within the input area and we want to do something in particular when we're out putting it. So let's see, We wanted to look and see if my vow is equal to read, and if it is red, then let's do something. And if it's not red, then we're gonna do something else. Well, if it just says Red, we're gonna set my vow. There's equal to Wow, it's read and I just put a happy face there and save that. So now the way that this condition reads is it's gonna take a look at the value that's contained within the input area. Whenever we click the update button, which is the trigger, it's going to run through this event listener, and it's going to get the value that's contained within here. It's gonna evaluated here within the conditional statement. And if it is equal to read, the My Val is not only gonna be read, it's going to say, Wow, it's red. Let's see how this works out. So if we have anything else, we can see that it's simply just it puts that as we've indicated here within the input area , so just copies that out. But as soon as we type in red, we'll see that it actually reads through and sees the statement and then outputs something . So now we've started out our conditional statement and with conditional statements we've also got if the condition isn't met. So right now it's similar to what we looked at previously, where we've got either a true or false. So this value here is true than it out. It puts this. But what if it's not true? What if it's false? Maybe we wanna have something by default happen. So I'm gonna do my Val equals, not read. And then I'm gonna add in the previous value of my foul and save that. So now if we take in something that's not read, we get not read, indicated there. And if it's red and we get that red there, so all it's doing is it's evaluating that input and it's taking a look and seeing well if it didn't evaluate to be read, whatever is true gets executed here. Whatever is false gets executed there if I want to see if it's blue and if I want to do something, if it was blue, in fact, instead of only looking for Red, I want to look for multiple values here. So we do have the ability to add in on additional statement, and that's the else if statement and basically this allows us to run an additional block accord if an additional condition is being that so else. If and here is we're going to check to see if my vow and we're going to see if it's equal to blue, and if it is, then we're going to run through this code. And if it's still not equal to read, if it's still not equal to blue, then we're going to just run that default. So while it's blue, not red or blue, save that and we'll see what happens now. So Rad is working. See with blue works, so blue is working, and if it's not red or blue, then we get this condition being met where it's false and we get the output of else there. And what are the neat things about conditional statements is I can have a bunch of conditions here, so maybe I want to see if variable or variable A is equal to one, and we'll do a check here to see So we looked at and we looked at or before, so We're gonna do war this time and we're going to see if my vow is equal to whatever is contained within eight. The value entered in here is either red or it's equivalent to the value of the string A than it's gonna go. Wow, it's red or equal to the value of A and save that and we'll see what happens now. So we update it. It's red. If I go down and find her in a value of one, we see that stays the same. If we do 12 it doesn't. So either one we can enter in. We can also add in on something else where we can do something like odd and and we could do A is equal to one. So now, as long as Red is there, a is a is equal to one. So this is something that we are aware of, so we know that this is translating to true. Now we're gonna check if my value is equal to read and if this is true as well, then we're going to run through that statement and we see that we do meet those conditions and we're out putting them as needed. is one important thing to note. And whenever I add this and if I update it to so there is a difference between types. So when I enter in on the variable here, with the quote surrounded, we see that the type is going to be Actually, this is gonna be a strength as opposed to a number. But over here we're looking for a number and I've added in 1/3 equal sign because what this third equal sign does is it takes a look and sees if the type is the same. So if I get rid of that third equal sign, if I say that and if I try to update it, we see that these are equivalent. So even though this is a string and this is a number, because we're not looking at the different types of variables, we're getting an equal their true return. But if I add in an additional equal sign, there were, see that it's no longer evaluating as true, because numeric one is not equal to the string one. When we look for the different types, it is always better. Teoh, when you are writing these conditions, toe, look for these absolute equivalents where we're also including the different types as well . In the next lesson, we're gonna be looking at how to loop through set blocks of code and right out code mawr dynamically and effectively by using loops. So that's coming up in the next lesson. 23. 33 JavaScript Looping: in this lesson. We're gonna look at one of my favorite things about JavaScript and that's being able to do loops. So here we've set up that basic default that we worked with within the last lesson where we've got an update button and whenever we click the button, then we output the value of a into the output Div here. That's all we've got right now set up. So let's get to our JavaScript and start quoting some JavaScript code. So if we had, maybe it's just gonna leave a here blank. Or maybe I'm just putting my output and I'll just do a line break there. Save that. And now if I wanted to take a and I want to do a equals a plus Hello? Something like that. We see that now we've got that output. And if let's say I want to do this multiple times or something like that, when I output it, we see we've got Hello. Hello? Hello? Hello. Hello. So this is just a really basic example off why loops would save you some time. So we do have the ability to set conditions on how many times will look loop through a block code. So if we're doing stuff like this, that's just repeating. Or if we're doing something where we're incremental, a might better It might be better to actually apply loop there and with loops, we need to be able to set a few conditions. So one of the conditions is that I want to set a value starting, ah, condition that's gonna break whenever we leave the loop. The first loop that we're gonna look at is the while loop. So we need Teoh. Define we need to have a variable that's gonna be incremental as well. So I'm gonna use I I'm going to set I at zero because we're gonna have toe have a way of actually meeting a condition. Whatever we're increasing, I we're gonna use I as our value. It's gonna increment, and maybe we want to do it five times and loop through the block a code here that's contained within here. So instead of having to write out a this five times, we all we need to do is a equals, a plus and whatever value are putting in here. So we do need tohave some way of actually breaking out of this condition. So right now, the way that it's written, when you look at it, we set the value of I 20 and we're gonna continue this loop until I is greater than five, which I can't actually reach five because we're not incremental, I. So the solution here is just to simply incremental by one until it actually reaches five. And when it does that it's going to break out of this loop. So let's check this out and see how this works gonna do. Click the update button and we see that again. We've got all of those outputs their written out, but we've got quite a lot less coat. And the really nice thing about doing it this way is you have the ability to include dynamic values here. So what if I wanted Teoh create kind of a list like effect where I've got I? We know that I is incremental in here, so it's going to start at zero, and it's gonna increment until it's just it until it's less than five. So that doesn't mean equal to five. So going back to what we had looked at before this is the less than so we can also do an equal to who want to as well to see if it matches that condition. So we see that we're starting out at 01234 setting the zero here. We're looping it. While this condition is true, once we break out of that condition, that we're no longer going to be looping through those values was also a more common way of doing the loop. And essentially, it's gonna be pretty much the same thing. But it's just gonna be written and a different format. And this is the four loop, just like with any loop we need to set our conditions and we're going to use I once again. So we're going to start off by setting I equal to zero. We always need toe have that initial starting point. So I is going to be equal to zero, just like what we did in the while loop. And we're gonna loop I while it's actually gonna be less than five. So exactly the same thing that we did before, but it's all going to be contained within this one function, and here we need to increment I so that we can actually have something that will allow us to break out of the loop. And then within here is where we can take that value of a and we can odd to that value of a and I'm gonna do the value of I there plus And I don't do that same thing. Hello. And of course, the line break so that we can better readability and I'm gonna quickly tidy this one up. Save that and we'll see what happens when click output or update. And we see that we've got the exact same thing as up here. But usually I usually prefer to use thes four loops because it looks a lot cleaner. But again, there are different reasons why you might want to use a while Eso if you had different conditions that you need to meet. And if it's to break out of those conditions, he might want to choose the while in those types of situations and scenarios. So again, depending on what you're trying to accomplish with your coat is the different is how you would select the different loops that you want to use. So in the next lesson, we're gonna be jumping back to some of these built in methods that really help you out when it comes to javascript coating, So we're going to start looking at those in the next lesson. 24. 35 JavaScript Methods Math: the JavaScript math object allows you to perform mathematical tasks with numbers. So one of the really cool things about it and that probably going to get a lot of use out of is math random. So just over here, whenever we click the button, maybe we want out put some kind of random value. So just to output inner html So again, we're using that same functionality we did before. I've just added in a text input here we've got the same button that's click Teoh, that event listener that runs this function. And also we've got that document get element by i. D. Teoh. Select that output object from the HTML code. So math, in order to use math, it's uppercase m and then I've and to do my random This is the object that's going to return that random number. So never a click update. I get just a completely random number here, and we do have some ability here to update the numbers that we're returning. So notice that they're all going to be anywhere from 0 to 1, and we've got a decimal and a bunch of characters here, so we ideally, we don't we might not wanna have this type of random number, and we want to be able to set a more specific random number and have value. That's in between certain other numbers. So all we'd have to do now is just multiply it so far as to multiply it by 100. So what happens now? It's now we're getting numbers that are from 0 to 100 but we're still getting a bunch of these decimal places, so there is a solution to that as well. And this is going to be another math function. And we have this one called Math Floor, which actually floors that number all the way down Teoh to be an even number. So now we're doing numbers from 0 to 99 so it could fall anywhere in between there. And we also have a difference here. We can do math ceiling as well, and what math ceiling will do. It's going to do round it the opposite way, so it'll round it up to the nearest integer, and also we have the ability to just do round, and this will actually round it to the nearest integer. So you see that whenever we're typing in there. We're getting this update and I guess to better illustrate this. So I'm gonna get rid of the mouth. Random. I'm gonna pick up that value that's contained within this input area and show you how that the rounding works. So the first thing that I want to do is actually want to get the value that's contained within the my Val I d. So we're going to do it the same way as we've done before. We're going to use the value variable my Val, and to get element ploy I d. So they're using that quite quite often. So get element by I d. And of course, we need to do that document in front of it. It's a document. Get element by i d. And just to pick up the value. So the object for that is VL. So this is gonna allow us toe have that value. And maybe the first thing that I want to do is put the value so I'm going to do a equals a plus, and my valve is equal to whatever the value of my vow is gonna be. And I'm gonna add in another line break here so that it's a lot easier to read. And maybe we'll just keep this here as well. So have another value here. Do A equals a plus. Whatever math is rounded there and then simply I'm gonna just output a tidy that up. See that? And now whenever could have number in there. So it's actually not out putting. And whenever we click it, we're not actually see anything here in the consul either. So can any of you see what the arid here is? What the issue and I had placed getting that value from that text area have dot done the dot v a l. And this is actually G query. So for JavaScript, it's just value. And then when we update this and click it, then we so see that we are actually able to get value that's coming from there. So if I put a value of three there or 3.4, I can see that I'm getting that value in its updating. So one of the things with the value here is that we can round that up. So let's try to round that one up, and first we're going to do for math ceiling and whatever values being contained in there. So do you think this is actually going to round up of value? So if I have something like 4.555 it's gonna come up as five or what do you think is gonna happen here? And if said that we're rounding up to five, your correct There's also, if I do floor, we're going to see that that same value of 4.555 now becomes four because we're rounding down, and then just that round is going to set it over to around it area. So what if we have something like some letters there or something like that? And we want to actually convert? We want to make sure that this value were picking up is going to be New American, sort of a string value. So there is a way to do this as well. And this is gonna be another built in method that's available within JavaScript, where we can actually convert string and string values into numeric values. And I'll show you how to do that in the upcoming lesson. 25. 36 JavaScript parseInt: in JavaScript if want to force value a string toe, actually become an integer. We can do that by using the parse I NT method. So just so you had to do that. So over here we're doing a math round. So first of all, we're gonna start up with variable B, and I'm going to give it a value of three point five and just see what happens now. So I'm gonna try to round that upset, not in another line here, and I'm gonna just to be is equal to math around. Be sure you it happens. So do you think this is actually gonna work? We think we're throw some errors. We do see B is equal to four. So it is actually does have the ability to round that up, but when you're actually doing a logical comparisons if you're doing something, so I gotta do a condition here where I'm gonna see if my vow is greater than or do greater than equal to because we keep just doing the greater than or less than and we're going to see if it's greater than be, and maybe I'll start it with my valve is greater than be so just save that, tidy it up a little bit and let's see how this works out. So if we've got five, we see my valve is greater than be. If we do too, we see what it's It's not taking that into consideration zits not looking at that value. But what if we want to do something where we're actually doing an equivalent here, show you how this is gonna work? So we know that B is a value of 3.5. Let's take a look and my Val is equal to be So now it's until we do the actual 3.5. We see that we don't see that my valve is equal to be. So what if I do something like this where I updated because we see that the type is a string, actually. So if I do 3.5 now, need to see that first I do 3.5, and if I update it, we don't actually see that value, because now we're looking at the B is actually gonna be numeric and a is X or the my Val is actually gonna be a string. So the way to update that is to do my Val equals. And this is where we bring in that parse integer. And this is a really useful method in javascript because you're going to see that there's a lot of times because of the different types of variables that you have the possibility of encountering that you do need Teoh occasionally make this comparison where you're comparing the we're parsing it over as an integer and we're comparing the different types and just to simplify, they're gonna just change. Beat 23 So now we see, When we update it, we see my value is equal to be and I'm gonna just comment that out. I'm gonna enter in three and we see that the value of my valve is now being treated as a string. So it's not actually equal to B because B is numeric. That's the difference between the different ways of using these methods and changing them into different types of variables. In the next lesson, we're gonna be looking at date and how we can get random dates or actually the date of the current system time and I put it within JavaScript and make it usable within our JavaScript code. So it's coming up in the next lesson 26. 38 JavaScript Date and Time: this lesson. We're gonna look at how we can use date within JavaScript. So we've kept that previous framework where we've got a button, we can click it and it outputs content into that output. Div. So here I want to set in a variable. And maybe I could just call it my date or something like that and do new date to see what happens whenever I output that my date value. And we can see that immediately. We get the current time, and this is has to do with the system time. So this is where it's actually picking it up. So if you're actually to change your system time, it would it would change that time. That's being output here. Now there's a few different things that you can do with the date as well. You can also use now method and what now does is it gives you the milliseconds sense going to rape this eight s a gives you milliseconds since January 1st, 1970. So if I was to change, maybe I could just put now here, so date method and now show you what it outputs now. So whenever I click this, we get the milliseconds that actually So it's the milliseconds from January 1st 1970 we can see that this is always increasing s Oh, this is a really good way to make some calculations. If you're looking at time differences from if you want to have, ah, click about clickable button here, you want to see how fast people can double click it or something like that. Then that's where you'd use something like this because you actually get this numeric representation. Also, with the date you can return back different pieces of that date information. So I'm going to just have a comment this one out, and I'm going to go back to that variable that we set up the my date. So this is right now this is returning back all of this date information, But what happens if you only want part of it? So let's see, you only want to return back. Maybe you want to get the actual time or something like that so you can update this and you could do I get time, change this and do if I want to see what our it iss So the my date object now contains all of this information, and I can isolate it down. Teoh get hours if I wanted to turns it back in 14. So that's the actual our. That's because it's 2 p.m. So that's the 14th. Our We can also do something like Get the day if we wanted to. It's a bunch of different ones here to really isolated that content there. So get day returns the day of the week. So right now it's actually Friday, So this is considered the fifth day of the week. So Toby returning a number from 0 to 6 eso ending on Saturday starting on Sunday so Sundays would be a Sunday's would be a zero. We can also do get date and so this is going to give me the day in the month. So it's the 10th of June right now, and that's why it's returning back the tent s. So there's a lot of different things we can do with this date object, and essentially we have access to any piece of that date information, and we can put that within our JavaScript and utilize it there. It's definitely worth checking out. All the different functionality can do with date as well as other built in methods and try to combine the different types of JavaScript, so different dawn elements and pulling in all this content and making use of it within your JavaScript code and see what you can get javascript to do and what you can get it. Toe output in the next set of lessons were actually going to be looking at some more advanced JavaScript doing Ajax calls and getting Jason data, so that's gonna be really interesting. And that's coming up in the next section. 27. 39 Intro to JavaScript Objects: in this lesson. We're gonna look at Jason and in order to understand Jason, we need to understand how javascript objects work. So I wanted to set up a very basic JavaScript object. And as we've looked at before, JavaScript objects are these paired values. So I could have something where I've got contents of the object aren't here. And if I wanna set up a value So typically we do something like first name or something like that and we want to sign a value to first name and will assign value and then calling a separate them out and maybe another one we could do is company and list out a company name. And now, if I want to get access to that, I could just always call over to my object. And I can output first name and out in a space there, and then my object and I can call it to company. So what's gonna happen here within this code? So I'm gonna tidy that up a little bit. It's a little bit more readable. Eso it. Basically, we've tied that. We're getting that output object from html there. So we're just putting that into the variable output. We've got just a default value of a here and actually don't even need that. So I'm gonna just get rid of that here. We've set up the object and the object is gonna contain a first name of Lawrence, Company of Discovery V. I, P. And I've set up an event listener here. So whenever button one gets clicked, then we output in the inter html, the object information. So let's see how this works out. So we see that we've got to really be sick object here. JavaScript object, and we can have access to this information. It's relatively easy to understand how we can output this information and utilize it within our JavaScript. So this is a very simplified version of what Jason looks like. It's over here. I've got an example of a more complex Jason object where I've got multiple items here and I've got access to them. I could loop through JavaScript and actually access any one of these items, and we're gonna be looking at how to do this in the upcoming lessons 28. 40 JSON object Aray multiple items: in this lesson, we're gonna look Atmore advanced JavaScript objects. In previous lesson, we looked at how we can set up an object. And now, if we want to create a maybe a list of students or something like that, we could have a new array of objects and the rays are separated through with the square brackets. So right now we've got students and the value of students is gonna be the contents here. So we've got our first student here, and we can set up some additional students as well, so contain them within that same type of format as the object there. And then we just need to calm a separate them out. So this gives us the ability to have multiple students, and I'm gonna create some different data here. And so now when we click it, we're actually getting undefined because we don't know which one we want access to. So we need to identify it with the students and see if this works and we're still getting undefined. And that's because we've got multiple students here, so we have to identify which one we actually want access to. So let's take this one more step further and we're gonna access identify the first return student information. And now we see that we're actually getting that same thing. Eso. Now, if I update these 21 we're getting the second student information. Eso this If you're looking at this and thinking OK, well, maybe we can bring in some kind of looping in here, and we can loop through all of these students whenever we click the button. Eso This would be a way to get access to all of that information contained within that object. So I'm gonna build this out a little bit further and I'm gonna add in one more additional student there and we'll do something like that. So we still get were still identifying them, accessing them according Teoh, which object within this array. So this is a ray object, and this is starting to look a lot more like this Jason Data where we've got a bunch of objects here that are contained within their way, and then we can loop through them and get access to them as needed. So let's set up a loop here, and we're gonna do what we have looked at before, where we started with loop with zero because their first item in the array is gonna be zero . And we're gonna look at the my O. J. And this one. Now we need to identify that we're looking at the students object. So we're gonna loop through all of those and we can get a length by using length within JavaScript and close that quote there. Let's see what happens now so I can add in that plus there so we can increment it. And I also need to add in a line break and we'll see what happens now. So now we're able to retrieve back all of that information that's contained within this JavaScript object. And as you can see here, we can continue to build out and add additional people into this and do quite a bit of a manipulation here with this object. And then, of course, we have access to it, and we can dynamically loop through all of the objects, return them back and utilise them within our JavaScript code. And this is just done through a simple loop here, looping through dot javascript object. So the next lesson we're gonna take this another step further and show you how we can utilize this and call to it. If we've got a geese on file, we can build out of Jason file from there, and we can utilize it within our JavaScript code. So we don't necessarily need tohave this information sitting within our JavaScript. We can link to it from an external source bulletin via Ajax and make use of it in the same format as we have here within this JavaScript object. So I'm gonna go going over all of that in the upcoming lessons. 29. 42 Create JSON: So this lesson we're gonna look at how we can actually utilize this as a Jason object. So we had looked at before how we consent this JavaScript object and we have access to it within our code. So I'm gonna bring this back out, and I'm going to use a website here called My Jason. And I got a place that javascript object that we had created that array with the multiple items into here and I'm gonna save it and we see that immediately. It says it doesn't appear to be a valid Jason Ah file. And that's because we're still missing some of that formatting that we need. Teoh really include here within that Jason file. So we're not really identifying it as students. So students would be that entire object so we can get rid of that and we can save that. And now we see that we do actually have a successful jace on file. So we're gonna be identifying it by a variable with him javascript and then pulling that through. So now we see that the format is identical. It starts off with that square and then the curly bracket in the same thing the square and then the curly bracket. We've got all of our object information and here and then we've got her 2nd 1 and our 3rd 1 So we've got essentially an array here where we can loop through all the items here and there are gonna be objects, and then we're gonna access them. So we're going to show you how to do that with Ajax. So going back, Teoh our code over here, I'm gonna just save this. And I got a forked out over into a brand new one because this is where we're going to start calling in that JavaScript that Ajax here and start calling through the object within this format and utilizing it. I want access that file here on my Jason. So I'm gonna show you how to set up Ajax calls in the upcoming lesson 30. 43 JavaScript make AJAX call: So in this lesson, I'm gonna show you how we can make a JavaScript call and access some online information or some information. Three Ajax pull that information back in and utilize it within our JavaScript. So this is that source file we've created in the last lesson, my Jason dot com Jason formatted data. And the first thing that I want to do is just set up that Ajax call. So we need t create a container for the XML. H t t p. Request object. Make sure I spell that right there. It's a request. And now, if I actually consul to log this, So we're going to see that we've got a bunch of information that's being contained now within this object. So whenever I click it, we see you've got this object. We've got XML http request and we've got a whole bunch of information here and one of the first ones that we want to look at is this on ready state change object. So we want to take a look at that, and we want to actually do something with it whenever that object fires off. So all of this is contained within a So now I can do on ready state change all lower case and we can run a function whenever that is triggered. So whenever any kind of change takes place, we can run through that. And I got a consul, Log out a at this point as well, and tidy this up a little bit. Eso another thing that we need to do is to be able to actually open and set the object that we want to connect with. Not sure why that keeps disappearing, but we don't really need this one anymore. So I'm just going to get rid of that and I'm gonna access that a object again, and I'm gonna do open. And we have a choice between get and post sort for that I'm gonna use get and the surface to true open up as true and find that you are l that we had set up so access it there. And lastly we need Teoh do send and this initiates that connection and sends over our request over to this URL. And whenever we do connect to that, you Earl, the on ready state will change. It will fire off this consul message so see what happens. So I should clear this out and get that consul back up there. Maybe you need to refresh their I'm not sure what happened. I'm not sure what's happening with the console here, but look, there it is. Okay, so we are getting back that that object again. And now, whenever we take a look at it, we see that we've got it opened. A ready state is four, and we're ready to continue building out our our Ajax request. Just close that hoot so we can see this a little bit better. So next thing that I want to do is I want to look for this ready state, because ready State for is essentially that We've actually made our connection. So if I do this ready state and if it equals four, then I'm I want something to happen here. And maybe what I want to do is I want toe just return back all of this object information. So this is where I'm going to set that variable, my object. And I'm gonna equal that too. What's being returned back from the ready state and we see that we've got some information here. We've got some response text. So essentially, this is just loading in the data from this you Earl as response text. So this is exactly what we want to get access to and just gonna dio this again and access that response text. And maybe I'll just change this console log now to my object like that. So let's see what happens whenever I update it. But we're getting, um, undefined there. So that's because I put the period there, so I don't actually need that. And now we see that we're actually pulling in this information into the my object, and we see that all of this is actually the same information as we have looked at earlier. So now one of the final steps is Aiken, simply copy out this loop here that I had before, and let's see what happens. So I don't actually, I'm gonna not needs students, because I don't think we've No, we haven't identified them as students because this is all just gonna be contained within the my object. So we're actually we don't need that student part because we don't have anything to find us the students. So let's see what happens now. So now we're still getting back this undefined. And maybe we need to take a closer look at how we can output this content properly and see what it's gonna look like when we're looping through. It s Oh, we're gonna look at how to do that in the upcoming lesson. But essentially, we've got that object set up. We're getting access to the first name over here. We're seeing it said, first name. So we're getting really close to being able to output that information, and I'm gonna show you how to do this in the upcoming lesson. 31. 44 JavaScript AJAX parse as JavaScript Objects: So the last lesson we looked at, how we can pull this through and utilize it as an object, one of the things that we were actually missing is that we need to parse this through as a usable object. So right now, whenever we pull this through, So even though we're looping through it just so you can take a closer look at this just what this is gonna look like So all we're getting back is we're getting back all of this information, but we're not actually able to utilize that quite yet. So we need to do ah, built in method within JavaScript. And this is the Jason Parse and this is where really all that magic happens. So I want to kind of talk about this in more detail within this lesson. Eso That's what we had left off that last lesson caught on a cliffhanger there where we got that response text back that we weren't able toe loop through it. So let's see what this looks like now. So I'm gonna just clear it and click update and there we go. We can actually see that we're getting this information now. In a more structured format. And now we actually have the ability toe loop through that my object and actually out put it there. So let's take a look at this and see how this is gonna turn out so we can get rid of the students part because we don't need this anymore. And take a quick look at that. And now we see were able to pull that information from an external file, I would put it into our HTML abusing Jason and Ajax together. And as you can see here, this is just that same information that we've got displayed here. And this is probably a better way that we can utilize external data, and especially when we've got this type of external data. If it's being output from a server, we can pull in information from a database, output it and weaken dynamically make use of it within our JavaScript code. And all of this is just simply done through a jocks. And Jason is the format of how we're pulling through that data in utilizing it. And you can see here that output into the consul here. We're getting all of this information as a JavaScript object as we were initially when we started this section. This is definitely a precursor to being able to build out more complex solutions. When you've got a lot of data here and you want to parse through it and utilize it within your JavaScript, this is definitely the way to do it. And this is the great starting point to start utilizing all of that data in utilizing all of these various Web AP eyes with Jason ape output and interaction between your front end and back end code. 32. 46 JavaScript For in Loop: the previous lesson we had looked at how we can loop through some Jason Data, pull back all this information and utilize it within our JavaScript. So we're gonna actually improve on the code that we had looked at last time and we had used just a typical four loop. We had the I incremental in here. So there is actually a better way to do this which will clean up this code quite a bit. So all we need to do is define a variable. So we're going to just use I again. We don't need this length. We don't need this incremental. So we're going to do I and the key here is in. So this is what's called a for in loop. So we're gonna look at for I an object, and the rest of this is gonna work relatively the same way. So we just try that eight and check it and see if it works. So indeed it is. It's still working within that same format where were looping through all this data and were able to output it within our within our JavaScript here, I would put it within her HTML. So this is arm or ah, cleaner way to loop through data, especially if you've got a large array of objects. And you want to return back all those items and utilize them in your coat. So upcoming. We're also gonna look at how we can work with this Jason data. So we're gonna be using a website, Jason placeholder dot type code dot com. And that's going to give us the ability to actually send get posts. I returned back some information and so on and utilize that within our JavaScript. The first thing that I want to do is actually want to open up code pen. And I got a copy down some of the code that I have here, and we're gonna update the euro that we're sending our request to to be Jason Placeholder instead of that initial one that we have here in code pen. So the system update of where the source says and we're just gonna loop through all those and of course, the objects they've got different ideas here. So we've got i d and title eso. There's only changes that we've made here and now let's just see how this outputs. So when I refresh it, and I place the update. We can see that we're getting all of this information returned back, and we're looping through all this response Text eso were able to identify data here, and it's gonna open up that you rlc You can see the data that's contained in there. So we're returning back. Anything that's got user I d one. So just show you what that looks like within the browser. And we can see we get all of this information, we're able to pull it back in and utilize it within our code. So the next lesson we're gonna look at some or Ajax calls and some more dynamic stuff you can do with J Ajax that's coming up in the next lesson. 33. 48 POST to Server AJAX: whatever is true gets executed here. Whatever is false gets executed there with Ajax. We can also send over values and the way to do that. So I've just updated and have created a quick PHP file my Ajax request to the PHP file, and it's actually it's not going to really contain a lot. It's just gonna send back the value that's being sent over to it. So I don't need to do the loop through the all the different Jason objects. And I can even actually get rid of this one here, too, as well. And take this put in or html bring it up here and simply write out that response text. So what we're doing right now gonna receive that? So what's gonna happen in this format is whatever data I'm sending over to Ajax dot PHP, it's simply going to take that and it's going to write that out, sent this and it's going to return that. So we're going to send a parameter of name and in order send parameters over. We set this up within this type of format where we enter in that we're sending over the value here and here. We just need to give it some kind of value declaration and save that. So what's gonna happen now? We're gonna send via get to Ajax, Stop PHP a variable called name with a value of Lawrence. Let's check this out and see how this works out. So when I press refresh, we see that my object, Of course, it's not defined. So we got to go back here, and we've got an update that because we're not actually defining that object anymore, So go back. Save that. So that was just a quick error there, and we see that we've got an air here. So, uh, we're not actually passing that name value over. We do need to make a few updates here, and I'm actually going to send this as a post because that's going to make a lot more sense that we're sending over data as Post. And when we do update to post, we have to update the request header. And what this is going to do is this is gonna allow the receiving browser to be able to interpret this and understand that this is gonna be a post adding and posts you got to make sure that you add in this all of this formatting here, so it's content type toe let you toe Let the receiving receiving file Understand that this is application. It's a www form and its u R L and coded. And I just need to update this toe, actually receive a posting step. Guess so. This is just PHP s. So we're going to check this out now and see if this works is refresh it and send it. And now we see we've been able to do that. Full loop here. So we sent the value of name Lawrence. We've sent it over into the server servers, picked it up and received it. This is how you can using Ajax, send data into the server and then get her customized, dynamic response back from the server and utilize that within the coat So you can do this as an output of Jason A swell. So if you've got ah, a lot of information, some data information, you can send over a request. If you're looking for a particular I d or something like that, then you can send that request over and retrieve that back from the server output as Jason . And then, of course, you can loop through it and utilize it within your javascript as well 34. 49 Send data via AJAX to server: this lesson. We're gonna pull together. What? We've been looking out of the previous lessons. So I have updated my PHP file very basic. All it's doing is picking up the posted information. So a, B and C and it's updating those company values, and it's putting it just as we had earlier within this jace on file. So just out putting it as a Jason file and we're just using it as a demonstration for how we can do Ajax and get Jason returned. So what we want to do is we want to send over. So we're sending over food Bar one, and we're gonna have that within our return values of our Ajax query. So let's build that out. What we had done before as well, so far, my object, and I'm gonna equal it to Jason, and I'm gonna parse through that response. So this response text, because that's where I'm getting all of that responded Information from the PHP. Whatever is being output there, and I'll console log that so that we can take a closer look at that as we're going through this code. So gonna go back out, refresh it, and when I want to see we pressed. Update. We're getting all of this information back and we see now that company has been updated to food too far. Bar and toe one. So now all we have to do is loop through those objects and output them within our HTML. So I'm gonna use that for loop, and I will my object length and I'm gonna increment I over here and here. I'm gonna update that output, inner html, and I'm gonna add it to that or so Captain eating together objects I and I believe it's first name. Cap me that together, Have some space there. And my object I, and put that company and countin ated do a quick line break. It's more readable that returned information, and that should do it. So let's check the suit and see how this works out. So going over to here, we're gonna click update and now we can actually see that we're able to send information from our JavaScript via Ajax over to the server. Had the server process that do something with that. Of course, within this demonstrations, not really doing a whole lot, and it's returning that information back and then were retrieving it within JavaScript and out, putting it onto our HTML. And essentially, there's a lot of things that you can do as you build this out and utilize Jason Data and Ajax as a way to pull in that data and use it within your JavaScript. There's a lot of different things that you can do with this, and I can include the source code in upcoming lesson. So I advise you, check it out and see what you can do with Jason, Ajax and JavaScript.